diff --git a/.vscode/settings.json b/.vscode/settings.json index f1fbae8af..5833e1e14 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,3 +7,4 @@ }, "cSpell.words": ["GeneXus", "Globant", "paginators", "Paginators", "VITE"] } + diff --git a/package.json b/package.json index e9ca6309e..43984a337 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,9 @@ "build.un": "cd packages/unanimo && bun run build", "build.un.watch": "cd packages/unanimo && bun run build", "start": "bun build.common && cd packages/showcase && bun start", - "start.watch": "bun build.common && cd packages/showcase && bun start.watch" + "start.watch": "bun build.common && cd packages/showcase && bun start.watch", + "clear": "bun clear.showcase", + "clear.showcase": "bun ./scripts/clear-showcase.js" }, "workspaces": [ "packages/*" diff --git a/packages/common/mercury-tokens.ts b/packages/common/mercury-tokens.ts new file mode 100644 index 000000000..65a6e60b2 --- /dev/null +++ b/packages/common/mercury-tokens.ts @@ -0,0 +1,3018 @@ +// mercuryTokens is generated for packages/showcase tokens page. +const mercuryTokens = { + primitive: { + color: { + mercury: { + primary: [ + { + name: "--color-primary-100", + value: "#f4f8ff", + }, + { + name: "--color-primary-200", + value: "#ebf0ff", + }, + { + name: "--color-primary-300", + value: "#cee0ff", + }, + { + name: "--color-primary-400", + value: "#b0cfff", + }, + { + name: "--color-primary-500", + value: "#8cbcff", + }, + { + name: "--color-primary-550", + value: "#75aef0", + }, + { + name: "--color-primary-580", + value: "#729fd5", + }, + { + name: "--color-primary-600", + value: "#5ba7ff", + }, + { + name: "--color-primary-700", + value: "#5498e8", + }, + { + name: "--color-primary-800", + value: "#437dc0", + }, + { + name: "--color-primary-900", + value: "#335884", + }, + { + name: "--color-primary-1000", + value: "#294b72", + }, + { + name: "--color-primary-1100", + value: "#005ac1", + }, + { + name: "--color-primary-1300", + value: "#101e2d", + }, + ], + neutral: [ + { + name: "--color-neutral-100", + value: "#fafbfd", + }, + { + name: "--color-neutral-200", + value: "#f0f4fa", + }, + { + name: "--color-neutral-300", + value: "#e1ecf9", + }, + { + name: "--color-neutral-400", + value: "#d2ddeb", + }, + { + name: "--color-neutral-500", + value: "#c0ccd9", + }, + { + name: "--color-neutral-600", + value: "#aeb9c6", + }, + { + name: "--color-neutral-700", + value: "#9da9b6", + }, + { + name: "--color-neutral-800", + value: "#828b96", + }, + { + name: "--color-neutral-900", + value: "#56677a", + }, + { + name: "--color-neutral-1000", + value: "#4a5870", + }, + { + name: "--color-neutral-1050", + value: "#405975", + }, + { + name: "--color-neutral-1100", + value: "#485665", + }, + { + name: "--color-neutral-1200", + value: "#394552", + }, + { + name: "--color-neutral-1300", + value: "#333d47", + }, + { + name: "--color-neutral-1400", + value: "#2d3a48", + }, + { + name: "--color-neutral-1450", + value: "#243750", + }, + { + name: "--color-neutral-1500", + value: "#242d3c", + }, + { + name: "--color-neutral-1550", + value: "#17273b", + }, + { + name: "--color-neutral-1600", + value: "#181f2a", + }, + { + name: "--color-neutral-1700", + value: "#11151c", + }, + { + name: "--color-neutral-1800", + value: "#000000", + }, + { + name: "--color-neutral-000", + value: "#ffffff", + }, + ], + lilac: [ + { + name: "--color-lilac-50", + value: "#f9fafa", + }, + { + name: "--color-lilac-100", + value: "#f8f9fc", + }, + { + name: "--color-lilac-200", + value: "#edf0f8", + }, + { + name: "--color-lilac-300", + value: "#dee1ed", + }, + { + name: "--color-lilac-400", + value: "#d5daeb", + }, + { + name: "--color-lilac-500", + value: "#c8d0e9", + }, + { + name: "--color-lilac-600", + value: "#c2cbe6", + }, + { + name: "--color-lilac-700", + value: "#bcc5e4", + }, + { + name: "--color-lilac-800", + value: "#b7c2e2", + }, + { + name: "--color-lilac-900", + value: "#9babd9", + }, + ], + azure: [ + { + name: "--color-azure-50", + value: "#eaf3fe", + }, + { + name: "--color-azure-100", + value: "#e1eefe", + }, + { + name: "--color-azure-200", + value: "#c6dffd", + }, + { + name: "--color-azure-300", + value: "#9cc8fc", + }, + { + name: "--color-azure-400", + value: "#3791fb", + }, + { + name: "--color-azure-500", + value: "#0a7cff", + }, + { + name: "--color-azure-600", + value: "#0072f8", + }, + { + name: "--color-azure-700", + value: "#0049cd", + }, + { + name: "--color-azure-800", + value: "#0034b1", + }, + { + name: "--color-azure-900", + value: "#002da8", + }, + ], + chateau: [ + { + name: "--color-chateau-50", + value: "#f6fef9", + }, + { + name: "--color-chateau-100", + value: "#edfdf3", + }, + { + name: "--color-chateau-200", + value: "#f5fded", + }, + { + name: "--color-chateau-300", + value: "#34e474", + }, + { + name: "--color-chateau-400", + value: "#1aba56", + }, + { + name: "--color-chateau-500", + value: "#089141", + }, + { + name: "--color-chateau-600", + value: "#077e42", + }, + { + name: "--color-chateau-700", + value: "#066f3b", + }, + { + name: "--color-chateau-800", + value: "#05572e", + }, + { + name: "--color-chateau-900", + value: "#044926", + }, + ], + scarlet: [ + { + name: "--color-scarlet-50", + value: "#fffafa", + }, + { + name: "--color-scarlet-100", + value: "#fff5f5", + }, + { + name: "--color-scarlet-200", + value: "#ffebeb", + }, + { + name: "--color-scarlet-300", + value: "#fc7d7d", + }, + { + name: "--color-scarlet-400", + value: "#f92525", + }, + { + name: "--color-scarlet-500", + value: "#c50707", + }, + { + name: "--color-scarlet-600", + value: "#a61212", + }, + { + name: "--color-scarlet-700", + value: "#891a1a", + }, + { + name: "--color-scarlet-800", + value: "#6d2121", + }, + { + name: "--color-scarlet-900", + value: "#4b2020", + }, + ], + ember: [ + { + name: "--color-ember-50", + value: "#fffdfa", + }, + { + name: "--color-ember-100", + value: "#fff9f0", + }, + { + name: "--color-ember-200", + value: "#fef5e1", + }, + { + name: "--color-ember-300", + value: "#fde3af", + }, + { + name: "--color-ember-400", + value: "#eea507", + }, + { + name: "--color-ember-500", + value: "#b17e07", + }, + { + name: "--color-ember-600", + value: "#9d7006", + }, + { + name: "--color-ember-700", + value: "#936906", + }, + { + name: "--color-ember-800", + value: "#765405", + }, + { + name: "--color-ember-900", + value: "#4e3803", + }, + ], + red: [ + { + name: "--color-red-100", + value: "#fcf4f4", + }, + { + name: "--color-red-200", + value: "#f8dfe0", + }, + { + name: "--color-red-300", + value: "#f4cdcf", + }, + { + name: "--color-red-400", + value: "#eda4a7", + }, + { + name: "--color-red-500", + value: "#e98b8f", + }, + { + name: "--color-red-600", + value: "#e35861", + }, + { + name: "--color-red-700", + value: "#d54b54", + }, + { + name: "--color-red-800", + value: "#a63a41", + }, + { + name: "--color-red-900", + value: "#883035", + }, + { + name: "--color-red-1000", + value: "#6d272b", + }, + { + name: "--color-red-1300", + value: "#2d1012", + }, + ], + green: [ + { + name: "--color-green-100", + value: "#eef5f4", + }, + { + name: "--color-green-200", + value: "#ddebe9", + }, + { + name: "--color-green-300", + value: "#cae0dd", + }, + { + name: "--color-green-400", + value: "#b4d5d0", + }, + { + name: "--color-green-500", + value: "#9cc9c2", + }, + { + name: "--color-green-600", + value: "#3fa89b", + }, + { + name: "--color-green-700", + value: "#389287", + }, + { + name: "--color-green-800", + value: "#318278", + }, + { + name: "--color-green-900", + value: "#286a62", + }, + { + name: "--color-green-1000", + value: "#1c4b45", + }, + { + name: "--color-green-1300", + value: "#112d29", + }, + ], + yellow: [ + { + name: "--color-yellow-100", + value: "#fffbf6", + }, + { + name: "--color-yellow-200", + value: "#fef1e3", + }, + { + name: "--color-yellow-300", + value: "#fde8cf", + }, + { + name: "--color-yellow-400", + value: "#fcdeb8", + }, + { + name: "--color-yellow-500", + value: "#fac980", + }, + { + name: "--color-yellow-600", + value: "#f9bd56", + }, + { + name: "--color-yellow-700", + value: "#ffc96b", + }, + { + name: "--color-yellow-800", + value: "#ecaf44", + }, + { + name: "--color-yellow-900", + value: "#b97d13", + }, + { + name: "--color-yellow-1000", + value: "#6f4b0b", + }, + { + name: "--color-yellow-1300", + value: "#382606", + }, + ], + gradient: [ + { + name: "--color-gradient-sky", + value: "#00ccff", + }, + { + name: "--color-gradient-purple", + value: "#a300ff", + }, + { + name: "--color-gradient-magenta", + value: "#ff00ff", + }, + { + name: "--color-gradient-berry", + value: "#0095ff", + }, + { + name: "--color-gradient-cyan", + value: "#00f5ff", + }, + { + name: "--color-gradient-yellow", + value: "#ffea00", + }, + ], + opacity: [ + { + name: "--color-opacity-70", + value: "rgba(17, 21, 28, 70)", + }, + ], + }, + globant: { + primary: [ + { + name: "--color-primary-100", + value: "#f9fbf2", + }, + { + name: "--color-primary-200", + value: "#f5f8e8", + }, + { + name: "--color-primary-300", + value: "#eaf1ce", + }, + { + name: "--color-primary-400", + value: "#deeab0", + }, + { + name: "--color-primary-500", + value: "#d2e38c", + }, + { + name: "--color-primary-550", + value: "#cfe184", + }, + { + name: "--color-primary-580", + value: "#c6d572", + }, + { + name: "--color-primary-600", + value: "#bfd732", + }, + { + name: "--color-primary-700", + value: "#b4cc28", + }, + { + name: "--color-primary-800", + value: "#a3b72b", + }, + { + name: "--color-primary-900", + value: "#8d9f25", + }, + { + name: "--color-primary-1000", + value: "#515c15", + }, + { + name: "--color-primary-1100", + value: "#2e340a", + }, + { + name: "--color-primary-1300", + value: "#262b08", + }, + ], + neutral: [ + { + name: "--color-neutral-100", + value: "#ffffff", + }, + { + name: "--color-neutral-200", + value: "#fafafa", + }, + { + name: "--color-neutral-300", + value: "#f5f5f5", + }, + { + name: "--color-neutral-400", + value: "#ededed", + }, + { + name: "--color-neutral-500", + value: "#e5e5e5", + }, + { + name: "--color-neutral-600", + value: "#d6d6d6", + }, + { + name: "--color-neutral-700", + value: "#cccccc", + }, + { + name: "--color-neutral-800", + value: "#bdbdbd", + }, + { + name: "--color-neutral-900", + value: "#a9a9a9", + }, + { + name: "--color-neutral-1000", + value: "#8c8c8c", + }, + { + name: "--color-neutral-1050", + value: "#6b6b6b", + }, + { + name: "--color-neutral-1100", + value: "#686868", + }, + { + name: "--color-neutral-1200", + value: "#575757", + }, + { + name: "--color-neutral-1300", + value: "#464646", + }, + { + name: "--color-neutral-1400", + value: "#3b3b3b", + }, + { + name: "--color-neutral-1450", + value: "#373737", + }, + { + name: "--color-neutral-1500", + value: "#303030", + }, + { + name: "--color-neutral-1550", + value: "#262626", + }, + { + name: "--color-neutral-1600", + value: "#212121", + }, + { + name: "--color-neutral-1700", + value: "#171717", + }, + { + name: "--color-neutral-1800", + value: "#000000", + }, + ], + red: [ + { + name: "--color-red-100", + value: "#fcf4f4", + }, + { + name: "--color-red-200", + value: "#f8dfe0", + }, + { + name: "--color-red-300", + value: "#f4cdcf", + }, + { + name: "--color-red-400", + value: "#eda4a7", + }, + { + name: "--color-red-500", + value: "#e98b8f", + }, + { + name: "--color-red-600", + value: "#e35861", + }, + { + name: "--color-red-700", + value: "#d54b54", + }, + { + name: "--color-red-800", + value: "#a63a41", + }, + { + name: "--color-red-900", + value: "#883035", + }, + { + name: "--color-red-1000", + value: "#6d272b", + }, + { + name: "--color-red-1300", + value: "#2d1012", + }, + ], + green: [ + { + name: "--color-green-100", + value: "#eef5f4", + }, + { + name: "--color-green-200", + value: "#ddebe9", + }, + { + name: "--color-green-300", + value: "#cae0dd", + }, + { + name: "--color-green-400", + value: "#b4d5d0", + }, + { + name: "--color-green-500", + value: "#9cc9c2", + }, + { + name: "--color-green-600", + value: "#3fa89b", + }, + { + name: "--color-green-700", + value: "#389287", + }, + { + name: "--color-green-800", + value: "#318278", + }, + { + name: "--color-green-900", + value: "#286a62", + }, + { + name: "--color-green-1000", + value: "#1c4b45", + }, + { + name: "--color-green-1300", + value: "#112d29", + }, + ], + yellow: [ + { + name: "--color-yellow-100", + value: "#fffbf6", + }, + { + name: "--color-yellow-200", + value: "#fef1e3", + }, + { + name: "--color-yellow-300", + value: "#fde8cf", + }, + { + name: "--color-yellow-400", + value: "#fcdeb8", + }, + { + name: "--color-yellow-500", + value: "#fac980", + }, + { + name: "--color-yellow-600", + value: "#f9bd56", + }, + { + name: "--color-yellow-700", + value: "#ffc96b", + }, + { + name: "--color-yellow-800", + value: "#ecaf44", + }, + { + name: "--color-yellow-900", + value: "#b97d13", + }, + { + name: "--color-yellow-1000", + value: "#6f4b0b", + }, + { + name: "--color-yellow-1300", + value: "#382606", + }, + ], + gradient: [ + { + name: "--color-gradient-gaserage", + value: "#c0fb73", + }, + { + name: "--color-gradient-mint", + value: "#38efa0", + }, + { + name: "--color-gradient-greenwood", + value: "#d9e021", + }, + { + name: "--color-gradient-lemon", + value: "#8cc63f", + }, + { + name: "--color-gradient-aqua", + value: "#15c9c3", + }, + { + name: "--color-gradient-spearmint", + value: "#79f6c0", + }, + ], + opacity: [ + { + name: "--color-opacity-70", + value: "rgba(23, 23, 23, 70)", + }, + ], + }, + }, + "font-style": { + regular: { + name: "--font-style-regular", + value: "Regular", + }, + "semi-bold": { + name: "--font-style-semi-bold", + value: "Semi Bold", + }, + bold: { + name: "--font-style-bold", + value: "Bold", + }, + italic: { + name: "--font-style-italic", + value: "Italic", + }, + }, + "font-family": { + header: { + name: "--font-family-header", + value: "Inter", + }, + body: { + name: "--font-family-body", + value: "Inter", + }, + code: { + name: "--font-family-code", + value: "DM Mono", + }, + }, + size: { + "0": { + name: "--size-0", + value: "0px", + }, + "1": { + name: "--size-1", + value: "1px", + }, + "2": { + name: "--size-2", + value: "2px", + }, + "4": { + name: "--size-4", + value: "4px", + }, + "6": { + name: "--size-6", + value: "6px", + }, + "8": { + name: "--size-8", + value: "8px", + }, + "10": { + name: "--size-10", + value: "10px", + }, + "11": { + name: "--size-11", + value: "11px", + }, + "12": { + name: "--size-12", + value: "12px", + }, + "14": { + name: "--size-14", + value: "14px", + }, + "16": { + name: "--size-16", + value: "16px", + }, + "18": { + name: "--size-18", + value: "18px", + }, + "20": { + name: "--size-20", + value: "20px", + }, + "24": { + name: "--size-24", + value: "24px", + }, + "28": { + name: "--size-28", + value: "28px", + }, + "32": { + name: "--size-32", + value: "32px", + }, + "40": { + name: "--size-40", + value: "40px", + }, + "48": { + name: "--size-48", + value: "48px", + }, + "56": { + name: "--size-56", + value: "56px", + }, + "64": { + name: "--size-64", + value: "64px", + }, + "72": { + name: "--size-72", + value: "72px", + }, + "-2": { + name: "--size--2", + value: "-2px", + }, + "-1": { + name: "--size--1", + value: "-1px", + }, + }, + }, + semantic: { + color: { + mercury: { + light: { + accent: [ + { + name: "--color-accent-primary-lighter", + value: "--color-azure-50", + }, + { + name: "--color-accent-primary-light", + value: "--color-azure-100", + }, + { + name: "--color-accent-primary-default", + value: "--color-azure-500", + }, + { + name: "--color-accent-primary-hover", + value: "--color-azure-400", + }, + { + name: "--color-accent-primary-pressed", + value: "--color-azure-700", + }, + { + name: "--color-accent-primary-contrast", + value: "--color-primary-200", + }, + { + name: "--color-accent-neutral-default", + value: "--color-neutral-700", + }, + { + name: "--color-accent-neutral-hover", + value: "--color-neutral-1550", + }, + { + name: "--color-accent-neutral-pressed", + value: "--color-neutral-200", + }, + { + name: "--color-accent-neutral-disabled", + value: "--color-neutral-400", + }, + { + name: "--color-accent-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-accent-neutral-neutral", + value: "--color-neutral-900", + }, + { + name: "--color-accent-neutral-black", + value: "--color-primary-1300", + }, + { + name: "--color-accent-neutral-contrast", + value: "--color-neutral-1550", + }, + { + name: "--color-accent-error-lighter", + value: "--color-scarlet-200", + }, + { + name: "--color-accent-error-light", + value: "--color-scarlet-300", + }, + { + name: "--color-accent-error-default", + value: "--color-scarlet-500", + }, + { + name: "--color-accent-error-hover", + value: "--color-scarlet-800", + }, + { + name: "--color-accent-error-pressed", + value: "--color-scarlet-900", + }, + { + name: "--color-accent-error-contrast", + value: "--color-scarlet-200", + }, + { + name: "--color-accent-succcess-lighter", + value: "--color-chateau-200", + }, + { + name: "--color-accent-succcess-light", + value: "--color-chateau-400", + }, + { + name: "--color-accent-succcess-default", + value: "--color-chateau-500", + }, + { + name: "--color-accent-succcess-hover", + value: "--color-chateau-800", + }, + { + name: "--color-accent-succcess-pressed", + value: "--color-chateau-900", + }, + { + name: "--color-accent-succcess-contrast", + value: "--color-chateau-200", + }, + { + name: "--color-accent-warning-lighter", + value: "--color-ember-200", + }, + { + name: "--color-accent-warning-light", + value: "--color-ember-300", + }, + { + name: "--color-accent-warning-default", + value: "--color-ember-400", + }, + { + name: "--color-accent-warning-hover", + value: "--color-ember-500", + }, + { + name: "--color-accent-warning-pressed", + value: "--color-ember-800", + }, + { + name: "--color-accent-warning-contrast", + value: "--color-ember-200", + }, + { + name: "--color-accent-backdrop-default", + value: "--rgba(17, 21, 28, 80)", + }, + { + name: "--color-accent-item-hover", + value: "--color-azure-100", + }, + { + name: "--color-accent-item-selected", + value: "--color-azure-200", + }, + { + name: "--color-accent-surface-surface", + value: "--color-lilac-50", + }, + { + name: "--color-accent-surface-elevation-01", + value: "--color-lilac-200", + }, + { + name: "--color-accent-surface-elevation-02", + value: "--color-lilac-300", + }, + { + name: "--color-accent-surface-elevation-03", + value: "--color-lilac-500", + }, + { + name: "--color-accent-surface-elevation-answer", + value: "--color-lilac-600", + }, + { + name: "--color-accent-semantic-info", + value: "--color-azure-400", + }, + { + name: "--color-accent-semantic-success", + value: "--color-chateau-400", + }, + { + name: "--color-accent-semantic-warning", + value: "--color-ember-400", + }, + { + name: "--color-accent-semantic-error", + value: "--color-scarlet-400", + }, + { + name: "--color-accent-semantic-neutral", + value: "--color-neutral-1200", + }, + { + name: "--color-accent-branding-surface", + value: "--color-neutral-1800", + }, + { + name: "--color-accent-shadow-shadow", + value: "--rgba(7, 10, 18, 20)", + }, + ], + border: [ + { + name: "--color-border-primary-lighter", + value: "--color-azure-50", + }, + { + name: "--color-border-primary-light", + value: "--color-azure-100", + }, + { + name: "--color-border-primary-default", + value: "--color-azure-500", + }, + { + name: "--color-border-primary-hover", + value: "--color-azure-300", + }, + { + name: "--color-border-primary-focused", + value: "--color-neutral-1500", + }, + { + name: "--color-border-primary-pressed", + value: "--color-azure-700", + }, + { + name: "--color-border-primary-dark", + value: "--color-primary-1300", + }, + { + name: "--color-border-neutral-default", + value: "--color-neutral-700", + }, + { + name: "--color-border-neutral-hover", + value: "--color-neutral-1550", + }, + { + name: "--color-border-neutral-pressed", + value: "--color-neutral-1500", + }, + { + name: "--color-border-neutral-disabled", + value: "--color-neutral-700", + }, + { + name: "--color-border-neutral-on-border", + value: "--color-neutral-100", + }, + { + name: "--color-border-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-border-neutral-neutral", + value: "--color-neutral-900", + }, + { + name: "--color-border-neutral-black", + value: "--color-primary-1300", + }, + { + name: "--color-border-error-lighter", + value: "--color-scarlet-200", + }, + { + name: "--color-border-error-light", + value: "--color-scarlet-300", + }, + { + name: "--color-border-error-default", + value: "--color-scarlet-500", + }, + { + name: "--color-border-error-hover", + value: "--color-scarlet-800", + }, + { + name: "--color-border-error-pressed", + value: "--color-scarlet-900", + }, + { + name: "--color-border-error-dark", + value: "--color-scarlet-200", + }, + { + name: "--color-border-success-lighter", + value: "--color-chateau-200", + }, + { + name: "--color-border-success-light", + value: "--color-chateau-400", + }, + { + name: "--color-border-success-default", + value: "--color-chateau-500", + }, + { + name: "--color-border-success-hover", + value: "--color-chateau-800", + }, + { + name: "--color-border-success-pressed", + value: "--color-chateau-900", + }, + { + name: "--color-border-success-dark", + value: "--color-chateau-200", + }, + { + name: "--color-border-warning-lighter", + value: "--color-ember-200", + }, + { + name: "--color-border-warning-light", + value: "--color-ember-300", + }, + { + name: "--color-border-warning-default", + value: "--color-ember-500", + }, + { + name: "--color-border-warning-hover", + value: "--color-ember-800", + }, + { + name: "--color-border-warning-pressed", + value: "--color-ember-900", + }, + { + name: "--color-border-warning-dark", + value: "--color-ember-200", + }, + { + name: "--color-border-item-hover", + value: "--color-primary-500", + }, + { + name: "--color-border-item-selected", + value: "--color-primary-700", + }, + { + name: "--color-border-surface-on-elevation-01", + value: "--color-lilac-400", + }, + { + name: "--color-border-surface-on-elevation-02", + value: "--color-lilac-500", + }, + { + name: "--color-border-surface-on-elevation-03", + value: "--color-lilac-600", + }, + { + name: "--color-border-branding-surface", + value: "--color-neutral-1400", + }, + ], + text: [ + { + name: "--color-text-primary-default", + value: "--color-azure-500", + }, + { + name: "--color-text-primary-hover", + value: "--color-azure-400", + }, + { + name: "--color-text-primary-pressed", + value: "--color-azure-700", + }, + { + name: "--color-text-neutral-default", + value: "--color-neutral-1400", + }, + { + name: "--color-text-neutral-hover", + value: "--color-neutral-1550", + }, + { + name: "--color-text-neutral-pressed", + value: "--color-neutral-1550", + }, + { + name: "--color-text-neutral-disabled", + value: "--color-neutral-800", + }, + { + name: "--color-text-neutral-on-disabled", + value: "--color-neutral-1000", + }, + { + name: "--color-text-neutral-on-text", + value: "--color-neutral-200", + }, + { + name: "--color-text-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-text-neutral-neutral", + value: "--color-neutral-900", + }, + { + name: "--color-text-neutral-dark", + value: "--color-neutral-1700", + }, + { + name: "--color-text-semantic-success", + value: "--color-chateau-500", + }, + { + name: "--color-text-semantic-warning", + value: "--color-ember-500", + }, + { + name: "--color-text-semantic-error", + value: "--color-scarlet-500", + }, + { + name: "--color-text-semantic-neutral", + value: "--color-neutral-1200", + }, + { + name: "--color-text-branding-surface", + value: "--color-neutral-100", + }, + ], + icon: [ + { + name: "--color-icon-primary-default", + value: "--color-azure-500", + }, + { + name: "--color-icon-primary-hover", + value: "--color-azure-400", + }, + { + name: "--color-icon-primary-pressed", + value: "--color-azure-700", + }, + { + name: "--color-icon-neutral-default", + value: "--color-neutral-1400", + }, + { + name: "--color-icon-neutral-hover", + value: "--color-neutral-1550", + }, + { + name: "--color-icon-neutral-pressed", + value: "--color-neutral-1450", + }, + { + name: "--color-icon-neutral-disabled", + value: "--color-neutral-800", + }, + { + name: "--color-icon-neutral-on-disabled", + value: "--color-neutral-1000", + }, + { + name: "--color-icon-neutral-on-icon", + value: "--color-neutral-100", + }, + { + name: "--color-icon-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-icon-neutral-neutral", + value: "--color-neutral-900", + }, + { + name: "--color-icon-neutral-dark", + value: "--color-neutral-1700", + }, + { + name: "--color-icon-semantic-success", + value: "--color-chateau-600", + }, + { + name: "--color-icon-semantic-warning", + value: "--color-ember-600", + }, + { + name: "--color-icon-semantic-error", + value: "--color-scarlet-600", + }, + { + name: "--color-icon-semantic-neutral", + value: "--color-neutral-1200", + }, + ], + }, + dark: { + accent: [ + { + name: "--color-accent-primary-lighter", + value: "--color-primary-300", + }, + { + name: "--color-accent-primary-light", + value: "--color-primary-500", + }, + { + name: "--color-accent-primary-default", + value: "--color-primary-600", + }, + { + name: "--color-accent-primary-hover", + value: "--color-neutral-1450", + }, + { + name: "--color-accent-primary-pressed", + value: "--color-primary-1000", + }, + { + name: "--color-accent-primary-contrast", + value: "--color-primary-1300", + }, + { + name: "--color-accent-neutral-default", + value: "--color-neutral-900", + }, + { + name: "--color-accent-neutral-hover", + value: "--color-neutral-300", + }, + { + name: "--color-accent-neutral-pressed", + value: "--color-neutral-600", + }, + { + name: "--color-accent-neutral-disabled", + value: "--color-neutral-1300", + }, + { + name: "--color-accent-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-accent-neutral-neutral", + value: "--color-neutral-600", + }, + { + name: "--color-accent-neutral-black", + value: "--color-neutral-1700", + }, + { + name: "--color-accent-neutral-contrast", + value: "--color-neutral-1550", + }, + { + name: "--color-accent-error-lighter", + value: "--color-red-300", + }, + { + name: "--color-accent-error-light", + value: "--color-red-500", + }, + { + name: "--color-accent-error-default", + value: "--color-red-600", + }, + { + name: "--color-accent-error-hover", + value: "--color-red-800", + }, + { + name: "--color-accent-error-pressed", + value: "--color-red-1000", + }, + { + name: "--color-accent-error-contrast", + value: "--color-red-1300", + }, + { + name: "--color-accent-succcess-lighter", + value: "--color-green-300", + }, + { + name: "--color-accent-succcess-light", + value: "--color-green-500", + }, + { + name: "--color-accent-succcess-default", + value: "--color-green-600", + }, + { + name: "--color-accent-succcess-hover", + value: "--color-green-800", + }, + { + name: "--color-accent-succcess-pressed", + value: "--color-green-1000", + }, + { + name: "--color-accent-succcess-contrast", + value: "--color-green-1300", + }, + { + name: "--color-accent-warning-lighter", + value: "--color-yellow-300", + }, + { + name: "--color-accent-warning-light", + value: "--color-yellow-400", + }, + { + name: "--color-accent-warning-default", + value: "--color-yellow-600", + }, + { + name: "--color-accent-warning-hover", + value: "--color-yellow-900", + }, + { + name: "--color-accent-warning-pressed", + value: "--color-yellow-1000", + }, + { + name: "--color-accent-warning-contrast", + value: "--color-yellow-1300", + }, + { + name: "--color-accent-backdrop-default", + value: "--color-opacity-70", + }, + { + name: "--color-accent-item-hover", + value: "--color-neutral-1450", + }, + { + name: "--color-accent-item-selected", + value: "--color-neutral-1550", + }, + { + name: "--color-accent-surface-surface", + value: "--color-neutral-1700", + }, + { + name: "--color-accent-surface-elevation-01", + value: "--color-neutral-1600", + }, + { + name: "--color-accent-surface-elevation-02", + value: "--color-neutral-1500", + }, + { + name: "--color-accent-surface-elevation-03", + value: "--color-neutral-1400", + }, + { + name: "--color-accent-surface-elevation-answer", + value: "--color-neutral-1450", + }, + { + name: "--color-accent-semantic-info", + value: "--color-primary-600", + }, + { + name: "--color-accent-semantic-success", + value: "--color-green-600", + }, + { + name: "--color-accent-semantic-warning", + value: "--color-yellow-600", + }, + { + name: "--color-accent-semantic-error", + value: "--color-red-600", + }, + { + name: "--color-accent-semantic-neutral", + value: "--color-neutral-800", + }, + { + name: "--color-accent-branding-surface", + value: "--color-neutral-100", + }, + { + name: "--color-accent-shadow-shadow", + value: "--rgba(0, 0, 0, 20)", + }, + ], + border: [ + { + name: "--color-border-primary-lighter", + value: "--color-primary-300", + }, + { + name: "--color-border-primary-light", + value: "--color-primary-500", + }, + { + name: "--color-border-primary-default", + value: "--color-primary-600", + }, + { + name: "--color-border-primary-hover", + value: "--color-primary-550", + }, + { + name: "--color-border-primary-focused", + value: "--color-neutral-400", + }, + { + name: "--color-border-primary-pressed", + value: "--color-primary-580", + }, + { + name: "--color-border-primary-dark", + value: "--color-primary-1300", + }, + { + name: "--color-border-neutral-default", + value: "--color-neutral-900", + }, + { + name: "--color-border-neutral-hover", + value: "--color-neutral-300", + }, + { + name: "--color-border-neutral-pressed", + value: "--color-neutral-400", + }, + { + name: "--color-border-neutral-disabled", + value: "--color-neutral-800", + }, + { + name: "--color-border-neutral-on-border", + value: "--color-neutral-1700", + }, + { + name: "--color-border-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-border-neutral-neutral", + value: "--color-neutral-600", + }, + { + name: "--color-border-neutral-black", + value: "--color-neutral-1700", + }, + { + name: "--color-border-error-lighter", + value: "--color-red-300", + }, + { + name: "--color-border-error-light", + value: "--color-red-500", + }, + { + name: "--color-border-error-default", + value: "--color-red-600", + }, + { + name: "--color-border-error-hover", + value: "--color-red-700", + }, + { + name: "--color-border-error-pressed", + value: "--color-red-900", + }, + { + name: "--color-border-error-dark", + value: "--color-red-1300", + }, + { + name: "--color-border-success-lighter", + value: "--color-green-300", + }, + { + name: "--color-border-success-light", + value: "--color-green-500", + }, + { + name: "--color-border-success-default", + value: "--color-green-600", + }, + { + name: "--color-border-success-hover", + value: "--color-green-800", + }, + { + name: "--color-border-success-pressed", + value: "--color-green-1000", + }, + { + name: "--color-border-success-dark", + value: "--color-green-1300", + }, + { + name: "--color-border-warning-lighter", + value: "--color-yellow-300", + }, + { + name: "--color-border-warning-light", + value: "--color-yellow-400", + }, + { + name: "--color-border-warning-default", + value: "--color-yellow-500", + }, + { + name: "--color-border-warning-hover", + value: "--color-yellow-800", + }, + { + name: "--color-border-warning-pressed", + value: "--color-yellow-900", + }, + { + name: "--color-border-warning-dark", + value: "--color-yellow-1300", + }, + { + name: "--color-border-item-hover", + value: "--color-neutral-1050", + }, + { + name: "--color-border-item-selected", + value: "--color-primary-580", + }, + { + name: "--color-border-surface-on-elevation-01", + value: "--color-neutral-1300", + }, + { + name: "--color-border-surface-on-elevation-02", + value: "--color-neutral-1100", + }, + { + name: "--color-border-surface-on-elevation-03", + value: "--color-neutral-900", + }, + { + name: "--color-border-branding-surface", + value: "--color-neutral-1700", + }, + ], + text: [ + { + name: "--color-text-primary-default", + value: "--color-primary-600", + }, + { + name: "--color-text-primary-hover", + value: "--color-primary-400", + }, + { + name: "--color-text-primary-pressed", + value: "--color-primary-800", + }, + { + name: "--color-text-neutral-default", + value: "--color-neutral-200", + }, + { + name: "--color-text-neutral-hover", + value: "--color-neutral-300", + }, + { + name: "--color-text-neutral-pressed", + value: "--color-neutral-400", + }, + { + name: "--color-text-neutral-disabled", + value: "--color-neutral-800", + }, + { + name: "--color-text-neutral-on-disabled", + value: "--color-neutral-600", + }, + { + name: "--color-text-neutral-on-text", + value: "--color-neutral-1700", + }, + { + name: "--color-text-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-text-neutral-neutral", + value: "--color-neutral-600", + }, + { + name: "--color-text-neutral-dark", + value: "--color-neutral-1700", + }, + { + name: "--color-text-semantic-success", + value: "--color-green-600", + }, + { + name: "--color-text-semantic-warning", + value: "--color-yellow-600", + }, + { + name: "--color-text-semantic-error", + value: "--color-red-600", + }, + { + name: "--color-text-semantic-neutral", + value: "--color-neutral-800", + }, + { + name: "--color-text-branding-surface", + value: "--color-neutral-1800", + }, + ], + icon: [ + { + name: "--color-icon-primary-default", + value: "--color-primary-600", + }, + { + name: "--color-icon-primary-hover", + value: "--color-primary-400", + }, + { + name: "--color-icon-primary-pressed", + value: "--color-primary-800", + }, + { + name: "--color-icon-neutral-default", + value: "--color-neutral-200", + }, + { + name: "--color-icon-neutral-hover", + value: "--color-neutral-300", + }, + { + name: "--color-icon-neutral-pressed", + value: "--color-neutral-400", + }, + { + name: "--color-icon-neutral-disabled", + value: "--color-neutral-800", + }, + { + name: "--color-icon-neutral-on-disabled", + value: "--color-neutral-600", + }, + { + name: "--color-icon-neutral-on-icon", + value: "--color-neutral-1700", + }, + { + name: "--color-icon-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-icon-neutral-neutral", + value: "--color-neutral-600", + }, + { + name: "--color-icon-neutral-dark", + value: "--color-neutral-1700", + }, + { + name: "--color-icon-semantic-success", + value: "--color-green-600", + }, + { + name: "--color-icon-semantic-warning", + value: "--color-yellow-600", + }, + { + name: "--color-icon-semantic-error", + value: "--color-red-600", + }, + { + name: "--color-icon-semantic-neutral", + value: "--color-neutral-800", + }, + ], + }, + }, + globant: { + light: { + accent: [ + { + name: "--color-accent-primary-lighter", + value: "--color-primary-300", + }, + { + name: "--color-accent-primary-light", + value: "--color-primary-500", + }, + { + name: "--color-accent-primary-default", + value: "--color-primary-800", + }, + { + name: "--color-accent-primary-hover", + value: "--color-primary-300", + }, + { + name: "--color-accent-primary-pressed", + value: "--color-primary-1000", + }, + { + name: "--color-accent-primary-contrast", + value: "--color-primary-300", + }, + { + name: "--color-accent-neutral-default", + value: "--color-neutral-1100", + }, + { + name: "--color-accent-neutral-hover", + value: "--color-neutral-1550", + }, + { + name: "--color-accent-neutral-pressed", + value: "--color-neutral-200", + }, + { + name: "--color-accent-neutral-disabled", + value: "--color-neutral-500", + }, + { + name: "--color-accent-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-accent-neutral-neutral", + value: "--color-neutral-900", + }, + { + name: "--color-accent-neutral-black", + value: "--color-neutral-1300", + }, + { + name: "--color-accent-neutral-contrast", + value: "--color-neutral-1550", + }, + { + name: "--color-accent-error-lighter", + value: "--color-red-300", + }, + { + name: "--color-accent-error-light", + value: "--color-red-500", + }, + { + name: "--color-accent-error-default", + value: "--color-red-600", + }, + { + name: "--color-accent-error-hover", + value: "--color-red-800", + }, + { + name: "--color-accent-error-pressed", + value: "--color-red-900", + }, + { + name: "--color-accent-error-contrast", + value: "--color-red-300", + }, + { + name: "--color-accent-succcess-lighter", + value: "--color-green-300", + }, + { + name: "--color-accent-succcess-light", + value: "--color-green-500", + }, + { + name: "--color-accent-succcess-default", + value: "--color-green-600", + }, + { + name: "--color-accent-succcess-hover", + value: "--color-green-800", + }, + { + name: "--color-accent-succcess-pressed", + value: "--color-green-1000", + }, + { + name: "--color-accent-succcess-contrast", + value: "--color-green-300", + }, + { + name: "--color-accent-warning-lighter", + value: "--color-ember-200", + }, + { + name: "--color-accent-warning-light", + value: "--color-ember-300", + }, + { + name: "--color-accent-warning-default", + value: "--color-ember-400", + }, + { + name: "--color-accent-warning-hover", + value: "--color-ember-500", + }, + { + name: "--color-accent-warning-pressed", + value: "--color-ember-800", + }, + { + name: "--color-accent-warning-contrast", + value: "--color-ember-200", + }, + { + name: "--color-accent-backdrop-default", + value: "--rgba(23, 23, 23, 80)", + }, + { + name: "--color-accent-item-hover", + value: "--color-neutral-200", + }, + { + name: "--color-accent-item-selected", + value: "--color-primary-300", + }, + { + name: "--color-accent-surface-surface", + value: "--color-neutral-100", + }, + { + name: "--color-accent-surface-elevation-01", + value: "--color-neutral-300", + }, + { + name: "--color-accent-surface-elevation-02", + value: "--color-neutral-400", + }, + { + name: "--color-accent-surface-elevation-03", + value: "--color-neutral-700", + }, + { + name: "--color-accent-surface-elevation-answer", + value: "--color-neutral-600", + }, + { + name: "--color-accent-semantic-info", + value: "--color-green-600", + }, + { + name: "--color-accent-semantic-success", + value: "--color-green-600", + }, + { + name: "--color-accent-semantic-warning", + value: "--color-yellow-600", + }, + { + name: "--color-accent-semantic-error", + value: "--color-red-600", + }, + { + name: "--color-accent-semantic-neutral", + value: "--color-neutral-1300", + }, + { + name: "--color-accent-branding-surface", + value: "--color-neutral-1800", + }, + { + name: "--color-accent-shadow-shadow", + value: "--rgba(11, 18, 7, 20)", + }, + ], + border: [ + { + name: "--color-border-primary-lighter", + value: "--color-primary-300", + }, + { + name: "--color-border-primary-light", + value: "--color-primary-500", + }, + { + name: "--color-border-primary-default", + value: "--color-primary-800", + }, + { + name: "--color-border-primary-hover", + value: "--color-primary-600", + }, + { + name: "--color-border-primary-focused", + value: "--color-neutral-1550", + }, + { + name: "--color-border-primary-pressed", + value: "--color-primary-1000", + }, + { + name: "--color-border-primary-dark", + value: "--color-primary-1300", + }, + { + name: "--color-border-neutral-default", + value: "--color-neutral-800", + }, + { + name: "--color-border-neutral-hover", + value: "--color-neutral-1550", + }, + { + name: "--color-border-neutral-pressed", + value: "--color-neutral-1500", + }, + { + name: "--color-border-neutral-disabled", + value: "--color-neutral-700", + }, + { + name: "--color-border-neutral-on-border", + value: "--color-neutral-200", + }, + { + name: "--color-border-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-border-neutral-neutral", + value: "--color-neutral-900", + }, + { + name: "--color-border-neutral-black", + value: "--color-neutral-1300", + }, + { + name: "--color-border-error-lighter", + value: "--color-red-300", + }, + { + name: "--color-border-error-light", + value: "--color-red-500", + }, + { + name: "--color-border-error-default", + value: "--color-red-600", + }, + { + name: "--color-border-error-hover", + value: "--color-red-700", + }, + { + name: "--color-border-error-pressed", + value: "--color-red-900", + }, + { + name: "--color-border-error-dark", + value: "--color-red-1300", + }, + { + name: "--color-border-success-lighter", + value: "--color-green-300", + }, + { + name: "--color-border-success-light", + value: "--color-green-500", + }, + { + name: "--color-border-success-default", + value: "--color-green-600", + }, + { + name: "--color-border-success-hover", + value: "--color-green-800", + }, + { + name: "--color-border-success-pressed", + value: "--color-green-1000", + }, + { + name: "--color-border-success-dark", + value: "--color-green-1300", + }, + { + name: "--color-border-warning-lighter", + value: "--color-yellow-300", + }, + { + name: "--color-border-warning-light", + value: "--color-yellow-400", + }, + { + name: "--color-border-warning-default", + value: "--color-yellow-500", + }, + { + name: "--color-border-warning-hover", + value: "--color-yellow-800", + }, + { + name: "--color-border-warning-pressed", + value: "--color-yellow-900", + }, + { + name: "--color-border-warning-dark", + value: "--color-yellow-1300", + }, + { + name: "--color-border-item-hover", + value: "--color-neutral-500", + }, + { + name: "--color-border-item-selected", + value: "--color-primary-580", + }, + { + name: "--color-border-surface-on-elevation-01", + value: "--color-neutral-800", + }, + { + name: "--color-border-surface-on-elevation-02", + value: "--color-neutral-1000", + }, + { + name: "--color-border-surface-on-elevation-03", + value: "--color-neutral-1200", + }, + { + name: "--color-border-branding-surface", + value: "--color-neutral-1400", + }, + ], + text: [ + { + name: "--color-text-primary-default", + value: "--color-primary-800", + }, + { + name: "--color-text-primary-hover", + value: "--color-primary-700", + }, + { + name: "--color-text-primary-pressed", + value: "--color-primary-1000", + }, + { + name: "--color-text-neutral-default", + value: "--color-neutral-1400", + }, + { + name: "--color-text-neutral-hover", + value: "--color-neutral-1550", + }, + { + name: "--color-text-neutral-pressed", + value: "--color-neutral-1450", + }, + { + name: "--color-text-neutral-disabled", + value: "--color-neutral-800", + }, + { + name: "--color-text-neutral-on-disabled", + value: "--color-neutral-1000", + }, + { + name: "--color-text-neutral-on-text", + value: "--color-neutral-200", + }, + { + name: "--color-text-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-text-neutral-neutral", + value: "--color-neutral-900", + }, + { + name: "--color-text-neutral-dark", + value: "--color-neutral-1700", + }, + { + name: "--color-text-semantic-success", + value: "--color-green-600", + }, + { + name: "--color-text-semantic-warning", + value: "--color-yellow-600", + }, + { + name: "--color-text-semantic-error", + value: "--color-red-600", + }, + { + name: "--color-text-semantic-neutral", + value: "--color-neutral-1300", + }, + { + name: "--color-text-branding-surface", + value: "--color-neutral-100", + }, + ], + icon: [ + { + name: "--color-icon-primary-default", + value: "--color-primary-800", + }, + { + name: "--color-icon-primary-hover", + value: "--color-primary-700", + }, + { + name: "--color-icon-primary-pressed", + value: "--color-primary-1000", + }, + { + name: "--color-icon-neutral-default", + value: "--color-neutral-1400", + }, + { + name: "--color-icon-neutral-hover", + value: "--color-neutral-1550", + }, + { + name: "--color-icon-neutral-pressed", + value: "--color-neutral-1450", + }, + { + name: "--color-icon-neutral-disabled", + value: "--color-neutral-800", + }, + { + name: "--color-icon-neutral-on-disabled", + value: "--color-neutral-1000", + }, + { + name: "--color-icon-neutral-on-icon", + value: "--color-neutral-200", + }, + { + name: "--color-icon-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-icon-neutral-neutral", + value: "--color-neutral-900", + }, + { + name: "--color-icon-neutral-dark", + value: "--color-neutral-1700", + }, + { + name: "--color-icon-semantic-success", + value: "--color-green-600", + }, + { + name: "--color-icon-semantic-warning", + value: "--color-yellow-600", + }, + { + name: "--color-icon-semantic-error", + value: "--color-red-600", + }, + { + name: "--color-icon-semantic-neutral", + value: "--color-neutral-1300", + }, + ], + }, + dark: { + accent: [ + { + name: "--color-accent-primary-lighter", + value: "--color-primary-300", + }, + { + name: "--color-accent-primary-light", + value: "--color-primary-500", + }, + { + name: "--color-accent-primary-default", + value: "--color-primary-600", + }, + { + name: "--color-accent-primary-hover", + value: "--color-primary-1100", + }, + { + name: "--color-accent-primary-pressed", + value: "--color-primary-1000", + }, + { + name: "--color-accent-primary-contrast", + value: "--color-primary-1300", + }, + { + name: "--color-accent-neutral-default", + value: "--color-neutral-900", + }, + { + name: "--color-accent-neutral-hover", + value: "--color-neutral-300", + }, + { + name: "--color-accent-neutral-pressed", + value: "--color-neutral-600", + }, + { + name: "--color-accent-neutral-disabled", + value: "--color-neutral-1300", + }, + { + name: "--color-accent-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-accent-neutral-neutral", + value: "--color-neutral-600", + }, + { + name: "--color-accent-neutral-black", + value: "--color-neutral-1300", + }, + { + name: "--color-accent-neutral-contrast", + value: "--color-neutral-1550", + }, + { + name: "--color-accent-error-lighter", + value: "--color-red-300", + }, + { + name: "--color-accent-error-light", + value: "--color-red-500", + }, + { + name: "--color-accent-error-default", + value: "--color-red-600", + }, + { + name: "--color-accent-error-hover", + value: "--color-red-800", + }, + { + name: "--color-accent-error-pressed", + value: "--color-red-1000", + }, + { + name: "--color-accent-error-contrast", + value: "--color-red-1300", + }, + { + name: "--color-accent-succcess-lighter", + value: "--color-green-300", + }, + { + name: "--color-accent-succcess-light", + value: "--color-green-500", + }, + { + name: "--color-accent-succcess-default", + value: "--color-green-600", + }, + { + name: "--color-accent-succcess-hover", + value: "--color-green-800", + }, + { + name: "--color-accent-succcess-pressed", + value: "--color-green-1000", + }, + { + name: "--color-accent-succcess-contrast", + value: "--color-green-1300", + }, + { + name: "--color-accent-warning-lighter", + value: "--color-yellow-300", + }, + { + name: "--color-accent-warning-light", + value: "--color-yellow-400", + }, + { + name: "--color-accent-warning-default", + value: "--color-yellow-600", + }, + { + name: "--color-accent-warning-hover", + value: "--color-yellow-900", + }, + { + name: "--color-accent-warning-pressed", + value: "--color-yellow-1000", + }, + { + name: "--color-accent-warning-contrast", + value: "--color-yellow-1300", + }, + { + name: "--color-accent-backdrop-default", + value: "--rgba(23, 23, 23, 70)", + }, + { + name: "--color-accent-item-hover", + value: "--color-primary-1100", + }, + { + name: "--color-accent-item-selected", + value: "--color-primary-1300", + }, + { + name: "--color-accent-surface-surface", + value: "--color-neutral-1700", + }, + { + name: "--color-accent-surface-elevation-01", + value: "--color-neutral-1600", + }, + { + name: "--color-accent-surface-elevation-02", + value: "--color-neutral-1500", + }, + { + name: "--color-accent-surface-elevation-03", + value: "--color-neutral-1300", + }, + { + name: "--color-accent-surface-elevation-answer", + value: "--color-neutral-1450", + }, + { + name: "--color-accent-semantic-info", + value: "--color-green-600", + }, + { + name: "--color-accent-semantic-success", + value: "--color-green-600", + }, + { + name: "--color-accent-semantic-warning", + value: "--color-yellow-600", + }, + { + name: "--color-accent-semantic-error", + value: "--color-red-600", + }, + { + name: "--color-accent-semantic-neutral", + value: "--color-neutral-800", + }, + { + name: "--color-accent-branding-surface", + value: "--color-neutral-100", + }, + { + name: "--color-accent-shadow-shadow", + value: "--rgba(0, 0, 0, 20)", + }, + ], + border: [ + { + name: "--color-border-primary-lighter", + value: "--color-primary-300", + }, + { + name: "--color-border-primary-light", + value: "--color-primary-500", + }, + { + name: "--color-border-primary-default", + value: "--color-primary-600", + }, + { + name: "--color-border-primary-hover", + value: "--color-primary-550", + }, + { + name: "--color-border-primary-focused", + value: "--color-neutral-400", + }, + { + name: "--color-border-primary-pressed", + value: "--color-primary-580", + }, + { + name: "--color-border-primary-dark", + value: "--color-primary-1300", + }, + { + name: "--color-border-neutral-default", + value: "--color-neutral-900", + }, + { + name: "--color-border-neutral-hover", + value: "--color-neutral-100", + }, + { + name: "--color-border-neutral-pressed", + value: "--color-neutral-400", + }, + { + name: "--color-border-neutral-disabled", + value: "--color-neutral-1050", + }, + { + name: "--color-border-neutral-on-border", + value: "--color-neutral-1700", + }, + { + name: "--color-border-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-border-neutral-neutral", + value: "--color-neutral-600", + }, + { + name: "--color-border-neutral-black", + value: "--color-neutral-1300", + }, + { + name: "--color-border-error-lighter", + value: "--color-red-300", + }, + { + name: "--color-border-error-light", + value: "--color-red-500", + }, + { + name: "--color-border-error-default", + value: "--color-red-600", + }, + { + name: "--color-border-error-hover", + value: "--color-red-700", + }, + { + name: "--color-border-error-pressed", + value: "--color-red-900", + }, + { + name: "--color-border-error-dark", + value: "--color-red-1300", + }, + { + name: "--color-border-success-lighter", + value: "--color-green-300", + }, + { + name: "--color-border-success-light", + value: "--color-green-500", + }, + { + name: "--color-border-success-default", + value: "--color-green-600", + }, + { + name: "--color-border-success-hover", + value: "--color-green-800", + }, + { + name: "--color-border-success-pressed", + value: "--color-green-1000", + }, + { + name: "--color-border-success-dark", + value: "--color-green-1300", + }, + { + name: "--color-border-warning-lighter", + value: "--color-yellow-300", + }, + { + name: "--color-border-warning-light", + value: "--color-yellow-400", + }, + { + name: "--color-border-warning-default", + value: "--color-yellow-500", + }, + { + name: "--color-border-warning-hover", + value: "--color-yellow-800", + }, + { + name: "--color-border-warning-pressed", + value: "--color-yellow-900", + }, + { + name: "--color-border-warning-dark", + value: "--color-yellow-1300", + }, + { + name: "--color-border-item-hover", + value: "--color-neutral-1050", + }, + { + name: "--color-border-item-selected", + value: "--color-primary-580", + }, + { + name: "--color-border-surface-on-elevation-01", + value: "--color-neutral-1300", + }, + { + name: "--color-border-surface-on-elevation-02", + value: "--color-neutral-1100", + }, + { + name: "--color-border-surface-on-elevation-03", + value: "--color-neutral-900", + }, + { + name: "--color-border-branding-surface", + value: "--color-neutral-1700", + }, + ], + text: [ + { + name: "--color-text-primary-default", + value: "--color-primary-600", + }, + { + name: "--color-text-primary-hover", + value: "--color-primary-400", + }, + { + name: "--color-text-primary-pressed", + value: "--color-primary-800", + }, + { + name: "--color-text-neutral-default", + value: "--color-neutral-400", + }, + { + name: "--color-text-neutral-hover", + value: "--color-neutral-300", + }, + { + name: "--color-text-neutral-pressed", + value: "--color-neutral-300", + }, + { + name: "--color-text-neutral-disabled", + value: "--color-neutral-1050", + }, + { + name: "--color-text-neutral-on-disabled", + value: "--color-neutral-600", + }, + { + name: "--color-text-neutral-on-text", + value: "--color-neutral-1700", + }, + { + name: "--color-text-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-text-neutral-neutral", + value: "--color-neutral-600", + }, + { + name: "--color-text-neutral-dark", + value: "--color-neutral-1700", + }, + { + name: "--color-text-semantic-success", + value: "--color-green-600", + }, + { + name: "--color-text-semantic-warning", + value: "--color-yellow-600", + }, + { + name: "--color-text-semantic-error", + value: "--color-red-600", + }, + { + name: "--color-text-semantic-neutral", + value: "--color-neutral-800", + }, + { + name: "--color-text-branding-surface", + value: "--color-neutral-1800", + }, + ], + icon: [ + { + name: "--color-icon-primary-default", + value: "--color-primary-600", + }, + { + name: "--color-icon-primary-hover", + value: "--color-primary-400", + }, + { + name: "--color-icon-primary-pressed", + value: "--color-primary-800", + }, + { + name: "--color-icon-neutral-default", + value: "--color-neutral-400", + }, + { + name: "--color-icon-neutral-hover", + value: "--color-neutral-300", + }, + { + name: "--color-icon-neutral-pressed", + value: "--color-neutral-300", + }, + { + name: "--color-icon-neutral-disabled", + value: "--color-neutral-1050", + }, + { + name: "--color-icon-neutral-on-disabled", + value: "--color-neutral-600", + }, + { + name: "--color-icon-neutral-on-icon", + value: "--color-neutral-1700", + }, + { + name: "--color-icon-neutral-white", + value: "--color-neutral-100", + }, + { + name: "--color-icon-neutral-neutral", + value: "--color-neutral-600", + }, + { + name: "--color-icon-neutral-dark", + value: "--color-neutral-1700", + }, + { + name: "--color-icon-semantic-success", + value: "--color-green-600", + }, + { + name: "--color-icon-semantic-warning", + value: "--color-yellow-600", + }, + { + name: "--color-icon-semantic-error", + value: "--color-red-600", + }, + { + name: "--color-icon-semantic-neutral", + value: "--color-neutral-800", + }, + ], + }, + }, + }, + "font-size": { + header: [ + { + name: "--font-size-header-h1", + value: "--size-40", + }, + { + name: "--font-size-header-h2", + value: "--size-32", + }, + { + name: "--font-size-header-h3", + value: "--size-28", + }, + { + name: "--font-size-header-h4", + value: "--size-24", + }, + { + name: "--font-size-header-h5", + value: "--size-20", + }, + { + name: "--font-size-header-h6", + value: "--size-18", + }, + ], + subtitle: [ + { + name: "--font-size-subtitle-large", + value: "--size-20", + }, + { + name: "--font-size-subtitle-medium", + value: "--size-18", + }, + { + name: "--font-size-subtitle-small", + value: "--size-16", + }, + { + name: "--font-size-subtitle-xsmall", + value: "--size-14", + }, + ], + body: [ + { + name: "--font-size-body-xlarge", + value: "--size-18", + }, + { + name: "--font-size-body-large", + value: "--size-16", + }, + { + name: "--font-size-body-medium", + value: "--size-14", + }, + { + name: "--font-size-body-small", + value: "--size-12", + }, + { + name: "--font-size-body-xsmall", + value: "--size-11", + }, + ], + caption: [ + { + name: "--font-size-caption-large", + value: "--size-12", + }, + { + name: "--font-size-caption-medium", + value: "--size-11", + }, + { + name: "--font-size-caption-small", + value: "--size-10", + }, + { + name: "--font-size-caption-xsmall", + value: "--size-8", + }, + ], + }, + }, +}; +export default mercuryTokens; diff --git a/packages/common/src/components/template-render/template-render.ts b/packages/common/src/components/template-render/template-render.ts index c409f66e5..2f3be25b9 100644 --- a/packages/common/src/components/template-render/template-render.ts +++ b/packages/common/src/components/template-render/template-render.ts @@ -32,7 +32,10 @@ export class TemplateRender extends LitElement { #cssTheme: ThemeModel | undefined; /** - * test has + * This property is a WA to avoid an issue where the Angular apps set the + * bundleToHashMapping object, but this mapping is not seen in this module. + * + * This is because the modules of Mercury is being duplicated. */ @property({ attribute: false }) bundleToHashMappings!: unknown; diff --git a/packages/common/src/html.ts b/packages/common/src/html.ts index c8d4cd4ff..b404cb6cd 100644 --- a/packages/common/src/html.ts +++ b/packages/common/src/html.ts @@ -116,21 +116,47 @@ export const CSS_CLASSES = { SELECTOR: "field-inline" } } + }, + SCROLLABLE: { + SELECTOR: "scrollable" } }; export const CUSTOM_CSS_ONLY_FOR_PREVIEW_LAYOUT = `.layout { - background-color: var(--mer-surface__elevation--01); + background-color: var(--color-accent-surface-elevation-01); block-size: 300px; } .layout__panel { align-content: center; - background-color: var(--mer-surface__elevation--02); + background-color: var(--color-accent-surface-elevation-02); block-size: 100%; - border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01); - border-radius: var(--mer-border__radius--sm); + border: var(--size-1) solid var(--color-border-surface-on-elevation-02); + border-radius: var(--size-4); display: grid; - font-size: var(--mer-font__size--xs); + font-size: var(--font-size-body-medium); justify-content: center; }`; + +// New (it is better to export individual constants) + +export const BUTTONS_SPACER_CLASS = "buttons-spacer"; // TODO: Check/revise this class name. + +export const LINK_PRIMARY_CLASS = "link-primary"; +export const LINK_SECONDARY_CLASS = "link-secondary"; +export const LINK_TERTIARY_CLASS = "link-tertiary"; + +export const P_BODY_CLASS = "body-regular-m"; +export const PARAGRAPHS_CONTAINER_CLASS = "bparagraphs-container"; +export const PARAGRAPHS_CONTAINER_STYLES = `display: flex; flex-direction: column; gap: var(--size-12);`; + +export const SPACING_BODY = { + ALL: "spacing-body", + BLOCK: "spacing-body-block", + BLOCK_START: "spacing-body-block-start", + BLOCK_END: "spacing-body-block-end", + INLINE: "spacing-body-inline", + INLINE_START: "spacing-body-inline-start", + INLINE_END: "spacing-body-inline-end", + INLINE_BLOCK_START: "spacing-body-inline spacing-body-block-start" // used in: accordion TODO: replace with SPACING_BODY.INLINE + SPACING_BODY.BLOCK_START in another PR +}; diff --git a/packages/common/src/index.ts b/packages/common/src/index.ts index 31d44244c..a0c98732c 100644 --- a/packages/common/src/index.ts +++ b/packages/common/src/index.ts @@ -24,6 +24,7 @@ export { treeViewMetadata } from "./metadata/components/tree-view/metadata"; export { elevationMetadata } from "./metadata/utility-classes/elevation/metadata"; export { formMetadata } from "./metadata/utility-classes/form/metadata"; export { layoutMetadata } from "./metadata/utility-classes/layout/metadata"; +export { linkMetadata } from "./metadata/utility-classes/link/metadata"; export { spacingMetadata } from "./metadata/utility-classes/spacing/metadata"; export { typographyMetadata } from "./metadata/utility-classes/typography/metadata"; diff --git a/packages/common/src/metadata/components/accordion/metadata.ts b/packages/common/src/metadata/components/accordion/metadata.ts index 1c1687ff7..6d355da47 100644 --- a/packages/common/src/metadata/components/accordion/metadata.ts +++ b/packages/common/src/metadata/components/accordion/metadata.ts @@ -12,9 +12,7 @@ import { const CH_TAG = "ch-accordion-render"; const FILLED_CLASS = "accordion-filled"; -const FILLED_HEADER_CLASS = "accordion-filled-header"; const OUTLINED_CLASS = "accordion-outlined"; -// const ELEVATION_1_CLASS = "elevation-1"; const ELEVATION_2_CLASS = "elevation-2"; const ELEVATION_3_CLASS = "elevation-3"; @@ -193,156 +191,6 @@ export const accordionMetadata = parseMetadata({ } }, - // Filled Header Cases - filledHeader: { - linkId: "accordion-filled-header", - title: "2.1. Filled Header", - states: [ - { - name: "accordionModel", - type: "AccordionModel", - value: accordionModel - } - ], - imports: [chameleonImportType("AccordionModel")], - template: { - tag: CH_TAG, - class: `${FILLED_HEADER_CLASS}`, - properties: [{ name: "model", value: "accordionModel" }], - children: returnAccordionCommonChildren(true) - } - }, - - filledHeaderDisabled: { - linkId: "accordion-filled-header-disabled", - title: "2.2. Filled Header: Disabled", - states: [ - { - name: "accordionModel", - type: "AccordionModel", - value: accordionModel - } - ], - imports: [chameleonImportType("AccordionModel")], - template: { - tag: CH_TAG, - class: `${FILLED_HEADER_CLASS}`, - properties: [ - { name: "model", value: "accordionModel" }, - { name: "disabled", value: true } - ] - } - }, - - filledHeaderWithIcons: { - linkId: "accordion-filled-header-with-icons", - title: "2.3. Filled Header With Icons", - states: [ - { - name: "accordionModel", - type: "AccordionModel", - value: accordionWithIconsModel - } - ], - imports: [ - chameleonImportType("AccordionModel"), - 'import { getIconPath } from "@genexus/mercury/assets-manager.js";' - ], - template: { - tag: CH_TAG, - class: `${FILLED_HEADER_CLASS}`, - properties: [{ name: "model", value: "accordionModel" }], - children: returnAccordionCommonChildren(true) - } - }, - - filledHeaderWithIconsDisabled: { - linkId: "accordion-filled-header-with-icons-disabled", - title: "2.4. Filled Header With Icons: Disabled", - states: [ - { - name: "accordionModel", - type: "AccordionModel", - value: accordionWithIconsModel - } - ], - imports: [ - chameleonImportType("AccordionModel"), - 'import { getIconPath } from "@genexus/mercury/assets-manager.js";' - ], - template: { - tag: CH_TAG, - class: `${FILLED_HEADER_CLASS}`, - properties: [ - { name: "model", value: "accordionModel" }, - { name: "disabled", value: true } - ] - } - }, - - filledHeaderElevation1: { - linkId: "accordion-filled-header-elevation-1", - title: "2.5. Filled Header: Elevation 1 (Default)", - bundles: ["components/accordion", "utils/elevation", "utils/spacing"], - commonSnippetWrapper: "surface", - states: [ - { - name: "accordionModel", - type: "AccordionModel", - value: accordionModel - } - ], - imports: [chameleonImportType("AccordionModel")], - template: { - tag: CH_TAG, - class: `${FILLED_HEADER_CLASS}`, - properties: [{ name: "model", value: "accordionModel" }], - children: returnAccordionCommonChildren(true) - } - }, - - filledHeaderElevation2: { - linkId: "accordion-filled-header-elevation-2", - title: "2.6. Filled Header: Elevation 2", - bundles: ["components/accordion", "utils/elevation", "utils/spacing"], - commonSnippetWrapper: "elevation-1", - states: [ - { - name: "accordionModel", - type: "AccordionModel", - value: accordionModel - } - ], - imports: [chameleonImportType("AccordionModel")], - template: { - tag: CH_TAG, - class: `${FILLED_HEADER_CLASS} ${ELEVATION_2_CLASS}`, - properties: [{ name: "model", value: "accordionModel" }], - children: returnAccordionCommonChildren(true) - } - }, - - filledHeaderElevation3: { - linkId: "accordion-filled-header-elevation-3", - title: "2.7. Filled Header: Elevation 3", - bundles: ["components/accordion", "utils/elevation", "utils/spacing"], - commonSnippetWrapper: "elevation-2", - states: [ - { - name: "accordionModel", - type: "AccordionModel", - value: accordionModel - } - ], - imports: [chameleonImportType("AccordionModel")], - template: { - tag: CH_TAG, - class: `${FILLED_HEADER_CLASS} ${ELEVATION_3_CLASS}`, - properties: [{ name: "model", value: "accordionModel" }], - children: returnAccordionCommonChildren(true) - } - }, - // Outlined Cases outlined: { linkId: "accordion-outlined", diff --git a/packages/common/src/metadata/components/button/metadata.ts b/packages/common/src/metadata/components/button/metadata.ts index 0861bc8cf..64c907a53 100644 --- a/packages/common/src/metadata/components/button/metadata.ts +++ b/packages/common/src/metadata/components/button/metadata.ts @@ -277,17 +277,6 @@ export const buttonMetadata = parseMetadata({ } }, - buttonSecondaryTextOnlyDestructive: { - linkId: "button-secondary-text-only-destructive", - title: "2.3. Text Only: Destructive", - template: { - tag: "button", - class: "button-secondary-destructive", - properties: [{ name: "type", value: "button" }], - children: buttonCommon.caption - } - }, - buttonSecondaryIconAndText: { linkId: "button-secondary-icon-and-text", title: "2.4. Icon and Text", diff --git a/packages/common/src/metadata/components/chat/metadata.ts b/packages/common/src/metadata/components/chat/metadata.ts index c1825f1ea..a82ee3506 100644 --- a/packages/common/src/metadata/components/chat/metadata.ts +++ b/packages/common/src/metadata/components/chat/metadata.ts @@ -80,8 +80,9 @@ const LIVE_AUDIO_CONTAINER_STYLES = ` display: flex; align-items: center; justify-content: center; - background-color: var(--mer-surface__elevation--02); - border-radius: var(--mer-border__radius--sm); + background-color: var(--color-accent-surface-elevation-02); + border-radius: var(--size-4); + border: var(--size-2) dashed var(--color-border-surface-on-elevation-02); }`; const AVATAR_CUSTOM_STYLES = ` @@ -116,27 +117,70 @@ const MAX_INPUT_LINES_VARS = `.chat { const ATTACHED_FILES_VIEWER_STYLES = ` .chat-attached-files-viewer { - list-style: none; - margin: 0; - padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; - column-gap: var(--mer-spacing--xs); - row-gap: var(--mer-spacing--xs); - font-size: var(--font-size-body-s); + column-gap: var(--size-8); + row-gap: var(--size-8); + list-style: none; + margin: 0; + padding: 0; } - .chat-attached-files-viewer > li { - border: var(--mer-border__width--sm) solid var(--mer-border-color__on-elevation--02); - padding: var(--mer-spacing--sm); - border-radius: var(--mer-border__radius--sm); - background-color: var(--mer-surface__elevation--03); + + .chat-attached-file-li { + display: grid; + grid-template-columns: max-content 1fr; + border: var(--size-1) solid var(--color-border-surface-on-elevation-02); + border-radius: var(--size-4); + background-color: var(--color-accent-surface-elevation-02); text-align: start; + overflow-y: hidden; + } + + .chat-attached-file-li::before { + content: ""; + display: inline-block; + inline-size: var(--size-40); + block-size: var(--size-40); + background: no-repeat center / var(--size-14) var(--icon-path) var(--color-accent-surface-elevation-03); + } + + .chat-attached-file-li--mp3::before { + --icon-path: var(--icon__system_headphones_neutral--active); + } + .chat-attached-file-li--mp4::before { + --icon-path: var(--icon__system_videocam_neutral--active); + } + .chat-attached-file-li--svg::before { + --icon-path: var(--icon__system_photo_neutral--active); + } + .chat-attached-file-li--pdf::before { + --icon-path: var(--icon__system_detail_neutral--active); + } + + .chat-attached-file-data-container { + display: flex; + flex-direction: column; + justify-content: center; + block-size: 100%; + padding-inline: 8px; + overflow-y: hidden; + font-size: var(--font-size-caption-m); + font-style: normal; + color: var(--color-text-neutral-default); + } + + .chat-attached-file-name { display: block; + inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } + + .chat-attached-file-extension { + text-transform: uppercase; + } `; // This description is for the input bound to `inputValueForFilesUploaded`. @@ -192,7 +236,23 @@ const uploadedFilesViewer: ComponentTemplateModel = { class: "chat-attached-files-viewer", children: dummySampleFiles("in-progress").map((file: ChatMessageFile) => ({ tag: "li", - children: file.caption + class: `chat-attached-file-li chat-attached-file-li--${file.extension}`, + children: { + tag: "div", + class: "chat-attached-file-data-container", + children: [ + { + tag: "span", + children: file.caption, + class: "chat-attached-file-name" + }, + { + tag: "span", + children: file.extension, + class: "chat-attached-file-extension" + } + ] + } })), properties: [{ name: "slot", value: "chat-attached-files-viewer" }] }; @@ -214,7 +274,7 @@ const commonBundles: MercuryBundleOptimized[] = [ "components/markdown-viewer" ]; -export const chatMetadata = parseMetadata({ +export const chatMetadata: ComponentMetadata = parseMetadata({ title: "Chat", description: "A chat component is an interactive UI element designed to facilitate real-time messaging between users or between a user and a system. It typically includes a message input field, a display area for conversation history, and features like typing indicators, timestamps, and message status. This component enhances communication by enabling instant feedback, supporting both synchronous and asynchronous interactions. It's ideal for applications that require user support, collaboration, or conversational interfaces like chatbots.", @@ -769,4 +829,4 @@ export const chatMetadata = parseMetadata({ } } } -} as const satisfies ComponentMetadata); +} as const satisfies ComponentMetadata) satisfies ComponentMetadata; diff --git a/packages/common/src/metadata/components/combo-box/metadata.ts b/packages/common/src/metadata/components/combo-box/metadata.ts index b2cd3fc57..56be9f605 100644 --- a/packages/common/src/metadata/components/combo-box/metadata.ts +++ b/packages/common/src/metadata/components/combo-box/metadata.ts @@ -3,7 +3,9 @@ import { chameleonImportType } from "../../../utils"; import { parseMetadata } from "../../parseMetadata"; import { comboBoxIconsModel, comboBoxModel } from "./models"; -const COMPONENT_CLASS = "combo-box"; +const COMPONENT_CLASS = "combo-box scrollable"; + +const CUSTOM_STYLES = `.combo-box { inline-size: 50%; }`; export const comboBoxMetadata = parseMetadata({ title: "Combo Box", @@ -16,6 +18,7 @@ export const comboBoxMetadata = parseMetadata({ ], codeSnippets: { default: { + customCssOnlyForPreview: CUSTOM_STYLES, linkId: "default", title: "1. Default", bundles: [ @@ -47,7 +50,8 @@ export const comboBoxMetadata = parseMetadata({ class: COMPONENT_CLASS, properties: [ { name: "id", value: "options" }, - { name: "model", value: "comboBoxModel" } + { name: "model", value: "comboBoxModel" }, + { name: "value", value: comboBoxModel[0].value } ] } ] @@ -55,6 +59,7 @@ export const comboBoxMetadata = parseMetadata({ }, noLabel: { + customCssOnlyForPreview: CUSTOM_STYLES, linkId: "no-label", title: "2. No Label", imports: [chameleonImportType("ComboBoxModel")], @@ -70,12 +75,14 @@ export const comboBoxMetadata = parseMetadata({ class: COMPONENT_CLASS, properties: [ { name: "accessibleName", value: "Options" }, - { name: "model", value: "comboBoxModel" } + { name: "model", value: "comboBoxModel" }, + { name: "value", value: comboBoxModel[0].value } ] } }, disabled: { + customCssOnlyForPreview: CUSTOM_STYLES, linkId: "disabled", title: "3. Disabled", imports: [chameleonImportType("ComboBoxModel")], @@ -92,12 +99,14 @@ export const comboBoxMetadata = parseMetadata({ properties: [ { name: "accessibleName", value: "Options" }, { name: "disabled", value: true }, - { name: "model", value: "comboBoxModel" } + { name: "model", value: "comboBoxModel" }, + { name: "value", value: comboBoxModel[0].value } ] } }, placeholder: { + customCssOnlyForPreview: CUSTOM_STYLES, linkId: "placeholder", title: "4. Placeholder", imports: [chameleonImportType("ComboBoxModel")], @@ -120,8 +129,9 @@ export const comboBoxMetadata = parseMetadata({ }, withIcons: { + customCssOnlyForPreview: CUSTOM_STYLES, linkId: "with-icons", - title: "5. With icons", + title: "5. With Icon", // TODO: Add getIconPath function and don't compute the function result in the state imports: [chameleonImportType("ComboBoxModel")], states: [ @@ -137,7 +147,7 @@ export const comboBoxMetadata = parseMetadata({ properties: [ { name: "accessibleName", value: "Objects" }, { name: "model", value: "comboBoxModel" }, - { name: "value", value: "patterns" } + { name: "value", value: comboBoxIconsModel[0].value } ] } } diff --git a/packages/common/src/metadata/components/combo-box/models.ts b/packages/common/src/metadata/components/combo-box/models.ts index ca26e2420..d2b46cc53 100644 --- a/packages/common/src/metadata/components/combo-box/models.ts +++ b/packages/common/src/metadata/components/combo-box/models.ts @@ -2,102 +2,36 @@ import type { ComboBoxModel } from "@genexus/chameleon-controls-library"; import { getIconPath } from "@genexus/mercury/assets-manager.js"; export const comboBoxModel: ComboBoxModel = [ - { value: "Value 1", caption: "Label for the value 1" }, + { value: "item-1", caption: "Item 1 Caption" }, { - value: "Value 2", - caption: "Label for the value 222 (not expandable)", + value: "item-2", + caption: "Item 2 Caption (not expandable)", items: [ - { value: "Value 2.1", caption: "Label for the value 2.1" }, - { value: "Value 2.2", caption: "Label for the value 2.2" } - ] - }, - { - value: "Value 3", - caption: "Label for the value 3", - disabled: true - }, - { value: "Value 4", caption: "Label for the value 4" }, - { - value: "Value 5", - caption: "Label for the value 5", - disabled: true, - expandable: true, - expanded: true, - items: [ - { value: "Value 5.1", caption: "Label for the value 5.1" }, - { value: "Value 5.2", caption: "Label for the value 5.2" }, + { value: "item-2.1", caption: "Item 2.1 Caption" }, { - value: "Value 5.3", - caption: "Label for the value 5.3", - disabled: false - }, - { value: "Value 5.4", caption: "Label for the value 5.4" } - ] - }, - { - value: "Value 6", - caption: "Label for the value 6", - expandable: true, - expanded: true, - items: [ - { - value: "Value 6.1", - caption: "Label for the value 6.1", + value: "item-2.2", + caption: "Item 2.2 Caption (disabled)", disabled: true - }, - { - value: "Value 6.2", - caption: "Label for the value 6.2", - disabled: true - }, - { - value: "Value 6.3", - caption: "Label for the value 6.3", - disabled: false - }, - { value: "Value 6.4", caption: "Label for the value 6.4" } - ] - }, - { - value: "Value 7", - caption: "Label for the value 7", - disabled: true - }, - { value: "Value 8", caption: "Label for the value 8" }, - { - value: "Value 9", - caption: "Label for the value 9", - expandable: true, - items: [ - { value: "Value 9.1", caption: "Label for the value 9.1" }, - { value: "Value 9.2", caption: "Label for the value 9.2" }, - { - value: "Value 9.3", - caption: "Label for the value 9.3", - disabled: false - }, - { value: "Value 9.4", caption: "Label for the value 9.4" } + } ] }, - { value: "Value 10", caption: "Label for the value 10" }, { - value: "Value 11", - caption: "Label for the value 11", + value: "item-2", + caption: "Item 2 Caption (disabled)", + disabled: true, expandable: true, expanded: true, - disabled: true, items: [ - { value: "Value 11.1", caption: "Label for the value 11.1" }, - { value: "Value 11.2", caption: "Label for the value 11.2" }, { - value: "Value 11.3", - caption: "Label for the value 11.3", - disabled: false + value: "item-2.1", + caption: "Item 2.1 Caption (disabled by inheritance)" }, - { value: "Value 11.4", caption: "Label for the value 11.4" } + { + value: "item-2.2", + caption: "Item 2.2 Caption (disabled by inheritance)" + } ] - }, - { value: "Value 12", caption: "Label for the value 12" } + } ]; export const comboBoxIconsModel: ComboBoxModel = [ @@ -139,7 +73,10 @@ export const comboBoxIconsModel: ComboBoxModel = [ { value: "structured-data-type", caption: "Structured Data Type", - startImgSrc: getIconPath({ category: "objects", name: "structured-data-type" }) + startImgSrc: getIconPath({ + category: "objects", + name: "structured-data-type" + }) }, { value: "subtype-group", diff --git a/packages/common/src/metadata/components/dialog/metadata.ts b/packages/common/src/metadata/components/dialog/metadata.ts index b5779a993..4cb2280f1 100644 --- a/packages/common/src/metadata/components/dialog/metadata.ts +++ b/packages/common/src/metadata/components/dialog/metadata.ts @@ -2,6 +2,12 @@ import type { ComponentMetadata } from "../../../typings/component-metadata"; import type { ComponentTemplateModel } from "../../../typings/metadata-to-framework-language"; import { parseMetadata } from "../../parseMetadata"; +import { + BUTTONS_SPACER_CLASS, + P_BODY_CLASS, + PARAGRAPHS_CONTAINER_STYLES, + SPACING_BODY +} from "../../../html"; // TODO: Document a case about these css variables that allows settings min. and max. sizes // const DIALOG_CUSTOM_CSS_PROPERTIES = `.dialog { // --ch-dialog-max-block-size: 800px; @@ -10,29 +16,59 @@ import { parseMetadata } from "../../parseMetadata"; // --ch-dialog-min-inline-size: 400px; // }`; +const SPACING_BODY_CLASS = SPACING_BODY.ALL; + +const DIALOG_CONTENT = [ + { + tag: "p", + class: P_BODY_CLASS, + children: + "We're excited to introduce Smart Task Prioritization, an AI-powered feature that automatically organizes your workload based on deadlines, dependencies, and team capacity. No more guessing which tasks need attention first." + }, + { + tag: "p", + class: P_BODY_CLASS, + children: + "The new system learns from your work patterns and suggests optimal scheduling to boost productivity by up to 30%. It even detects potential bottlenecks before they happen, keeping your projects on track." + }, + { + tag: "p", + class: P_BODY_CLASS, + children: + "Ready to experience smarter workflow management? This feature is rolling out to all teams starting next Monday. Your personalized recommendations will appear in the dashboard within 24 hours of activation." + } +]; + +const DIALOG_INSTRUCTIONS_CONTAINER_STYLES = `.dialog { + --ch-dialog-inline-size: calc(var(--ch-dialog-max-inline-size) - 2px); + } + div { + align-items: center; + display: flex; + flex-direction: column; + gap: var(--size-4); + justify-content: center; + position: absolute; + inline-size: 100%; + block-size: 100%; + }`; + +// PARAGRAPH_... classes are for applying custom gap between paragraphs, without +// altering the showcase markup. PARAGRAPH_DIV.. is for the case that does not +// implement "spacing body" (2. Without Padding, at the time of writing). +const PARAGRAPH_DIV_CONTAINER_CLASS = `div { + ${PARAGRAPHS_CONTAINER_STYLES} +}`; +const PARAGRAPH_SPACING_BODY_CONTAINER_CLASS = `.${SPACING_BODY_CLASS} { + ${PARAGRAPHS_CONTAINER_STYLES} +}`; + +const DIALOG_TITLE = "New Feature Announcement"; + const CONTENT_WITH_SPACING = { tag: "div", - class: "spacing-body", - children: [ - { - tag: "p", - class: "body-regular-m", - children: - "GeneXus is a low-code development platform that streamlines the creation of enterprise applications by automatically generating code for various environments from a single specification." - }, - { - tag: "p", - class: "body-regular-m", - children: - "It's ideal for developers who want to quickly prototype, develop, and deploy applications across web, mobile, and desktop platforms. With its model-driven approach, GeneXus minimizes the need for manual coding, allowing developers to focus on design and user experience." - }, - { - tag: "p", - class: "body-regular-m", - children: - "The platform also excels in its robust integration capabilities, enabling seamless connectivity with various databases and third-party services. This flexibility ensures that applications built with GeneXus are scalable and maintainable, reducing the time and effort required for updates and enhancements." - } - ] + class: SPACING_BODY_CLASS, + children: DIALOG_CONTENT } as const satisfies ComponentTemplateModel; export const dialogMetadata = parseMetadata({ @@ -49,7 +85,7 @@ export const dialogMetadata = parseMetadata({ codeSnippets: { default: { linkId: "default", - title: "1. Default", + title: "1. Default!", events: { showDialog: stateMapping => () => stateMapping?.set("show", true), hideDialog: stateMapping => () => stateMapping?.set("show", false) @@ -72,7 +108,8 @@ export const dialogMetadata = parseMetadata({ properties: [{ name: "show", value: "show" }], children: CONTENT_WITH_SPACING } - ] + ], + customCssOnlyForPreview: PARAGRAPH_SPACING_BODY_CONTAINER_CLASS }, withoutPadding: { @@ -102,28 +139,21 @@ export const dialogMetadata = parseMetadata({ children: { tag: "div", children: [ + ...DIALOG_CONTENT, + // A fourth paragraph is convenient in this case, since the default paragraphs do not + // fill up the available min-block-size dialog space (200px) at the time of writting. + // This is because this case has no spacing { tag: "p", - class: "body-regular-m", + class: P_BODY_CLASS, children: - "GeneXus is a low-code development platform that streamlines the creation of enterprise applications by automatically generating code for various environments from a single specification." - }, - { - tag: "p", - class: "body-regular-m", - children: - "It's ideal for developers who want to quickly prototype, develop, and deploy applications across web, mobile, and desktop platforms. With its model-driven approach, GeneXus minimizes the need for manual coding, allowing developers to focus on design and user experience." - }, - { - tag: "p", - class: "body-regular-m", - children: - "The platform also excels in its robust integration capabilities, enabling seamless connectivity with various databases and third-party services. This flexibility ensures that applications built with GeneXus are scalable and maintainable, reducing the time and effort required for updates and enhancements." + "Need help getting started? Check out our quick tutorial video or join tomorrow's live demo session at 2 PM. Our support team is also available 24/7 to answer any questions about the new features. Plus, we've created a comprehensive knowledge base with step-by-step guides and FAQs to help you master the system quickly." } ] } } - ] + ], + customCssOnlyForPreview: PARAGRAPH_DIV_CONTAINER_CLASS }, withHeader: { @@ -149,14 +179,15 @@ export const dialogMetadata = parseMetadata({ { eventName: "dialogClosed", eventHandlerName: "hideDialog" } ], properties: [ - { name: "caption", value: "Title" }, + { name: "caption", value: DIALOG_TITLE }, { name: "closeButtonAccessibleName", value: "Close dialog" }, { name: "show", value: "show" }, { name: "showHeader", value: true } ], children: CONTENT_WITH_SPACING } - ] + ], + customCssOnlyForPreview: PARAGRAPH_SPACING_BODY_CONTAINER_CLASS }, withFooter: { @@ -189,6 +220,7 @@ export const dialogMetadata = parseMetadata({ CONTENT_WITH_SPACING, { tag: "div", + class: BUTTONS_SPACER_CLASS, properties: [{ name: "slot", value: "footer" }], children: [ { @@ -207,7 +239,8 @@ export const dialogMetadata = parseMetadata({ } ] } - ] + ], + customCssOnlyForPreview: PARAGRAPH_SPACING_BODY_CONTAINER_CLASS }, resizable: { @@ -238,7 +271,8 @@ export const dialogMetadata = parseMetadata({ ], children: CONTENT_WITH_SPACING } - ] + ], + customCssOnlyForPreview: PARAGRAPH_SPACING_BODY_CONTAINER_CLASS }, adjustPosition: { @@ -268,9 +302,24 @@ export const dialogMetadata = parseMetadata({ { name: "resizable", value: true }, { name: "adjustPositionAfterResize", value: true } ], - children: CONTENT_WITH_SPACING + children: { + tag: "div", + children: [ + { + tag: "p", + class: P_BODY_CLASS, + children: "Resize from any border." + }, + { + tag: "p", + class: P_BODY_CLASS, + children: "The dialog will reposition." + } + ] + } } - ] + ], + customCssOnlyForPreview: DIALOG_INSTRUCTIONS_CONTAINER_STYLES }, // TODO: Fix z-index and closing issues @@ -329,9 +378,19 @@ export const dialogMetadata = parseMetadata({ { name: "show", value: "show" }, { name: "allowDrag", value: "box" } ], - children: CONTENT_WITH_SPACING + children: { + tag: "div", + children: [ + { + tag: "p", + class: P_BODY_CLASS, + children: "Press and drag." + } + ] + } } - ] + ], + customCssOnlyForPreview: DIALOG_INSTRUCTIONS_CONTAINER_STYLES } } } as const satisfies ComponentMetadata); diff --git a/packages/common/src/metadata/components/drop-down/metadata.ts b/packages/common/src/metadata/components/drop-down/metadata.ts index 238da9fc8..6577eabcb 100644 --- a/packages/common/src/metadata/components/drop-down/metadata.ts +++ b/packages/common/src/metadata/components/drop-down/metadata.ts @@ -30,7 +30,7 @@ const customContentExample2Css = `.custom-content-2-header-slot { display: flex; align-items: center; justify-content: space-between; - padding-inline-start: var(--mer-spacing--xs); + padding-inline-start: var(--size-8); } .custom-content-2-footer-slot { @@ -38,18 +38,18 @@ const customContentExample2Css = `.custom-content-2-header-slot { align-items: center; justify-content: space-between; min-inline-size: 200px; - padding-block: var(--mer-spacing--md) var(--mer-spacing--xs); - padding-inline: var(--mer-spacing--xs); - margin-block-start: var(--mer-spacing--2xs); - border-block-start: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); - gap: var(--mer-spacing--2xl); + padding-block: var(--size-8) var(--size-2); + padding-inline: var(--size-8); + margin-block-start: var(--size-4); + border-block-start: var(--size-1) solid + var(--color-border-surface-on-elevation-01); + gap: var(--size-40); } .toggle-theme-container { display: flex; align-items: center; - gap: var(--mer-spacing--xs); + gap: var(--size-8); } `; diff --git a/packages/common/src/metadata/components/list-box/metadata.ts b/packages/common/src/metadata/components/list-box/metadata.ts index c499decd6..64c052a97 100644 --- a/packages/common/src/metadata/components/list-box/metadata.ts +++ b/packages/common/src/metadata/components/list-box/metadata.ts @@ -17,7 +17,7 @@ export const listBoxMetadata = parseMetadata({ description: "A List Box component is a versatile UI element used to present a selectable list of items, offering users a straightforward way to make choices or navigate through options. It's commonly employed in forms, dropdown menus, and selection interfaces where space is limited. The list-box displays a series of options, allowing users to select one or multiple items from the list, depending on its configuration.", bundles: ["components/list-box", "chameleon/scrollbar"], - customCssOnlyForPreview: ".list-box { block-size: 168px }", + customCssOnlyForPreview: ".list-box { block-size: 154px }", codeSnippets: { plain: { linkId: "plain", diff --git a/packages/common/src/metadata/utility-classes/elevation/metadata.ts b/packages/common/src/metadata/utility-classes/elevation/metadata.ts index 465136c69..de3043195 100644 --- a/packages/common/src/metadata/utility-classes/elevation/metadata.ts +++ b/packages/common/src/metadata/utility-classes/elevation/metadata.ts @@ -8,12 +8,12 @@ export const CUSTOM_CSS_ONLY_FOR_PREVIEW_LAYOUT_ELEVATION = `:host { display: grid !important; place-content: center; grid-template-columns: 1fr; - border-radius: var(--mer-spacing--2xs); + border-radius: var(--size-4); inline-size: 100%; } div { - padding: var(--mer-spacing--md, var(--spacing--l)); + padding: var(--size-16, var(--spacing--l)); text-align: center; } `; diff --git a/packages/common/src/metadata/utility-classes/link/metadata.ts b/packages/common/src/metadata/utility-classes/link/metadata.ts new file mode 100644 index 000000000..ef845f38a --- /dev/null +++ b/packages/common/src/metadata/utility-classes/link/metadata.ts @@ -0,0 +1,60 @@ +import type { ComponentMetadata } from "../../../typings/component-metadata"; +import { parseMetadata } from "../../parseMetadata"; + +import { + LINK_PRIMARY_CLASS, + LINK_SECONDARY_CLASS, + LINK_TERTIARY_CLASS, + P_BODY_CLASS +} from "../../../html"; + +const CUSTOM_CSS_FOR_PREVIEW = `a { + cursor: pointer +}`; + +const CHILDREN = { + tag: "a", + children: "powerful tools for task management", + properties: [{ name: "type", value: "button" }] +}; + +export const linkMetadata = parseMetadata({ + title: "Layout", + description: + "A link in web design refers to a clickable element that connects one resource to another, guiding users through content or across websites. They are essential because they enable navigation by providing clear paths, improve usability by connecting related information, enhance accessibility when properly labeled, and support user flow by reducing friction. Effective links are visually distinct, contextually meaningful, and contribute to an intuitive and seamless browsing experience.", + bundles: ["utils/link"], + codeSnippets: { + primary: { + customCssOnlyForPreview: CUSTOM_CSS_FOR_PREVIEW, + linkId: "primary", + title: "1. Primary", + template: { + tag: "p", + class: P_BODY_CLASS, + children: { ...CHILDREN, class: LINK_PRIMARY_CLASS } + } + }, + + secondary: { + customCssOnlyForPreview: CUSTOM_CSS_FOR_PREVIEW, + linkId: "secondary", + title: "2. Secondary", + template: { + tag: "p", + class: P_BODY_CLASS, + children: { ...CHILDREN, class: LINK_SECONDARY_CLASS } + } + }, + + tertiary: { + customCssOnlyForPreview: CUSTOM_CSS_FOR_PREVIEW, + linkId: "tertiary", + title: "3. Tertiary", + template: { + tag: "p", + class: P_BODY_CLASS, + children: { ...CHILDREN, class: LINK_TERTIARY_CLASS } + } + } + } +} as const satisfies ComponentMetadata); diff --git a/packages/common/src/metadata/utility-classes/spacing/metadata.ts b/packages/common/src/metadata/utility-classes/spacing/metadata.ts index 39b11718d..3b3b51b10 100644 --- a/packages/common/src/metadata/utility-classes/spacing/metadata.ts +++ b/packages/common/src/metadata/utility-classes/spacing/metadata.ts @@ -9,13 +9,13 @@ export const CUSTOM_CSS_ONLY_FOR_PREVIEW_SPACING = `[class^="spacing-"] { background-color: var(--mer-color__tinted-green--60); border-radius: var(--mer-border__radius--xs); div { - border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01); - border-radius: var(--mer-border__radius--xs); - background-color: var(--mer-surface__elevation--02); + border: var(--size-1) solid var(--color-accent-surface-elevation-01); + border-radius: var(--size-2); + background-color: var(--color-accent-surface-elevation-02); display: grid; align-content: center; justify-content: center; - font-size: var(--mer-font__size--xs); + font-size: var(--font-size-body-medium); block-size: 200px; } }`; diff --git a/packages/common/src/metadata/utility-classes/typography/metadata.ts b/packages/common/src/metadata/utility-classes/typography/metadata.ts index e693f6686..0cf663a58 100644 --- a/packages/common/src/metadata/utility-classes/typography/metadata.ts +++ b/packages/common/src/metadata/utility-classes/typography/metadata.ts @@ -5,7 +5,8 @@ import { parseMetadata } from "../../parseMetadata"; const HEADING_CONTENT: ComponentTemplateModel = `GeneXus: Shaping Tomorrow's Technology Landscape with Innovative Solutions`; const SUBTITLE_CONTENT: ComponentTemplateModel = `GeneXus: Leading the Digital Transformation with Intelligent Software Solutions, Enabling Businesses to Innovate Faster and Scale Seamlessly in a Rapidly Evolving Technological Landscape`; const BODY_CONTENT: ComponentTemplateModel = `GeneXus: Leading the Digital Transformation with Intelligent Software Solutions, Enabling Businesses to Innovate Faster and Scale Seamlessly in a Rapidly Evolving Technological Landscape`; -const BODY_TINY_CONTENT: ComponentTemplateModel = `GeneXus: Leading the Digital Transformation with Intelligent Software Solutions, Enabling Businesses to Innovate Faster and Scale Seamlessly in a Rapidly Evolving Technological Landscape`; +const CAPTION_CONTENT: ComponentTemplateModel = `GeneXus: Leading the Digital Transformation with Intelligent Software Solutions, Enabling Businesses to Innovate Faster and Scale Seamlessly in a Rapidly Evolving Technological Landscape`; +const CODE_CONTENT: ComponentTemplateModel = `/* This routine initializes the customer entity with the values provided by the user interface controls, validates the input according to the business rules defined for the customer domain, and if all validations pass it commits the changes to the database so that the customer information becomes persistent and available for subsequent processes; otherwise, it collects every validation error encountered, concatenates the messages into a single human-readable string, and displays that information back to the user, ensuring that no invalid data is ever stored while also providing clear feedback about what needs to be corrected before retrying the operation */`; export const typographyMetadata = parseMetadata({ title: "Typography", @@ -52,9 +53,17 @@ export const typographyMetadata = parseMetadata({ // Subtitles Regular + subtitleRegularXL: { + linkId: "subtitle-regular-xl", + title: "2.1. Subtitle Regular: Extra Large", + template: [ + { tag: "p", class: "subtitle-regular-xl", children: SUBTITLE_CONTENT } + ] + }, + subtitleRegularL: { linkId: "subtitle-regular-l", - title: "2.1. Subtitle Regular: Large", + title: "2.2. Subtitle Regular: Large", template: [ { tag: "p", class: "subtitle-regular-l", children: SUBTITLE_CONTENT } ] @@ -62,7 +71,7 @@ export const typographyMetadata = parseMetadata({ subtitleRegularM: { linkId: "subtitle-regular-m", - title: "2.2. Subtitle Regular: Medium", + title: "2.3. Subtitle Regular: Medium", template: [ { tag: "p", class: "subtitle-regular-m", children: SUBTITLE_CONTENT } ] @@ -70,7 +79,7 @@ export const typographyMetadata = parseMetadata({ subtitleRegularS: { linkId: "subtitle-regular-s", - title: "2.3. Subtitle Regular: Small", + title: "2.4. Subtitle Regular: Small", template: [ { tag: "p", class: "subtitle-regular-s", children: SUBTITLE_CONTENT } ] @@ -78,16 +87,25 @@ export const typographyMetadata = parseMetadata({ subtitleRegularXS: { linkId: "subtitle-regular-xs", - title: "2.4. Subtitle Regular: Extra Small", + title: "2.5. Subtitle Regular: Extra Small", template: [ { tag: "p", class: "subtitle-regular-xs", children: SUBTITLE_CONTENT } ] }, // Subtitles SemiBold + + subtitleSemiBoldXL: { + linkId: "subtitle-semi-bold-xl", + title: "3.1. Subtitle SemiBold: Extra Large", + template: [ + { tag: "p", class: "subtitle-semi-bold-xl", children: SUBTITLE_CONTENT } + ] + }, + subtitleSemiBoldL: { linkId: "subtitle-semi-bold-l", - title: "3.1. Subtitle SemiBold: Large", + title: "3.2. Subtitle SemiBold: Large", template: [ { tag: "p", class: "subtitle-semi-bold-l", children: SUBTITLE_CONTENT } ] @@ -95,7 +113,7 @@ export const typographyMetadata = parseMetadata({ subtitleSemiBoldM: { linkId: "subtitle-semi-bold-m", - title: "3.2. Subtitle SemiBold: Medium", + title: "3.3. Subtitle SemiBold: Medium", template: [ { tag: "p", class: "subtitle-semi-bold-m", children: SUBTITLE_CONTENT } ] @@ -103,7 +121,7 @@ export const typographyMetadata = parseMetadata({ subtitleSemiBoldS: { linkId: "subtitle-semi-bold-s", - title: "3.3. Subtitle SemiBold: Small", + title: "3.4. Subtitle SemiBold: Small", template: [ { tag: "p", class: "subtitle-semi-bold-s", children: SUBTITLE_CONTENT } ] @@ -111,13 +129,14 @@ export const typographyMetadata = parseMetadata({ subtitleSemiBoldXS: { linkId: "subtitle-semi-bold-xs", - title: "3.4. Subtitle SemiBold: Extra Small", + title: "3.5. Subtitle SemiBold: Extra Small", template: [ { tag: "p", class: "subtitle-semi-bold-xs", children: SUBTITLE_CONTENT } ] }, // Body Regular + bodyRegularXL: { linkId: "body-regular-xl", title: "4.1. Body Regular: Extra Large", @@ -149,6 +168,7 @@ export const typographyMetadata = parseMetadata({ }, // Body SemiBold + bodySemiBoldXL: { linkId: "body-semi-bold-xl", title: "5.1. Body SemiBold: Extra Large", @@ -193,7 +213,7 @@ export const typographyMetadata = parseMetadata({ bodyItalicXL: { linkId: "body-italic-xl", - title: "6.1. Body Italic: XLarge", + title: "6.1. Body Italic: Extra Large", template: [{ tag: "p", class: "body-italic-xl", children: BODY_CONTENT }] }, @@ -221,84 +241,92 @@ export const typographyMetadata = parseMetadata({ template: [{ tag: "p", class: "body-italic-xs", children: BODY_CONTENT }] }, - // Tiny Regular - bodyTinyRegularL: { - linkId: "tiny-regular-l", - title: "7.1. Tiny Regular: Large", + // Caption Regular + + captionRegularL: { + linkId: "caption-regular-l", + title: "7.1. Caption Regular: Large", template: [ - { tag: "p", class: "tiny-regular-l", children: BODY_TINY_CONTENT } + { tag: "p", class: "caption-regular-l", children: CAPTION_CONTENT } ] }, - bodyTinyRegularM: { - linkId: "tiny-regular-m", - title: "7.2. Tiny Regular: Medium", + captionRegularM: { + linkId: "caption-regular-m", + title: "7.2. Caption Regular: Medium", template: [ - { tag: "p", class: "tiny-regular-m", children: BODY_TINY_CONTENT } + { tag: "p", class: "caption-regular-m", children: CAPTION_CONTENT } ] }, - bodyTinyRegularS: { - linkId: "tiny-regular-s", - title: "7.3. Tiny Regular: Small", + captionRegularS: { + linkId: "caption-regular-s", + title: "7.3. Caption Regular: Small", template: [ - { tag: "p", class: "tiny-regular-s", children: BODY_TINY_CONTENT } + { tag: "p", class: "caption-regular-s", children: CAPTION_CONTENT } ] }, - bodyTinyRegularXS: { - linkId: "tiny-regular-xs", - title: "7.4. Tiny Regular: Extra Small", + // Caption SemiBold + + captionSemiBoldL: { + linkId: "caption-semi-bold-l", + title: "8.1. Caption SemiBold: Large", template: [ - { tag: "p", class: "tiny-regular-xs", children: BODY_TINY_CONTENT } + { + tag: "p", + class: "caption-semi-bold-l", + children: CAPTION_CONTENT + } ] }, - // Tiny SemiBold - bodyTinySemiBoldL: { - linkId: "tiny-semi-bold-l", - title: "8.1. Tiny SemiBold: Large", + captionSemiBoldM: { + linkId: "caption-semi-bold-m", + title: "8.2. Caption SemiBold: Medium", template: [ { tag: "p", - class: "tiny-semi-bold-l", - children: BODY_TINY_CONTENT + class: "caption-semi-bold-m", + children: CAPTION_CONTENT } ] }, - bodyTinySemiBoldM: { - linkId: "tiny-semi-bold-m", - title: "8.2. Tiny SemiBold: Medium", + captionSemiBoldS: { + linkId: "caption-semi-bold-s", + title: "8.3. Caption SemiBold: Small", template: [ { tag: "p", - class: "tiny-semi-bold-m", - children: BODY_TINY_CONTENT + class: "caption-semi-bold-s", + children: CAPTION_CONTENT } ] }, - bodyTinySemiBoldS: { - linkId: "tiny-semi-bold-s", - title: "8.3. Tiny SemiBold: Small", + // Code + + codeM: { + linkId: "code-m", + title: "9.1. Code: Medium", template: [ { - tag: "p", - class: "tiny-semi-bold-s", - children: BODY_TINY_CONTENT + tag: "code", + class: "code-regular-m", + children: CODE_CONTENT } ] }, - bodyTinySemiBoldXS: { - linkId: "tiny-semi-bold-xs", - title: "8.4. Tiny SemiBold: Extra Small", + codeS: { + linkId: "code-s", + title: "9.2. Code: Small", template: [ { - tag: "p", - class: "tiny-semi-bold-xs", - children: BODY_TINY_CONTENT + tag: "code", + class: "code-s", + children: CODE_CONTENT } ] } diff --git a/packages/mercury/copy-tasks.js b/packages/mercury/copy-tasks.js index ef3ab8586..4a30adf12 100644 --- a/packages/mercury/copy-tasks.js +++ b/packages/mercury/copy-tasks.js @@ -8,8 +8,9 @@ const GENERATED_ICONS_DIR = path.join( `icons/${SVG_SASS_GENERATOR_GENERATED_FOLDER}` ); -const DIST_ASSETS_DIR = "./dist/assets/"; -const DIST_ICONS_DIR = path.join(DIST_ASSETS_DIR, "icons"); +const DIST_DIR_PATH = "./dist/"; +const DIST_ASSETS_DIR_PATH = "./dist/assets/"; +const DIST_ICONS_DIR_PATH = path.join(DIST_ASSETS_DIR_PATH, "icons"); // Copy Folders const copyFolderSync = (source, target) => { @@ -38,35 +39,7 @@ const copyFolderSync = (source, target) => { }); }; -// Copy File -const copyFileToFolder = (sourceFile, targetFolder) => { - // Check if the source file exists - if (!fs.existsSync(sourceFile)) { - console.error(`Source file does not exist: ${sourceFile}`); - return; - } - - // Check if the source path is actually a file - if (!fs.lstatSync(sourceFile).isFile()) { - console.error(`Source path is not a file: ${sourceFile}`); - return; - } - - // Check if the target folder exists; if not, create it - if (!fs.existsSync(targetFolder)) { - fs.mkdirSync(targetFolder, { recursive: true }); - } - - // Get the base name of the source file to use in the target path - const fileName = path.basename(sourceFile); - const targetPath = path.join(targetFolder, fileName); - - // Copy the file - fs.copyFileSync(sourceFile, targetPath); - console.log(`File copied from ${sourceFile} to ${targetPath}`); -}; - -copyFolderSync(SRC_ASSETS_DIR, DIST_ASSETS_DIR); -copyFolderSync(GENERATED_ICONS_DIR, DIST_ICONS_DIR); +copyFolderSync(SRC_ASSETS_DIR, DIST_ASSETS_DIR_PATH); +copyFolderSync(GENERATED_ICONS_DIR, DIST_ICONS_DIR_PATH); console.log("copy-tasks.js copied successfully"); diff --git a/packages/mercury/git-status.sh b/packages/mercury/git-status.sh new file mode 100644 index 000000000..c9fe611b1 --- /dev/null +++ b/packages/mercury/git-status.sh @@ -0,0 +1,4784 @@ +Changes to be committed: + modified: .github/workflows/install-and-deploy.yml + modified: .github/workflows/node.js.yml + modified: .github/workflows/npmpublish.yml + modified: .gitignore + modified: .vscode/extensions.json + modified: .vscode/settings.json + new file: package-lock.json + modified: package.json + new file: packages/common/.env.example + modified: packages/common/.gitignore + new file: packages/common/.prettierignore + new file: packages/common/.prettierrc.json + new file: packages/common/README.md + modified: packages/common/_resets.scss + new file: packages/common/delete-pngs.ts + new file: packages/common/eslint.config.js + new file: packages/common/generate-pngs.ts + new file: packages/common/package.json + renamed: packages/showcase/src/user-controls/template-render/renders.ts -> packages/common/src/components/template-render/renders.ts + renamed: packages/showcase/src/user-controls/template-render/template-render.ts -> packages/common/src/components/template-render/template-render.ts + renamed: packages/showcase/src/common/html.ts -> packages/common/src/html.ts + new file: packages/common/src/index.ts + renamed: packages/showcase/src/app/components/accordion/common.ts -> packages/common/src/metadata/components/accordion/common.ts + renamed: packages/showcase/src/app/components/accordion/metadata.ts -> packages/common/src/metadata/components/accordion/metadata.ts + renamed: packages/showcase/src/app/components/accordion/models.ts -> packages/common/src/metadata/components/accordion/models.ts + renamed: packages/showcase/src/app/components/button/common.ts -> packages/common/src/metadata/components/button/common.ts + renamed: packages/showcase/src/app/components/button/metadata.ts -> packages/common/src/metadata/components/button/metadata.ts + renamed: packages/showcase/src/app/components/checkbox/metadata.ts -> packages/common/src/metadata/components/checkbox/metadata.ts + renamed: packages/showcase/src/app/components/combo-box/metadata.ts -> packages/common/src/metadata/components/combo-box/metadata.ts + renamed: packages/showcase/src/app/components/combo-box/models.ts -> packages/common/src/metadata/components/combo-box/models.ts + renamed: packages/showcase/src/app/components/dialog/metadata.ts -> packages/common/src/metadata/components/dialog/metadata.ts + renamed: packages/showcase/src/app/components/drop-down/metadata.ts -> packages/common/src/metadata/components/drop-down/metadata.ts + renamed: packages/showcase/src/app/components/drop-down/models.ts -> packages/common/src/metadata/components/drop-down/models.ts + renamed: packages/showcase/src/app/components/icon/metadata.ts -> packages/common/src/metadata/components/icon/metadata.ts + renamed: packages/showcase/src/app/components/input/metadata.ts -> packages/common/src/metadata/components/input/metadata.ts + renamed: packages/showcase/src/app/components/label/metadata.ts -> packages/common/src/metadata/components/label/metadata.ts + renamed: packages/showcase/src/app/components/list-box/metadata.ts -> packages/common/src/metadata/components/list-box/metadata.ts + renamed: packages/showcase/src/app/components/list-box/models.ts -> packages/common/src/metadata/components/list-box/models.ts + renamed: packages/showcase/src/app/components/paginator/metadata.ts -> packages/common/src/metadata/components/paginator/metadata.ts + renamed: packages/showcase/src/app/components/paginator/models.ts -> packages/common/src/metadata/components/paginator/models.ts + renamed: packages/showcase/src/app/components/pill/metadata.ts -> packages/common/src/metadata/components/pill/metadata.ts + renamed: packages/showcase/src/app/components/pill/models.ts -> packages/common/src/metadata/components/pill/models.ts + renamed: packages/showcase/src/app/components/radio-group/metadata.ts -> packages/common/src/metadata/components/radio-group/metadata.ts + renamed: packages/showcase/src/app/components/radio-group/models.ts -> packages/common/src/metadata/components/radio-group/models.ts + renamed: packages/showcase/src/app/components/search/metadata.ts -> packages/common/src/metadata/components/search/metadata.ts + renamed: packages/showcase/src/app/components/segmented-control/metadata.ts -> packages/common/src/metadata/components/segmented-control/metadata.ts + renamed: packages/showcase/src/app/components/segmented-control/models.ts -> packages/common/src/metadata/components/segmented-control/models.ts + renamed: packages/showcase/src/app/components/slider/metadata.ts -> packages/common/src/metadata/components/slider/metadata.ts + renamed: packages/showcase/src/app/components/switch/metadata.ts -> packages/common/src/metadata/components/switch/metadata.ts + renamed: packages/showcase/src/app/components/tab/metadata.ts -> packages/common/src/metadata/components/tab/metadata.ts + renamed: packages/showcase/src/app/components/tab/models.ts -> packages/common/src/metadata/components/tab/models.ts + renamed: packages/showcase/src/app/components/tabular-grid/classes.ts -> packages/common/src/metadata/components/tabular-grid/classes.ts + renamed: packages/showcase/src/app/components/tabular-grid/metadata.ts -> packages/common/src/metadata/components/tabular-grid/metadata.ts + renamed: packages/showcase/src/app/components/tooltip/metadata.ts -> packages/common/src/metadata/components/tooltip/metadata.ts + renamed: packages/showcase/src/app/components/tree-view/metadata.ts -> packages/common/src/metadata/components/tree-view/metadata.ts + renamed: packages/showcase/src/app/components/tree-view/models.ts -> packages/common/src/metadata/components/tree-view/models.ts + new file: packages/common/src/metadata/parseMetadata.ts + renamed: packages/showcase/src/app/utility-classes/elevation/metadata.ts -> packages/common/src/metadata/utility-classes/elevation/metadata.ts + renamed: packages/showcase/src/app/utility-classes/form/metadata.ts -> packages/common/src/metadata/utility-classes/form/metadata.ts + renamed: packages/showcase/src/app/utility-classes/layout/metadata.ts -> packages/common/src/metadata/utility-classes/layout/metadata.ts + renamed: packages/showcase/src/app/utility-classes/spacing/metadata.ts -> packages/common/src/metadata/utility-classes/spacing/metadata.ts + renamed: packages/showcase/src/app/utility-classes/typography/metadata.ts -> packages/common/src/metadata/utility-classes/typography/metadata.ts + new file: packages/common/src/tests/screenshot/compare-images.ts + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/base/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/focus/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/accordion/hover/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/base/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/focus/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/button/hover/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/base/01--checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/base/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/base/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/base/04--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/base/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/base/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/base/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/focus/01--checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/focus/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/focus/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/focus/04--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/focus/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/focus/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/focus/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/hover/01--checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/hover/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/hover/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/hover/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/hover/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/checkbox/hover/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/expanded-hover-item/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/expanded-hover-item/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/expanded-hover-item/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/expanded-hover-item/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/expanded/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/expanded/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/combo-box/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/base/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/base/03--with-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/base/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/base/05--resizable.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/base/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/base/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/expanded/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/expanded/03--with-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/expanded/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/expanded/05--resizable.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/expanded/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dialog/expanded/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/base/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded-hover-item/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/expanded/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/focus/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/dropdown/hover/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/icon/base/01--icon-source.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/icon/base/02--size-small.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/icon/base/03--size-medium.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/icon/base/04--mask.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/base/03--with-value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/base/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/base/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/focus/03--with-value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/focus/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/focus/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/hover/03--with-value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/hover/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/input/hover/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/label/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/label/base/02--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/label/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/paginator/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/paginator/base/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/paginator/base/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/paginator/expanded-combo-box/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/paginator/expanded-combo-box/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/paginator/expanded-combo-box/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/paginator/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/paginator/focus/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/paginator/focus/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/paginator/hover-page/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/paginator/hover-page/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/paginator/hover-page/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/base/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/base/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/base/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/base/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/base/08--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/base/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/expanded/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/expanded/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/expanded/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/expanded/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/expanded/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/focus/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/focus/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/focus/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/focus/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/focus/08--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/focus/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/hover/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/hover/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/hover/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/hover/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/pill/hover/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/radio-group/base/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/radio-group/base/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/radio-group/focus/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/radio-group/focus/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/radio-group/hover/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/radio-group/hover/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/base/03--value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/focus/03--value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/hover/03--value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/search/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/segmented-control/base/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/segmented-control/base/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/segmented-control/base/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/segmented-control/base/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/segmented-control/focus/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/segmented-control/focus/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/segmented-control/focus/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/segmented-control/focus/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/segmented-control/hover/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/segmented-control/hover/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/segmented-control/hover/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/slider/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/slider/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/slider/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/slider/base/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/slider/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/slider/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/slider/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/slider/focus/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/slider/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/slider/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/slider/hover/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/base/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/base/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/base/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/base/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/base/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/base/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/focus/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/focus/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/focus/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/focus/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/focus/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/focus/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/hover/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/hover/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/hover/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/switch/hover/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/base/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/focus/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/hover/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/hover/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/hover/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/hover/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/hover/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/hover/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/hover/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/hover/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/hover/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/hover/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tab/hover/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/10--row-action.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/base/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/10--row-action.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tabular-grid/hover/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/base/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/base/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/base/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/expanded/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/expanded/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/expanded/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/expanded/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/focus/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/focus/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/focus/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/focus/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/hover/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/hover/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/hover/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tooltip/hover/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/base/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/base/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/base/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/focus/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/focus/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/focus/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/hover/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/hover/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/components/tree-view/hover/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/elevation/base/01--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/elevation/base/02--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/elevation/base/03--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/form/base/01--field-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/form/base/02--field-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/form/base/03--field-group-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/form/base/04--field-group-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/form/base/05--field-group-justified-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/form/base/06--field-group-justified-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/form/base/07--custom-layout.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/layout/base/01--one-column.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/layout/base/02--two-columns.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/layout/base/03--three-columns.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/layout/base/04--four-columns.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/layout/base/05--two-columns-1-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/layout/base/06--two-columns-2-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/layout/base/07--spacing-body.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/spacing/base/01--spacing-body-inline-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/spacing/base/02--spacing-body-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/spacing/base/03--spacing-body-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/spacing/base/04--spacing-body-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/spacing/base/05--spacing-body-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/spacing/base/06--spacing-body-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/spacing/base/07--spacing-body-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/01--heading-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/02--heading-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/03--heading-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/04--heading-4.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/05--heading-5.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/06--heading-6.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/07--subtitle-regular-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/08--subtitle-regular-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/09--subtitle-regular-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/10--subtitle-regular-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/11--subtitle-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/12--subtitle-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/13--subtitle-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/14--subtitle-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/15--body-regular-xl.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/16--body-regular-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/17--body-regular-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/18--body-regular-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/19--body-regular-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/20--body-semi-bold-xl.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/21--body-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/22--body-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/23--body-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/24--body-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/25--body-italic-xl.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/26--body-italic-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/27--body-italic-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/28--body-italic-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/29--body-italic-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/30--tiny-regular-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/31--tiny-regular-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/32--tiny-regular-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/33--tiny-regular-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/34--tiny-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/35--tiny-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/36--tiny-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/dark/utility-classes/typography/base/37--tiny-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/base/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/focus/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/accordion/hover/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/base/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/focus/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/button/hover/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/base/01--checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/base/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/base/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/base/04--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/base/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/base/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/base/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/focus/01--checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/focus/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/focus/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/focus/04--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/focus/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/focus/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/focus/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/hover/01--checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/hover/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/hover/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/hover/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/hover/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/checkbox/hover/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/expanded-hover-item/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/expanded-hover-item/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/expanded-hover-item/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/expanded-hover-item/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/expanded/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/expanded/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/combo-box/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/base/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/base/03--with-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/base/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/base/05--resizable.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/base/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/base/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/expanded/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/expanded/03--with-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/expanded/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/expanded/05--resizable.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/expanded/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dialog/expanded/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/base/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded-hover-item/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/expanded/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/focus/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/dropdown/hover/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/icon/base/01--icon-source.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/icon/base/02--size-small.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/icon/base/03--size-medium.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/icon/base/04--mask.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/base/03--with-value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/base/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/base/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/focus/03--with-value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/focus/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/focus/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/hover/03--with-value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/hover/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/input/hover/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/label/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/label/base/02--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/label/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/paginator/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/paginator/base/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/paginator/base/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/paginator/expanded-combo-box/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/paginator/expanded-combo-box/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/paginator/expanded-combo-box/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/paginator/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/paginator/focus/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/paginator/focus/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/paginator/hover-page/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/paginator/hover-page/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/paginator/hover-page/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/base/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/base/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/base/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/base/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/base/08--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/base/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/expanded/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/expanded/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/expanded/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/expanded/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/expanded/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/focus/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/focus/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/focus/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/focus/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/focus/08--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/focus/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/hover/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/hover/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/hover/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/hover/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/pill/hover/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/radio-group/base/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/radio-group/base/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/radio-group/focus/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/radio-group/focus/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/radio-group/hover/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/radio-group/hover/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/base/03--value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/focus/03--value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/hover/03--value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/search/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/segmented-control/base/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/segmented-control/base/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/segmented-control/base/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/segmented-control/base/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/segmented-control/focus/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/segmented-control/focus/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/segmented-control/focus/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/segmented-control/focus/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/segmented-control/hover/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/segmented-control/hover/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/segmented-control/hover/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/slider/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/slider/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/slider/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/slider/base/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/slider/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/slider/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/slider/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/slider/focus/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/slider/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/slider/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/slider/hover/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/base/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/base/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/base/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/base/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/base/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/base/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/focus/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/focus/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/focus/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/focus/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/focus/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/focus/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/hover/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/hover/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/hover/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/switch/hover/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/base/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/focus/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/hover/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/hover/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/hover/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/hover/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/hover/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/hover/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/hover/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/hover/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/hover/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/hover/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tab/hover/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/10--row-action.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/base/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/10--row-action.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tabular-grid/hover/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/base/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/base/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/base/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/expanded/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/expanded/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/expanded/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/expanded/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/focus/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/focus/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/focus/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/focus/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/hover/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/hover/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/hover/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tooltip/hover/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/base/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/base/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/base/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/focus/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/focus/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/focus/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/hover/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/hover/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/components/tree-view/hover/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/elevation/base/01--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/elevation/base/02--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/elevation/base/03--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/form/base/01--field-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/form/base/02--field-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/form/base/03--field-group-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/form/base/04--field-group-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/form/base/05--field-group-justified-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/form/base/06--field-group-justified-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/form/base/07--custom-layout.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/layout/base/01--one-column.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/layout/base/02--two-columns.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/layout/base/03--three-columns.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/layout/base/04--four-columns.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/layout/base/05--two-columns-1-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/layout/base/06--two-columns-2-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/layout/base/07--spacing-body.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/spacing/base/01--spacing-body-inline-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/spacing/base/02--spacing-body-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/spacing/base/03--spacing-body-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/spacing/base/04--spacing-body-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/spacing/base/05--spacing-body-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/spacing/base/06--spacing-body-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/spacing/base/07--spacing-body-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/01--heading-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/02--heading-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/03--heading-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/04--heading-4.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/05--heading-5.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/06--heading-6.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/07--subtitle-regular-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/08--subtitle-regular-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/09--subtitle-regular-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/10--subtitle-regular-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/11--subtitle-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/12--subtitle-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/13--subtitle-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/14--subtitle-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/15--body-regular-xl.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/16--body-regular-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/17--body-regular-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/18--body-regular-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/19--body-regular-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/20--body-semi-bold-xl.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/21--body-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/22--body-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/23--body-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/24--body-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/25--body-italic-xl.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/26--body-italic-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/27--body-italic-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/28--body-italic-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/29--body-italic-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/30--tiny-regular-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/31--tiny-regular-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/32--tiny-regular-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/33--tiny-regular-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/34--tiny-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/35--tiny-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/36--tiny-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury-globant/light/utility-classes/typography/base/37--tiny-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/base/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/focus/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/accordion/hover/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/base/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/focus/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/button/hover/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/base/01--checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/base/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/base/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/base/04--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/base/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/base/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/base/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/focus/01--checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/focus/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/focus/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/focus/04--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/focus/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/focus/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/focus/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/hover/01--checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/hover/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/hover/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/hover/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/hover/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/checkbox/hover/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/expanded-hover-item/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/expanded-hover-item/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/expanded-hover-item/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/expanded-hover-item/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/expanded/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/expanded/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/combo-box/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/base/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/base/03--with-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/base/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/base/05--resizable.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/base/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/base/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/expanded/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/expanded/03--with-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/expanded/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/expanded/05--resizable.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/expanded/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dialog/expanded/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/base/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded-hover-item/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/expanded/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/focus/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/dropdown/hover/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/icon/base/01--icon-source.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/icon/base/02--size-small.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/icon/base/03--size-medium.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/icon/base/04--mask.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/base/03--with-value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/base/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/base/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/focus/03--with-value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/focus/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/focus/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/hover/03--with-value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/hover/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/input/hover/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/label/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/label/base/02--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/label/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/paginator/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/paginator/base/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/paginator/base/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/paginator/expanded-combo-box/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/paginator/expanded-combo-box/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/paginator/expanded-combo-box/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/paginator/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/paginator/focus/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/paginator/focus/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/paginator/hover-page/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/paginator/hover-page/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/paginator/hover-page/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/base/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/base/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/base/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/base/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/base/08--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/base/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/expanded/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/expanded/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/expanded/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/expanded/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/expanded/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/focus/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/focus/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/focus/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/focus/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/focus/08--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/focus/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/hover/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/hover/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/hover/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/hover/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/pill/hover/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/radio-group/base/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/radio-group/base/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/radio-group/focus/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/radio-group/focus/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/radio-group/hover/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/radio-group/hover/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/base/03--value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/focus/03--value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/hover/03--value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/search/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/segmented-control/base/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/segmented-control/base/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/segmented-control/base/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/segmented-control/base/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/segmented-control/focus/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/segmented-control/focus/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/segmented-control/focus/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/segmented-control/focus/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/segmented-control/hover/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/segmented-control/hover/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/segmented-control/hover/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/slider/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/slider/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/slider/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/slider/base/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/slider/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/slider/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/slider/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/slider/focus/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/slider/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/slider/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/slider/hover/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/base/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/base/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/base/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/base/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/base/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/base/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/focus/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/focus/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/focus/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/focus/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/focus/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/focus/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/hover/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/hover/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/hover/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/switch/hover/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/base/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/focus/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/hover/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/hover/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/hover/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/hover/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/hover/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/hover/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/hover/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/hover/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/hover/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/hover/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tab/hover/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/10--row-action.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/base/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/10--row-action.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tabular-grid/hover/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/base/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/base/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/base/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/expanded/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/expanded/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/expanded/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/expanded/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/focus/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/focus/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/focus/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/focus/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/hover/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/hover/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/hover/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tooltip/hover/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/base/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/base/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/base/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/focus/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/focus/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/focus/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/hover/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/hover/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/components/tree-view/hover/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/elevation/base/01--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/elevation/base/02--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/elevation/base/03--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/form/base/01--field-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/form/base/02--field-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/form/base/03--field-group-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/form/base/04--field-group-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/form/base/05--field-group-justified-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/form/base/06--field-group-justified-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/form/base/07--custom-layout.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/layout/base/01--one-column.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/layout/base/02--two-columns.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/layout/base/03--three-columns.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/layout/base/04--four-columns.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/layout/base/05--two-columns-1-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/layout/base/06--two-columns-2-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/layout/base/07--spacing-body.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/spacing/base/01--spacing-body-inline-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/spacing/base/02--spacing-body-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/spacing/base/03--spacing-body-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/spacing/base/04--spacing-body-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/spacing/base/05--spacing-body-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/spacing/base/06--spacing-body-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/spacing/base/07--spacing-body-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/01--heading-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/02--heading-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/03--heading-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/04--heading-4.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/05--heading-5.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/06--heading-6.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/07--subtitle-regular-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/08--subtitle-regular-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/09--subtitle-regular-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/10--subtitle-regular-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/11--subtitle-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/12--subtitle-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/13--subtitle-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/14--subtitle-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/15--body-regular-xl.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/16--body-regular-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/17--body-regular-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/18--body-regular-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/19--body-regular-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/20--body-semi-bold-xl.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/21--body-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/22--body-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/23--body-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/24--body-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/25--body-italic-xl.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/26--body-italic-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/27--body-italic-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/28--body-italic-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/29--body-italic-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/30--tiny-regular-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/31--tiny-regular-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/32--tiny-regular-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/33--tiny-regular-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/34--tiny-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/35--tiny-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/36--tiny-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/dark/utility-classes/typography/base/37--tiny-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/base/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/focus/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/accordion/hover/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/base/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/focus/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/button/hover/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/base/01--checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/base/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/base/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/base/04--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/base/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/base/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/base/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/focus/01--checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/focus/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/focus/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/focus/04--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/focus/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/focus/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/focus/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/hover/01--checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/hover/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/hover/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/hover/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/hover/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/checkbox/hover/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/expanded-hover-item/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/expanded-hover-item/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/expanded-hover-item/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/expanded-hover-item/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/expanded/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/expanded/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/combo-box/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/base/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/base/03--with-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/base/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/base/05--resizable.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/base/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/base/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/expanded/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/expanded/03--with-header.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/expanded/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/expanded/05--resizable.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/expanded/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dialog/expanded/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/base/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded-hover-item/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/expanded/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/focus/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/01--plain.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/02--nested.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/12--with-links.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/dropdown/hover/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/icon/base/01--icon-source.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/icon/base/02--size-small.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/icon/base/03--size-medium.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/icon/base/04--mask.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/base/03--with-value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/base/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/base/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/focus/03--with-value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/focus/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/focus/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/hover/03--with-value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/hover/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/input/hover/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/label/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/label/base/02--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/label/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/paginator/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/paginator/base/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/paginator/base/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/paginator/expanded-combo-box/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/paginator/expanded-combo-box/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/paginator/expanded-combo-box/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/paginator/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/paginator/focus/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/paginator/focus/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/paginator/hover-page/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/paginator/hover-page/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/paginator/hover-page/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/base/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/base/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/base/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/base/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/base/08--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/base/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/expanded/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/expanded/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/expanded/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/expanded/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/expanded/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/focus/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/focus/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/focus/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/focus/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/focus/08--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/focus/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/hover/03--enabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/hover/05--success.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/hover/06--warning.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/hover/07--error.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/pill/hover/09--grouped.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/radio-group/base/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/radio-group/base/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/radio-group/focus/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/radio-group/focus/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/radio-group/hover/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/radio-group/hover/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/base/03--value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/focus/03--value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/hover/03--value.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/search/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/segmented-control/base/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/segmented-control/base/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/segmented-control/base/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/segmented-control/base/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/segmented-control/focus/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/segmented-control/focus/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/segmented-control/focus/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/segmented-control/focus/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/segmented-control/hover/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/segmented-control/hover/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/segmented-control/hover/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/slider/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/slider/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/slider/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/slider/base/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/slider/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/slider/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/slider/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/slider/focus/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/slider/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/slider/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/slider/hover/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/base/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/base/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/base/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/base/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/base/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/base/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/focus/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/focus/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/focus/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/focus/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/focus/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/focus/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/hover/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/hover/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/hover/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/switch/hover/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/base/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/focus/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/hover/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/hover/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/hover/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/hover/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/hover/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/hover/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/hover/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/hover/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/hover/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/hover/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tab/hover/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/10--row-action.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/base/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/10--row-action.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tabular-grid/hover/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/base/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/base/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/base/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/expanded/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/expanded/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/expanded/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/expanded/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/focus/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/focus/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/focus/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/focus/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/hover/01--block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/hover/02--block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/hover/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tooltip/hover/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/base/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/base/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/base/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/base/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/focus/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/focus/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/focus/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/hover/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/hover/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/components/tree-view/hover/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/elevation/base/01--elevation-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/elevation/base/02--elevation-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/elevation/base/03--elevation-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/form/base/01--field-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/form/base/02--field-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/form/base/03--field-group-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/form/base/04--field-group-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/form/base/05--field-group-justified-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/form/base/06--field-group-justified-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/form/base/07--custom-layout.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/layout/base/01--one-column.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/layout/base/02--two-columns.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/layout/base/03--three-columns.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/layout/base/04--four-columns.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/layout/base/05--two-columns-1-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/layout/base/06--two-columns-2-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/layout/base/07--spacing-body.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/spacing/base/01--spacing-body-inline-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/spacing/base/02--spacing-body-block.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/spacing/base/03--spacing-body-block-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/spacing/base/04--spacing-body-block-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/spacing/base/05--spacing-body-inline.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/spacing/base/06--spacing-body-inline-start.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/spacing/base/07--spacing-body-inline-end.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/01--heading-1.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/02--heading-2.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/03--heading-3.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/04--heading-4.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/05--heading-5.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/06--heading-6.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/07--subtitle-regular-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/08--subtitle-regular-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/09--subtitle-regular-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/10--subtitle-regular-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/11--subtitle-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/12--subtitle-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/13--subtitle-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/14--subtitle-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/15--body-regular-xl.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/16--body-regular-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/17--body-regular-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/18--body-regular-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/19--body-regular-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/20--body-semi-bold-xl.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/21--body-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/22--body-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/23--body-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/24--body-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/25--body-italic-xl.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/26--body-italic-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/27--body-italic-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/28--body-italic-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/29--body-italic-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/30--tiny-regular-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/31--tiny-regular-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/32--tiny-regular-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/33--tiny-regular-xs.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/34--tiny-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/35--tiny-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/36--tiny-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/mac/mercury/light/utility-classes/typography/base/37--tiny-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/mercury-dark-1.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-dark-2.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-dark-3.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-dark-4.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-globant-dark-1.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-globant-dark-2.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-globant-dark-3.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-globant-dark-4.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-globant-light-1.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-globant-light-2.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-globant-light-3.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-globant-light-4.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-light-1.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-light-2.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-light-3.e2e.ts + new file: packages/common/src/tests/screenshot/mercury-light-4.e2e.ts + new file: packages/common/src/tests/screenshot/screenshot.ts + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/base/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/focus/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/accordion/hover/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/base/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/focus/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/button/hover/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/base/01--checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/base/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/base/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/base/04--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/base/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/base/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/base/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/focus/01--checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/focus/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/focus/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/focus/04--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/focus/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/focus/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/focus/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/hover/01--checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/hover/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/hover/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/hover/04--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/hover/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/hover/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/checkbox/hover/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/expanded-hover-item/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/expanded-hover-item/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/expanded-hover-item/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/expanded-hover-item/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/expanded/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/expanded/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/combo-box/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/base/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/base/03--with-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/base/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/base/05--resizable.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/base/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/base/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/expanded/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/expanded/03--with-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/expanded/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/expanded/05--resizable.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/expanded/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dialog/expanded/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/base/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded-hover-item/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/expanded/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/focus/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/dropdown/hover/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/icon/base/01--icon-source.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/icon/base/02--size-small.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/icon/base/03--size-medium.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/icon/base/04--mask.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/base/03--with-value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/base/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/base/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/focus/03--with-value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/focus/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/focus/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/hover/03--with-value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/hover/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/input/hover/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/label/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/label/base/02--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/label/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/paginator/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/paginator/base/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/paginator/base/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/paginator/expanded-combo-box/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/paginator/expanded-combo-box/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/paginator/expanded-combo-box/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/paginator/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/paginator/focus/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/paginator/focus/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/paginator/hover-page/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/paginator/hover-page/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/paginator/hover-page/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/base/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/base/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/base/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/base/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/base/08--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/base/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/expanded/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/expanded/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/expanded/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/expanded/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/expanded/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/focus/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/focus/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/focus/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/focus/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/focus/08--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/focus/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/hover/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/hover/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/hover/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/hover/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/pill/hover/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/radio-group/base/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/radio-group/base/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/radio-group/focus/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/radio-group/focus/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/radio-group/hover/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/radio-group/hover/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/base/03--value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/focus/03--value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/hover/03--value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/search/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/segmented-control/base/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/segmented-control/base/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/segmented-control/base/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/segmented-control/base/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/segmented-control/focus/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/segmented-control/focus/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/segmented-control/focus/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/segmented-control/focus/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/segmented-control/hover/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/segmented-control/hover/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/segmented-control/hover/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/slider/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/slider/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/slider/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/slider/base/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/slider/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/slider/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/slider/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/slider/focus/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/slider/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/slider/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/slider/hover/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/base/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/base/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/base/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/base/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/base/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/base/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/focus/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/focus/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/focus/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/focus/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/focus/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/focus/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/hover/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/hover/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/hover/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/switch/hover/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/base/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/focus/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/hover/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/hover/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/hover/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/hover/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/hover/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/hover/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/hover/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/hover/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/hover/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/hover/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tab/hover/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/10--row-action.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/base/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/10--row-action.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tabular-grid/hover/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/base/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/base/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/base/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/expanded/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/expanded/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/expanded/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/expanded/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/focus/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/focus/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/focus/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/focus/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/hover/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/hover/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/hover/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tooltip/hover/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/base/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/base/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/base/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/focus/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/focus/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/focus/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/hover/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/hover/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/components/tree-view/hover/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/elevation/base/01--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/elevation/base/02--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/elevation/base/03--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/form/base/01--field-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/form/base/02--field-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/form/base/03--field-group-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/form/base/04--field-group-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/form/base/05--field-group-justified-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/form/base/06--field-group-justified-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/form/base/07--custom-layout.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/layout/base/01--one-column.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/layout/base/02--two-columns.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/layout/base/03--three-columns.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/layout/base/04--four-columns.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/layout/base/05--two-columns-1-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/layout/base/06--two-columns-2-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/layout/base/07--spacing-body.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/spacing/base/01--spacing-body-inline-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/spacing/base/02--spacing-body-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/spacing/base/03--spacing-body-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/spacing/base/04--spacing-body-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/spacing/base/05--spacing-body-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/spacing/base/06--spacing-body-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/spacing/base/07--spacing-body-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/01--heading-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/02--heading-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/03--heading-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/04--heading-4.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/05--heading-5.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/06--heading-6.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/07--subtitle-regular-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/08--subtitle-regular-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/09--subtitle-regular-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/10--subtitle-regular-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/11--subtitle-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/12--subtitle-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/13--subtitle-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/14--subtitle-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/15--body-regular-xl.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/16--body-regular-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/17--body-regular-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/18--body-regular-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/19--body-regular-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/20--body-semi-bold-xl.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/21--body-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/22--body-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/23--body-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/24--body-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/25--body-italic-xl.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/26--body-italic-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/27--body-italic-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/28--body-italic-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/29--body-italic-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/30--tiny-regular-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/31--tiny-regular-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/32--tiny-regular-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/33--tiny-regular-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/34--tiny-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/35--tiny-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/36--tiny-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/dark/utility-classes/typography/base/37--tiny-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/base/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/focus/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/accordion/hover/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/base/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/focus/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/button/hover/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/base/01--checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/base/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/base/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/base/04--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/base/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/base/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/base/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/focus/01--checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/focus/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/focus/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/focus/04--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/focus/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/focus/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/focus/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/hover/01--checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/hover/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/hover/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/hover/04--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/hover/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/hover/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/checkbox/hover/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/expanded-hover-item/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/expanded-hover-item/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/expanded-hover-item/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/expanded-hover-item/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/expanded/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/expanded/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/combo-box/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/base/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/base/03--with-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/base/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/base/05--resizable.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/base/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/base/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/expanded/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/expanded/03--with-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/expanded/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/expanded/05--resizable.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/expanded/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dialog/expanded/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/base/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded-hover-item/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/expanded/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/focus/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/dropdown/hover/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/icon/base/01--icon-source.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/icon/base/02--size-small.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/icon/base/03--size-medium.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/icon/base/04--mask.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/base/03--with-value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/base/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/base/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/focus/03--with-value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/focus/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/focus/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/hover/03--with-value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/hover/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/input/hover/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/label/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/label/base/02--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/label/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/paginator/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/paginator/base/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/paginator/base/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/paginator/expanded-combo-box/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/paginator/expanded-combo-box/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/paginator/expanded-combo-box/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/paginator/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/paginator/focus/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/paginator/focus/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/paginator/hover-page/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/paginator/hover-page/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/paginator/hover-page/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/base/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/base/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/base/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/base/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/base/08--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/base/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/expanded/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/expanded/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/expanded/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/expanded/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/expanded/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/focus/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/focus/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/focus/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/focus/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/focus/08--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/focus/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/hover/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/hover/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/hover/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/hover/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/pill/hover/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/radio-group/base/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/radio-group/base/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/radio-group/focus/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/radio-group/focus/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/radio-group/hover/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/radio-group/hover/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/base/03--value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/focus/03--value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/hover/03--value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/search/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/segmented-control/base/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/segmented-control/base/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/segmented-control/base/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/segmented-control/base/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/segmented-control/focus/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/segmented-control/focus/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/segmented-control/focus/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/segmented-control/focus/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/segmented-control/hover/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/segmented-control/hover/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/segmented-control/hover/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/slider/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/slider/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/slider/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/slider/base/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/slider/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/slider/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/slider/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/slider/focus/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/slider/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/slider/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/slider/hover/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/base/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/base/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/base/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/base/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/base/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/base/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/focus/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/focus/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/focus/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/focus/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/focus/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/focus/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/hover/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/hover/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/hover/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/switch/hover/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/base/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/focus/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/hover/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/hover/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/hover/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/hover/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/hover/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/hover/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/hover/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/hover/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/hover/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/hover/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tab/hover/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/10--row-action.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/base/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/10--row-action.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tabular-grid/hover/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/base/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/base/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/base/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/expanded/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/expanded/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/expanded/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/expanded/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/focus/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/focus/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/focus/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/focus/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/hover/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/hover/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/hover/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tooltip/hover/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/base/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/base/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/base/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/focus/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/focus/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/focus/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/hover/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/hover/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/components/tree-view/hover/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/elevation/base/01--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/elevation/base/02--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/elevation/base/03--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/form/base/01--field-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/form/base/02--field-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/form/base/03--field-group-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/form/base/04--field-group-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/form/base/05--field-group-justified-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/form/base/06--field-group-justified-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/form/base/07--custom-layout.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/layout/base/01--one-column.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/layout/base/02--two-columns.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/layout/base/03--three-columns.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/layout/base/04--four-columns.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/layout/base/05--two-columns-1-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/layout/base/06--two-columns-2-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/layout/base/07--spacing-body.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/spacing/base/01--spacing-body-inline-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/spacing/base/02--spacing-body-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/spacing/base/03--spacing-body-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/spacing/base/04--spacing-body-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/spacing/base/05--spacing-body-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/spacing/base/06--spacing-body-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/spacing/base/07--spacing-body-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/01--heading-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/02--heading-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/03--heading-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/04--heading-4.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/05--heading-5.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/06--heading-6.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/07--subtitle-regular-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/08--subtitle-regular-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/09--subtitle-regular-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/10--subtitle-regular-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/11--subtitle-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/12--subtitle-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/13--subtitle-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/14--subtitle-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/15--body-regular-xl.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/16--body-regular-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/17--body-regular-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/18--body-regular-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/19--body-regular-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/20--body-semi-bold-xl.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/21--body-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/22--body-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/23--body-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/24--body-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/25--body-italic-xl.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/26--body-italic-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/27--body-italic-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/28--body-italic-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/29--body-italic-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/30--tiny-regular-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/31--tiny-regular-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/32--tiny-regular-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/33--tiny-regular-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/34--tiny-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/35--tiny-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/36--tiny-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury-globant/light/utility-classes/typography/base/37--tiny-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/base/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/focus/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/accordion/hover/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/base/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/focus/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/button/hover/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/base/01--checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/base/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/base/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/base/04--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/base/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/base/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/base/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/focus/01--checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/focus/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/focus/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/focus/04--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/focus/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/focus/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/focus/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/hover/01--checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/hover/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/hover/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/hover/04--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/hover/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/hover/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/checkbox/hover/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/expanded-hover-item/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/expanded-hover-item/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/expanded-hover-item/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/expanded-hover-item/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/expanded/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/expanded/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/combo-box/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/base/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/base/03--with-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/base/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/base/05--resizable.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/base/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/base/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/expanded/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/expanded/03--with-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/expanded/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/expanded/05--resizable.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/expanded/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dialog/expanded/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/base/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded-hover-item/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/expanded/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/focus/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/dropdown/hover/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/icon/base/01--icon-source.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/icon/base/02--size-small.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/icon/base/03--size-medium.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/icon/base/04--mask.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/base/03--with-value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/base/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/base/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/focus/03--with-value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/focus/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/focus/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/hover/03--with-value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/hover/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/input/hover/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/label/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/label/base/02--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/label/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/paginator/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/paginator/base/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/paginator/base/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/paginator/expanded-combo-box/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/paginator/expanded-combo-box/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/paginator/expanded-combo-box/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/paginator/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/paginator/focus/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/paginator/focus/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/paginator/hover-page/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/paginator/hover-page/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/paginator/hover-page/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/base/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/base/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/base/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/base/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/base/08--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/base/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/expanded/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/expanded/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/expanded/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/expanded/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/expanded/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/focus/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/focus/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/focus/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/focus/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/focus/08--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/focus/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/hover/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/hover/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/hover/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/hover/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/pill/hover/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/radio-group/base/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/radio-group/base/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/radio-group/focus/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/radio-group/focus/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/radio-group/hover/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/radio-group/hover/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/base/03--value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/focus/03--value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/hover/03--value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/search/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/segmented-control/base/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/segmented-control/base/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/segmented-control/base/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/segmented-control/base/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/segmented-control/focus/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/segmented-control/focus/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/segmented-control/focus/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/segmented-control/focus/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/segmented-control/hover/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/segmented-control/hover/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/segmented-control/hover/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/slider/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/slider/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/slider/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/slider/base/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/slider/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/slider/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/slider/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/slider/focus/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/slider/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/slider/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/slider/hover/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/base/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/base/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/base/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/base/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/base/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/base/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/focus/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/focus/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/focus/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/focus/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/focus/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/focus/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/hover/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/hover/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/hover/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/switch/hover/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/base/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/focus/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/hover/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/hover/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/hover/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/hover/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/hover/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/hover/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/hover/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/hover/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/hover/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/hover/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tab/hover/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/10--row-action.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/base/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/10--row-action.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tabular-grid/hover/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/base/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/base/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/base/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/expanded/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/expanded/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/expanded/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/expanded/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/focus/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/focus/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/focus/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/focus/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/hover/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/hover/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/hover/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tooltip/hover/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/base/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/base/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/base/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/focus/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/focus/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/focus/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/hover/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/hover/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/components/tree-view/hover/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/elevation/base/01--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/elevation/base/02--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/elevation/base/03--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/form/base/01--field-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/form/base/02--field-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/form/base/03--field-group-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/form/base/04--field-group-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/form/base/05--field-group-justified-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/form/base/06--field-group-justified-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/form/base/07--custom-layout.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/layout/base/01--one-column.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/layout/base/02--two-columns.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/layout/base/03--three-columns.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/layout/base/04--four-columns.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/layout/base/05--two-columns-1-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/layout/base/06--two-columns-2-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/layout/base/07--spacing-body.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/spacing/base/01--spacing-body-inline-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/spacing/base/02--spacing-body-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/spacing/base/03--spacing-body-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/spacing/base/04--spacing-body-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/spacing/base/05--spacing-body-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/spacing/base/06--spacing-body-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/spacing/base/07--spacing-body-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/01--heading-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/02--heading-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/03--heading-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/04--heading-4.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/05--heading-5.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/06--heading-6.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/07--subtitle-regular-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/08--subtitle-regular-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/09--subtitle-regular-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/10--subtitle-regular-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/11--subtitle-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/12--subtitle-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/13--subtitle-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/14--subtitle-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/15--body-regular-xl.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/16--body-regular-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/17--body-regular-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/18--body-regular-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/19--body-regular-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/20--body-semi-bold-xl.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/21--body-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/22--body-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/23--body-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/24--body-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/25--body-italic-xl.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/26--body-italic-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/27--body-italic-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/28--body-italic-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/29--body-italic-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/30--tiny-regular-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/31--tiny-regular-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/32--tiny-regular-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/33--tiny-regular-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/34--tiny-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/35--tiny-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/36--tiny-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/dark/utility-classes/typography/base/37--tiny-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/base/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/focus/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/01--accordion-filled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/02--accordion-filled-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/03--accordion-filled-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/04--accordion-filled-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/05--accordion-filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/06--accordion-filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/07--accordion-filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/08--accordion-filled-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/09--accordion-filled-header-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/10--accordion-filled-header-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/11--accordion-filled-header-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/12--accordion-filled-header-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/13--accordion-filled-header-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/14--accordion-filled-header-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/15--accordion-outlined.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/16--accordion-outlined-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/17--accordion-outlined-with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/18--accordion-outlined-with-icons-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/19--accordion-outlined-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/20--accordion-outlined-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/21--accordion-outlined-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/accordion/hover/22--accordion-custom-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/base/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/focus/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/01--button-primary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/02--button-primary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/03--button-primary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/04--button-primary-text-only-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/05--button-primary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/06--button-primary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/07--button-primary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/08--button-primary-icon-and-text-success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/09--button-primary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/10--button-secondary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/11--button-secondary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/12--button-secondary-text-only-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/13--button-secondary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/14--button-secondary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/15--button-secondary-icon-and-text-destructive.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/16--button-secondary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/17--button-tertiary-text-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/18--button-tertiary-text-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/19--button-tertiary-icon-and-text.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/20--button-tertiary-icon-and-text-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/21--button-tertiary-icon-only.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/button/hover/22--button-tertiary-icon-only-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/base/01--checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/base/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/base/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/base/04--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/base/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/base/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/base/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/focus/01--checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/focus/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/focus/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/focus/04--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/focus/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/focus/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/focus/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/hover/01--checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/hover/02--unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/hover/03--indeterminate.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/hover/04--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/hover/05--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/hover/06--grouping-checkboxes-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/checkbox/hover/07--grouping-checkboxes-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/expanded-hover-item/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/expanded-hover-item/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/expanded-hover-item/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/expanded-hover-item/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/expanded/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/expanded/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/combo-box/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/base/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/base/03--with-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/base/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/base/05--resizable.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/base/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/base/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/expanded/02--without-padding.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/expanded/03--with-header.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/expanded/04--with-footer.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/expanded/05--resizable.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/expanded/06--adjust-position.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dialog/expanded/07--allow-drag.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/base/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded-hover-item/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/expanded/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/06--button-primary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/08--button-secondary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/10--button-tertiary-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/focus/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/01--plain.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/02--nested.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/03--with-separators.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/05--button-primary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/07--button-secondary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/09--button-tertiary.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/11--button-with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/12--with-links.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/13--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/14--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/15--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/16--custom-content-example-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/dropdown/hover/17--custom-content-example-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/icon/base/01--icon-source.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/icon/base/02--size-small.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/icon/base/03--size-medium.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/icon/base/04--mask.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/base/03--with-value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/base/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/base/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/focus/03--with-value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/focus/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/focus/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/hover/03--with-value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/hover/04--with-placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/input/hover/06--with-icon.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/label/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/label/base/02--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/label/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/paginator/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/paginator/base/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/paginator/base/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/paginator/expanded-combo-box/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/paginator/expanded-combo-box/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/paginator/expanded-combo-box/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/paginator/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/paginator/focus/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/paginator/focus/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/paginator/hover-page/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/paginator/hover-page/02--navigation-controls.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/paginator/hover-page/03--controls-order.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/base/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/base/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/base/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/base/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/base/08--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/base/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/expanded/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/expanded/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/expanded/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/expanded/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/expanded/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/expanded/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/expanded/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/focus/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/focus/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/focus/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/focus/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/focus/08--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/focus/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/hover/03--enabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/hover/05--success.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/hover/06--warning.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/hover/07--error.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/pill/hover/09--grouped.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/radio-group/base/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/radio-group/base/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/radio-group/focus/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/radio-group/focus/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/radio-group/hover/01--Horizontal.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/radio-group/hover/02--Vertical.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/base/03--value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/base/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/base/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/focus/03--value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/focus/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/focus/05--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/hover/03--value.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/search/hover/04--placeholder.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/segmented-control/base/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/segmented-control/base/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/segmented-control/base/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/segmented-control/base/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/segmented-control/focus/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/segmented-control/focus/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/segmented-control/focus/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/segmented-control/focus/04--filled-with-disabled-items.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/segmented-control/hover/01--filled-elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/segmented-control/hover/02--filled-elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/segmented-control/hover/03--filled-elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/slider/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/slider/base/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/slider/base/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/slider/base/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/slider/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/slider/focus/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/slider/focus/03--disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/slider/focus/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/slider/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/slider/hover/02--no-label.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/slider/hover/04--custom-range.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/base/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/base/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/base/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/base/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/base/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/base/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/focus/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/focus/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/focus/03--small-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/focus/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/focus/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/focus/06--large-disabled.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/hover/01--small-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/hover/02--small-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/hover/04--large-checked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/switch/hover/05--large-unchecked.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/base/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/08--items-disabled-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/09--items-disabled-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/focus/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/hover/01--tab-list-position-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/hover/02--tab-list-position-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/hover/03--tab-list-position-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/hover/04--tab-list-position-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/hover/05--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/hover/06--with-close-button.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/hover/07--sortable-buttons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/hover/10--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/hover/11--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/hover/12--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/hover/13--additional-actions-in-tab-list-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tab/hover/14--additional-actions-in-tab-list-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/10--row-action.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/base/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/01--selection-none-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/02--with-row-set.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/03--selection-single-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/04--selection-single-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/05--selection-multiple-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/06--selection-multiple-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/07--row-mark-keyboard-select.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/08--row-mark-keyboard-focus.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/09--row-reorder-dragging.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/10--row-action.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/11--tree-grid.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/12--align-cells-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/13--align-cells-block-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/14--align-cells-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/15--align-cells-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/16--align-cells-inline-center.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tabular-grid/hover/17--align-cells-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/base/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/base/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/base/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/base/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/expanded/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/expanded/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/expanded/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/expanded/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/focus/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/focus/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/focus/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/focus/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/hover/01--block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/hover/02--block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/hover/03--inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tooltip/hover/04--inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/base/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/base/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/base/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/base/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/base/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/focus/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/focus/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/focus/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/focus/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/focus/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/hover/01--default.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/hover/02--show-lines-last.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/hover/03--show-lines-all.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/hover/04--with-icons.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/components/tree-view/hover/05--checkboxes.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/elevation/base/01--elevation-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/elevation/base/02--elevation-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/elevation/base/03--elevation-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/form/base/01--field-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/form/base/02--field-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/form/base/03--field-group-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/form/base/04--field-group-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/form/base/05--field-group-justified-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/form/base/06--field-group-justified-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/form/base/07--custom-layout.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/layout/base/01--one-column.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/layout/base/02--two-columns.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/layout/base/03--three-columns.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/layout/base/04--four-columns.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/layout/base/05--two-columns-1-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/layout/base/06--two-columns-2-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/layout/base/07--spacing-body.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/spacing/base/01--spacing-body-inline-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/spacing/base/02--spacing-body-block.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/spacing/base/03--spacing-body-block-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/spacing/base/04--spacing-body-block-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/spacing/base/05--spacing-body-inline.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/spacing/base/06--spacing-body-inline-start.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/spacing/base/07--spacing-body-inline-end.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/01--heading-1.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/02--heading-2.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/03--heading-3.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/04--heading-4.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/05--heading-5.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/06--heading-6.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/07--subtitle-regular-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/08--subtitle-regular-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/09--subtitle-regular-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/10--subtitle-regular-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/11--subtitle-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/12--subtitle-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/13--subtitle-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/14--subtitle-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/15--body-regular-xl.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/16--body-regular-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/17--body-regular-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/18--body-regular-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/19--body-regular-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/20--body-semi-bold-xl.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/21--body-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/22--body-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/23--body-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/24--body-semi-bold-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/25--body-italic-xl.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/26--body-italic-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/27--body-italic-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/28--body-italic-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/29--body-italic-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/30--tiny-regular-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/31--tiny-regular-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/32--tiny-regular-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/33--tiny-regular-xs.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/34--tiny-semi-bold-l.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/35--tiny-semi-bold-m.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/36--tiny-semi-bold-s.base64 + new file: packages/common/src/tests/screenshot/windows/mercury/light/utility-classes/typography/base/37--tiny-semi-bold-xs.base64 + new file: packages/common/src/tests/test-cases.ts + new file: packages/common/src/tests/test-metadata-config.ts + new file: packages/common/src/typings/component-metadata.ts + renamed: packages/showcase/src/services/metadata-to-framework-language/types.ts -> packages/common/src/typings/metadata-to-framework-language.ts + new file: packages/common/src/typings/test-files.ts + new file: packages/common/src/utils.ts + new file: packages/common/src/vite-env.d.ts + new file: packages/common/tsconfig-build.json + new file: packages/common/tsconfig.json + new file: packages/common/vitest.workspace.ts + modified: packages/mercury/package.json + modified: packages/mercury/src/assets/MERCURY_ASSETS.ts + new file: packages/mercury/src/assets/icons/_generated/system/dark/arrow-down.svg + modified: packages/mercury/src/assets/icons/_generated/system/dark/arrow-left.svg + modified: packages/mercury/src/assets/icons/_generated/system/dark/arrow-right.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/arrow-top.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/assistant-fill.svg + modified: packages/mercury/src/assets/icons/_generated/system/dark/contact.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/group-off.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/group.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/headphones.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/history.svg + modified: packages/mercury/src/assets/icons/_generated/system/dark/key.svg + modified: packages/mercury/src/assets/icons/_generated/system/dark/mic.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/plug-in.svg + modified: packages/mercury/src/assets/icons/_generated/system/dark/run.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/star-fill.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/star-half.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/stop-circle.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/stop.svg + modified: packages/mercury/src/assets/icons/_generated/system/dark/undo.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/videocam.svg + new file: packages/mercury/src/assets/icons/_generated/system/dark/voice.svg + modified: packages/mercury/src/assets/icons/_generated/system/dark/zoom-in.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/arrow-down.svg + modified: packages/mercury/src/assets/icons/_generated/system/light/arrow-left.svg + modified: packages/mercury/src/assets/icons/_generated/system/light/arrow-right.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/arrow-top.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/assistant-fill.svg + modified: packages/mercury/src/assets/icons/_generated/system/light/contact.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/group-off.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/group.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/headphones.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/history.svg + modified: packages/mercury/src/assets/icons/_generated/system/light/key.svg + modified: packages/mercury/src/assets/icons/_generated/system/light/mic.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/plug-in.svg + modified: packages/mercury/src/assets/icons/_generated/system/light/run.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/star-fill.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/star-half.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/stop-circle.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/stop.svg + modified: packages/mercury/src/assets/icons/_generated/system/light/undo.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/videocam.svg + new file: packages/mercury/src/assets/icons/_generated/system/light/voice.svg + modified: packages/mercury/src/assets/icons/_generated/system/light/zoom-in.svg + modified: packages/mercury/src/base/_common.scss + modified: packages/mercury/src/base/label/_label-styles.scss + modified: packages/mercury/src/bundles.ts + new file: packages/mercury/src/bundles/scss/components/chat-lit.scss + modified: packages/mercury/src/cli/bundle.ts + modified: packages/mercury/src/cli/internal/validate-args.ts + modified: packages/mercury/src/cli/internal/watch-fs.ts + new file: packages/mercury/src/components/chat-lit/_chat-styles.scss + new file: packages/mercury/src/components/chat-lit/readme.txt + modified: packages/mercury/src/components/combo-box/_combo-box-styles.scss + modified: packages/mercury/src/components/markdown-viewer/_markdown-viewer-styles.scss + modified: packages/mercury/src/components/radio-group/_radio-group-styles.scss + modified: packages/mercury/src/icons/_generated/monochrome/system.scss + modified: packages/mercury/src/icons/svg-source/system/accessibility-new.svg + modified: packages/mercury/src/icons/svg-source/system/add-circle.svg + modified: packages/mercury/src/icons/svg-source/system/add.svg + modified: packages/mercury/src/icons/svg-source/system/applications.svg + new file: packages/mercury/src/icons/svg-source/system/arrow-down.svg + modified: packages/mercury/src/icons/svg-source/system/arrow-drop-down.svg + modified: packages/mercury/src/icons/svg-source/system/arrow-drop-left.svg + modified: packages/mercury/src/icons/svg-source/system/arrow-drop-right.svg + modified: packages/mercury/src/icons/svg-source/system/arrow-drop-up.svg + modified: packages/mercury/src/icons/svg-source/system/arrow-left.svg + modified: packages/mercury/src/icons/svg-source/system/arrow-right.svg + new file: packages/mercury/src/icons/svg-source/system/arrow-top.svg + new file: packages/mercury/src/icons/svg-source/system/assistant-fill.svg + modified: packages/mercury/src/icons/svg-source/system/assistant.svg + modified: packages/mercury/src/icons/svg-source/system/calendar.svg + modified: packages/mercury/src/icons/svg-source/system/cancel-circle.svg + modified: packages/mercury/src/icons/svg-source/system/card.svg + modified: packages/mercury/src/icons/svg-source/system/check-circle.svg + modified: packages/mercury/src/icons/svg-source/system/check.svg + modified: packages/mercury/src/icons/svg-source/system/chevron-down.svg + modified: packages/mercury/src/icons/svg-source/system/chevron-left.svg + modified: packages/mercury/src/icons/svg-source/system/chevron-pag-left.svg + modified: packages/mercury/src/icons/svg-source/system/chevron-pag-right.svg + modified: packages/mercury/src/icons/svg-source/system/chevron-right.svg + modified: packages/mercury/src/icons/svg-source/system/chevron-small-down.svg + modified: packages/mercury/src/icons/svg-source/system/chevron-small-left.svg + modified: packages/mercury/src/icons/svg-source/system/chevron-small-right.svg + modified: packages/mercury/src/icons/svg-source/system/chevron-small-up.svg + modified: packages/mercury/src/icons/svg-source/system/chevron-up.svg + modified: packages/mercury/src/icons/svg-source/system/close-sidebar.svg + modified: packages/mercury/src/icons/svg-source/system/close-small.svg + modified: packages/mercury/src/icons/svg-source/system/close.svg + modified: packages/mercury/src/icons/svg-source/system/collapse-content.svg + modified: packages/mercury/src/icons/svg-source/system/company.svg + modified: packages/mercury/src/icons/svg-source/system/computer.svg + modified: packages/mercury/src/icons/svg-source/system/contact.svg + modified: packages/mercury/src/icons/svg-source/system/copy.svg + modified: packages/mercury/src/icons/svg-source/system/cut.svg + modified: packages/mercury/src/icons/svg-source/system/dashboard.svg + modified: packages/mercury/src/icons/svg-source/system/data-modeling.svg + modified: packages/mercury/src/icons/svg-source/system/database.svg + modified: packages/mercury/src/icons/svg-source/system/delete-outlined.svg + modified: packages/mercury/src/icons/svg-source/system/detail.svg + modified: packages/mercury/src/icons/svg-source/system/double-chevron-left.svg + modified: packages/mercury/src/icons/svg-source/system/double-chevron-right.svg + modified: packages/mercury/src/icons/svg-source/system/download.svg + modified: packages/mercury/src/icons/svg-source/system/drag.svg + modified: packages/mercury/src/icons/svg-source/system/edit.svg + modified: packages/mercury/src/icons/svg-source/system/error.svg + modified: packages/mercury/src/icons/svg-source/system/expand-content.svg + modified: packages/mercury/src/icons/svg-source/system/expand.svg + modified: packages/mercury/src/icons/svg-source/system/eyedropper.svg + modified: packages/mercury/src/icons/svg-source/system/filters.svg + modified: packages/mercury/src/icons/svg-source/system/folder.svg + new file: packages/mercury/src/icons/svg-source/system/group-off.svg + new file: packages/mercury/src/icons/svg-source/system/group.svg + new file: packages/mercury/src/icons/svg-source/system/headphones.svg + modified: packages/mercury/src/icons/svg-source/system/help-variant.svg + modified: packages/mercury/src/icons/svg-source/system/help.svg + modified: packages/mercury/src/icons/svg-source/system/hide.svg + new file: packages/mercury/src/icons/svg-source/system/history.svg + modified: packages/mercury/src/icons/svg-source/system/home.svg + modified: packages/mercury/src/icons/svg-source/system/information.svg + modified: packages/mercury/src/icons/svg-source/system/key.svg + modified: packages/mercury/src/icons/svg-source/system/language.svg + modified: packages/mercury/src/icons/svg-source/system/launch.svg + modified: packages/mercury/src/icons/svg-source/system/left-panel-open.svg + modified: packages/mercury/src/icons/svg-source/system/link-off.svg + modified: packages/mercury/src/icons/svg-source/system/link.svg + modified: packages/mercury/src/icons/svg-source/system/list.svg + modified: packages/mercury/src/icons/svg-source/system/loading.svg + modified: packages/mercury/src/icons/svg-source/system/lock.svg + modified: packages/mercury/src/icons/svg-source/system/log-out.svg + modified: packages/mercury/src/icons/svg-source/system/logout.svg + modified: packages/mercury/src/icons/svg-source/system/mail.svg + modified: packages/mercury/src/icons/svg-source/system/menu.svg + modified: packages/mercury/src/icons/svg-source/system/message.svg + modified: packages/mercury/src/icons/svg-source/system/mic-off.svg + modified: packages/mercury/src/icons/svg-source/system/mic.svg + modified: packages/mercury/src/icons/svg-source/system/mobile.svg + modified: packages/mercury/src/icons/svg-source/system/more-horizontal.svg + modified: packages/mercury/src/icons/svg-source/system/more-vertical.svg + modified: packages/mercury/src/icons/svg-source/system/news.svg + modified: packages/mercury/src/icons/svg-source/system/notification.svg + modified: packages/mercury/src/icons/svg-source/system/order-alphabetically.svg + modified: packages/mercury/src/icons/svg-source/system/order-numberically.svg + modified: packages/mercury/src/icons/svg-source/system/pause.svg + modified: packages/mercury/src/icons/svg-source/system/photo.svg + new file: packages/mercury/src/icons/svg-source/system/plug-in.svg + modified: packages/mercury/src/icons/svg-source/system/property.svg + modified: packages/mercury/src/icons/svg-source/system/publish.svg + modified: packages/mercury/src/icons/svg-source/system/qr-code.svg + modified: packages/mercury/src/icons/svg-source/system/query.svg + modified: packages/mercury/src/icons/svg-source/system/refresh.svg + modified: packages/mercury/src/icons/svg-source/system/retry.svg + modified: packages/mercury/src/icons/svg-source/system/right-panel-open.svg + modified: packages/mercury/src/icons/svg-source/system/run.svg + modified: packages/mercury/src/icons/svg-source/system/save.svg + modified: packages/mercury/src/icons/svg-source/system/search.svg + modified: packages/mercury/src/icons/svg-source/system/send.svg + modified: packages/mercury/src/icons/svg-source/system/settings.svg + modified: packages/mercury/src/icons/svg-source/system/share.svg + modified: packages/mercury/src/icons/svg-source/system/show.svg + new file: packages/mercury/src/icons/svg-source/system/star-fill.svg + new file: packages/mercury/src/icons/svg-source/system/star-half.svg + modified: packages/mercury/src/icons/svg-source/system/star-unselected.svg + modified: packages/mercury/src/icons/svg-source/system/star.svg + new file: packages/mercury/src/icons/svg-source/system/stop-circle.svg + new file: packages/mercury/src/icons/svg-source/system/stop.svg + modified: packages/mercury/src/icons/svg-source/system/substract.svg + modified: packages/mercury/src/icons/svg-source/system/table.svg + modified: packages/mercury/src/icons/svg-source/system/text-compare.svg + modified: packages/mercury/src/icons/svg-source/system/thumb-down.svg + modified: packages/mercury/src/icons/svg-source/system/thumb-up.svg + modified: packages/mercury/src/icons/svg-source/system/thunder.svg + modified: packages/mercury/src/icons/svg-source/system/time.svg + modified: packages/mercury/src/icons/svg-source/system/toggle-theme.svg + modified: packages/mercury/src/icons/svg-source/system/tools.svg + modified: packages/mercury/src/icons/svg-source/system/undo.svg + modified: packages/mercury/src/icons/svg-source/system/upload.svg + modified: packages/mercury/src/icons/svg-source/system/user.svg + modified: packages/mercury/src/icons/svg-source/system/version.svg + new file: packages/mercury/src/icons/svg-source/system/videocam.svg + new file: packages/mercury/src/icons/svg-source/system/voice.svg + modified: packages/mercury/src/icons/svg-source/system/warning.svg + modified: packages/mercury/src/icons/svg-source/system/zoom-in.svg + modified: packages/mercury/src/icons/svg-source/system/zoom-out.svg + modified: packages/mercury/src/mercury.scss + modified: packages/mercury/src/tests/bundles/created-bundles.spec.ts + modified: packages/mercury/src/tests/bundles/expected-bundle-content/all.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/base/base-globant.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/base/base.json + new file: packages/mercury/src/tests/bundles/expected-bundle-content/components/chat-lit.json + modified: packages/mercury/src/tests/bundles/utils.ts + modified: packages/mercury/src/types.ts + modified: packages/mercury/tsconfig.json + modified: packages/showcase/package.json + modified: packages/showcase/src/app/app.component.ts + modified: packages/showcase/src/app/components/accordion/accordion.component.ts + modified: packages/showcase/src/app/components/button/button.component.ts + modified: packages/showcase/src/app/components/checkbox/checkbox.component.ts + modified: packages/showcase/src/app/components/combo-box/combo-box.component.ts + modified: packages/showcase/src/app/components/dialog/dialog.component.ts + modified: packages/showcase/src/app/components/drop-down/drop-down.component.ts + modified: packages/showcase/src/app/components/icon/icon.component.ts + modified: packages/showcase/src/app/components/input/input.component.ts + modified: packages/showcase/src/app/components/label/label.component.ts + modified: packages/showcase/src/app/components/list-box/list-box.component.ts + modified: packages/showcase/src/app/components/paginator/paginator.component.ts + modified: packages/showcase/src/app/components/pill/pill.component.ts + modified: packages/showcase/src/app/components/radio-group/radio-group.component.ts + modified: packages/showcase/src/app/components/search/search.component.ts + modified: packages/showcase/src/app/components/segmented-control/segmented-control.component.ts + modified: packages/showcase/src/app/components/slider/slider.component.ts + modified: packages/showcase/src/app/components/switch/switch.component.ts + modified: packages/showcase/src/app/components/tab/tab.component.html + modified: packages/showcase/src/app/components/tab/tab.component.ts + deleted: packages/showcase/src/app/components/tabular-grid/tabular-grid.component-old.html + modified: packages/showcase/src/app/components/tabular-grid/tabular-grid.component.ts + modified: packages/showcase/src/app/components/tooltip/tooltip.component.ts + modified: packages/showcase/src/app/components/tree-view/tree-view.component.ts + modified: packages/showcase/src/app/gemini-migration/metadata.ts + modified: packages/showcase/src/app/tests/tests.component.ts + modified: packages/showcase/src/app/utility-classes/elevation/elevation.component.ts + modified: packages/showcase/src/app/utility-classes/form/form.component.ts + modified: packages/showcase/src/app/utility-classes/layout/layout.component.ts + modified: packages/showcase/src/app/utility-classes/spacing/spacing.component.ts + modified: packages/showcase/src/app/utility-classes/typography/typography.component.ts + modified: packages/showcase/src/common/create-signals-from-code-snippets.ts + modified: packages/showcase/src/common/parseMetadata.ts + modified: packages/showcase/src/common/types.ts + modified: packages/showcase/src/main.ts + modified: packages/showcase/src/services/metadata-to-framework-language/index.ts + modified: packages/showcase/src/services/metadata-to-framework-language/internal/component-skeleton.ts + modified: packages/showcase/src/services/metadata-to-framework-language/internal/define-state.ts + modified: packages/showcase/src/services/metadata-to-framework-language/internal/define-variable.ts + modified: packages/showcase/src/services/metadata-to-framework-language/internal/property-binding.ts + modified: packages/showcase/src/services/metadata-to-framework-language/internal/render-component.ts + modified: packages/showcase/src/services/metadata-to-framework-language/internal/utils/constants.ts + modified: packages/showcase/src/services/metadata-to-framework-language/internal/utils/create-tag.ts + modified: packages/showcase/src/services/metadata-to-framework-language/internal/utils/parse-lines-and-words.ts + modified: packages/showcase/src/services/metadata-to-framework-language/internal/utils/prettify-template.ts + modified: packages/showcase/src/services/metadata-to-framework-language/internal/utils/simplify-template-definition.ts + modified: packages/showcase/src/services/metadata-to-framework-language/internal/utils/state-and-variables.ts + modified: packages/showcase/src/services/template-language.service.ts + modified: packages/showcase/src/user-controls/code-snippet/code-snippet.component.html + modified: packages/showcase/src/user-controls/code-snippet/code-snippet.component.ts + modified: packages/showcase/src/user-controls/common-snippets/common-snippets.component.ts + modified: packages/showcase/src/user-controls/copy-code/copy-code.component.ts + modified: packages/showcase/tsconfig.app.json + new file: pnpm-lock.yaml + modified: yarn.lock + +Unmerged paths: + (use "git add ..." to mark resolution) + both modified: packages/mercury/src/components/chat/_chat-styles.scss + both modified: packages/mercury/src/tests/bundles/expected-bundle-content/base/icons.json + both modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/button.json + both modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/chat.json + both modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/checkbox.json + both modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/combo-box.json + both modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/markdown-viewer.json + both modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/paginator.json + both modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/radio-group.json + both modified: packages/mercury/src/tests/bundles/expected-bundle-content/utils/form--full.json + +Changes not staged for commit: + (use "git add/rm ..." to update what will be committed) + (use "git restore ..." to discard changes in working directory) + modified: packages/mercury/src/base/button/_button-styles.scss + modified: packages/mercury/src/bundles.ts + deleted: packages/mercury/src/bundles/scss/components/chat-lit.scss + deleted: packages/mercury/src/components/chat-lit/_chat-styles.scss + deleted: packages/mercury/src/components/chat-lit/readme.txt + modified: packages/mercury/src/mercury.scss + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/accordion.json + deleted: packages/mercury/src/tests/bundles/expected-bundle-content/components/chat-lit.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/code.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/dialog.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/dropdown.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/edit.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/flexible-layout.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/icon.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/layout-splitter.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/list-box.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/navigation-list.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/pills.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/segmented-control.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/sidebar.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/slider.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/switch.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/tab.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/tabular-grid.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/ticket-list.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/tooltip.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/tree-view.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/components/widget.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/utils/elevation.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/utils/form.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/utils/layout.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/utils/spacing.json + modified: packages/mercury/src/tests/bundles/expected-bundle-content/utils/typography.json + modified: packages/mercury/src/tests/bundles/utils.ts + modified: packages/mercury/src/types.ts + modified: packages/showcase/src/app/app.component.html + deleted: packages/showcase/src/app/components/property-grid/metadata.ts + deleted: packages/showcase/src/app/components/property-grid/models.ts + modified: packages/showcase/src/app/components/property-grid/property-grid.component.html + modified: packages/showcase/src/app/components/property-grid/property-grid.component.ts + modified: yarn.lock diff --git a/packages/mercury/mercury.config.ts b/packages/mercury/mercury.config.ts new file mode 100644 index 000000000..8129c636e --- /dev/null +++ b/packages/mercury/mercury.config.ts @@ -0,0 +1,38 @@ +import type { MercuryConfig } from "./src/index"; + +export default { + // overrides: { + // tokens: { + // semantic: { + // "font-size": { + // body: { + // "font-size-body-xlarge": "var(--size-16)", + // "font-size-body-large": "var(--size-14)", + // "font-size-body-medium": "var(--size-12)", + // "font-size-body-small": "var(--size-11)", + // "font-size-body-xsmall": "var(--size-10)" + // }, + // caption: { + // "font-size-caption-large": "var(--size-12)", + // "font-size-caption-medium": "var(--size-11)", + // "font-size-caption-small": "var(--size-10)", + // "font-size-caption-xsmall": "var(--size-8)" + // }, + // header: { + // "font-size-header-h1": "var(--size-28)", + // "font-size-header-h2": "var(--size-24)", + // "font-size-header-h3": "22px", + // "font-size-header-h4": "var(--size-20)", + // "font-size-header-h5": "var(--size-18)", + // "font-size-header-h6": "var(--size-16)" + // }, + // subtitle: { + // "font-size-subtitle-large": "var(--size-16)", + // "font-size-subtitle-medium": "15px", + // "font-size-subtitle-small": "var(--size-14)" + // } + // } + // } + // } + // } +} satisfies MercuryConfig; diff --git a/packages/mercury/showcase/_tests.html b/packages/mercury/showcase/_tests.html deleted file mode 100644 index b24dd67cc..000000000 --- a/packages/mercury/showcase/_tests.html +++ /dev/null @@ -1,459 +0,0 @@ - - - - - - Tests - - - - - - - - - - - - - -
-
-
-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore, - harum temporibus officiis at praesentium alias repudiandae beatae - porro labore quam cumque. Ipsa, blanditiis hic voluptate officiis - voluptates veritatis quam. Consequatur? -

- v -
- - -
- -
-

tests page

-

Do your tests here

-
-
- -
- -
- -
-
- - - - - - - - .input - - - - - - .input - - - - - - button primary - - - - - - button secondary - - - - - - button tertiary - - - - - -
- -
- -
- - -
- -
- -
-
    -
  • Caso actual
  • -
  • font-size: 14px
  • -
  • padding top / padding bottom: 4px
  • -
-
- - - -
-
-
    -
  • Propuesta 1
  • -
  • font-size: 12px
  • -
  • padding top / padding bottom: 4px
  • -
-
- - - -
-
-
    -
  • Propuesta 2
  • -
  • font-size: 12px
  • -
  • padding top / padding bottom: 2px
  • -
-
- - - -
-
-
- - -
- -
- -
- - -
- -
- -
-
- - - -
- -
- -
- - -
-
- -
-
- - - - - - - - - - - América del Sur - - - BO - - - - - - - - Campeones del mundo - - - AR - - - - - - -
-
- - - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/accordion.html b/packages/mercury/showcase/accordion.html deleted file mode 100644 index 5ce0f91f9..000000000 --- a/packages/mercury/showcase/accordion.html +++ /dev/null @@ -1,925 +0,0 @@ - - - - - - Accordion - - - - - - - - - - - -
-
- -
- -
-

accordion filled

-

- A filled accordion is a UI component used to organize content into - collapsible sections, offering a background color that helps - visually separate it from surrounding elements. It enhances - webpage navigation by keeping content compact and makes the - accordion stand out, encouraging users to easily access or hide - detailed information with a simple click. -

-
-
- -
-
-
- -
- -
- The File object in GeneXus is designed to handle - file-related operations within an application. It allows - developers to work with files stored locally or on a - server by providing methods to upload, download, open, - read, write, and manipulate files in various formats. This - object is particularly useful for managing documents, - images, or any other type of file interaction, making it - easier to handle file-based processes within business - applications. -
-
- The Domain object in GeneXus allows developers to define a - specific data type with associated validation rules, - formatting, and constraints, which can be reused across - various parts of an application. It helps ensure - consistency and standardization for commonly used data - types, such as emails, phone numbers, or currencies. By - creating Domains, developers can streamline application - maintenance and enforce uniform data validation throughout - the system. -
-
- The Procedure object in GeneXus is used to define a - sequence of actions or logic that can be executed within - an application. It allows developers to create reusable - routines to process data, perform calculations, update - databases, or call external services. Procedures can be - triggered by user actions or scheduled tasks, and they - offer flexibility for handling complex business logic - while improving the modularity and maintainability of the - application. -
-
- The Document object in GeneXus is designed to handle - text-based content, such as generating, manipulating, and - exporting documents in various formats like PDF, Word, or - HTML. It allows developers to create dynamic reports, - invoices, or other formal documents by merging static text - with data from the application. The Document object is - ideal for automating the creation of printable and - shareable files within business workflows. -
-
- -
-
- - -
- -
- -
- - -
-
-
- -
- -
- The File object in GeneXus is designed to handle - file-related operations within an application. It allows - developers to work with files stored locally or on a - server by providing methods to upload, download, open, - read, write, and manipulate files in various formats. This - object is particularly useful for managing documents, - images, or any other type of file interaction, making it - easier to handle file-based processes within business - applications. -
-
- The Domain object in GeneXus allows developers to define a - specific data type with associated validation rules, - formatting, and constraints, which can be reused across - various parts of an application. It helps ensure - consistency and standardization for commonly used data - types, such as emails, phone numbers, or currencies. By - creating Domains, developers can streamline application - maintenance and enforce uniform data validation throughout - the system. -
-
- The Procedure object in GeneXus is used to define a - sequence of actions or logic that can be executed within - an application. It allows developers to create reusable - routines to process data, perform calculations, update - databases, or call external services. Procedures can be - triggered by user actions or scheduled tasks, and they - offer flexibility for handling complex business logic - while improving the modularity and maintainability of the - application. -
-
- The Document object in GeneXus is designed to handle - text-based content, such as generating, manipulating, and - exporting documents in various formats like PDF, Word, or - HTML. It allows developers to create dynamic reports, - invoices, or other formal documents by merging static text - with data from the application. The Document object is - ideal for automating the creation of printable and - shareable files within business workflows. -
-
- -
-
- - -
- -
- -
- - -
-
-
- -
- -
- The File object in GeneXus is designed to handle - file-related operations within an application. It allows - developers to work with files stored locally or on a - server by providing methods to upload, download, open, - read, write, and manipulate files in various formats. This - object is particularly useful for managing documents, - images, or any other type of file interaction, making it - easier to handle file-based processes within business - applications. -
-
- The Domain object in GeneXus allows developers to define a - specific data type with associated validation rules, - formatting, and constraints, which can be reused across - various parts of an application. It helps ensure - consistency and standardization for commonly used data - types, such as emails, phone numbers, or currencies. By - creating Domains, developers can streamline application - maintenance and enforce uniform data validation throughout - the system. -
-
- The Procedure object in GeneXus is used to define a - sequence of actions or logic that can be executed within - an application. It allows developers to create reusable - routines to process data, perform calculations, update - databases, or call external services. Procedures can be - triggered by user actions or scheduled tasks, and they - offer flexibility for handling complex business logic - while improving the modularity and maintainability of the - application. -
-
- The Document object in GeneXus is designed to handle - text-based content, such as generating, manipulating, and - exporting documents in various formats like PDF, Word, or - HTML. It allows developers to create dynamic reports, - invoices, or other formal documents by merging static text - with data from the application. The Document object is - ideal for automating the creation of printable and - shareable files within business workflows. -
-
- -
-
- - -
- -
- -
- - -
-
-
- -
- -
- The File object in GeneXus is designed to handle - file-related operations within an application. It allows - developers to work with files stored locally or on a - server by providing methods to upload, download, open, - read, write, and manipulate files in various formats. This - object is particularly useful for managing documents, - images, or any other type of file interaction, making it - easier to handle file-based processes within business - applications. -
-
- The Domain object in GeneXus allows developers to define a - specific data type with associated validation rules, - formatting, and constraints, which can be reused across - various parts of an application. It helps ensure - consistency and standardization for commonly used data - types, such as emails, phone numbers, or currencies. By - creating Domains, developers can streamline application - maintenance and enforce uniform data validation throughout - the system. -
-
- The Procedure object in GeneXus is used to define a - sequence of actions or logic that can be executed within - an application. It allows developers to create reusable - routines to process data, perform calculations, update - databases, or call external services. Procedures can be - triggered by user actions or scheduled tasks, and they - offer flexibility for handling complex business logic - while improving the modularity and maintainability of the - application. -
-
- The Document object in GeneXus is designed to handle - text-based content, such as generating, manipulating, and - exporting documents in various formats like PDF, Word, or - HTML. It allows developers to create dynamic reports, - invoices, or other formal documents by merging static text - with data from the application. The Document object is - ideal for automating the creation of printable and - shareable files within business workflows. -
-
- -
-
- - -
- -
- -
-
-
- - -
- -
-

accordion outlined

-

- An outlined accordion is a UI component designed to organize - content into collapsible sections with a transparent background, - delineated by a subtle border. It keeps content compact while - maintaining a minimalistic look, allowing users to focus on the - content without overwhelming the design. -

-
-
- -
-
-
- -
- -
- The File object in GeneXus is designed to handle - file-related operations within an application. It allows - developers to work with files stored locally or on a - server by providing methods to upload, download, open, - read, write, and manipulate files in various formats. This - object is particularly useful for managing documents, - images, or any other type of file interaction, making it - easier to handle file-based processes within business - applications. -
-
- The Domain object in GeneXus allows developers to define a - specific data type with associated validation rules, - formatting, and constraints, which can be reused across - various parts of an application. It helps ensure - consistency and standardization for commonly used data - types, such as emails, phone numbers, or currencies. By - creating Domains, developers can streamline application - maintenance and enforce uniform data validation throughout - the system. -
-
- The Procedure object in GeneXus is used to define a - sequence of actions or logic that can be executed within - an application. It allows developers to create reusable - routines to process data, perform calculations, update - databases, or call external services. Procedures can be - triggered by user actions or scheduled tasks, and they - offer flexibility for handling complex business logic - while improving the modularity and maintainability of the - application. -
-
- The Document object in GeneXus is designed to handle - text-based content, such as generating, manipulating, and - exporting documents in various formats like PDF, Word, or - HTML. It allows developers to create dynamic reports, - invoices, or other formal documents by merging static text - with data from the application. The Document object is - ideal for automating the creation of printable and - shareable files within business workflows. -
-
- -
-
- - -
- -
- -
- - -
-
-
- -
- -
- The File object in GeneXus is designed to handle - file-related operations within an application. It allows - developers to work with files stored locally or on a - server by providing methods to upload, download, open, - read, write, and manipulate files in various formats. This - object is particularly useful for managing documents, - images, or any other type of file interaction, making it - easier to handle file-based processes within business - applications. -
-
- The Domain object in GeneXus allows developers to define a - specific data type with associated validation rules, - formatting, and constraints, which can be reused across - various parts of an application. It helps ensure - consistency and standardization for commonly used data - types, such as emails, phone numbers, or currencies. By - creating Domains, developers can streamline application - maintenance and enforce uniform data validation throughout - the system. -
-
- The Procedure object in GeneXus is used to define a - sequence of actions or logic that can be executed within - an application. It allows developers to create reusable - routines to process data, perform calculations, update - databases, or call external services. Procedures can be - triggered by user actions or scheduled tasks, and they - offer flexibility for handling complex business logic - while improving the modularity and maintainability of the - application. -
-
- The Document object in GeneXus is designed to handle - text-based content, such as generating, manipulating, and - exporting documents in various formats like PDF, Word, or - HTML. It allows developers to create dynamic reports, - invoices, or other formal documents by merging static text - with data from the application. The Document object is - ideal for automating the creation of printable and - shareable files within business workflows. -
-
- -
-
- - -
- -
- -
- - -
-
-
- -
- -
- The File object in GeneXus is designed to handle - file-related operations within an application. It allows - developers to work with files stored locally or on a - server by providing methods to upload, download, open, - read, write, and manipulate files in various formats. This - object is particularly useful for managing documents, - images, or any other type of file interaction, making it - easier to handle file-based processes within business - applications. -
-
- The Domain object in GeneXus allows developers to define a - specific data type with associated validation rules, - formatting, and constraints, which can be reused across - various parts of an application. It helps ensure - consistency and standardization for commonly used data - types, such as emails, phone numbers, or currencies. By - creating Domains, developers can streamline application - maintenance and enforce uniform data validation throughout - the system. -
-
- The Procedure object in GeneXus is used to define a - sequence of actions or logic that can be executed within - an application. It allows developers to create reusable - routines to process data, perform calculations, update - databases, or call external services. Procedures can be - triggered by user actions or scheduled tasks, and they - offer flexibility for handling complex business logic - while improving the modularity and maintainability of the - application. -
-
- The Document object in GeneXus is designed to handle - text-based content, such as generating, manipulating, and - exporting documents in various formats like PDF, Word, or - HTML. It allows developers to create dynamic reports, - invoices, or other formal documents by merging static text - with data from the application. The Document object is - ideal for automating the creation of printable and - shareable files within business workflows. -
-
- -
-
- - -
- -
- -
- - -
-
-
- -
- -
- The File object in GeneXus is designed to handle - file-related operations within an application. It allows - developers to work with files stored locally or on a - server by providing methods to upload, download, open, - read, write, and manipulate files in various formats. This - object is particularly useful for managing documents, - images, or any other type of file interaction, making it - easier to handle file-based processes within business - applications. -
-
- The Domain object in GeneXus allows developers to define a - specific data type with associated validation rules, - formatting, and constraints, which can be reused across - various parts of an application. It helps ensure - consistency and standardization for commonly used data - types, such as emails, phone numbers, or currencies. By - creating Domains, developers can streamline application - maintenance and enforce uniform data validation throughout - the system. -
-
- The Procedure object in GeneXus is used to define a - sequence of actions or logic that can be executed within - an application. It allows developers to create reusable - routines to process data, perform calculations, update - databases, or call external services. Procedures can be - triggered by user actions or scheduled tasks, and they - offer flexibility for handling complex business logic - while improving the modularity and maintainability of the - application. -
-
- The Document object in GeneXus is designed to handle - text-based content, such as generating, manipulating, and - exporting documents in various formats like PDF, Word, or - HTML. It allows developers to create dynamic reports, - invoices, or other formal documents by merging static text - with data from the application. The Document object is - ideal for automating the creation of printable and - shareable files within business workflows. -
-
- -
-
- - -
- -
- -
-
-
- - -
- -
-

other

-

- This section covers key considerations and use cases that apply to - both types of accordions, ensuring consistency and best practices - across implementations. -

-
-
- -
-
-
-

- By default, accordion slots have no padding. To add padding, - you’ll need to apply - any of the global body padding classes. In this example, the dashed lines around the slots aren’t - part of the accordion’s design—they’re here to help illustrate - the boundaries of the content area when padding isn’t applied. -

-
- -
- The File object in GeneXus is designed to handle - file-related operations within an application. It allows - developers to work with files stored locally or on a - server by providing methods to upload, download, open, - read, write, and manipulate files in various formats. This - object is particularly useful for managing documents, - images, or any other type of file interaction, making it - easier to handle file-based processes within business - applications. -
-
- The Domain object in GeneXus allows developers to define a - specific data type with associated validation rules, - formatting, and constraints, which can be reused across - various parts of an application. It helps ensure - consistency and standardization for commonly used data - types, such as emails, phone numbers, or currencies. By - creating Domains, developers can streamline application - maintenance and enforce uniform data validation throughout - the system. -
-
- The Procedure object in GeneXus is used to define a - sequence of actions or logic that can be executed within - an application. It allows developers to create reusable - routines to process data, perform calculations, update - databases, or call external services. Procedures can be - triggered by user actions or scheduled tasks, and they - offer flexibility for handling complex business logic - while improving the modularity and maintainability of the - application. -
-
- The Document object in GeneXus is designed to handle - text-based content, such as generating, manipulating, and - exporting documents in various formats like PDF, Word, or - HTML. It allows developers to create dynamic reports, - invoices, or other formal documents by merging static text - with data from the application. The Document object is - ideal for automating the creation of printable and - shareable files within business workflows. -
-
- -
-
- -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/assets/components/ch-chat/index-29553cff.js b/packages/mercury/showcase/assets/components/ch-chat/index-29553cff.js deleted file mode 100644 index 5671ea2e5..000000000 --- a/packages/mercury/showcase/assets/components/ch-chat/index-29553cff.js +++ /dev/null @@ -1,4142 +0,0 @@ -const NAMESPACE = 'genexus-ide-ui'; -const BUILD = /* genexus-ide-ui */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: true, disconnectedCallback: true, element: false, event: true, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: true, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: true, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true }; -const Env = /* genexus-ide-ui */ {}; - -/** - * Virtual DOM patching algorithm based on Snabbdom by - * Simon Friis Vindum (@paldepind) - * Licensed under the MIT License - * https://github.com/snabbdom/snabbdom/blob/master/LICENSE - * - * Modified for Stencil's renderer and slot projection - */ -let scopeId; -let contentRef; -let hostTagName; -let customError; -let i = 0; -let useNativeShadowDom = false; -let checkSlotFallbackVisibility = false; -let checkSlotRelocate = false; -let isSvgMode = false; -let renderingRef = null; -let queueCongestion = 0; -let queuePending = false; -const Build = { - isDev: BUILD.isDev ? true : false, - isBrowser: true, - isServer: false, - isTesting: BUILD.isTesting ? true : false, -}; -const getAssetPath = (path) => { - const assetUrl = new URL(path, plt.$resourcesUrl$); - return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname; -}; -const setAssetPath = (path) => (plt.$resourcesUrl$ = path); -const createTime = (fnName, tagName = '') => { - if (BUILD.profile && performance.mark) { - const key = `st:${fnName}:${tagName}:${i++}`; - // Start - performance.mark(key); - // End - return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key); - } - else { - return () => { - return; - }; - } -}; -const uniqueTime = (key, measureText) => { - if (BUILD.profile && performance.mark) { - if (performance.getEntriesByName(key, 'mark').length === 0) { - performance.mark(key); - } - return () => { - if (performance.getEntriesByName(measureText, 'measure').length === 0) { - performance.measure(measureText, key); - } - }; - } - else { - return () => { - return; - }; - } -}; -const inspect = (ref) => { - const hostRef = getHostRef(ref); - if (!hostRef) { - return undefined; - } - const flags = hostRef.$flags$; - const hostElement = hostRef.$hostElement$; - return { - renderCount: hostRef.$renderCount$, - flags: { - hasRendered: !!(flags & 2 /* HOST_FLAGS.hasRendered */), - hasConnected: !!(flags & 1 /* HOST_FLAGS.hasConnected */), - isWaitingForChildren: !!(flags & 4 /* HOST_FLAGS.isWaitingForChildren */), - isConstructingInstance: !!(flags & 8 /* HOST_FLAGS.isConstructingInstance */), - isQueuedForUpdate: !!(flags & 16 /* HOST_FLAGS.isQueuedForUpdate */), - hasInitializedComponent: !!(flags & 32 /* HOST_FLAGS.hasInitializedComponent */), - hasLoadedComponent: !!(flags & 64 /* HOST_FLAGS.hasLoadedComponent */), - isWatchReady: !!(flags & 128 /* HOST_FLAGS.isWatchReady */), - isListenReady: !!(flags & 256 /* HOST_FLAGS.isListenReady */), - needsRerender: !!(flags & 512 /* HOST_FLAGS.needsRerender */), - }, - instanceValues: hostRef.$instanceValues$, - ancestorComponent: hostRef.$ancestorComponent$, - hostElement, - lazyInstance: hostRef.$lazyInstance$, - vnode: hostRef.$vnode$, - modeName: hostRef.$modeName$, - onReadyPromise: hostRef.$onReadyPromise$, - onReadyResolve: hostRef.$onReadyResolve$, - onInstancePromise: hostRef.$onInstancePromise$, - onInstanceResolve: hostRef.$onInstanceResolve$, - onRenderResolve: hostRef.$onRenderResolve$, - queuedListeners: hostRef.$queuedListeners$, - rmListeners: hostRef.$rmListeners$, - ['s-id']: hostElement['s-id'], - ['s-cr']: hostElement['s-cr'], - ['s-lr']: hostElement['s-lr'], - ['s-p']: hostElement['s-p'], - ['s-rc']: hostElement['s-rc'], - ['s-sc']: hostElement['s-sc'], - }; -}; -const installDevTools = () => { - if (BUILD.devTools) { - const stencil = (win.stencil = win.stencil || {}); - const originalInspect = stencil.inspect; - stencil.inspect = (ref) => { - let result = inspect(ref); - if (!result && typeof originalInspect === 'function') { - result = originalInspect(ref); - } - return result; - }; - } -}; -const CONTENT_REF_ID = 'r'; -const ORG_LOCATION_ID = 'o'; -const SLOT_NODE_ID = 's'; -const TEXT_NODE_ID = 't'; -const HYDRATE_ID = 's-id'; -const HYDRATED_STYLE_ID = 'sty-id'; -const HYDRATE_CHILD_ID = 'c-id'; -const HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}'; -/** - * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior. - * - * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser - * support as of Stencil v4. - */ -const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}'; -const XLINK_NS = 'http://www.w3.org/1999/xlink'; -const FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [ - 'formAssociatedCallback', - 'formResetCallback', - 'formDisabledCallback', - 'formStateRestoreCallback', -]; -/** - * Default style mode id - */ -/** - * Reusable empty obj/array - * Don't add values to these!! - */ -const EMPTY_OBJ = {}; -/** - * Namespaces - */ -const SVG_NS = 'http://www.w3.org/2000/svg'; -const HTML_NS = 'http://www.w3.org/1999/xhtml'; -const isDef = (v) => v != null; -/** - * Check whether a value is a 'complex type', defined here as an object or a - * function. - * - * @param o the value to check - * @returns whether it's a complex type or not - */ -const isComplexType = (o) => { - // https://jsperf.com/typeof-fn-object/5 - o = typeof o; - return o === 'object' || o === 'function'; -}; -/** - * Helper method for querying a `meta` tag that contains a nonce value - * out of a DOM's head. - * - * @param doc The DOM containing the `head` to query against - * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag - * exists or the tag has no content. - */ -function queryNonceMetaTagContent(doc) { - var _a, _b, _c; - return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name="csp-nonce"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined; -} -/** - * Production h() function based on Preact by - * Jason Miller (@developit) - * Licensed under the MIT License - * https://github.com/developit/preact/blob/master/LICENSE - * - * Modified for Stencil's compiler and vdom - */ -// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode; -// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode; -const h = (nodeName, vnodeData, ...children) => { - let child = null; - let key = null; - let slotName = null; - let simple = false; - let lastSimple = false; - const vNodeChildren = []; - const walk = (c) => { - for (let i = 0; i < c.length; i++) { - child = c[i]; - if (Array.isArray(child)) { - walk(child); - } - else if (child != null && typeof child !== 'boolean') { - if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) { - child = String(child); - } - else if (BUILD.isDev && typeof nodeName !== 'function' && child.$flags$ === undefined) { - consoleDevError(`vNode passed as children has unexpected type. -Make sure it's using the correct h() function. -Empty objects can also be the cause, look for JSX comments that became objects.`); - } - if (simple && lastSimple) { - // If the previous child was simple (string), we merge both - vNodeChildren[vNodeChildren.length - 1].$text$ += child; - } - else { - // Append a new vNode, if it's text, we create a text vNode - vNodeChildren.push(simple ? newVNode(null, child) : child); - } - lastSimple = simple; - } - } - }; - walk(children); - if (vnodeData) { - if (BUILD.isDev && nodeName === 'input') { - validateInputProperties(vnodeData); - } - if (BUILD.vdomKey && vnodeData.key) { - key = vnodeData.key; - } - if (BUILD.slotRelocation && vnodeData.name) { - slotName = vnodeData.name; - } - // normalize class / className attributes - if (BUILD.vdomClass) { - const classData = vnodeData.className || vnodeData.class; - if (classData) { - vnodeData.class = - typeof classData !== 'object' - ? classData - : Object.keys(classData) - .filter((k) => classData[k]) - .join(' '); - } - } - } - if (BUILD.isDev && vNodeChildren.some(isHost)) { - consoleDevError(`The must be the single root component. Make sure: -- You are NOT using hostData() and in the same component. -- is used once, and it's the single root component of the render() function.`); - } - if (BUILD.vdomFunctional && typeof nodeName === 'function') { - // nodeName is a functional component - return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils); - } - const vnode = newVNode(nodeName, null); - vnode.$attrs$ = vnodeData; - if (vNodeChildren.length > 0) { - vnode.$children$ = vNodeChildren; - } - if (BUILD.vdomKey) { - vnode.$key$ = key; - } - if (BUILD.slotRelocation) { - vnode.$name$ = slotName; - } - return vnode; -}; -/** - * A utility function for creating a virtual DOM node from a tag and some - * possible text content. - * - * @param tag the tag for this element - * @param text possible text content for the node - * @returns a newly-minted virtual DOM node - */ -const newVNode = (tag, text) => { - const vnode = { - $flags$: 0, - $tag$: tag, - $text$: text, - $elm$: null, - $children$: null, - }; - if (BUILD.vdomAttribute) { - vnode.$attrs$ = null; - } - if (BUILD.vdomKey) { - vnode.$key$ = null; - } - if (BUILD.slotRelocation) { - vnode.$name$ = null; - } - return vnode; -}; -const Host = {}; -/** - * Check whether a given node is a Host node or not - * - * @param node the virtual DOM node to check - * @returns whether it's a Host node or not - */ -const isHost = (node) => node && node.$tag$ === Host; -/** - * Implementation of {@link d.FunctionalUtilities} for Stencil's VDom. - * - * Note that these functions convert from {@link d.VNode} to - * {@link d.ChildNode} to give functional component developers a friendly - * interface. - */ -const vdomFnUtils = { - forEach: (children, cb) => children.map(convertToPublic).forEach(cb), - map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate), -}; -/** - * Convert a {@link d.VNode} to a {@link d.ChildNode} in order to present a - * friendlier public interface (hence, 'convertToPublic'). - * - * @param node the virtual DOM node to convert - * @returns a converted child node - */ -const convertToPublic = (node) => ({ - vattrs: node.$attrs$, - vchildren: node.$children$, - vkey: node.$key$, - vname: node.$name$, - vtag: node.$tag$, - vtext: node.$text$, -}); -/** - * Convert a {@link d.ChildNode} back to an equivalent {@link d.VNode} in - * order to use the resulting object in the virtual DOM. The initial object was - * likely created as part of presenting a public API, so converting it back - * involved making it 'private' again (hence, `convertToPrivate`). - * - * @param node the child node to convert - * @returns a converted virtual DOM node - */ -const convertToPrivate = (node) => { - if (typeof node.vtag === 'function') { - const vnodeData = Object.assign({}, node.vattrs); - if (node.vkey) { - vnodeData.key = node.vkey; - } - if (node.vname) { - vnodeData.name = node.vname; - } - return h(node.vtag, vnodeData, ...(node.vchildren || [])); - } - const vnode = newVNode(node.vtag, node.vtext); - vnode.$attrs$ = node.vattrs; - vnode.$children$ = node.vchildren; - vnode.$key$ = node.vkey; - vnode.$name$ = node.vname; - return vnode; -}; -/** - * Validates the ordering of attributes on an input element - * - * @param inputElm the element to validate - */ -const validateInputProperties = (inputElm) => { - const props = Object.keys(inputElm); - const value = props.indexOf('value'); - if (value === -1) { - return; - } - const typeIndex = props.indexOf('type'); - const minIndex = props.indexOf('min'); - const maxIndex = props.indexOf('max'); - const stepIndex = props.indexOf('step'); - if (value < typeIndex || value < minIndex || value < maxIndex || value < stepIndex) { - consoleDevWarn(`The "value" prop of should be set after "min", "max", "type" and "step"`); - } -}; -/** - * Entrypoint of the client-side hydration process. Facilitates calls to hydrate the - * document and all its nodes. - * - * This process will also reconstruct the shadow root and slot DOM nodes for components using shadow DOM. - * - * @param hostElm The element to hydrate. - * @param tagName The element's tag name. - * @param hostId The host ID assigned to the element by the server. - * @param hostRef The host reference for the element. - */ -const initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => { - const endHydrate = createTime('hydrateClient', tagName); - const shadowRoot = hostElm.shadowRoot; - const childRenderNodes = []; - const slotNodes = []; - const shadowRootNodes = BUILD.shadowDom && shadowRoot ? [] : null; - const vnode = (hostRef.$vnode$ = newVNode(tagName, null)); - if (!plt.$orgLocNodes$) { - initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map())); - } - hostElm[HYDRATE_ID] = hostId; - hostElm.removeAttribute(HYDRATE_ID); - clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId); - childRenderNodes.map((c) => { - const orgLocationId = c.$hostId$ + '.' + c.$nodeId$; - const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId); - const node = c.$elm$; - // Put the node back in its original location since the native Shadow DOM - // can handle rendering it its correct location now - if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') { - orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling); - } - if (!shadowRoot) { - node['s-hn'] = tagName; - if (orgLocationNode) { - node['s-ol'] = orgLocationNode; - node['s-ol']['s-nr'] = node; - } - } - plt.$orgLocNodes$.delete(orgLocationId); - }); - if (BUILD.shadowDom && shadowRoot) { - shadowRootNodes.map((shadowRootNode) => { - if (shadowRootNode) { - shadowRoot.appendChild(shadowRootNode); - } - }); - } - endHydrate(); -}; -/** - * Recursively constructs the virtual node tree for a host element and its children. - * The tree is constructed by parsing the annotations set on the nodes by the server. - * - * In addition to constructing the vNode tree, we also track information about the node's - * descendants like which are slots, which should exist in the shadow root, and which - * are nodes that should be rendered as children of the parent node. - * - * @param parentVNode The vNode representing the parent node. - * @param childRenderNodes An array of all child nodes in the parent's node tree. - * @param slotNodes An array of all slot nodes in the parent's node tree. - * @param shadowRootNodes An array all nodes that should be rendered in the shadow root in the parent's node tree. - * @param hostElm The parent element. - * @param node The node to construct the vNode tree for. - * @param hostId The host ID assigned to the element by the server. - */ -const clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => { - let childNodeType; - let childIdSplt; - let childVNode; - let i; - if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) { - childNodeType = node.getAttribute(HYDRATE_CHILD_ID); - if (childNodeType) { - // got the node data from the element's attribute - // `${hostId}.${nodeId}.${depth}.${index}` - childIdSplt = childNodeType.split('.'); - if (childIdSplt[0] === hostId || childIdSplt[0] === '0') { - childVNode = { - $flags$: 0, - $hostId$: childIdSplt[0], - $nodeId$: childIdSplt[1], - $depth$: childIdSplt[2], - $index$: childIdSplt[3], - $tag$: node.tagName.toLowerCase(), - $elm$: node, - $attrs$: null, - $children$: null, - $key$: null, - $name$: null, - $text$: null, - }; - childRenderNodes.push(childVNode); - node.removeAttribute(HYDRATE_CHILD_ID); - // this is a new child vnode - // so ensure its parent vnode has the vchildren array - if (!parentVNode.$children$) { - parentVNode.$children$ = []; - } - // add our child vnode to a specific index of the vnode's children - parentVNode.$children$[childVNode.$index$] = childVNode; - // this is now the new parent vnode for all the next child checks - parentVNode = childVNode; - if (shadowRootNodes && childVNode.$depth$ === '0') { - shadowRootNodes[childVNode.$index$] = childVNode.$elm$; - } - } - } - // recursively drill down, end to start so we can remove nodes - for (i = node.childNodes.length - 1; i >= 0; i--) { - clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId); - } - if (node.shadowRoot) { - // keep drilling down through the shadow root nodes - for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) { - clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId); - } - } - } - else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) { - // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}` - childIdSplt = node.nodeValue.split('.'); - if (childIdSplt[1] === hostId || childIdSplt[1] === '0') { - // comment node for either the host id or a 0 host id - childNodeType = childIdSplt[0]; - childVNode = { - $flags$: 0, - $hostId$: childIdSplt[1], - $nodeId$: childIdSplt[2], - $depth$: childIdSplt[3], - $index$: childIdSplt[4], - $elm$: node, - $attrs$: null, - $children$: null, - $key$: null, - $name$: null, - $tag$: null, - $text$: null, - }; - if (childNodeType === TEXT_NODE_ID) { - childVNode.$elm$ = node.nextSibling; - if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* NODE_TYPE.TextNode */) { - childVNode.$text$ = childVNode.$elm$.textContent; - childRenderNodes.push(childVNode); - // remove the text comment since it's no longer needed - node.remove(); - if (!parentVNode.$children$) { - parentVNode.$children$ = []; - } - parentVNode.$children$[childVNode.$index$] = childVNode; - if (shadowRootNodes && childVNode.$depth$ === '0') { - shadowRootNodes[childVNode.$index$] = childVNode.$elm$; - } - } - } - else if (childVNode.$hostId$ === hostId) { - // this comment node is specifically for this host id - if (childNodeType === SLOT_NODE_ID) { - // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`; - childVNode.$tag$ = 'slot'; - if (childIdSplt[5]) { - node['s-sn'] = childVNode.$name$ = childIdSplt[5]; - } - else { - node['s-sn'] = ''; - } - node['s-sr'] = true; - if (BUILD.shadowDom && shadowRootNodes) { - // browser support shadowRoot and this is a shadow dom component - // create an actual slot element - childVNode.$elm$ = doc.createElement(childVNode.$tag$); - if (childVNode.$name$) { - // add the slot name attribute - childVNode.$elm$.setAttribute('name', childVNode.$name$); - } - // insert the new slot element before the slot comment - node.parentNode.insertBefore(childVNode.$elm$, node); - // remove the slot comment since it's not needed for shadow - node.remove(); - if (childVNode.$depth$ === '0') { - shadowRootNodes[childVNode.$index$] = childVNode.$elm$; - } - } - slotNodes.push(childVNode); - if (!parentVNode.$children$) { - parentVNode.$children$ = []; - } - parentVNode.$children$[childVNode.$index$] = childVNode; - } - else if (childNodeType === CONTENT_REF_ID) { - // `${CONTENT_REF_ID}.${hostId}`; - if (BUILD.shadowDom && shadowRootNodes) { - // remove the content ref comment since it's not needed for shadow - node.remove(); - } - else if (BUILD.slotRelocation) { - hostElm['s-cr'] = node; - node['s-cn'] = true; - } - } - } - } - } - else if (parentVNode && parentVNode.$tag$ === 'style') { - const vnode = newVNode(null, node.textContent); - vnode.$elm$ = node; - vnode.$index$ = '0'; - parentVNode.$children$ = [vnode]; - } -}; -/** - * Recursively locate any comments representing an original location for a node in a node's - * children or shadowRoot children. - * - * @param node The node to search. - * @param orgLocNodes A map of the original location annotation and the current node being searched. - */ -const initializeDocumentHydrate = (node, orgLocNodes) => { - if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) { - let i = 0; - for (; i < node.childNodes.length; i++) { - initializeDocumentHydrate(node.childNodes[i], orgLocNodes); - } - if (node.shadowRoot) { - for (i = 0; i < node.shadowRoot.childNodes.length; i++) { - initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes); - } - } - } - else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) { - const childIdSplt = node.nodeValue.split('.'); - if (childIdSplt[0] === ORG_LOCATION_ID) { - orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node); - node.nodeValue = ''; - // useful to know if the original location is - // the root light-dom of a shadow dom component - node['s-en'] = childIdSplt[3]; - } - } -}; -// Private -const computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m); -// Public -const setMode = (handler) => modeResolutionChain.push(handler); -const getMode = (ref) => getHostRef(ref).$modeName$; -/** - * Parse a new property value for a given property type. - * - * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned, - * it is not safe to assume that the string returned by evaluating `typeof propValue` matches: - * 1. `any`, the type given to `propValue` in the function signature - * 2. the type stored from `propType`. - * - * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type. - * - * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to - * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is - * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`. - * ```tsx - * - * ``` - * - * HTML prop values on the other hand, will always a string - * - * @param propValue the new value to coerce to some type - * @param propType the type of the prop, expressed as a binary number - * @returns the parsed/coerced value - */ -const parsePropertyValue = (propValue, propType) => { - // ensure this value is of the correct prop type - if (propValue != null && !isComplexType(propValue)) { - if (BUILD.propBoolean && propType & 4 /* MEMBER_FLAGS.Boolean */) { - // per the HTML spec, any string value means it is a boolean true value - // but we'll cheat here and say that the string "false" is the boolean false - return propValue === 'false' ? false : propValue === '' || !!propValue; - } - if (BUILD.propNumber && propType & 2 /* MEMBER_FLAGS.Number */) { - // force it to be a number - return parseFloat(propValue); - } - if (BUILD.propString && propType & 1 /* MEMBER_FLAGS.String */) { - // could have been passed as a number or boolean - // but we still want it as a string - return String(propValue); - } - // redundant return here for better minification - return propValue; - } - // not sure exactly what type we want - // so no need to change to a different type - return propValue; -}; -const getElement = (ref) => (BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref); -const createEvent = (ref, name, flags) => { - const elm = getElement(ref); - return { - emit: (detail) => { - if (BUILD.isDev && !elm.isConnected) { - consoleDevWarn(`The "${name}" event was emitted, but the dispatcher node is no longer connected to the dom.`); - } - return emitEvent(elm, name, { - bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */), - composed: !!(flags & 2 /* EVENT_FLAGS.Composed */), - cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */), - detail, - }); - }, - }; -}; -/** - * Helper function to create & dispatch a custom Event on a provided target - * @param elm the target of the Event - * @param name the name to give the custom Event - * @param opts options for configuring a custom Event - * @returns the custom Event - */ -const emitEvent = (elm, name, opts) => { - const ev = plt.ce(name, opts); - elm.dispatchEvent(ev); - return ev; -}; -const rootAppliedStyles = /*@__PURE__*/ new WeakMap(); -const registerStyle = (scopeId, cssText, allowCS) => { - let style = styles.get(scopeId); - if (supportsConstructableStylesheets && allowCS) { - style = (style || new CSSStyleSheet()); - if (typeof style === 'string') { - style = cssText; - } - else { - style.replaceSync(cssText); - } - } - else { - style = cssText; - } - styles.set(scopeId, style); -}; -const addStyle = (styleContainerNode, cmpMeta, mode) => { - var _a; - const scopeId = getScopeId(cmpMeta, mode); - const style = styles.get(scopeId); - if (!BUILD.attachStyles) { - return scopeId; - } - // if an element is NOT connected then getRootNode() will return the wrong root node - // so the fallback is to always use the document for the root node in those cases - styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc; - if (style) { - if (typeof style === 'string') { - styleContainerNode = styleContainerNode.head || styleContainerNode; - let appliedStyles = rootAppliedStyles.get(styleContainerNode); - let styleElm; - if (!appliedStyles) { - rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set())); - } - if (!appliedStyles.has(scopeId)) { - if (BUILD.hydrateClientSide && - styleContainerNode.host && - (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}="${scopeId}"]`))) { - // This is only happening on native shadow-dom, do not needs CSS var shim - styleElm.innerHTML = style; - } - else { - styleElm = doc.createElement('style'); - styleElm.innerHTML = style; - // Apply CSP nonce to the style tag if it exists - const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc); - if (nonce != null) { - styleElm.setAttribute('nonce', nonce); - } - if (BUILD.hydrateServerSide || BUILD.hotModuleReplacement) { - styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId); - } - styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link')); - } - // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM - if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) { - styleElm.innerHTML += SLOT_FB_CSS; - } - if (appliedStyles) { - appliedStyles.add(scopeId); - } - } - } - else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) { - styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style]; - } - } - return scopeId; -}; -const attachStyles = (hostRef) => { - const cmpMeta = hostRef.$cmpMeta$; - const elm = hostRef.$hostElement$; - const flags = cmpMeta.$flags$; - const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$); - const scopeId = addStyle(BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$); - if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) { - // only required when we're NOT using native shadow dom (slot) - // or this browser doesn't support native shadow dom - // and this host element was NOT created with SSR - // let's pick out the inner content for slot projection - // create a node to represent where the original - // content was first placed, which is useful later on - // DOM WRITE!! - elm['s-sc'] = scopeId; - elm.classList.add(scopeId + '-h'); - if (BUILD.scoped && flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) { - elm.classList.add(scopeId + '-s'); - } - } - endAttachStyles(); -}; -const getScopeId = (cmp, mode) => 'sc-' + (BUILD.mode && mode && cmp.$flags$ & 32 /* CMP_FLAGS.hasMode */ ? cmp.$tagName$ + '-' + mode : cmp.$tagName$); -const convertScopedToShadow = (css) => css.replace(/\/\*!@([^\/]+)\*\/[^\{]+\{/g, '$1{'); -/** - * Production setAccessor() function based on Preact by - * Jason Miller (@developit) - * Licensed under the MIT License - * https://github.com/developit/preact/blob/master/LICENSE - * - * Modified for Stencil's compiler and vdom - */ -/** - * When running a VDom render set properties present on a VDom node onto the - * corresponding HTML element. - * - * Note that this function has special functionality for the `class`, - * `style`, `key`, and `ref` attributes, as well as event handlers (like - * `onClick`, etc). All others are just passed through as-is. - * - * @param elm the HTMLElement onto which attributes should be set - * @param memberName the name of the attribute to set - * @param oldValue the old value for the attribute - * @param newValue the new value for the attribute - * @param isSvg whether we're in an svg context or not - * @param flags bitflags for Vdom variables - */ -const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => { - if (oldValue !== newValue) { - let isProp = isMemberInElement(elm, memberName); - let ln = memberName.toLowerCase(); - if (BUILD.vdomClass && memberName === 'class') { - const classList = elm.classList; - const oldClasses = parseClassList(oldValue); - const newClasses = parseClassList(newValue); - classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c))); - classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c))); - } - else if (BUILD.vdomStyle && memberName === 'style') { - // update style attribute, css properties and values - if (BUILD.updatable) { - for (const prop in oldValue) { - if (!newValue || newValue[prop] == null) { - if (!BUILD.hydrateServerSide && prop.includes('-')) { - elm.style.removeProperty(prop); - } - else { - elm.style[prop] = ''; - } - } - } - } - for (const prop in newValue) { - if (!oldValue || newValue[prop] !== oldValue[prop]) { - if (!BUILD.hydrateServerSide && prop.includes('-')) { - elm.style.setProperty(prop, newValue[prop]); - } - else { - elm.style[prop] = newValue[prop]; - } - } - } - } - else if (BUILD.vdomKey && memberName === 'key') - ; - else if (BUILD.vdomRef && memberName === 'ref') { - // minifier will clean this up - if (newValue) { - newValue(elm); - } - } - else if (BUILD.vdomListener && - (BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) && - memberName[0] === 'o' && - memberName[1] === 'n') { - // Event Handlers - // so if the member name starts with "on" and the 3rd characters is - // a capital letter, and it's not already a member on the element, - // then we're assuming it's an event listener - if (memberName[2] === '-') { - // on- prefixed events - // allows to be explicit about the dom event to listen without any magic - // under the hood: - // // listens for "click" - // // listens for "Click" - // // listens for "ionChange" - // // listens for "EVENTS" - memberName = memberName.slice(3); - } - else if (isMemberInElement(win, ln)) { - // standard event - // the JSX attribute could have been "onMouseOver" and the - // member name "onmouseover" is on the window's prototype - // so let's add the listener "mouseover", which is all lowercased - memberName = ln.slice(2); - } - else { - // custom event - // the JSX attribute could have been "onMyCustomEvent" - // so let's trim off the "on" prefix and lowercase the first character - // and add the listener "myCustomEvent" - // except for the first character, we keep the event name case - memberName = ln[2] + memberName.slice(3); - } - if (oldValue || newValue) { - // Need to account for "capture" events. - // If the event name ends with "Capture", we'll update the name to remove - // the "Capture" suffix and make sure the event listener is setup to handle the capture event. - const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX); - // Make sure we only replace the last instance of "Capture" - memberName = memberName.replace(CAPTURE_EVENT_REGEX, ''); - if (oldValue) { - plt.rel(elm, memberName, oldValue, capture); - } - if (newValue) { - plt.ael(elm, memberName, newValue, capture); - } - } - } - else if (BUILD.vdomPropOrAttr) { - // Set property if it exists and it's not a SVG - const isComplex = isComplexType(newValue); - if ((isProp || (isComplex && newValue !== null)) && !isSvg) { - try { - if (!elm.tagName.includes('-')) { - const n = newValue == null ? '' : newValue; - // Workaround for Safari, moving the caret when re-assigning the same valued - if (memberName === 'list') { - isProp = false; - } - else if (oldValue == null || elm[memberName] != n) { - elm[memberName] = n; - } - } - else { - elm[memberName] = newValue; - } - } - catch (e) { - /** - * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it - */ - } - } - /** - * Need to manually update attribute if: - * - memberName is not an attribute - * - if we are rendering the host element in order to reflect attribute - * - if it's a SVG, since properties might not work in - * - if the newValue is null/undefined or 'false'. - */ - let xlink = false; - if (BUILD.vdomXlink) { - if (ln !== (ln = ln.replace(/^xlink\:?/, ''))) { - memberName = ln; - xlink = true; - } - } - if (newValue == null || newValue === false) { - if (newValue !== false || elm.getAttribute(memberName) === '') { - if (BUILD.vdomXlink && xlink) { - elm.removeAttributeNS(XLINK_NS, memberName); - } - else { - elm.removeAttribute(memberName); - } - } - } - else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) { - newValue = newValue === true ? '' : newValue; - if (BUILD.vdomXlink && xlink) { - elm.setAttributeNS(XLINK_NS, memberName, newValue); - } - else { - elm.setAttribute(memberName, newValue); - } - } - } - } -}; -const parseClassListRegex = /\s/; -/** - * Parsed a string of classnames into an array - * @param value className string, e.g. "foo bar baz" - * @returns list of classes, e.g. ["foo", "bar", "baz"] - */ -const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex)); -const CAPTURE_EVENT_SUFFIX = 'Capture'; -const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$'); -const updateElement = (oldVnode, newVnode, isSvgMode, memberName) => { - // if the element passed in is a shadow root, which is a document fragment - // then we want to be adding attrs/props to the shadow root's "host" element - // if it's not a shadow root, then we add attrs/props to the same element - const elm = newVnode.$elm$.nodeType === 11 /* NODE_TYPE.DocumentFragment */ && newVnode.$elm$.host - ? newVnode.$elm$.host - : newVnode.$elm$; - const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ; - const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ; - if (BUILD.updatable) { - // remove attributes no longer present on the vnode by setting them to undefined - for (memberName in oldVnodeAttrs) { - if (!(memberName in newVnodeAttrs)) { - setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$); - } - } - } - // add new & update changed attributes - for (memberName in newVnodeAttrs) { - setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$); - } -}; -/** - * Create a DOM Node corresponding to one of the children of a given VNode. - * - * @param oldParentVNode the parent VNode from the previous render - * @param newParentVNode the parent VNode from the current render - * @param childIndex the index of the VNode, in the _new_ parent node's - * children, for which we will create a new DOM node - * @param parentElm the parent DOM node which our new node will be a child of - * @returns the newly created node - */ -const createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => { - var _a; - // tslint:disable-next-line: prefer-const - const newVNode = newParentVNode.$children$[childIndex]; - let i = 0; - let elm; - let childNode; - let oldVNode; - if (BUILD.slotRelocation && !useNativeShadowDom) { - // remember for later we need to check to relocate nodes - checkSlotRelocate = true; - if (newVNode.$tag$ === 'slot') { - if (scopeId) { - // scoped css needs to add its scoped id to the parent element - parentElm.classList.add(scopeId + '-s'); - } - newVNode.$flags$ |= newVNode.$children$ - ? // slot element has fallback content - 2 /* VNODE_FLAGS.isSlotFallback */ - : // slot element does not have fallback content - 1 /* VNODE_FLAGS.isSlotReference */; - } - } - if (BUILD.isDev && newVNode.$elm$) { - consoleDevError(`The JSX ${newVNode.$text$ !== null ? `"${newVNode.$text$}" text` : `"${newVNode.$tag$}" element`} node should not be shared within the same renderer. The renderer caches element lookups in order to improve performance. However, a side effect from this is that the exact same JSX node should not be reused. For more information please see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes`); - } - if (BUILD.vdomText && newVNode.$text$ !== null) { - // create text node - elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$); - } - else if (BUILD.slotRelocation && newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) { - // create a slot reference node - elm = newVNode.$elm$ = - BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : doc.createTextNode(''); - } - else { - if (BUILD.svg && !isSvgMode) { - isSvgMode = newVNode.$tag$ === 'svg'; - } - // create element - elm = newVNode.$elm$ = (BUILD.svg - ? doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, BUILD.slotRelocation && newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */ - ? 'slot-fb' - : newVNode.$tag$) - : doc.createElement(BUILD.slotRelocation && newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */ - ? 'slot-fb' - : newVNode.$tag$)); - if (BUILD.svg && isSvgMode && newVNode.$tag$ === 'foreignObject') { - isSvgMode = false; - } - // add css classes, attrs, props, listeners, etc. - if (BUILD.vdomAttribute) { - updateElement(null, newVNode, isSvgMode); - } - if ((BUILD.shadowDom || BUILD.scoped) && isDef(scopeId) && elm['s-si'] !== scopeId) { - // if there is a scopeId and this is the initial render - // then let's add the scopeId as a css class - elm.classList.add((elm['s-si'] = scopeId)); - } - if (newVNode.$children$) { - for (i = 0; i < newVNode.$children$.length; ++i) { - // create the node - childNode = createElm(oldParentVNode, newVNode, i, elm); - // return node could have been null - if (childNode) { - // append our new node - elm.appendChild(childNode); - } - } - } - if (BUILD.svg) { - if (newVNode.$tag$ === 'svg') { - // Only reset the SVG context when we're exiting element - isSvgMode = false; - } - else if (elm.tagName === 'foreignObject') { - // Reenter SVG context when we're exiting element - isSvgMode = true; - } - } - } - // This needs to always happen so we can hide nodes that are projected - // to another component but don't end up in a slot - elm['s-hn'] = hostTagName; - if (BUILD.slotRelocation) { - if (newVNode.$flags$ & (2 /* VNODE_FLAGS.isSlotFallback */ | 1 /* VNODE_FLAGS.isSlotReference */)) { - // remember the content reference comment - elm['s-sr'] = true; - // Persist the name of the slot that this slot was going to be projected into. - elm['s-fs'] = (_a = newVNode.$attrs$) === null || _a === void 0 ? void 0 : _a.slot; - // remember the content reference comment - elm['s-cr'] = contentRef; - // remember the slot name, or empty string for default slot - elm['s-sn'] = newVNode.$name$ || ''; - // check if we've got an old vnode for this slot - oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex]; - if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) { - if (BUILD.experimentalSlotFixes) { - // we've got an old slot vnode and the wrapper is being replaced - // so let's move the old slot content to the root of the element currently being rendered - relocateToHostRoot(oldParentVNode.$elm$); - } - else { - // we've got an old slot vnode and the wrapper is being replaced - // so let's move the old slot content back to its original location - putBackInOriginalLocation(oldParentVNode.$elm$, false); - } - } - } - } - return elm; -}; -/** - * Relocates all child nodes of an element that were a part of a previous slot relocation - * to the root of the Stencil component currently being rendered. This happens when a parent - * element of a slot reference node dynamically changes and triggers a re-render. We cannot use - * `putBackInOriginalLocation()` because that may relocate nodes to elements that will not be re-rendered - * and so they will not be relocated again. - * - * @param parentElm The element potentially containing relocated nodes. - */ -const relocateToHostRoot = (parentElm) => { - plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */; - const host = parentElm.closest(hostTagName.toLowerCase()); - if (host != null) { - for (const childNode of Array.from(parentElm.childNodes)) { - // Only relocate nodes that were slotted in - if (childNode['s-sh'] != null) { - host.insertBefore(childNode, null); - // Reset so we can correctly move the node around again. - childNode['s-sh'] = undefined; - // When putting an element node back in its original location, - // we need to reset the `slot` attribute back to the value it originally had - // so we can correctly relocate it again in the future - if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */ && !!childNode['s-sn']) { - childNode.setAttribute('slot', childNode['s-sn']); - } - // Need to tell the render pipeline to check to relocate slot content again - checkSlotRelocate = true; - } - } - } - plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */; -}; -const putBackInOriginalLocation = (parentElm, recursive) => { - var _a; - plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */; - const oldSlotChildNodes = parentElm.childNodes; - for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) { - const childNode = oldSlotChildNodes[i]; - if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) { - // and relocate it back to it's original location - parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode)); - // remove the old original location comment entirely - // later on the patch function will know what to do - // and move this to the correct spot if need be - childNode['s-ol'].remove(); - childNode['s-ol'] = undefined; - // Reset so we can correctly move the node around again. - childNode['s-sh'] = undefined; - // When putting an element node back in its original location, - // we need to reset the `slot` attribute back to the value it originally had - // so we can correctly relocate it again in the future - if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) { - childNode.setAttribute('slot', (_a = childNode['s-sn']) !== null && _a !== void 0 ? _a : ''); - } - checkSlotRelocate = true; - } - if (recursive) { - putBackInOriginalLocation(childNode, recursive); - } - } - plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */; -}; -/** - * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and - * add them to the DOM in the appropriate place. - * - * @param parentElm the DOM node which should be used as a parent for the new - * DOM nodes - * @param before a child of the `parentElm` which the new children should be - * inserted before (optional) - * @param parentVNode the parent virtual DOM node - * @param vnodes the new child virtual DOM nodes to produce DOM nodes for - * @param startIdx the index in the child virtual DOM nodes at which to start - * creating DOM nodes (inclusive) - * @param endIdx the index in the child virtual DOM nodes at which to stop - * creating DOM nodes (inclusive) - */ -const addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => { - let containerElm = ((BUILD.slotRelocation && parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm); - let childNode; - if (BUILD.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) { - containerElm = containerElm.shadowRoot; - } - for (; startIdx <= endIdx; ++startIdx) { - if (vnodes[startIdx]) { - childNode = createElm(null, parentVNode, startIdx, parentElm); - if (childNode) { - vnodes[startIdx].$elm$ = childNode; - containerElm.insertBefore(childNode, BUILD.slotRelocation ? referenceNode(before) : before); - } - } - } -}; -/** - * Remove the DOM elements corresponding to a list of {@link d.VNode} objects. - * This can be used to, for instance, clean up after a list of children which - * should no longer be shown. - * - * This function also handles some of Stencil's slot relocation logic. - * - * @param vnodes a list of virtual DOM nodes to remove - * @param startIdx the index at which to start removing nodes (inclusive) - * @param endIdx the index at which to stop removing nodes (inclusive) - */ -const removeVnodes = (vnodes, startIdx, endIdx) => { - for (let index = startIdx; index <= endIdx; ++index) { - const vnode = vnodes[index]; - if (vnode) { - const elm = vnode.$elm$; - nullifyVNodeRefs(vnode); - if (elm) { - if (BUILD.slotRelocation) { - // we're removing this element - // so it's possible we need to show slot fallback content now - checkSlotFallbackVisibility = true; - if (elm['s-ol']) { - // remove the original location comment - elm['s-ol'].remove(); - } - else { - // it's possible that child nodes of the node - // that's being removed are slot nodes - putBackInOriginalLocation(elm, true); - } - } - // remove the vnode's element from the dom - elm.remove(); - } - } - } -}; -/** - * Reconcile the children of a new VNode with the children of an old VNode by - * traversing the two collections of children, identifying nodes that are - * conserved or changed, calling out to `patch` to make any necessary - * updates to the DOM, and rearranging DOM nodes as needed. - * - * The algorithm for reconciling children works by analyzing two 'windows' onto - * the two arrays of children (`oldCh` and `newCh`). We keep track of the - * 'windows' by storing start and end indices and references to the - * corresponding array entries. Initially the two 'windows' are basically equal - * to the entire array, but we progressively narrow the windows until there are - * no children left to update by doing the following: - * - * 1. Skip any `null` entries at the beginning or end of the two arrays, so - * that if we have an initial array like the following we'll end up dealing - * only with a window bounded by the highlighted elements: - * - * [null, null, VNode1 , ... , VNode2, null, null] - * ^^^^^^ ^^^^^^ - * - * 2. Check to see if the elements at the head and tail positions are equal - * across the windows. This will basically detect elements which haven't - * been added, removed, or changed position, i.e. if you had the following - * VNode elements (represented as HTML): - * - * oldVNode: `

HEY

` - * newVNode: `

THERE

` - * - * Then when comparing the children of the `
` tag we check the equality - * of the VNodes corresponding to the `

` tags and, since they are the - * same tag in the same position, we'd be able to avoid completely - * re-rendering the subtree under them with a new DOM element and would just - * call out to `patch` to handle reconciling their children and so on. - * - * 3. Check, for both windows, to see if the element at the beginning of the - * window corresponds to the element at the end of the other window. This is - * a heuristic which will let us identify _some_ situations in which - * elements have changed position, for instance it _should_ detect that the - * children nodes themselves have not changed but merely moved in the - * following example: - * - * oldVNode: `

` - * newVNode: `
` - * - * If we find cases like this then we also need to move the concrete DOM - * elements corresponding to the moved children to write the re-order to the - * DOM. - * - * 4. Finally, if VNodes have the `key` attribute set on them we check for any - * nodes in the old children which have the same key as the first element in - * our window on the new children. If we find such a node we handle calling - * out to `patch`, moving relevant DOM nodes, and so on, in accordance with - * what we find. - * - * Finally, once we've narrowed our 'windows' to the point that either of them - * collapse (i.e. they have length 0) we then handle any remaining VNode - * insertion or deletion that needs to happen to get a DOM state that correctly - * reflects the new child VNodes. If, for instance, after our window on the old - * children has collapsed we still have more nodes on the new children that - * we haven't dealt with yet then we need to add them, or if the new children - * collapse but we still have unhandled _old_ children then we need to make - * sure the corresponding DOM nodes are removed. - * - * @param parentElm the node into which the parent VNode is rendered - * @param oldCh the old children of the parent node - * @param newVNode the new VNode which will replace the parent - * @param newCh the new children of the parent node - * @param isInitialRender whether or not this is the first render of the vdom - */ -const updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => { - let oldStartIdx = 0; - let newStartIdx = 0; - let idxInOld = 0; - let i = 0; - let oldEndIdx = oldCh.length - 1; - let oldStartVnode = oldCh[0]; - let oldEndVnode = oldCh[oldEndIdx]; - let newEndIdx = newCh.length - 1; - let newStartVnode = newCh[0]; - let newEndVnode = newCh[newEndIdx]; - let node; - let elmToMove; - while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { - if (oldStartVnode == null) { - // VNode might have been moved left - oldStartVnode = oldCh[++oldStartIdx]; - } - else if (oldEndVnode == null) { - oldEndVnode = oldCh[--oldEndIdx]; - } - else if (newStartVnode == null) { - newStartVnode = newCh[++newStartIdx]; - } - else if (newEndVnode == null) { - newEndVnode = newCh[--newEndIdx]; - } - else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) { - // if the start nodes are the same then we should patch the new VNode - // onto the old one, and increment our `newStartIdx` and `oldStartIdx` - // indices to reflect that. We don't need to move any DOM Nodes around - // since things are matched up in order. - patch(oldStartVnode, newStartVnode, isInitialRender); - oldStartVnode = oldCh[++oldStartIdx]; - newStartVnode = newCh[++newStartIdx]; - } - else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) { - // likewise, if the end nodes are the same we patch new onto old and - // decrement our end indices, and also likewise in this case we don't - // need to move any DOM Nodes. - patch(oldEndVnode, newEndVnode, isInitialRender); - oldEndVnode = oldCh[--oldEndIdx]; - newEndVnode = newCh[--newEndIdx]; - } - else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) { - // case: "Vnode moved right" - // - // We've found that the last node in our window on the new children is - // the same VNode as the _first_ node in our window on the old children - // we're dealing with now. Visually, this is the layout of these two - // nodes: - // - // newCh: [..., newStartVnode , ... , newEndVnode , ...] - // ^^^^^^^^^^^ - // oldCh: [..., oldStartVnode , ... , oldEndVnode , ...] - // ^^^^^^^^^^^^^ - // - // In this situation we need to patch `newEndVnode` onto `oldStartVnode` - // and move the DOM element for `oldStartVnode`. - if (BUILD.slotRelocation && (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) { - putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false); - } - patch(oldStartVnode, newEndVnode, isInitialRender); - // We need to move the element for `oldStartVnode` into a position which - // will be appropriate for `newEndVnode`. For this we can use - // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a - // sibling for `oldEndVnode.$elm$` then we want to move the DOM node for - // `oldStartVnode` between `oldEndVnode` and it's sibling, like so: - // - // - // - // - // - // - // - // ``` - // In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback - // will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value") - // to the value that was set inline i.e. "some-value" from above example. When - // the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value" - // - // The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed - // by connectedCallback as this attributeChangedCallback will not fire. - // - // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties - // - // TODO(STENCIL-16) we should think about whether or not we actually want to be reflecting the attributes to - // properties here given that this goes against best practices outlined here - // https://developers.google.com/web/fundamentals/web-components/best-practices#avoid-reentrancy - if (this.hasOwnProperty(propName)) { - newValue = this[propName]; - delete this[propName]; - } - else if (prototype.hasOwnProperty(propName) && - typeof this[propName] === 'number' && - this[propName] == newValue) { - // if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native - // APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in - // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props. - return; - } - else if (propName == null) { - // At this point we should know this is not a "member", so we can treat it like watching an attribute - // on a vanilla web component - const hostRef = getHostRef(this); - const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$; - // We only want to trigger the callback(s) if: - // 1. The instance is ready - // 2. The watchers are ready - // 3. The value has changed - if (flags && - !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) && - flags & 128 /* HOST_FLAGS.isWatchReady */ && - newValue !== oldValue) { - const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : this; - const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm; - const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName]; - entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => { - if (instance[callbackName] != null) { - instance[callbackName].call(instance, newValue, oldValue, attrName); - } - }); - } - return; - } - this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue; - }); - }; - // Create an array of attributes to observe - // This list in comprised of all strings used within a `@Watch()` decorator - // on a component as well as any Stencil-specific "members" (`@Prop()`s and `@State()`s). - // As such, there is no way to guarantee type-safety here that a user hasn't entered - // an invalid attribute. - Cstr.observedAttributes = Array.from(new Set([ - ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}), - ...members - .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */) - .map(([propName, m]) => { - var _a; - const attrName = m[1] || propName; - attrNameToPropName.set(attrName, propName); - if (BUILD.reflect && m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) { - (_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]); - } - return attrName; - }), - ])); - } - } - return Cstr; -}; -/** - * Initialize a Stencil component given a reference to its host element, its - * runtime bookkeeping data structure, runtime metadata about the component, - * and (optionally) an HMR version ID. - * - * @param elm a host element - * @param hostRef the element's runtime bookkeeping object - * @param cmpMeta runtime metadata for the Stencil component - * @param hmrVersionId an (optional) HMR version ID - */ -const initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => { - let Cstr; - // initializeComponent - if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) { - // Let the runtime know that the component has been initialized - hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */; - if (BUILD.lazyLoad || BUILD.hydrateClientSide) { - // lazy loaded components - // request the component's implementation to be - // wired up with the host element - Cstr = loadModule(cmpMeta, hostRef, hmrVersionId); - if (Cstr.then) { - // Await creates a micro-task avoid if possible - const endLoad = uniqueTime(`st:load:${cmpMeta.$tagName$}:${hostRef.$modeName$}`, `[Stencil] Load module for <${cmpMeta.$tagName$}>`); - Cstr = await Cstr; - endLoad(); - } - if ((BUILD.isDev || BUILD.isDebug) && !Cstr) { - throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`); - } - if (BUILD.member && !Cstr.isProxied) { - // we've never proxied this Constructor before - // let's add the getters/setters to its prototype before - // the first time we create an instance of the implementation - if (BUILD.watchCallback) { - cmpMeta.$watchers$ = Cstr.watchers; - } - proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */); - Cstr.isProxied = true; - } - const endNewInstance = createTime('createInstance', cmpMeta.$tagName$); - // ok, time to construct the instance - // but let's keep track of when we start and stop - // so that the getters/setters don't incorrectly step on data - if (BUILD.member) { - hostRef.$flags$ |= 8 /* HOST_FLAGS.isConstructingInstance */; - } - // construct the lazy-loaded component implementation - // passing the hostRef is very important during - // construction in order to directly wire together the - // host element and the lazy-loaded instance - try { - new Cstr(hostRef); - } - catch (e) { - consoleError(e); - } - if (BUILD.member) { - hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */; - } - if (BUILD.watchCallback) { - hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */; - } - endNewInstance(); - fireConnectedCallback(hostRef.$lazyInstance$); - } - else { - // sync constructor component - Cstr = elm.constructor; - // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise, - // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_ - // Stencil has completed instantiating the component. - customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */)); - } - if (BUILD.style && Cstr.style) { - // this component has styles but we haven't registered them yet - let style = Cstr.style; - if (BUILD.mode && typeof style !== 'string') { - style = style[(hostRef.$modeName$ = computeMode(elm))]; - if (BUILD.hydrateServerSide && hostRef.$modeName$) { - elm.setAttribute('s-mode', hostRef.$modeName$); - } - } - const scopeId = getScopeId(cmpMeta, hostRef.$modeName$); - if (!styles.has(scopeId)) { - const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$); - if (!BUILD.hydrateServerSide && - BUILD.shadowDom && - // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field - BUILD.shadowDomShim && - cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) { - style = await import('./shadow-css-8fcf3ba9.js').then((m) => m.scopeCss(style, scopeId, false)); - } - registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */)); - endRegisterStyles(); - } - } - } - // we've successfully created a lazy instance - const ancestorComponent = hostRef.$ancestorComponent$; - const schedule = () => scheduleUpdate(hostRef, true); - if (BUILD.asyncLoading && ancestorComponent && ancestorComponent['s-rc']) { - // this is the initial load and this component it has an ancestor component - // but the ancestor component has NOT fired its will update lifecycle yet - // so let's just cool our jets and wait for the ancestor to continue first - // this will get fired off when the ancestor component - // finally gets around to rendering its lazy self - // fire off the initial update - ancestorComponent['s-rc'].push(schedule); - } - else { - schedule(); - } -}; -const fireConnectedCallback = (instance) => { - if (BUILD.lazyLoad && BUILD.connectedCallback) { - safeCall(instance, 'connectedCallback'); - } -}; -const connectedCallback = (elm) => { - if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) { - const hostRef = getHostRef(elm); - const cmpMeta = hostRef.$cmpMeta$; - const endConnected = createTime('connectedCallback', cmpMeta.$tagName$); - if (BUILD.hostListenerTargetParent) { - // only run if we have listeners being attached to a parent - addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true); - } - if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) { - // first time this component has connected - hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */; - let hostId; - if (BUILD.hydrateClientSide) { - hostId = elm.getAttribute(HYDRATE_ID); - if (hostId) { - if (BUILD.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) { - const scopeId = BUILD.mode - ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute('s-mode')) - : addStyle(elm.shadowRoot, cmpMeta); - elm.classList.remove(scopeId + '-h', scopeId + '-s'); - } - initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef); - } - } - if (BUILD.slotRelocation && !hostId) { - // initUpdate - // if the slot polyfill is required we'll need to put some nodes - // in here to act as original content anchors as we move nodes around - // host element has been connected to the DOM - if (BUILD.hydrateServerSide || - ((BUILD.slot || BUILD.shadowDom) && - // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field - cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) { - setContentReference(elm); - } - } - if (BUILD.asyncLoading) { - // find the first ancestor component (if there is one) and register - // this component as one of the actively loading child components for its ancestor - let ancestorComponent = elm; - while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) { - // climb up the ancestors looking for the first - // component that hasn't finished its lifecycle update yet - if ((BUILD.hydrateClientSide && - ancestorComponent.nodeType === 1 /* NODE_TYPE.ElementNode */ && - ancestorComponent.hasAttribute('s-id') && - ancestorComponent['s-p']) || - ancestorComponent['s-p']) { - // we found this components first ancestor component - // keep a reference to this component's ancestor component - attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent)); - break; - } - } - } - // Lazy properties - // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties - if (BUILD.prop && !BUILD.hydrateServerSide && cmpMeta.$members$) { - Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => { - if (memberFlags & 31 /* MEMBER_FLAGS.Prop */ && elm.hasOwnProperty(memberName)) { - const value = elm[memberName]; - delete elm[memberName]; - elm[memberName] = value; - } - }); - } - if (BUILD.initializeNextTick) { - // connectedCallback, taskQueue, initialLoad - // angular sets attribute AFTER connectCallback - // https://github.com/angular/angular/issues/18909 - // https://github.com/angular/angular/issues/19940 - nextTick(() => initializeComponent(elm, hostRef, cmpMeta)); - } - else { - initializeComponent(elm, hostRef, cmpMeta); - } - } - else { - // not the first time this has connected - // reattach any event listeners to the host - // since they would have been removed when disconnected - addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false); - // fire off connectedCallback() on component instance - if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) { - fireConnectedCallback(hostRef.$lazyInstance$); - } - else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) { - hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$)); - } - } - endConnected(); - } -}; -const setContentReference = (elm) => { - // only required when we're NOT using native shadow dom (slot) - // or this browser doesn't support native shadow dom - // and this host element was NOT created with SSR - // let's pick out the inner content for slot projection - // create a node to represent where the original - // content was first placed, which is useful later on - const contentRefElm = (elm['s-cr'] = doc.createComment(BUILD.isDebug ? `content-ref (host=${elm.localName})` : '')); - contentRefElm['s-cn'] = true; - elm.insertBefore(contentRefElm, elm.firstChild); -}; -const disconnectInstance = (instance) => { - if (BUILD.lazyLoad && BUILD.disconnectedCallback) { - safeCall(instance, 'disconnectedCallback'); - } - if (BUILD.cmpDidUnload) { - safeCall(instance, 'componentDidUnload'); - } -}; -const disconnectedCallback = async (elm) => { - if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) { - const hostRef = getHostRef(elm); - if (BUILD.hostListener) { - if (hostRef.$rmListeners$) { - hostRef.$rmListeners$.map((rmListener) => rmListener()); - hostRef.$rmListeners$ = undefined; - } - } - if (!BUILD.lazyLoad) { - disconnectInstance(elm); - } - else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) { - disconnectInstance(hostRef.$lazyInstance$); - } - else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) { - hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$)); - } - } -}; -const patchPseudoShadowDom = (hostElementPrototype, descriptorPrototype) => { - patchCloneNode(hostElementPrototype); - patchSlotAppendChild(hostElementPrototype); - patchSlotAppend(hostElementPrototype); - patchSlotPrepend(hostElementPrototype); - patchSlotInsertAdjacentElement(hostElementPrototype); - patchSlotInsertAdjacentHTML(hostElementPrototype); - patchSlotInsertAdjacentText(hostElementPrototype); - patchTextContent(hostElementPrototype); - patchChildSlotNodes(hostElementPrototype, descriptorPrototype); - patchSlotRemoveChild(hostElementPrototype); -}; -const patchCloneNode = (HostElementPrototype) => { - const orgCloneNode = HostElementPrototype.cloneNode; - HostElementPrototype.cloneNode = function (deep) { - const srcNode = this; - const isShadowDom = BUILD.shadowDom ? srcNode.shadowRoot && supportsShadow : false; - const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false); - if (BUILD.slot && !isShadowDom && deep) { - let i = 0; - let slotted, nonStencilNode; - const stencilPrivates = [ - 's-id', - 's-cr', - 's-lr', - 's-rc', - 's-sc', - 's-p', - 's-cn', - 's-sr', - 's-sn', - 's-hn', - 's-ol', - 's-nr', - 's-si', - ]; - for (; i < srcNode.childNodes.length; i++) { - slotted = srcNode.childNodes[i]['s-nr']; - nonStencilNode = stencilPrivates.every((privateField) => !srcNode.childNodes[i][privateField]); - if (slotted) { - if (BUILD.appendChildSlotFix && clonedNode.__appendChild) { - clonedNode.__appendChild(slotted.cloneNode(true)); - } - else { - clonedNode.appendChild(slotted.cloneNode(true)); - } - } - if (nonStencilNode) { - clonedNode.appendChild(srcNode.childNodes[i].cloneNode(true)); - } - } - } - return clonedNode; - }; -}; -/** - * Patches the `appendChild` method on a `scoped` Stencil component. - * The patch will attempt to find a slot with the same name as the node being appended - * and insert it into the slot reference if found. Otherwise, it falls-back to the original - * `appendChild` method. - * - * @param HostElementPrototype The Stencil component to be patched - */ -const patchSlotAppendChild = (HostElementPrototype) => { - HostElementPrototype.__appendChild = HostElementPrototype.appendChild; - HostElementPrototype.appendChild = function (newChild) { - const slotName = (newChild['s-sn'] = getSlotName(newChild)); - const slotNode = getHostSlotNode(this.childNodes, slotName); - if (slotNode) { - const slotChildNodes = getHostSlotChildNodes(slotNode, slotName); - const appendAfter = slotChildNodes[slotChildNodes.length - 1]; - appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling); - // Check if there is fallback content that should be hidden - updateFallbackSlotVisibility(this); - return; - } - return this.__appendChild(newChild); - }; -}; -/** - * Patches the `removeChild` method on a `scoped` Stencil component. - * This patch attempts to remove the specified node from a slot reference - * if the slot exists. Otherwise, it falls-back to the original `removeChild` method. - * - * @param ElementPrototype The Stencil component to be patched - */ -const patchSlotRemoveChild = (ElementPrototype) => { - ElementPrototype.__removeChild = ElementPrototype.removeChild; - ElementPrototype.removeChild = function (toRemove) { - if (toRemove && typeof toRemove['s-sn'] !== 'undefined') { - const slotNode = getHostSlotNode(this.childNodes, toRemove['s-sn']); - if (slotNode) { - // Get all slot content - const slotChildNodes = getHostSlotChildNodes(slotNode, toRemove['s-sn']); - // See if any of the slotted content matches the node to remove - const existingNode = slotChildNodes.find((n) => n === toRemove); - if (existingNode) { - existingNode.remove(); - // Check if there is fallback content that should be displayed if that - // was the last node in the slot - updateFallbackSlotVisibility(this); - return; - } - } - } - return this.__removeChild(toRemove); - }; -}; -/** - * Patches the `prepend` method for a slotted node inside a scoped component. - * - * @param HostElementPrototype the `Element` to be patched - */ -const patchSlotPrepend = (HostElementPrototype) => { - const originalPrepend = HostElementPrototype.prepend; - HostElementPrototype.prepend = function (...newChildren) { - newChildren.forEach((newChild) => { - if (typeof newChild === 'string') { - newChild = this.ownerDocument.createTextNode(newChild); - } - const slotName = (newChild['s-sn'] = getSlotName(newChild)); - const slotNode = getHostSlotNode(this.childNodes, slotName); - if (slotNode) { - const slotPlaceholder = document.createTextNode(''); - slotPlaceholder['s-nr'] = newChild; - slotNode['s-cr'].parentNode.__appendChild(slotPlaceholder); - newChild['s-ol'] = slotPlaceholder; - const slotChildNodes = getHostSlotChildNodes(slotNode, slotName); - const appendAfter = slotChildNodes[0]; - return appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling); - } - if (newChild.nodeType === 1 && !!newChild.getAttribute('slot')) { - newChild.hidden = true; - } - return originalPrepend.call(this, newChild); - }); - }; -}; -/** - * Patches the `append` method for a slotted node inside a scoped component. The patched method uses - * `appendChild` under-the-hood while creating text nodes for any new children that passed as bare strings. - * - * @param HostElementPrototype the `Element` to be patched - */ -const patchSlotAppend = (HostElementPrototype) => { - HostElementPrototype.append = function (...newChildren) { - newChildren.forEach((newChild) => { - if (typeof newChild === 'string') { - newChild = this.ownerDocument.createTextNode(newChild); - } - this.appendChild(newChild); - }); - }; -}; -/** - * Patches the `insertAdjacentHTML` method for a slotted node inside a scoped component. Specifically, - * we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the element - * gets inserted into the DOM in the correct location. - * - * @param HostElementPrototype the `Element` to be patched - */ -const patchSlotInsertAdjacentHTML = (HostElementPrototype) => { - const originalInsertAdjacentHtml = HostElementPrototype.insertAdjacentHTML; - HostElementPrototype.insertAdjacentHTML = function (position, text) { - if (position !== 'afterbegin' && position !== 'beforeend') { - return originalInsertAdjacentHtml.call(this, position, text); - } - const container = this.ownerDocument.createElement('_'); - let node; - container.innerHTML = text; - if (position === 'afterbegin') { - while ((node = container.firstChild)) { - this.prepend(node); - } - } - else if (position === 'beforeend') { - while ((node = container.firstChild)) { - this.append(node); - } - } - }; -}; -/** - * Patches the `insertAdjacentText` method for a slotted node inside a scoped component. Specifically, - * we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the text node - * gets inserted into the DOM in the correct location. - * - * @param HostElementPrototype the `Element` to be patched - */ -const patchSlotInsertAdjacentText = (HostElementPrototype) => { - HostElementPrototype.insertAdjacentText = function (position, text) { - this.insertAdjacentHTML(position, text); - }; -}; -/** - * Patches the `insertAdjacentElement` method for a slotted node inside a scoped component. Specifically, - * we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the element - * gets inserted into the DOM in the correct location. - * - * @param HostElementPrototype the `Element` to be patched - */ -const patchSlotInsertAdjacentElement = (HostElementPrototype) => { - const originalInsertAdjacentElement = HostElementPrototype.insertAdjacentElement; - HostElementPrototype.insertAdjacentElement = function (position, element) { - if (position !== 'afterbegin' && position !== 'beforeend') { - return originalInsertAdjacentElement.call(this, position, element); - } - if (position === 'afterbegin') { - this.prepend(element); - return element; - } - else if (position === 'beforeend') { - this.append(element); - return element; - } - return element; - }; -}; -/** - * Patches the text content of an unnamed slotted node inside a scoped component - * @param hostElementPrototype the `Element` to be patched - */ -const patchTextContent = (hostElementPrototype) => { - const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent'); - Object.defineProperty(hostElementPrototype, '__textContent', descriptor); - if (BUILD.experimentalSlotFixes) { - // Patch `textContent` to mimic shadow root behavior - Object.defineProperty(hostElementPrototype, 'textContent', { - // To mimic shadow root behavior, we need to return the text content of all - // nodes in a slot reference node - get() { - const slotRefNodes = getAllChildSlotNodes(this.childNodes); - const textContent = slotRefNodes - .map((node) => { - var _a, _b; - const text = []; - // Need to get the text content of all nodes in the slot reference node - let slotContent = node.nextSibling; - while (slotContent && slotContent['s-sn'] === node['s-sn']) { - if (slotContent.nodeType === 3 /* NODE_TYPES.TEXT_NODE */ || slotContent.nodeType === 1 /* NODE_TYPES.ELEMENT_NODE */) { - text.push((_b = (_a = slotContent.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : ''); - } - slotContent = slotContent.nextSibling; - } - return text.filter((ref) => ref !== '').join(' '); - }) - .filter((text) => text !== '') - .join(' '); - // Pad the string to return - return ' ' + textContent + ' '; - }, - // To mimic shadow root behavior, we need to overwrite all nodes in a slot - // reference node. If a default slot reference node exists, the text content will be - // placed there. Otherwise, the new text node will be hidden - set(value) { - const slotRefNodes = getAllChildSlotNodes(this.childNodes); - slotRefNodes.forEach((node) => { - // Remove the existing content of the slot - let slotContent = node.nextSibling; - while (slotContent && slotContent['s-sn'] === node['s-sn']) { - const tmp = slotContent; - slotContent = slotContent.nextSibling; - tmp.remove(); - } - // If this is a default slot, add the text node in the slot location. - // Otherwise, destroy the slot reference node - if (node['s-sn'] === '') { - const textNode = this.ownerDocument.createTextNode(value); - textNode['s-sn'] = ''; - node.parentElement.insertBefore(textNode, node.nextSibling); - } - else { - node.remove(); - } - }); - }, - }); - } - else { - Object.defineProperty(hostElementPrototype, 'textContent', { - get() { - var _a; - // get the 'default slot', which would be the first slot in a shadow tree (if we were using one), whose name is - // the empty string - const slotNode = getHostSlotNode(this.childNodes, ''); - // when a slot node is found, the textContent _may_ be found in the next sibling (text) node, depending on how - // nodes were reordered during the vdom render. first try to get the text content from the sibling. - if (((_a = slotNode === null || slotNode === void 0 ? void 0 : slotNode.nextSibling) === null || _a === void 0 ? void 0 : _a.nodeType) === 3 /* NODE_TYPES.TEXT_NODE */) { - return slotNode.nextSibling.textContent; - } - else if (slotNode) { - return slotNode.textContent; - } - else { - // fallback to the original implementation - return this.__textContent; - } - }, - set(value) { - var _a; - // get the 'default slot', which would be the first slot in a shadow tree (if we were using one), whose name is - // the empty string - const slotNode = getHostSlotNode(this.childNodes, ''); - // when a slot node is found, the textContent _may_ need to be placed in the next sibling (text) node, - // depending on how nodes were reordered during the vdom render. first try to set the text content on the - // sibling. - if (((_a = slotNode === null || slotNode === void 0 ? void 0 : slotNode.nextSibling) === null || _a === void 0 ? void 0 : _a.nodeType) === 3 /* NODE_TYPES.TEXT_NODE */) { - slotNode.nextSibling.textContent = value; - } - else if (slotNode) { - slotNode.textContent = value; - } - else { - // we couldn't find a slot, but that doesn't mean that there isn't one. if this check ran before the DOM - // loaded, we could have missed it. check for a content reference element on the scoped component and insert - // it there - this.__textContent = value; - const contentRefElm = this['s-cr']; - if (contentRefElm) { - this.insertBefore(contentRefElm, this.firstChild); - } - } - }, - }); - } -}; -const patchChildSlotNodes = (elm, cmpMeta) => { - class FakeNodeList extends Array { - item(n) { - return this[n]; - } - } - // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field - if (cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) { - const childNodesFn = elm.__lookupGetter__('childNodes'); - Object.defineProperty(elm, 'children', { - get() { - return this.childNodes.map((n) => n.nodeType === 1); - }, - }); - Object.defineProperty(elm, 'childElementCount', { - get() { - return elm.children.length; - }, - }); - Object.defineProperty(elm, 'childNodes', { - get() { - const childNodes = childNodesFn.call(this); - if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0 && - getHostRef(this).$flags$ & 2 /* HOST_FLAGS.hasRendered */) { - const result = new FakeNodeList(); - for (let i = 0; i < childNodes.length; i++) { - const slot = childNodes[i]['s-nr']; - if (slot) { - result.push(slot); - } - } - return result; - } - return FakeNodeList.from(childNodes); - }, - }); - } -}; -/** - * Recursively finds all slot reference nodes ('s-sr') in a series of child nodes. - * - * @param childNodes The set of child nodes to search for slot reference nodes. - * @returns An array of slot reference nodes. - */ -const getAllChildSlotNodes = (childNodes) => { - const slotRefNodes = []; - for (const childNode of Array.from(childNodes)) { - if (childNode['s-sr']) { - slotRefNodes.push(childNode); - } - slotRefNodes.push(...getAllChildSlotNodes(childNode.childNodes)); - } - return slotRefNodes; -}; -const getSlotName = (node) => node['s-sn'] || (node.nodeType === 1 && node.getAttribute('slot')) || ''; -/** - * Recursively searches a series of child nodes for a slot with the provided name. - * @param childNodes the nodes to search for a slot with a specific name. - * @param slotName the name of the slot to match on. - * @returns a reference to the slot node that matches the provided name, `null` otherwise - */ -const getHostSlotNode = (childNodes, slotName) => { - let i = 0; - let childNode; - for (; i < childNodes.length; i++) { - childNode = childNodes[i]; - if (childNode['s-sr'] && childNode['s-sn'] === slotName) { - return childNode; - } - childNode = getHostSlotNode(childNode.childNodes, slotName); - if (childNode) { - return childNode; - } - } - return null; -}; -const getHostSlotChildNodes = (n, slotName) => { - const childNodes = [n]; - while ((n = n.nextSibling) && n['s-sn'] === slotName) { - childNodes.push(n); - } - return childNodes; -}; -const defineCustomElement = (Cstr, compactMeta) => { - customElements.define(compactMeta[1], proxyCustomElement(Cstr, compactMeta)); -}; -const proxyCustomElement = (Cstr, compactMeta) => { - const cmpMeta = { - $flags$: compactMeta[0], - $tagName$: compactMeta[1], - }; - if (BUILD.member) { - cmpMeta.$members$ = compactMeta[2]; - } - if (BUILD.hostListener) { - cmpMeta.$listeners$ = compactMeta[3]; - } - if (BUILD.watchCallback) { - cmpMeta.$watchers$ = Cstr.$watchers$; - } - if (BUILD.reflect) { - cmpMeta.$attrsToReflect$ = []; - } - if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) { - // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field - cmpMeta.$flags$ |= 8 /* CMP_FLAGS.needsShadowDomShim */; - } - // TODO(STENCIL-914): this check and `else` block can go away and be replaced by just the `scoped` check - if (BUILD.experimentalSlotFixes && BUILD.scoped && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) { - patchPseudoShadowDom(Cstr.prototype, cmpMeta); - } - else { - if (BUILD.slotChildNodesFix) { - patchChildSlotNodes(Cstr.prototype, cmpMeta); - } - if (BUILD.cloneNodeFix) { - patchCloneNode(Cstr.prototype); - } - if (BUILD.appendChildSlotFix) { - patchSlotAppendChild(Cstr.prototype); - } - if (BUILD.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) { - patchTextContent(Cstr.prototype); - } - } - const originalConnectedCallback = Cstr.prototype.connectedCallback; - const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback; - Object.assign(Cstr.prototype, { - __registerHost() { - registerHost(this, cmpMeta); - }, - connectedCallback() { - connectedCallback(this); - if (BUILD.connectedCallback && originalConnectedCallback) { - originalConnectedCallback.call(this); - } - }, - disconnectedCallback() { - disconnectedCallback(this); - if (BUILD.disconnectedCallback && originalDisconnectedCallback) { - originalDisconnectedCallback.call(this); - } - }, - __attachShadow() { - if (supportsShadow) { - if (BUILD.shadowDelegatesFocus) { - this.attachShadow({ - mode: 'open', - delegatesFocus: !!(cmpMeta.$flags$ & 16 /* CMP_FLAGS.shadowDelegatesFocus */), - }); - } - else { - this.attachShadow({ mode: 'open' }); - } - } - else { - this.shadowRoot = this; - } - }, - }); - Cstr.is = cmpMeta.$tagName$; - return proxyComponent(Cstr, cmpMeta, 1 /* PROXY_FLAGS.isElementConstructor */ | 2 /* PROXY_FLAGS.proxyState */); -}; -const forceModeUpdate = (elm) => { - if (BUILD.style && BUILD.mode && !BUILD.lazyLoad) { - const mode = computeMode(elm); - const hostRef = getHostRef(elm); - if (hostRef.$modeName$ !== mode) { - const cmpMeta = hostRef.$cmpMeta$; - const oldScopeId = elm['s-sc']; - const scopeId = getScopeId(cmpMeta, mode); - const style = elm.constructor.style[mode]; - const flags = cmpMeta.$flags$; - if (style) { - if (!styles.has(scopeId)) { - registerStyle(scopeId, style, !!(flags & 1 /* CMP_FLAGS.shadowDomEncapsulation */)); - } - hostRef.$modeName$ = mode; - elm.classList.remove(oldScopeId + '-h', oldScopeId + '-s'); - attachStyles(hostRef); - forceUpdate(elm); - } - } - } -}; -/** - * Kick off hot-module-replacement for a component. In order to replace the - * component in-place we: - * - * 1. get a reference to the {@link d.HostRef} for the element - * 2. reset the element's runtime flags - * 3. re-run the initialization logic for the element (via - * {@link initializeComponent}) - * - * @param hostElement the host element for the component which we want to start - * doing HMR - * @param cmpMeta runtime metadata for the component - * @param hmrVersionId the current HMR version ID - */ -const hmrStart = (hostElement, cmpMeta, hmrVersionId) => { - // ¯\_(ツ)_/¯ - const hostRef = getHostRef(hostElement); - // reset state flags to only have been connected - hostRef.$flags$ = 1 /* HOST_FLAGS.hasConnected */; - // TODO - // detach any event listeners that may have been added - // because we're not passing an exact event name it'll - // remove all of this element's event, which is good - // re-initialize the component - initializeComponent(hostElement, hostRef, cmpMeta, hmrVersionId); -}; -const bootstrapLazy = (lazyBundles, options = {}) => { - var _a; - if (BUILD.profile && performance.mark) { - performance.mark('st:app:start'); - } - installDevTools(); - const endBootstrap = createTime('bootstrapLazy'); - const cmpTags = []; - const exclude = options.exclude || []; - const customElements = win.customElements; - const head = doc.head; - const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]'); - const dataStyles = /*@__PURE__*/ doc.createElement('style'); - const deferredConnectedCallbacks = []; - const styles = /*@__PURE__*/ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`); - let appLoadFallback; - let isBootstrapping = true; - let i = 0; - Object.assign(plt, options); - plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href; - if (BUILD.asyncQueue) { - if (options.syncQueue) { - plt.$flags$ |= 4 /* PLATFORM_FLAGS.queueSync */; - } - } - if (BUILD.hydrateClientSide) { - // If the app is already hydrated there is not point to disable the - // async queue. This will improve the first input delay - plt.$flags$ |= 2 /* PLATFORM_FLAGS.appLoaded */; - } - if (BUILD.hydrateClientSide && BUILD.shadowDom) { - for (; i < styles.length; i++) { - registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true); - } - } - let hasSlotRelocation = false; - lazyBundles.map((lazyBundle) => { - lazyBundle[1].map((compactMeta) => { - var _a; - const cmpMeta = { - $flags$: compactMeta[0], - $tagName$: compactMeta[1], - $members$: compactMeta[2], - $listeners$: compactMeta[3], - }; - // Check if we are using slots outside the shadow DOM in this component. - // We'll use this information later to add styles for `slot-fb` elements - if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) { - hasSlotRelocation = true; - } - if (BUILD.member) { - cmpMeta.$members$ = compactMeta[2]; - } - if (BUILD.hostListener) { - cmpMeta.$listeners$ = compactMeta[3]; - } - if (BUILD.reflect) { - cmpMeta.$attrsToReflect$ = []; - } - if (BUILD.watchCallback) { - cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {}; - } - if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) { - // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field - cmpMeta.$flags$ |= 8 /* CMP_FLAGS.needsShadowDomShim */; - } - const tagName = BUILD.transformTagName && options.transformTagName - ? options.transformTagName(cmpMeta.$tagName$) - : cmpMeta.$tagName$; - const HostElement = class extends HTMLElement { - // StencilLazyHost - constructor(self) { - // @ts-ignore - super(self); - self = this; - registerHost(self, cmpMeta); - if (BUILD.shadowDom && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) { - // this component is using shadow dom - // and this browser supports shadow dom - // add the read-only property "shadowRoot" to the host element - // adding the shadow root build conditionals to minimize runtime - if (supportsShadow) { - if (BUILD.shadowDelegatesFocus) { - self.attachShadow({ - mode: 'open', - delegatesFocus: !!(cmpMeta.$flags$ & 16 /* CMP_FLAGS.shadowDelegatesFocus */), - }); - } - else { - self.attachShadow({ mode: 'open' }); - } - } - else if (!BUILD.hydrateServerSide && !('shadowRoot' in self)) { - self.shadowRoot = self; - } - } - } - connectedCallback() { - if (appLoadFallback) { - clearTimeout(appLoadFallback); - appLoadFallback = null; - } - if (isBootstrapping) { - // connectedCallback will be processed once all components have been registered - deferredConnectedCallbacks.push(this); - } - else { - plt.jmp(() => connectedCallback(this)); - } - } - disconnectedCallback() { - plt.jmp(() => disconnectedCallback(this)); - } - componentOnReady() { - return getHostRef(this).$onReadyPromise$; - } - }; - // TODO(STENCIL-914): this check and `else` block can go away and be replaced by just the `scoped` check - if (BUILD.experimentalSlotFixes && BUILD.scoped && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) { - patchPseudoShadowDom(HostElement.prototype, cmpMeta); - } - else { - if (BUILD.slotChildNodesFix) { - patchChildSlotNodes(HostElement.prototype, cmpMeta); - } - if (BUILD.cloneNodeFix) { - patchCloneNode(HostElement.prototype); - } - if (BUILD.appendChildSlotFix) { - patchSlotAppendChild(HostElement.prototype); - } - if (BUILD.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) { - patchTextContent(HostElement.prototype); - } - } - // if the component is formAssociated we need to set that on the host - // element so that it will be ready for `attachInternals` to be called on - // it later on - if (BUILD.formAssociated && cmpMeta.$flags$ & 64 /* CMP_FLAGS.formAssociated */) { - HostElement.formAssociated = true; - } - if (BUILD.hotModuleReplacement) { - // if we're in an HMR dev build then we need to set up the callback - // which will carry out the work of actually replacing the module for - // this particular component - HostElement.prototype['s-hmr'] = function (hmrVersionId) { - hmrStart(this, cmpMeta, hmrVersionId); - }; - } - cmpMeta.$lazyBundleId$ = lazyBundle[0]; - if (!exclude.includes(tagName) && !customElements.get(tagName)) { - cmpTags.push(tagName); - customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* PROXY_FLAGS.isElementConstructor */)); - } - }); - }); - // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM - if (hasSlotRelocation) { - dataStyles.innerHTML += SLOT_FB_CSS; - } - // Add hydration styles - if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) { - dataStyles.innerHTML += cmpTags + HYDRATED_CSS; - } - // If we have styles, add them to the DOM - if (dataStyles.innerHTML.length) { - dataStyles.setAttribute('data-styles', ''); - // Apply CSP nonce to the style tag if it exists - const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc); - if (nonce != null) { - dataStyles.setAttribute('nonce', nonce); - } - // Insert the styles into the document head - // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied - head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild); - } - // Process deferred connectedCallbacks now all components have been registered - isBootstrapping = false; - if (deferredConnectedCallbacks.length) { - deferredConnectedCallbacks.map((host) => host.connectedCallback()); - } - else { - if (BUILD.profile) { - plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30, 'timeout'))); - } - else { - plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30))); - } - } - // Fallback appLoad event - endBootstrap(); -}; -const Fragment = (_, children) => children; -const addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => { - if (BUILD.hostListener && listeners) { - // this is called immediately within the element's constructor - // initialize our event listeners on the host element - // we do this now so that we can listen to events that may - // have fired even before the instance is ready - if (BUILD.hostListenerTargetParent) { - // this component may have event listeners that should be attached to the parent - if (attachParentListeners) { - // this is being ran from within the connectedCallback - // which is important so that we know the host element actually has a parent element - // filter out the listeners to only have the ones that ARE being attached to the parent - listeners = listeners.filter(([flags]) => flags & 32 /* LISTENER_FLAGS.TargetParent */); - } - else { - // this is being ran from within the component constructor - // everything BUT the parent element listeners should be attached at this time - // filter out the listeners that are NOT being attached to the parent - listeners = listeners.filter(([flags]) => !(flags & 32 /* LISTENER_FLAGS.TargetParent */)); - } - } - listeners.map(([flags, name, method]) => { - const target = BUILD.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm; - const handler = hostListenerProxy(hostRef, method); - const opts = hostListenerOpts(flags); - plt.ael(target, name, handler, opts); - (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts)); - }); - } -}; -const hostListenerProxy = (hostRef, methodName) => (ev) => { - try { - if (BUILD.lazyLoad) { - if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) { - // instance is ready, let's call it's member method for this event - hostRef.$lazyInstance$[methodName](ev); - } - else { - (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]); - } - } - else { - hostRef.$hostElement$[methodName](ev); - } - } - catch (e) { - consoleError(e); - } -}; -const getHostListenerTarget = (elm, flags) => { - if (BUILD.hostListenerTargetDocument && flags & 4 /* LISTENER_FLAGS.TargetDocument */) - return doc; - if (BUILD.hostListenerTargetWindow && flags & 8 /* LISTENER_FLAGS.TargetWindow */) - return win; - if (BUILD.hostListenerTargetBody && flags & 16 /* LISTENER_FLAGS.TargetBody */) - return doc.body; - if (BUILD.hostListenerTargetParent && flags & 32 /* LISTENER_FLAGS.TargetParent */) - return elm.parentElement; - return elm; -}; -// prettier-ignore -const hostListenerOpts = (flags) => supportsListenerOptions - ? ({ - passive: (flags & 1 /* LISTENER_FLAGS.Passive */) !== 0, - capture: (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0, - }) - : (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0; -/** - * Assigns the given value to the nonce property on the runtime platform object. - * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags. - * @param nonce The value to be assigned to the platform nonce property. - * @returns void - */ -const setNonce = (nonce) => (plt.$nonce$ = nonce); -const setPlatformOptions = (opts) => Object.assign(plt, opts); -/** - * Updates the DOM generated on the server with annotations such as node attributes and - * comment nodes to facilitate future client-side hydration. These annotations are used for things - * like moving elements back to their original hosts if using Shadow DOM on the client, and for quickly - * reconstructing the vNode representations of the DOM. - * - * @param doc The DOM generated by the server. - * @param staticComponents Any components that should be considered static and do not need client-side hydration. - */ -const insertVdomAnnotations = (doc, staticComponents) => { - if (doc != null) { - const docData = { - hostIds: 0, - rootLevelIds: 0, - staticComponents: new Set(staticComponents), - }; - const orgLocationNodes = []; - parseVNodeAnnotations(doc, doc.body, docData, orgLocationNodes); - orgLocationNodes.forEach((orgLocationNode) => { - if (orgLocationNode != null) { - const nodeRef = orgLocationNode['s-nr']; - let hostId = nodeRef['s-host-id']; - let nodeId = nodeRef['s-node-id']; - let childId = `${hostId}.${nodeId}`; - if (hostId == null) { - hostId = 0; - docData.rootLevelIds++; - nodeId = docData.rootLevelIds; - childId = `${hostId}.${nodeId}`; - if (nodeRef.nodeType === 1 /* NODE_TYPE.ElementNode */) { - nodeRef.setAttribute(HYDRATE_CHILD_ID, childId); - } - else if (nodeRef.nodeType === 3 /* NODE_TYPE.TextNode */) { - if (hostId === 0) { - const textContent = nodeRef.nodeValue.trim(); - if (textContent === '') { - // useless whitespace node at the document root - orgLocationNode.remove(); - return; - } - } - const commentBeforeTextNode = doc.createComment(childId); - commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`; - nodeRef.parentNode.insertBefore(commentBeforeTextNode, nodeRef); - } - } - let orgLocationNodeId = `${ORG_LOCATION_ID}.${childId}`; - const orgLocationParentNode = orgLocationNode.parentElement; - if (orgLocationParentNode) { - if (orgLocationParentNode['s-en'] === '') { - // ending with a "." means that the parent element - // of this node's original location is a SHADOW dom element - // and this node is apart of the root level light dom - orgLocationNodeId += `.`; - } - else if (orgLocationParentNode['s-en'] === 'c') { - // ending with a ".c" means that the parent element - // of this node's original location is a SCOPED element - // and this node is apart of the root level light dom - orgLocationNodeId += `.c`; - } - } - orgLocationNode.nodeValue = orgLocationNodeId; - } - }); - } -}; -/** - * Recursively parses a node generated by the server and its children to set host and child id - * attributes read during client-side hydration. This function also tracks whether each node is - * an original location reference node meaning that a node has been moved via slot relocation. - * - * @param doc The DOM generated by the server. - * @param node The node to parse. - * @param docData An object containing metadata about the document. - * @param orgLocationNodes An array of nodes that have been moved via slot relocation. - */ -const parseVNodeAnnotations = (doc, node, docData, orgLocationNodes) => { - if (node == null) { - return; - } - if (node['s-nr'] != null) { - orgLocationNodes.push(node); - } - if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) { - node.childNodes.forEach((childNode) => { - const hostRef = getHostRef(childNode); - if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) { - const cmpData = { - nodeIds: 0, - }; - insertVNodeAnnotations(doc, childNode, hostRef.$vnode$, docData, cmpData); - } - parseVNodeAnnotations(doc, childNode, docData, orgLocationNodes); - }); - } -}; -/** - * Insert attribute annotations on an element for its host ID and, potentially, its child ID. - * Also makes calls to insert annotations on the element's children, keeping track of the depth of - * the component tree. - * - * @param doc The DOM generated by the server. - * @param hostElm The element to insert annotations for. - * @param vnode The vNode representation of the element. - * @param docData An object containing metadata about the document. - * @param cmpData An object containing metadata about the component. - */ -const insertVNodeAnnotations = (doc, hostElm, vnode, docData, cmpData) => { - if (vnode != null) { - const hostId = ++docData.hostIds; - hostElm.setAttribute(HYDRATE_ID, hostId); - if (hostElm['s-cr'] != null) { - hostElm['s-cr'].nodeValue = `${CONTENT_REF_ID}.${hostId}`; - } - if (vnode.$children$ != null) { - const depth = 0; - vnode.$children$.forEach((vnodeChild, index) => { - insertChildVNodeAnnotations(doc, vnodeChild, cmpData, hostId, depth, index); - }); - } - // If this element does not already have a child ID and has a sibling comment node - // representing a slot, we use the content of the comment to set the child ID attribute - // on the host element. - if (hostElm && vnode && vnode.$elm$ && !hostElm.hasAttribute(HYDRATE_CHILD_ID)) { - const parent = hostElm.parentElement; - if (parent && parent.childNodes) { - const parentChildNodes = Array.from(parent.childNodes); - const comment = parentChildNodes.find((node) => node.nodeType === 8 /* NODE_TYPE.CommentNode */ && node['s-sr']); - if (comment) { - const index = parentChildNodes.indexOf(hostElm) - 1; - vnode.$elm$.setAttribute(HYDRATE_CHILD_ID, `${comment['s-host-id']}.${comment['s-node-id']}.0.${index}`); - } - } - } - } -}; -/** - * Recursively analyzes the type of a child vNode and inserts annotations on the vNodes's element based on its type. - * Element nodes receive a child ID attribute, text nodes have a comment with the child ID inserted before them, - * and comment nodes representing a slot have their node value set to a slot node ID containing the child ID. - * - * @param doc The DOM generated by the server. - * @param vnodeChild The vNode to insert annotations for. - * @param cmpData An object containing metadata about the component. - * @param hostId The host ID of this element's parent. - * @param depth How deep this element sits in the component tree relative to its parent. - * @param index The index of this element in its parent's children array. - */ -const insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, index) => { - const childElm = vnodeChild.$elm$; - if (childElm == null) { - return; - } - const nodeId = cmpData.nodeIds++; - const childId = `${hostId}.${nodeId}.${depth}.${index}`; - childElm['s-host-id'] = hostId; - childElm['s-node-id'] = nodeId; - if (childElm.nodeType === 1 /* NODE_TYPE.ElementNode */) { - childElm.setAttribute(HYDRATE_CHILD_ID, childId); - } - else if (childElm.nodeType === 3 /* NODE_TYPE.TextNode */) { - const parentNode = childElm.parentNode; - const nodeName = parentNode.nodeName; - if (nodeName !== 'STYLE' && nodeName !== 'SCRIPT') { - const textNodeId = `${TEXT_NODE_ID}.${childId}`; - const commentBeforeTextNode = doc.createComment(textNodeId); - parentNode.insertBefore(commentBeforeTextNode, childElm); - } - } - else if (childElm.nodeType === 8 /* NODE_TYPE.CommentNode */) { - if (childElm['s-sr']) { - const slotName = childElm['s-sn'] || ''; - const slotNodeId = `${SLOT_NODE_ID}.${childId}.${slotName}`; - childElm.nodeValue = slotNodeId; - } - } - if (vnodeChild.$children$ != null) { - // Increment depth each time we recur deeper into the tree - const childDepth = depth + 1; - vnodeChild.$children$.forEach((vnode, index) => { - insertChildVNodeAnnotations(doc, vnode, cmpData, hostId, childDepth, index); - }); - } -}; -/** - * A WeakMap mapping runtime component references to their corresponding host reference - * instances. - */ -const hostRefs = /*@__PURE__*/ new WeakMap(); -/** - * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef} - * - * @param ref the runtime ref of interest - * @returns the Host reference (if found) or undefined - */ -const getHostRef = (ref) => hostRefs.get(ref); -/** - * Register a lazy instance with the {@link hostRefs} object so it's - * corresponding {@link d.HostRef} can be retrieved later. - * - * @param lazyInstance the lazy instance of interest - * @param hostRef that instances `HostRef` object - * @returns a reference to the host ref WeakMap - */ -const registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef); -/** - * Register a host element for a Stencil component, setting up various metadata - * and callbacks based on {@link BUILD} flags as well as the component's runtime - * metadata. - * - * @param hostElement the host element to register - * @param cmpMeta runtime metadata for that component - * @returns a reference to the host ref WeakMap - */ -const registerHost = (hostElement, cmpMeta) => { - const hostRef = { - $flags$: 0, - $hostElement$: hostElement, - $cmpMeta$: cmpMeta, - $instanceValues$: new Map(), - }; - if (BUILD.isDev) { - hostRef.$renderCount$ = 0; - } - if (BUILD.method && BUILD.lazyLoad) { - hostRef.$onInstancePromise$ = new Promise((r) => (hostRef.$onInstanceResolve$ = r)); - } - if (BUILD.asyncLoading) { - hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r)); - hostElement['s-p'] = []; - hostElement['s-rc'] = []; - } - addHostEventListeners(hostElement, hostRef, cmpMeta.$listeners$, false); - return hostRefs.set(hostElement, hostRef); -}; -const isMemberInElement = (elm, memberName) => memberName in elm; -const consoleError = (e, el) => (customError || console.error)(e, el); -const STENCIL_DEV_MODE = BUILD.isTesting - ? ['STENCIL:'] // E2E testing - : [ - '%cstencil', - 'color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px', - ]; -const consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m); -const consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m); -const consoleDevInfo = (...m) => console.info(...STENCIL_DEV_MODE, ...m); -const setErrorHandler = (handler) => (customError = handler); -const cmpModules = /*@__PURE__*/ new Map(); -const loadModule = (cmpMeta, hostRef, hmrVersionId) => { - // loadModuleImport - const exportName = cmpMeta.$tagName$.replace(/-/g, '_'); - const bundleId = cmpMeta.$lazyBundleId$; - if (BUILD.isDev && typeof bundleId !== 'string') { - consoleDevError(`Trying to lazily load component <${cmpMeta.$tagName$}> with style mode "${hostRef.$modeName$}", but it does not exist.`); - return undefined; - } - const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false; - if (module) { - return module[exportName]; - } - /*!__STENCIL_STATIC_IMPORT_SWITCH__*/ - return import( - /* @vite-ignore */ - /* webpackInclude: /\.entry\.js$/ */ - /* webpackExclude: /\.system\.entry\.js$/ */ - /* webpackMode: "lazy" */ - `./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''}`).then((importedModule) => { - if (!BUILD.hotModuleReplacement) { - cmpModules.set(bundleId, importedModule); - } - return importedModule[exportName]; - }, consoleError); -}; -const styles = /*@__PURE__*/ new Map(); -const modeResolutionChain = []; -const win = typeof window !== 'undefined' ? window : {}; -const doc = win.document || { head: {} }; -const H = (win.HTMLElement || class { -}); -const plt = { - $flags$: 0, - $resourcesUrl$: '', - jmp: (h) => h(), - raf: (h) => requestAnimationFrame(h), - ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts), - rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts), - ce: (eventName, opts) => new CustomEvent(eventName, opts), -}; -const setPlatformHelpers = (helpers) => { - Object.assign(plt, helpers); -}; -const supportsShadow = -// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field -BUILD.shadowDomShim && BUILD.shadowDom - ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)() - : true; -const supportsListenerOptions = /*@__PURE__*/ (() => { - let supportsListenerOptions = false; - try { - doc.addEventListener('e', null, Object.defineProperty({}, 'passive', { - get() { - supportsListenerOptions = true; - }, - })); - } - catch (e) { } - return supportsListenerOptions; -})(); -const promiseResolve = (v) => Promise.resolve(v); -const supportsConstructableStylesheets = BUILD.constructableCSS - ? /*@__PURE__*/ (() => { - try { - new CSSStyleSheet(); - return typeof new CSSStyleSheet().replaceSync === 'function'; - } - catch (e) { } - return false; - })() - : false; -const queueDomReads = []; -const queueDomWrites = []; -const queueDomWritesLow = []; -const queueTask = (queue, write) => (cb) => { - queue.push(cb); - if (!queuePending) { - queuePending = true; - if (write && plt.$flags$ & 4 /* PLATFORM_FLAGS.queueSync */) { - nextTick(flush); - } - else { - plt.raf(flush); - } - } -}; -const consume = (queue) => { - for (let i = 0; i < queue.length; i++) { - try { - queue[i](performance.now()); - } - catch (e) { - consoleError(e); - } - } - queue.length = 0; -}; -const consumeTimeout = (queue, timeout) => { - let i = 0; - let ts = 0; - while (i < queue.length && (ts = performance.now()) < timeout) { - try { - queue[i++](ts); - } - catch (e) { - consoleError(e); - } - } - if (i === queue.length) { - queue.length = 0; - } - else if (i !== 0) { - queue.splice(0, i); - } -}; -const flush = () => { - if (BUILD.asyncQueue) { - queueCongestion++; - } - // always force a bunch of medium callbacks to run, but still have - // a throttle on how many can run in a certain time - // DOM READS!!! - consume(queueDomReads); - // DOM WRITES!!! - if (BUILD.asyncQueue) { - const timeout = (plt.$flags$ & 6 /* PLATFORM_FLAGS.queueMask */) === 2 /* PLATFORM_FLAGS.appLoaded */ - ? performance.now() + 14 * Math.ceil(queueCongestion * (1.0 / 10.0)) - : Infinity; - consumeTimeout(queueDomWrites, timeout); - consumeTimeout(queueDomWritesLow, timeout); - if (queueDomWrites.length > 0) { - queueDomWritesLow.push(...queueDomWrites); - queueDomWrites.length = 0; - } - if ((queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0)) { - // still more to do yet, but we've run out of time - // let's let this thing cool off and try again in the next tick - plt.raf(flush); - } - else { - queueCongestion = 0; - } - } - else { - consume(queueDomWrites); - if ((queuePending = queueDomReads.length > 0)) { - // still more to do yet, but we've run out of time - // let's let this thing cool off and try again in the next tick - plt.raf(flush); - } - } -}; -const nextTick = (cb) => promiseResolve().then(cb); -const readTask = /*@__PURE__*/ queueTask(queueDomReads, false); -const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true); - -export { BUILD as B, H, NAMESPACE as N, Host as a, bootstrapLazy as b, consoleDevInfo as c, doc as d, createEvent as e, getAssetPath as f, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s }; - -//# sourceMappingURL=index-29553cff.js.map \ No newline at end of file diff --git a/packages/mercury/showcase/assets/components/ch-chat/index-29553cff.js.map b/packages/mercury/showcase/assets/components/ch-chat/index-29553cff.js.map deleted file mode 100644 index 2d9b10f95..000000000 --- a/packages/mercury/showcase/assets/components/ch-chat/index-29553cff.js.map +++ /dev/null @@ -1 +0,0 @@ -{"file":"index-29553cff.js","mappings":"AAAY,MAAC,SAAS,GAAG,iBAAiB;AAC9B,MAAC,KAAK,wBAAwB,EAAE,WAAW,EAAE,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,YAAY,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAE,eAAe,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,aAAa,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,iBAAiB,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,oBAAoB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,qBAAqB,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,sBAAsB,EAAE,KAAK,EAAE,0BAA0B,EAAE,KAAK,EAAE,wBAAwB,EAAE,KAAK,EAAE,wBAAwB,EAAE,KAAK,EAAE,oBAAoB,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,iBAAiB,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,qBAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,gBAAgB,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,wBAAwB,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,oBAAoB,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,iBAAiB,EAAE,KAAK,EAAE,cAAc,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,gBAAgB,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,cAAc,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,aAAa,EAAE,IAAI,GAAG;AAC9pD,MAAM,GAAG,wBAAwB,EAAE;;ACF1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,OAAO,CAAC;AACZ,IAAI,UAAU,CAAC;AACf,IAAI,WAAW,CAAC;AAChB,IAAI,WAAW,CAAC;AAChB,IAAI,CAAC,GAAG,CAAC,CAAC;AACV,IAAI,kBAAkB,GAAG,KAAK,CAAC;AAC/B,IAAI,2BAA2B,GAAG,KAAK,CAAC;AACxC,IAAI,iBAAiB,GAAG,KAAK,CAAC;AAC9B,IAAI,SAAS,GAAG,KAAK,CAAC;AACtB,IAAI,YAAY,GAAG,IAAI,CAAC;AACxB,IAAI,eAAe,GAAG,CAAC,CAAC;AACxB,IAAI,YAAY,GAAG,KAAK,CAAC;AAKzB,MAAM,KAAK,GAAG;AACd,IAAI,KAAK,EAAE,KAAK,CAAC,KAAK,GAAG,IAAI,GAAG,KAAK;AACrC,IAAI,SAAS,EAAE,IAAI;AACnB,IAAI,QAAQ,EAAE,KAAK;AACnB,IAAI,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,IAAI,GAAG,KAAK;AAC7C,CAAC,CAAC;AACG,MAAC,YAAY,GAAG,CAAC,IAAI,KAAK;AAC/B,IAAI,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;AACvD,IAAI,OAAO,QAAQ,CAAC,MAAM,KAAK,GAAG,CAAC,QAAQ,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,GAAG,QAAQ,CAAC,QAAQ,CAAC;AACvF,EAAE;AACF,MAAM,YAAY,GAAG,CAAC,IAAI,MAAM,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;AAC3D,MAAM,UAAU,GAAG,CAAC,MAAM,EAAE,OAAO,GAAG,EAAE,KAAK;AAC7C,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;AAC3C,QAAQ,MAAM,GAAG,GAAG,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC;AACrD;AACA,QAAQ,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC9B;AACA,QAAQ,OAAO,MAAM,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AACpF,KAAK;AACL,SAAS;AACT,QAAQ,OAAO,MAAM;AACrB,YAAY,OAAO;AACnB,SAAS,CAAC;AACV,KAAK;AACL,CAAC,CAAC;AACF,MAAM,UAAU,GAAG,CAAC,GAAG,EAAE,WAAW,KAAK;AACzC,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;AAC3C,QAAQ,IAAI,WAAW,CAAC,gBAAgB,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;AACpE,YAAY,WAAW,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAClC,SAAS;AACT,QAAQ,OAAO,MAAM;AACrB,YAAY,IAAI,WAAW,CAAC,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;AACnF,gBAAgB,WAAW,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;AACtD,aAAa;AACb,SAAS,CAAC;AACV,KAAK;AACL,SAAS;AACT,QAAQ,OAAO,MAAM;AACrB,YAAY,OAAO;AACnB,SAAS,CAAC;AACV,KAAK;AACL,CAAC,CAAC;AACF,MAAM,OAAO,GAAG,CAAC,GAAG,KAAK;AACzB,IAAI,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AACpC,IAAI,IAAI,CAAC,OAAO,EAAE;AAClB,QAAQ,OAAO,SAAS,CAAC;AACzB,KAAK;AACL,IAAI,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC;AAClC,IAAI,MAAM,WAAW,GAAG,OAAO,CAAC,aAAa,CAAC;AAC9C,IAAI,OAAO;AACX,QAAQ,WAAW,EAAE,OAAO,CAAC,aAAa;AAC1C,QAAQ,KAAK,EAAE;AACf,YAAY,WAAW,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,8BAA8B;AACnE,YAAY,YAAY,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,+BAA+B;AACrE,YAAY,oBAAoB,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,uCAAuC;AACrF,YAAY,sBAAsB,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,yCAAyC;AACzF,YAAY,iBAAiB,EAAE,CAAC,EAAE,KAAK,GAAG,EAAE,oCAAoC;AAChF,YAAY,uBAAuB,EAAE,CAAC,EAAE,KAAK,GAAG,EAAE,0CAA0C;AAC5F,YAAY,kBAAkB,EAAE,CAAC,EAAE,KAAK,GAAG,EAAE,qCAAqC;AAClF,YAAY,YAAY,EAAE,CAAC,EAAE,KAAK,GAAG,GAAG,+BAA+B;AACvE,YAAY,aAAa,EAAE,CAAC,EAAE,KAAK,GAAG,GAAG,gCAAgC;AACzE,YAAY,aAAa,EAAE,CAAC,EAAE,KAAK,GAAG,GAAG,gCAAgC;AACzE,SAAS;AACT,QAAQ,cAAc,EAAE,OAAO,CAAC,gBAAgB;AAChD,QAAQ,iBAAiB,EAAE,OAAO,CAAC,mBAAmB;AACtD,QAAQ,WAAW;AACnB,QAAQ,YAAY,EAAE,OAAO,CAAC,cAAc;AAC5C,QAAQ,KAAK,EAAE,OAAO,CAAC,OAAO;AAC9B,QAAQ,QAAQ,EAAE,OAAO,CAAC,UAAU;AACpC,QAAQ,cAAc,EAAE,OAAO,CAAC,gBAAgB;AAChD,QAAQ,cAAc,EAAE,OAAO,CAAC,gBAAgB;AAChD,QAAQ,iBAAiB,EAAE,OAAO,CAAC,mBAAmB;AACtD,QAAQ,iBAAiB,EAAE,OAAO,CAAC,mBAAmB;AACtD,QAAQ,eAAe,EAAE,OAAO,CAAC,iBAAiB;AAClD,QAAQ,eAAe,EAAE,OAAO,CAAC,iBAAiB;AAClD,QAAQ,WAAW,EAAE,OAAO,CAAC,aAAa;AAC1C,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC;AACrC,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC;AACrC,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC;AACrC,QAAQ,CAAC,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC;AACnC,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC;AACrC,QAAQ,CAAC,MAAM,GAAG,WAAW,CAAC,MAAM,CAAC;AACrC,KAAK,CAAC;AACN,CAAC,CAAC;AACF,MAAM,eAAe,GAAG,MAAM;AAC9B,IAAI,IAAI,KAAK,CAAC,QAAQ,EAAE;AACxB,QAAQ,MAAM,OAAO,IAAI,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC;AAC1D,QAAQ,MAAM,eAAe,GAAG,OAAO,CAAC,OAAO,CAAC;AAChD,QAAQ,OAAO,CAAC,OAAO,GAAG,CAAC,GAAG,KAAK;AACnC,YAAY,IAAI,MAAM,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;AACtC,YAAY,IAAI,CAAC,MAAM,IAAI,OAAO,eAAe,KAAK,UAAU,EAAE;AAClE,gBAAgB,MAAM,GAAG,eAAe,CAAC,GAAG,CAAC,CAAC;AAC9C,aAAa;AACb,YAAY,OAAO,MAAM,CAAC;AAC1B,SAAS,CAAC;AACV,KAAK;AACL,CAAC,CAAC;AACF,MAAM,cAAc,GAAG,GAAG,CAAC;AAC3B,MAAM,eAAe,GAAG,GAAG,CAAC;AAC5B,MAAM,YAAY,GAAG,GAAG,CAAC;AACzB,MAAM,YAAY,GAAG,GAAG,CAAC;AACzB,MAAM,UAAU,GAAG,MAAM,CAAC;AAC1B,MAAM,iBAAiB,GAAG,QAAQ,CAAC;AACnC,MAAM,gBAAgB,GAAG,MAAM,CAAC;AAChC,MAAM,YAAY,GAAG,kDAAkD,CAAC;AACxE;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,WAAW,GAAG,wDAAwD,CAAC;AAC7E,MAAM,QAAQ,GAAG,8BAA8B,CAAC;AAChD,MAAM,wCAAwC,GAAG;AACjD,IAAI,wBAAwB;AAC5B,IAAI,mBAAmB;AACvB,IAAI,sBAAsB;AAC1B,IAAI,0BAA0B;AAC9B,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,SAAS,GAAG,EAAE,CAAC;AACrB;AACA;AACA;AACA,MAAM,MAAM,GAAG,4BAA4B,CAAC;AAC5C,MAAM,OAAO,GAAG,8BAA8B,CAAC;AAC/C,MAAM,KAAK,GAAG,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;AAC/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,aAAa,GAAG,CAAC,CAAC,KAAK;AAC7B;AACA,IAAI,CAAC,GAAG,OAAO,CAAC,CAAC;AACjB,IAAI,OAAO,CAAC,KAAK,QAAQ,IAAI,CAAC,KAAK,UAAU,CAAC;AAC9C,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAAS,wBAAwB,CAAC,GAAG,EAAE;AACvC,IAAI,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AACnB,IAAI,OAAO,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,IAAI,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,aAAa,CAAC,wBAAwB,CAAC,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,YAAY,CAAC,SAAS,CAAC,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,SAAS,CAAC;AACpO,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACK,MAAC,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,EAAE,GAAG,QAAQ,KAAK;AAChD,IAAI,IAAI,KAAK,GAAG,IAAI,CAAC;AACrB,IAAI,IAAI,GAAG,GAAG,IAAI,CAAC;AACnB,IAAI,IAAI,QAAQ,GAAG,IAAI,CAAC;AACxB,IAAI,IAAI,MAAM,GAAG,KAAK,CAAC;AACvB,IAAI,IAAI,UAAU,GAAG,KAAK,CAAC;AAC3B,IAAI,MAAM,aAAa,GAAG,EAAE,CAAC;AAC7B,IAAI,MAAM,IAAI,GAAG,CAAC,CAAC,KAAK;AACxB,QAAQ,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC3C,YAAY,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACzB,YAAY,IAAI,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;AACtC,gBAAgB,IAAI,CAAC,KAAK,CAAC,CAAC;AAC5B,aAAa;AACb,iBAAiB,IAAI,KAAK,IAAI,IAAI,IAAI,OAAO,KAAK,KAAK,SAAS,EAAE;AAClE,gBAAgB,KAAK,MAAM,GAAG,OAAO,QAAQ,KAAK,UAAU,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG;AACxF,oBAAoB,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AAC1C,iBAAiB;AACjB,qBAAqB,IAAI,KAAK,CAAC,KAAK,IAAI,OAAO,QAAQ,KAAK,UAAU,IAAI,KAAK,CAAC,OAAO,KAAK,SAAS,EAAE;AACvG,oBAAoB,eAAe,CAAC,CAAC;AACrC;AACA,+EAA+E,CAAC,CAAC,CAAC;AAClF,iBAAiB;AACjB,gBAAgB,IAAI,MAAM,IAAI,UAAU,EAAE;AAC1C;AACA,oBAAoB,aAAa,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC;AAC5E,iBAAiB;AACjB,qBAAqB;AACrB;AACA,oBAAoB,aAAa,CAAC,IAAI,CAAC,MAAM,GAAG,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,KAAK,CAAC,CAAC;AAC/E,iBAAiB;AACjB,gBAAgB,UAAU,GAAG,MAAM,CAAC;AACpC,aAAa;AACb,SAAS;AACT,KAAK,CAAC;AACN,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;AACnB,IAAI,IAAI,SAAS,EAAE;AACnB,QAAQ,IAAI,KAAK,CAAC,KAAK,IAAI,QAAQ,KAAK,OAAO,EAAE;AACjD,YAAY,uBAAuB,CAAC,SAAS,CAAC,CAAC;AAC/C,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,OAAO,IAAI,SAAS,CAAC,GAAG,EAAE;AAC5C,YAAY,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC;AAChC,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,cAAc,IAAI,SAAS,CAAC,IAAI,EAAE;AACpD,YAAY,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC;AACtC,SAAS;AACT;AACA,QAAQ,IAAI,KAAK,CAAC,SAAS,EAAE;AAC7B,YAAY,MAAM,SAAS,GAAG,SAAS,CAAC,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC;AACrE,YAAY,IAAI,SAAS,EAAE;AAC3B,gBAAgB,SAAS,CAAC,KAAK;AAC/B,oBAAoB,OAAO,SAAS,KAAK,QAAQ;AACjD,0BAA0B,SAAS;AACnC,0BAA0B,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC;AAChD,6BAA6B,MAAM,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC;AACxD,6BAA6B,IAAI,CAAC,GAAG,CAAC,CAAC;AACvC,aAAa;AACb,SAAS;AACT,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,KAAK,IAAI,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;AACnD,QAAQ,eAAe,CAAC,CAAC;AACzB;AACA,mFAAmF,CAAC,CAAC,CAAC;AACtF,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,cAAc,IAAI,OAAO,QAAQ,KAAK,UAAU,EAAE;AAChE;AACA,QAAQ,OAAO,QAAQ,CAAC,SAAS,KAAK,IAAI,GAAG,EAAE,GAAG,SAAS,EAAE,aAAa,EAAE,WAAW,CAAC,CAAC;AACzF,KAAK;AACL,IAAI,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAC3C,IAAI,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC;AAC9B,IAAI,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,EAAE;AAClC,QAAQ,KAAK,CAAC,UAAU,GAAG,aAAa,CAAC;AACzC,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,OAAO,EAAE;AACvB,QAAQ,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC;AAC1B,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,cAAc,EAAE;AAC9B,QAAQ,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC;AAChC,KAAK;AACL,IAAI,OAAO,KAAK,CAAC;AACjB,EAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,QAAQ,GAAG,CAAC,GAAG,EAAE,IAAI,KAAK;AAChC,IAAI,MAAM,KAAK,GAAG;AAClB,QAAQ,OAAO,EAAE,CAAC;AAClB,QAAQ,KAAK,EAAE,GAAG;AAClB,QAAQ,MAAM,EAAE,IAAI;AACpB,QAAQ,KAAK,EAAE,IAAI;AACnB,QAAQ,UAAU,EAAE,IAAI;AACxB,KAAK,CAAC;AACN,IAAI,IAAI,KAAK,CAAC,aAAa,EAAE;AAC7B,QAAQ,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC;AAC7B,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,OAAO,EAAE;AACvB,QAAQ,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;AAC3B,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,cAAc,EAAE;AAC9B,QAAQ,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC;AAC5B,KAAK;AACL,IAAI,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AACG,MAAC,IAAI,GAAG,GAAG;AAChB;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,MAAM,GAAG,CAAC,IAAI,KAAK,IAAI,IAAI,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,WAAW,GAAG;AACpB,IAAI,OAAO,EAAE,CAAC,QAAQ,EAAE,EAAE,KAAK,QAAQ,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC;AACxE,IAAI,GAAG,EAAE,CAAC,QAAQ,EAAE,EAAE,KAAK,QAAQ,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,gBAAgB,CAAC;AACtF,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,eAAe,GAAG,CAAC,IAAI,MAAM;AACnC,IAAI,MAAM,EAAE,IAAI,CAAC,OAAO;AACxB,IAAI,SAAS,EAAE,IAAI,CAAC,UAAU;AAC9B,IAAI,IAAI,EAAE,IAAI,CAAC,KAAK;AACpB,IAAI,KAAK,EAAE,IAAI,CAAC,MAAM;AACtB,IAAI,IAAI,EAAE,IAAI,CAAC,KAAK;AACpB,IAAI,KAAK,EAAE,IAAI,CAAC,MAAM;AACtB,CAAC,CAAC,CAAC;AACH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,gBAAgB,GAAG,CAAC,IAAI,KAAK;AACnC,IAAI,IAAI,OAAO,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;AACzC,QAAQ,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,EAAE,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;AACzD,QAAQ,IAAI,IAAI,CAAC,IAAI,EAAE;AACvB,YAAY,SAAS,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC;AACtC,SAAS;AACT,QAAQ,IAAI,IAAI,CAAC,KAAK,EAAE;AACxB,YAAY,SAAS,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC;AACxC,SAAS;AACT,QAAQ,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,IAAI,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,CAAC;AAClE,KAAK;AACL,IAAI,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;AAClD,IAAI,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;AAChC,IAAI,KAAK,CAAC,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;AACtC,IAAI,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,IAAI,CAAC;AAC5B,IAAI,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC;AAC9B,IAAI,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA,MAAM,uBAAuB,GAAG,CAAC,QAAQ,KAAK;AAC9C,IAAI,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACxC,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AACzC,IAAI,IAAI,KAAK,KAAK,CAAC,CAAC,EAAE;AACtB,QAAQ,OAAO;AACf,KAAK;AACL,IAAI,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AAC5C,IAAI,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC1C,IAAI,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;AAC1C,IAAI,MAAM,SAAS,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;AAC5C,IAAI,IAAI,KAAK,GAAG,SAAS,IAAI,KAAK,GAAG,QAAQ,IAAI,KAAK,GAAG,QAAQ,IAAI,KAAK,GAAG,SAAS,EAAE;AACxF,QAAQ,cAAc,CAAC,CAAC,+EAA+E,CAAC,CAAC,CAAC;AAC1G,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,uBAAuB,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,KAAK;AACvE,IAAI,MAAM,UAAU,GAAG,UAAU,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;AAC5D,IAAI,MAAM,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC;AAC1C,IAAI,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAChC,IAAI,MAAM,SAAS,GAAG,EAAE,CAAC;AACzB,IAAI,MAAM,eAAe,GAAG,KAAK,CAAC,SAAS,IAAI,UAAU,GAAG,EAAE,GAAG,IAAI,CAAC;AACtE,IAAI,MAAM,KAAK,IAAI,OAAO,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;AAC9D,IAAI,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE;AAC5B,QAAQ,yBAAyB,CAAC,GAAG,CAAC,IAAI,GAAG,GAAG,CAAC,aAAa,GAAG,IAAI,GAAG,EAAE,EAAE,CAAC;AAC7E,KAAK;AACL,IAAI,OAAO,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;AACjC,IAAI,OAAO,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;AACxC,IAAI,aAAa,CAAC,KAAK,EAAE,gBAAgB,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC;AACjG,IAAI,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK;AAChC,QAAQ,MAAM,aAAa,GAAG,CAAC,CAAC,QAAQ,GAAG,GAAG,GAAG,CAAC,CAAC,QAAQ,CAAC;AAC5D,QAAQ,MAAM,eAAe,GAAG,GAAG,CAAC,aAAa,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;AACrE,QAAQ,MAAM,IAAI,GAAG,CAAC,CAAC,KAAK,CAAC;AAC7B;AACA;AACA,QAAQ,IAAI,eAAe,IAAI,cAAc,IAAI,eAAe,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE;AACjF,YAAY,eAAe,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;AACvF,SAAS;AACT,QAAQ,IAAI,CAAC,UAAU,EAAE;AACzB,YAAY,IAAI,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC;AACnC,YAAY,IAAI,eAAe,EAAE;AACjC,gBAAgB,IAAI,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC;AAC/C,gBAAgB,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;AAC5C,aAAa;AACb,SAAS;AACT,QAAQ,GAAG,CAAC,aAAa,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC;AAChD,KAAK,CAAC,CAAC;AACP,IAAI,IAAI,KAAK,CAAC,SAAS,IAAI,UAAU,EAAE;AACvC,QAAQ,eAAe,CAAC,GAAG,CAAC,CAAC,cAAc,KAAK;AAChD,YAAY,IAAI,cAAc,EAAE;AAChC,gBAAgB,UAAU,CAAC,WAAW,CAAC,cAAc,CAAC,CAAC;AACvD,aAAa;AACb,SAAS,CAAC,CAAC;AACX,KAAK;AACL,IAAI,UAAU,EAAE,CAAC;AACjB,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,aAAa,GAAG,CAAC,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK;AAC5G,IAAI,IAAI,aAAa,CAAC;AACtB,IAAI,IAAI,WAAW,CAAC;AACpB,IAAI,IAAI,UAAU,CAAC;AACnB,IAAI,IAAI,CAAC,CAAC;AACV,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AACzD,QAAQ,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC;AAC5D,QAAQ,IAAI,aAAa,EAAE;AAC3B;AACA;AACA,YAAY,WAAW,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACnD,YAAY,IAAI,WAAW,CAAC,CAAC,CAAC,KAAK,MAAM,IAAI,WAAW,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AACrE,gBAAgB,UAAU,GAAG;AAC7B,oBAAoB,OAAO,EAAE,CAAC;AAC9B,oBAAoB,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;AAC5C,oBAAoB,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;AAC5C,oBAAoB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;AAC3C,oBAAoB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;AAC3C,oBAAoB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE;AACrD,oBAAoB,KAAK,EAAE,IAAI;AAC/B,oBAAoB,OAAO,EAAE,IAAI;AACjC,oBAAoB,UAAU,EAAE,IAAI;AACpC,oBAAoB,KAAK,EAAE,IAAI;AAC/B,oBAAoB,MAAM,EAAE,IAAI;AAChC,oBAAoB,MAAM,EAAE,IAAI;AAChC,iBAAiB,CAAC;AAClB,gBAAgB,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAClD,gBAAgB,IAAI,CAAC,eAAe,CAAC,gBAAgB,CAAC,CAAC;AACvD;AACA;AACA,gBAAgB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE;AAC7C,oBAAoB,WAAW,CAAC,UAAU,GAAG,EAAE,CAAC;AAChD,iBAAiB;AACjB;AACA,gBAAgB,WAAW,CAAC,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC;AACxE;AACA,gBAAgB,WAAW,GAAG,UAAU,CAAC;AACzC,gBAAgB,IAAI,eAAe,IAAI,UAAU,CAAC,OAAO,KAAK,GAAG,EAAE;AACnE,oBAAoB,eAAe,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC;AAC3E,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT;AACA,QAAQ,KAAK,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;AAC1D,YAAY,aAAa,CAAC,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AAC1H,SAAS;AACT,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE;AAC7B;AACA,YAAY,KAAK,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;AACzE,gBAAgB,aAAa,CAAC,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;AACzI,aAAa;AACb,SAAS;AACT,KAAK;AACL,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AAC9D;AACA,QAAQ,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAChD,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,KAAK,MAAM,IAAI,WAAW,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AACjE;AACA,YAAY,aAAa,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;AAC3C,YAAY,UAAU,GAAG;AACzB,gBAAgB,OAAO,EAAE,CAAC;AAC1B,gBAAgB,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;AACxC,gBAAgB,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;AACxC,gBAAgB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;AACvC,gBAAgB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;AACvC,gBAAgB,KAAK,EAAE,IAAI;AAC3B,gBAAgB,OAAO,EAAE,IAAI;AAC7B,gBAAgB,UAAU,EAAE,IAAI;AAChC,gBAAgB,KAAK,EAAE,IAAI;AAC3B,gBAAgB,MAAM,EAAE,IAAI;AAC5B,gBAAgB,KAAK,EAAE,IAAI;AAC3B,gBAAgB,MAAM,EAAE,IAAI;AAC5B,aAAa,CAAC;AACd,YAAY,IAAI,aAAa,KAAK,YAAY,EAAE;AAChD,gBAAgB,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,WAAW,CAAC;AACpD,gBAAgB,IAAI,UAAU,CAAC,KAAK,IAAI,UAAU,CAAC,KAAK,CAAC,QAAQ,KAAK,CAAC,2BAA2B;AAClG,oBAAoB,UAAU,CAAC,MAAM,GAAG,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC;AACrE,oBAAoB,gBAAgB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AACtD;AACA,oBAAoB,IAAI,CAAC,MAAM,EAAE,CAAC;AAClC,oBAAoB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE;AACjD,wBAAwB,WAAW,CAAC,UAAU,GAAG,EAAE,CAAC;AACpD,qBAAqB;AACrB,oBAAoB,WAAW,CAAC,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC;AAC5E,oBAAoB,IAAI,eAAe,IAAI,UAAU,CAAC,OAAO,KAAK,GAAG,EAAE;AACvE,wBAAwB,eAAe,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC;AAC/E,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb,iBAAiB,IAAI,UAAU,CAAC,QAAQ,KAAK,MAAM,EAAE;AACrD;AACA,gBAAgB,IAAI,aAAa,KAAK,YAAY,EAAE;AACpD;AACA,oBAAoB,UAAU,CAAC,KAAK,GAAG,MAAM,CAAC;AAC9C,oBAAoB,IAAI,WAAW,CAAC,CAAC,CAAC,EAAE;AACxC,wBAAwB,IAAI,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,MAAM,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;AAC1E,qBAAqB;AACrB,yBAAyB;AACzB,wBAAwB,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;AAC1C,qBAAqB;AACrB,oBAAoB,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;AACxC,oBAAoB,IAAI,KAAK,CAAC,SAAS,IAAI,eAAe,EAAE;AAC5D;AACA;AACA,wBAAwB,UAAU,CAAC,KAAK,GAAG,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;AAC/E,wBAAwB,IAAI,UAAU,CAAC,MAAM,EAAE;AAC/C;AACA,4BAA4B,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;AACrF,yBAAyB;AACzB;AACA,wBAAwB,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;AAC7E;AACA,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC;AACtC,wBAAwB,IAAI,UAAU,CAAC,OAAO,KAAK,GAAG,EAAE;AACxD,4BAA4B,eAAe,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC;AACnF,yBAAyB;AACzB,qBAAqB;AACrB,oBAAoB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAC/C,oBAAoB,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE;AACjD,wBAAwB,WAAW,CAAC,UAAU,GAAG,EAAE,CAAC;AACpD,qBAAqB;AACrB,oBAAoB,WAAW,CAAC,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,UAAU,CAAC;AAC5E,iBAAiB;AACjB,qBAAqB,IAAI,aAAa,KAAK,cAAc,EAAE;AAC3D;AACA,oBAAoB,IAAI,KAAK,CAAC,SAAS,IAAI,eAAe,EAAE;AAC5D;AACA,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC;AACtC,qBAAqB;AACrB,yBAAyB,IAAI,KAAK,CAAC,cAAc,EAAE;AACnD,wBAAwB,OAAO,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;AAC/C,wBAAwB,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;AAC5C,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,KAAK;AACL,SAAS,IAAI,WAAW,IAAI,WAAW,CAAC,KAAK,KAAK,OAAO,EAAE;AAC3D,QAAQ,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;AACvD,QAAQ,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC;AAC3B,QAAQ,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;AAC5B,QAAQ,WAAW,CAAC,UAAU,GAAG,CAAC,KAAK,CAAC,CAAC;AACzC,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,yBAAyB,GAAG,CAAC,IAAI,EAAE,WAAW,KAAK;AACzD,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AACzD,QAAQ,IAAI,CAAC,GAAG,CAAC,CAAC;AAClB,QAAQ,OAAO,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAChD,YAAY,yBAAyB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;AACvE,SAAS;AACT,QAAQ,IAAI,IAAI,CAAC,UAAU,EAAE;AAC7B,YAAY,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACpE,gBAAgB,yBAAyB,CAAC,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC;AACtF,aAAa;AACb,SAAS;AACT,KAAK;AACL,SAAS,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AAC9D,QAAQ,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACtD,QAAQ,IAAI,WAAW,CAAC,CAAC,CAAC,KAAK,eAAe,EAAE;AAChD,YAAY,WAAW,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,GAAG,GAAG,WAAW,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;AACzE,YAAY,IAAI,CAAC,SAAS,GAAG,EAAE,CAAC;AAChC;AACA;AACA,YAAY,IAAI,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;AAC1C,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF;AACA,MAAM,WAAW,GAAG,CAAC,GAAG,KAAK,mBAAmB,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AACrF;AACA,MAAM,OAAO,GAAG,CAAC,OAAO,KAAK,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AAC/D,MAAM,OAAO,GAAG,CAAC,GAAG,KAAK,UAAU,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GAAG,CAAC,SAAS,EAAE,QAAQ,KAAK;AACpD;AACA,IAAI,IAAI,SAAS,IAAI,IAAI,IAAI,CAAC,aAAa,CAAC,SAAS,CAAC,EAAE;AACxD,QAAQ,IAAI,KAAK,CAAC,WAAW,IAAI,QAAQ,GAAG,CAAC,6BAA6B;AAC1E;AACA;AACA,YAAY,OAAO,SAAS,KAAK,OAAO,GAAG,KAAK,GAAG,SAAS,KAAK,EAAE,IAAI,CAAC,CAAC,SAAS,CAAC;AACnF,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,UAAU,IAAI,QAAQ,GAAG,CAAC,4BAA4B;AACxE;AACA,YAAY,OAAO,UAAU,CAAC,SAAS,CAAC,CAAC;AACzC,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,UAAU,IAAI,QAAQ,GAAG,CAAC,4BAA4B;AACxE;AACA;AACA,YAAY,OAAO,MAAM,CAAC,SAAS,CAAC,CAAC;AACrC,SAAS;AACT;AACA,QAAQ,OAAO,SAAS,CAAC;AACzB,KAAK;AACL;AACA;AACA,IAAI,OAAO,SAAS,CAAC;AACrB,CAAC,CAAC;AACG,MAAC,UAAU,GAAG,CAAC,GAAG,MAAM,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC,aAAa,GAAG,GAAG,EAAE;AAC9E,MAAC,WAAW,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,KAAK,KAAK;AAC1C,IAAI,MAAM,GAAG,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AAChC,IAAI,OAAO;AACX,QAAQ,IAAI,EAAE,CAAC,MAAM,KAAK;AAC1B,YAAY,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,GAAG,CAAC,WAAW,EAAE;AACjD,gBAAgB,cAAc,CAAC,CAAC,KAAK,EAAE,IAAI,CAAC,+EAA+E,CAAC,CAAC,CAAC;AAC9H,aAAa;AACb,YAAY,OAAO,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE;AACxC,gBAAgB,OAAO,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,2BAA2B;AAChE,gBAAgB,QAAQ,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,4BAA4B;AAClE,gBAAgB,UAAU,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,+BAA+B;AACvE,gBAAgB,MAAM;AACtB,aAAa,CAAC,CAAC;AACf,SAAS;AACT,KAAK,CAAC;AACN,EAAE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,KAAK;AACvC,IAAI,MAAM,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAClC,IAAI,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC;AAC1B,IAAI,OAAO,EAAE,CAAC;AACd,CAAC,CAAC;AACF,MAAM,iBAAiB,iBAAiB,IAAI,OAAO,EAAE,CAAC;AACtD,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,KAAK;AACrD,IAAI,IAAI,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACpC,IAAI,IAAI,gCAAgC,IAAI,OAAO,EAAE;AACrD,QAAQ,KAAK,IAAI,KAAK,IAAI,IAAI,aAAa,EAAE,CAAC,CAAC;AAC/C,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AACvC,YAAY,KAAK,GAAG,OAAO,CAAC;AAC5B,SAAS;AACT,aAAa;AACb,YAAY,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AACvC,SAAS;AACT,KAAK;AACL,SAAS;AACT,QAAQ,KAAK,GAAG,OAAO,CAAC;AACxB,KAAK;AACL,IAAI,MAAM,CAAC,GAAG,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC/B,CAAC,CAAC;AACF,MAAM,QAAQ,GAAG,CAAC,kBAAkB,EAAE,OAAO,EAAE,IAAI,KAAK;AACxD,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AAC9C,IAAI,MAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AACtC,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE;AAC7B,QAAQ,OAAO,OAAO,CAAC;AACvB,KAAK;AACL;AACA;AACA,IAAI,kBAAkB,GAAG,kBAAkB,CAAC,QAAQ,KAAK,EAAE,oCAAoC,kBAAkB,GAAG,GAAG,CAAC;AACxH,IAAI,IAAI,KAAK,EAAE;AACf,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AACvC,YAAY,kBAAkB,GAAG,kBAAkB,CAAC,IAAI,IAAI,kBAAkB,CAAC;AAC/E,YAAY,IAAI,aAAa,GAAG,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;AAC1E,YAAY,IAAI,QAAQ,CAAC;AACzB,YAAY,IAAI,CAAC,aAAa,EAAE;AAChC,gBAAgB,iBAAiB,CAAC,GAAG,CAAC,kBAAkB,GAAG,aAAa,GAAG,IAAI,GAAG,EAAE,EAAE,CAAC;AACvF,aAAa;AACb,YAAY,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC7C,gBAAgB,IAAI,KAAK,CAAC,iBAAiB;AAC3C,oBAAoB,kBAAkB,CAAC,IAAI;AAC3C,qBAAqB,QAAQ,GAAG,kBAAkB,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,iBAAiB,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;AAC1G;AACA,oBAAoB,QAAQ,CAAC,SAAS,GAAG,KAAK,CAAC;AAC/C,iBAAiB;AACjB,qBAAqB;AACrB,oBAAoB,QAAQ,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC1D,oBAAoB,QAAQ,CAAC,SAAS,GAAG,KAAK,CAAC;AAC/C;AACA,oBAAoB,MAAM,KAAK,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC;AACpH,oBAAoB,IAAI,KAAK,IAAI,IAAI,EAAE;AACvC,wBAAwB,QAAQ,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC9D,qBAAqB;AACrB,oBAAoB,IAAI,KAAK,CAAC,iBAAiB,IAAI,KAAK,CAAC,oBAAoB,EAAE;AAC/E,wBAAwB,QAAQ,CAAC,YAAY,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;AAC1E,qBAAqB;AACrB,oBAAoB,kBAAkB,CAAC,YAAY,CAAC,QAAQ,EAAE,kBAAkB,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC;AACxG,iBAAiB;AACjB;AACA,gBAAgB,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,oCAAoC;AAC3E,oBAAoB,QAAQ,CAAC,SAAS,IAAI,WAAW,CAAC;AACtD,iBAAiB;AACjB,gBAAgB,IAAI,aAAa,EAAE;AACnC,oBAAoB,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;AAC/C,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,aAAa,IAAI,KAAK,CAAC,gBAAgB,IAAI,CAAC,kBAAkB,CAAC,kBAAkB,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;AACnG,YAAY,kBAAkB,CAAC,kBAAkB,GAAG,CAAC,GAAG,kBAAkB,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;AACtG,SAAS;AACT,KAAK;AACL,IAAI,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AACF,MAAM,YAAY,GAAG,CAAC,OAAO,KAAK;AAClC,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC;AACtC,IAAI,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC;AACtC,IAAI,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC;AAClC,IAAI,MAAM,eAAe,GAAG,UAAU,CAAC,cAAc,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;AAC1E,IAAI,MAAM,OAAO,GAAG,QAAQ,CAAC,KAAK,CAAC,SAAS,IAAI,cAAc,IAAI,GAAG,CAAC,UAAU,GAAG,GAAG,CAAC,UAAU,GAAG,GAAG,CAAC,WAAW,EAAE,EAAE,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;AACpJ,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,cAAc,IAAI,KAAK,GAAG,EAAE,2CAA2C;AAC1H;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ,GAAG,CAAC,MAAM,CAAC,GAAG,OAAO,CAAC;AAC9B,QAAQ,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;AAC1C,QAAQ,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,GAAG,CAAC,yCAAyC;AAC9E,YAAY,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;AAC9C,SAAS;AACT,KAAK;AACL,IAAI,eAAe,EAAE,CAAC;AACtB,CAAC,CAAC;AACF,MAAM,UAAU,GAAG,CAAC,GAAG,EAAE,IAAI,KAAK,KAAK,IAAI,KAAK,CAAC,IAAI,IAAI,IAAI,IAAI,GAAG,CAAC,OAAO,GAAG,EAAE,2BAA2B,GAAG,CAAC,SAAS,GAAG,GAAG,GAAG,IAAI,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC;AACxJ,MAAM,qBAAqB,GAAG,CAAC,GAAG,KAAK,GAAG,CAAC,OAAO,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;AACzF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,WAAW,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,KAAK;AAC3E,IAAI,IAAI,QAAQ,KAAK,QAAQ,EAAE;AAC/B,QAAQ,IAAI,MAAM,GAAG,iBAAiB,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC;AACxD,QAAQ,IAAI,EAAE,GAAG,UAAU,CAAC,WAAW,EAAE,CAAC;AAC1C,QAAQ,IAAI,KAAK,CAAC,SAAS,IAAI,UAAU,KAAK,OAAO,EAAE;AACvD,YAAY,MAAM,SAAS,GAAG,GAAG,CAAC,SAAS,CAAC;AAC5C,YAAY,MAAM,UAAU,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AACxD,YAAY,MAAM,UAAU,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AACxD,YAAY,SAAS,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACxF,YAAY,SAAS,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrF,SAAS;AACT,aAAa,IAAI,KAAK,CAAC,SAAS,IAAI,UAAU,KAAK,OAAO,EAAE;AAC5D;AACA,YAAY,IAAI,KAAK,CAAC,SAAS,EAAE;AACjC,gBAAgB,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE;AAC7C,oBAAoB,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,IAAI,IAAI,EAAE;AAC7D,wBAAwB,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AAC5E,4BAA4B,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC;AAC3D,yBAAyB;AACzB,6BAA6B;AAC7B,4BAA4B,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;AACjD,yBAAyB;AACzB,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb,YAAY,KAAK,MAAM,IAAI,IAAI,QAAQ,EAAE;AACzC,gBAAgB,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,KAAK,QAAQ,CAAC,IAAI,CAAC,EAAE;AACpE,oBAAoB,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AACxE,wBAAwB,GAAG,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AACpE,qBAAqB;AACrB,yBAAyB;AACzB,wBAAwB,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;AACzD,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,aAAa,IAAI,KAAK,CAAC,OAAO,IAAI,UAAU,KAAK,KAAK;AACtD,YAAY,CAAC;AACb,aAAa,IAAI,KAAK,CAAC,OAAO,IAAI,UAAU,KAAK,KAAK,EAAE;AACxD;AACA,YAAY,IAAI,QAAQ,EAAE;AAC1B,gBAAgB,QAAQ,CAAC,GAAG,CAAC,CAAC;AAC9B,aAAa;AACb,SAAS;AACT,aAAa,IAAI,KAAK,CAAC,YAAY;AACnC,aAAa,KAAK,CAAC,QAAQ,GAAG,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC;AAC1E,YAAY,UAAU,CAAC,CAAC,CAAC,KAAK,GAAG;AACjC,YAAY,UAAU,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AACnC;AACA;AACA;AACA;AACA,YAAY,IAAI,UAAU,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AACvC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACjD,aAAa;AACb,iBAAiB,IAAI,iBAAiB,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE;AACjD;AACA;AACA;AACA;AACA,gBAAgB,UAAU,GAAG,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACzC,aAAa;AACb,iBAAiB;AACjB;AACA;AACA;AACA;AACA;AACA,gBAAgB,UAAU,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;AACzD,aAAa;AACb,YAAY,IAAI,QAAQ,IAAI,QAAQ,EAAE;AACtC;AACA;AACA;AACA,gBAAgB,MAAM,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC,oBAAoB,CAAC,CAAC;AAC1E;AACA,gBAAgB,UAAU,GAAG,UAAU,CAAC,OAAO,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;AACzE,gBAAgB,IAAI,QAAQ,EAAE;AAC9B,oBAAoB,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAChE,iBAAiB;AACjB,gBAAgB,IAAI,QAAQ,EAAE;AAC9B,oBAAoB,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAChE,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,aAAa,IAAI,KAAK,CAAC,cAAc,EAAE;AACvC;AACA,YAAY,MAAM,SAAS,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;AACtD,YAAY,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE;AACxE,gBAAgB,IAAI;AACpB,oBAAoB,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AACpD,wBAAwB,MAAM,CAAC,GAAG,QAAQ,IAAI,IAAI,GAAG,EAAE,GAAG,QAAQ,CAAC;AACnE;AACA,wBAAwB,IAAI,UAAU,KAAK,MAAM,EAAE;AACnD,4BAA4B,MAAM,GAAG,KAAK,CAAC;AAC3C,yBAAyB;AACzB,6BAA6B,IAAI,QAAQ,IAAI,IAAI,IAAI,GAAG,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;AAC3E,4BAA4B,GAAG,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC;AAChD,yBAAyB;AACzB,qBAAqB;AACrB,yBAAyB;AACzB,wBAAwB,GAAG,CAAC,UAAU,CAAC,GAAG,QAAQ,CAAC;AACnD,qBAAqB;AACrB,iBAAiB;AACjB,gBAAgB,OAAO,CAAC,EAAE;AAC1B;AACA;AACA;AACA,iBAAiB;AACjB,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,IAAI,KAAK,GAAG,KAAK,CAAC;AAC9B,YAAY,IAAI,KAAK,CAAC,SAAS,EAAE;AACjC,gBAAgB,IAAI,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC,EAAE;AAC/D,oBAAoB,UAAU,GAAG,EAAE,CAAC;AACpC,oBAAoB,KAAK,GAAG,IAAI,CAAC;AACjC,iBAAiB;AACjB,aAAa;AACb,YAAY,IAAI,QAAQ,IAAI,IAAI,IAAI,QAAQ,KAAK,KAAK,EAAE;AACxD,gBAAgB,IAAI,QAAQ,KAAK,KAAK,IAAI,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,EAAE,EAAE;AAC/E,oBAAoB,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,EAAE;AAClD,wBAAwB,GAAG,CAAC,iBAAiB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;AACpE,qBAAqB;AACrB,yBAAyB;AACzB,wBAAwB,GAAG,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;AACxD,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb,iBAAiB,IAAI,CAAC,CAAC,MAAM,IAAI,KAAK,GAAG,CAAC,6BAA6B,KAAK,KAAK,CAAC,SAAS,EAAE;AAC7F,gBAAgB,QAAQ,GAAG,QAAQ,KAAK,IAAI,GAAG,EAAE,GAAG,QAAQ,CAAC;AAC7D,gBAAgB,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,EAAE;AAC9C,oBAAoB,GAAG,CAAC,cAAc,CAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;AACvE,iBAAiB;AACjB,qBAAqB;AACrB,oBAAoB,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AAC3D,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,IAAI,CAAC;AACjC;AACA;AACA;AACA;AACA;AACA,MAAM,cAAc,GAAG,CAAC,KAAK,MAAM,CAAC,KAAK,GAAG,EAAE,GAAG,KAAK,CAAC,KAAK,CAAC,mBAAmB,CAAC,CAAC,CAAC;AACnF,MAAM,oBAAoB,GAAG,SAAS,CAAC;AACvC,MAAM,mBAAmB,GAAG,IAAI,MAAM,CAAC,oBAAoB,GAAG,GAAG,CAAC,CAAC;AACnE,MAAM,aAAa,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,KAAK;AACrE;AACA;AACA;AACA,IAAI,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,KAAK,EAAE,qCAAqC,QAAQ,CAAC,KAAK,CAAC,IAAI;AACtG,UAAU,QAAQ,CAAC,KAAK,CAAC,IAAI;AAC7B,UAAU,QAAQ,CAAC,KAAK,CAAC;AACzB,IAAI,MAAM,aAAa,GAAG,CAAC,QAAQ,IAAI,QAAQ,CAAC,OAAO,KAAK,SAAS,CAAC;AACtE,IAAI,MAAM,aAAa,GAAG,QAAQ,CAAC,OAAO,IAAI,SAAS,CAAC;AACxD,IAAI,IAAI,KAAK,CAAC,SAAS,EAAE;AACzB;AACA,QAAQ,KAAK,UAAU,IAAI,aAAa,EAAE;AAC1C,YAAY,IAAI,EAAE,UAAU,IAAI,aAAa,CAAC,EAAE;AAChD,gBAAgB,WAAW,CAAC,GAAG,EAAE,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;AAChH,aAAa;AACb,SAAS;AACT,KAAK;AACL;AACA,IAAI,KAAK,UAAU,IAAI,aAAa,EAAE;AACtC,QAAQ,WAAW,CAAC,GAAG,EAAE,UAAU,EAAE,aAAa,CAAC,UAAU,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;AACxH,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,SAAS,GAAG,CAAC,cAAc,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,KAAK;AAC7E,IAAI,IAAI,EAAE,CAAC;AACX;AACA,IAAI,MAAM,QAAQ,GAAG,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;AAC3D,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,IAAI,IAAI,GAAG,CAAC;AACZ,IAAI,IAAI,SAAS,CAAC;AAClB,IAAI,IAAI,QAAQ,CAAC;AACjB,IAAI,IAAI,KAAK,CAAC,cAAc,IAAI,CAAC,kBAAkB,EAAE;AACrD;AACA,QAAQ,iBAAiB,GAAG,IAAI,CAAC;AACjC,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,MAAM,EAAE;AACvC,YAAY,IAAI,OAAO,EAAE;AACzB;AACA,gBAAgB,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;AACxD,aAAa;AACb,YAAY,QAAQ,CAAC,OAAO,IAAI,QAAQ,CAAC,UAAU;AACnD;AACA,oBAAoB,CAAC;AACrB;AACA,oBAAoB,CAAC,mCAAmC;AACxD,SAAS;AACT,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC,KAAK,EAAE;AACvC,QAAQ,eAAe,CAAC,CAAC,QAAQ,EAAE,QAAQ,CAAC,MAAM,KAAK,IAAI,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,iTAAiT,CAAC,CAAC,CAAC;AAC9a,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,IAAI,EAAE;AACpD;AACA,QAAQ,GAAG,GAAG,QAAQ,CAAC,KAAK,GAAG,GAAG,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;AACnE,KAAK;AACL,SAAS,IAAI,KAAK,CAAC,cAAc,IAAI,QAAQ,CAAC,OAAO,GAAG,CAAC,oCAAoC;AAC7F;AACA,QAAQ,GAAG,GAAG,QAAQ,CAAC,KAAK;AAC5B,YAAY,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,iBAAiB,GAAG,sBAAsB,CAAC,QAAQ,CAAC,GAAG,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;AACjH,KAAK;AACL,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE;AACrC,YAAY,SAAS,GAAG,QAAQ,CAAC,KAAK,KAAK,KAAK,CAAC;AACjD,SAAS;AACT;AACA,QAAQ,GAAG,GAAG,QAAQ,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG;AACzC,cAAc,GAAG,CAAC,eAAe,CAAC,SAAS,GAAG,MAAM,GAAG,OAAO,EAAE,KAAK,CAAC,cAAc,IAAI,QAAQ,CAAC,OAAO,GAAG,CAAC;AAC5G,kBAAkB,SAAS;AAC3B,kBAAkB,QAAQ,CAAC,KAAK,CAAC;AACjC,cAAc,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,cAAc,IAAI,QAAQ,CAAC,OAAO,GAAG,CAAC;AAC5E,kBAAkB,SAAS;AAC3B,kBAAkB,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC;AACnC,QAAQ,IAAI,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,QAAQ,CAAC,KAAK,KAAK,eAAe,EAAE;AAC1E,YAAY,SAAS,GAAG,KAAK,CAAC;AAC9B,SAAS;AACT;AACA,QAAQ,IAAI,KAAK,CAAC,aAAa,EAAE;AACjC,YAAY,aAAa,CAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AACrD,SAAS;AACT,QAAQ,IAAI,CAAC,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,CAAC,OAAO,CAAC,IAAI,GAAG,CAAC,MAAM,CAAC,KAAK,OAAO,EAAE;AAC5F;AACA;AACA,YAAY,GAAG,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,CAAC,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;AACvD,SAAS;AACT,QAAQ,IAAI,QAAQ,CAAC,UAAU,EAAE;AACjC,YAAY,KAAK,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,MAAM,EAAE,EAAE,CAAC,EAAE;AAC7D;AACA,gBAAgB,SAAS,GAAG,SAAS,CAAC,cAAc,EAAE,QAAQ,EAAE,CAAC,EAAE,GAAG,CAAC,CAAC;AACxE;AACA,gBAAgB,IAAI,SAAS,EAAE;AAC/B;AACA,oBAAoB,GAAG,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;AAC/C,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,GAAG,EAAE;AACvB,YAAY,IAAI,QAAQ,CAAC,KAAK,KAAK,KAAK,EAAE;AAC1C;AACA,gBAAgB,SAAS,GAAG,KAAK,CAAC;AAClC,aAAa;AACb,iBAAiB,IAAI,GAAG,CAAC,OAAO,KAAK,eAAe,EAAE;AACtD;AACA,gBAAgB,SAAS,GAAG,IAAI,CAAC;AACjC,aAAa;AACb,SAAS;AACT,KAAK;AACL;AACA;AACA,IAAI,GAAG,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC;AAC9B,IAAI,IAAI,KAAK,CAAC,cAAc,EAAE;AAC9B,QAAQ,IAAI,QAAQ,CAAC,OAAO,IAAI,CAAC,oCAAoC,CAAC,mCAAmC,EAAE;AAC3G;AACA,YAAY,GAAG,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;AAC/B;AACA,YAAY,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,GAAG,QAAQ,CAAC,OAAO,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC;AAC/F;AACA,YAAY,GAAG,CAAC,MAAM,CAAC,GAAG,UAAU,CAAC;AACrC;AACA,YAAY,GAAG,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC,MAAM,IAAI,EAAE,CAAC;AAChD;AACA,YAAY,QAAQ,GAAG,cAAc,IAAI,cAAc,CAAC,UAAU,IAAI,cAAc,CAAC,UAAU,CAAC,UAAU,CAAC,CAAC;AAC5G,YAAY,IAAI,QAAQ,IAAI,QAAQ,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,IAAI,cAAc,CAAC,KAAK,EAAE;AACvF,gBAAgB,IAAI,KAAK,CAAC,qBAAqB,EAAE;AACjD;AACA;AACA,oBAAoB,kBAAkB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAC7D,iBAAiB;AACjB,qBAAqB;AACrB;AACA;AACA,oBAAoB,yBAAyB,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;AAC3E,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,KAAK;AACL,IAAI,OAAO,GAAG,CAAC;AACf,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GAAG,CAAC,SAAS,KAAK;AAC1C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,wCAAwC;AAC5D,IAAI,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC;AAC9D,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE;AACtB,QAAQ,KAAK,MAAM,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,EAAE;AAClE;AACA,YAAY,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE;AAC3C,gBAAgB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;AACnD;AACA,gBAAgB,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;AAC9C;AACA;AACA;AACA,gBAAgB,IAAI,SAAS,CAAC,QAAQ,KAAK,CAAC,gCAAgC,CAAC,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE;AACjG,oBAAoB,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC;AACtE,iBAAiB;AACjB;AACA,gBAAgB,iBAAiB,GAAG,IAAI,CAAC;AACzC,aAAa;AACb,SAAS;AACT,KAAK;AACL,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,wCAAwC;AAC7D,CAAC,CAAC;AACF,MAAM,yBAAyB,GAAG,CAAC,SAAS,EAAE,SAAS,KAAK;AAC5D,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,wCAAwC;AAC5D,IAAI,MAAM,iBAAiB,GAAG,SAAS,CAAC,UAAU,CAAC;AACnD,IAAI,KAAK,IAAI,CAAC,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;AAC5D,QAAQ,MAAM,SAAS,GAAG,iBAAiB,CAAC,CAAC,CAAC,CAAC;AAC/C,QAAQ,IAAI,SAAS,CAAC,MAAM,CAAC,KAAK,WAAW,IAAI,SAAS,CAAC,MAAM,CAAC,EAAE;AACpE;AACA,YAAY,mBAAmB,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,SAAS,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC,CAAC;AAC7F;AACA;AACA;AACA,YAAY,SAAS,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,CAAC;AACvC,YAAY,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;AAC1C;AACA,YAAY,SAAS,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;AAC1C;AACA;AACA;AACA,YAAY,IAAI,SAAS,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AACtE,gBAAgB,SAAS,CAAC,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AAC7G,aAAa;AACb,YAAY,iBAAiB,GAAG,IAAI,CAAC;AACrC,SAAS;AACT,QAAQ,IAAI,SAAS,EAAE;AACvB,YAAY,yBAAyB,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;AAC5D,SAAS;AACT,KAAK;AACL,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,wCAAwC;AAC7D,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,SAAS,GAAG,CAAC,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK;AAChF,IAAI,IAAI,YAAY,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC,MAAM,CAAC,CAAC,UAAU,KAAK,SAAS,CAAC,CAAC;AAClH,IAAI,IAAI,SAAS,CAAC;AAClB,IAAI,IAAI,KAAK,CAAC,SAAS,IAAI,YAAY,CAAC,UAAU,IAAI,YAAY,CAAC,OAAO,KAAK,WAAW,EAAE;AAC5F,QAAQ,YAAY,GAAG,YAAY,CAAC,UAAU,CAAC;AAC/C,KAAK;AACL,IAAI,OAAO,QAAQ,IAAI,MAAM,EAAE,EAAE,QAAQ,EAAE;AAC3C,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAAE;AAC9B,YAAY,SAAS,GAAG,SAAS,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAC1E,YAAY,IAAI,SAAS,EAAE;AAC3B,gBAAgB,MAAM,CAAC,QAAQ,CAAC,CAAC,KAAK,GAAG,SAAS,CAAC;AACnD,gBAAgB,YAAY,CAAC,YAAY,CAAC,SAAS,EAAE,KAAK,CAAC,cAAc,GAAG,aAAa,CAAC,MAAM,CAAC,GAAG,MAAM,CAAC,CAAC;AAC5G,aAAa;AACb,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,YAAY,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK;AACnD,IAAI,KAAK,IAAI,KAAK,GAAG,QAAQ,EAAE,KAAK,IAAI,MAAM,EAAE,EAAE,KAAK,EAAE;AACzD,QAAQ,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;AACpC,QAAQ,IAAI,KAAK,EAAE;AACnB,YAAY,MAAM,GAAG,GAAG,KAAK,CAAC,KAAK,CAAC;AACpC,YAAY,gBAAgB,CAAC,KAAK,CAAC,CAAC;AACpC,YAAY,IAAI,GAAG,EAAE;AACrB,gBAAgB,IAAI,KAAK,CAAC,cAAc,EAAE;AAC1C;AACA;AACA,oBAAoB,2BAA2B,GAAG,IAAI,CAAC;AACvD,oBAAoB,IAAI,GAAG,CAAC,MAAM,CAAC,EAAE;AACrC;AACA,wBAAwB,GAAG,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,CAAC;AAC7C,qBAAqB;AACrB,yBAAyB;AACzB;AACA;AACA,wBAAwB,yBAAyB,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AAC7D,qBAAqB;AACrB,iBAAiB;AACjB;AACA,gBAAgB,GAAG,CAAC,MAAM,EAAE,CAAC;AAC7B,aAAa;AACb,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,eAAe,GAAG,KAAK,KAAK;AACvF,IAAI,IAAI,WAAW,GAAG,CAAC,CAAC;AACxB,IAAI,IAAI,WAAW,GAAG,CAAC,CAAC;AACxB,IAAI,IAAI,QAAQ,GAAG,CAAC,CAAC;AACrB,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,IAAI,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AACrC,IAAI,IAAI,aAAa,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;AACjC,IAAI,IAAI,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;AACvC,IAAI,IAAI,SAAS,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AACrC,IAAI,IAAI,aAAa,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC;AACjC,IAAI,IAAI,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC;AACvC,IAAI,IAAI,IAAI,CAAC;AACb,IAAI,IAAI,SAAS,CAAC;AAClB,IAAI,OAAO,WAAW,IAAI,SAAS,IAAI,WAAW,IAAI,SAAS,EAAE;AACjE,QAAQ,IAAI,aAAa,IAAI,IAAI,EAAE;AACnC;AACA,YAAY,aAAa,GAAG,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC;AACjD,SAAS;AACT,aAAa,IAAI,WAAW,IAAI,IAAI,EAAE;AACtC,YAAY,WAAW,GAAG,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7C,SAAS;AACT,aAAa,IAAI,aAAa,IAAI,IAAI,EAAE;AACxC,YAAY,aAAa,GAAG,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC;AACjD,SAAS;AACT,aAAa,IAAI,WAAW,IAAI,IAAI,EAAE;AACtC,YAAY,WAAW,GAAG,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7C,SAAS;AACT,aAAa,IAAI,WAAW,CAAC,aAAa,EAAE,aAAa,EAAE,eAAe,CAAC,EAAE;AAC7E;AACA;AACA;AACA;AACA,YAAY,KAAK,CAAC,aAAa,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC;AACjE,YAAY,aAAa,GAAG,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC;AACjD,YAAY,aAAa,GAAG,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC;AACjD,SAAS;AACT,aAAa,IAAI,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,eAAe,CAAC,EAAE;AACzE;AACA;AACA;AACA,YAAY,KAAK,CAAC,WAAW,EAAE,WAAW,EAAE,eAAe,CAAC,CAAC;AAC7D,YAAY,WAAW,GAAG,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7C,YAAY,WAAW,GAAG,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7C,SAAS;AACT,aAAa,IAAI,WAAW,CAAC,aAAa,EAAE,WAAW,EAAE,eAAe,CAAC,EAAE;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,IAAI,KAAK,CAAC,cAAc,KAAK,aAAa,CAAC,KAAK,KAAK,MAAM,IAAI,WAAW,CAAC,KAAK,KAAK,MAAM,CAAC,EAAE;AAC1G,gBAAgB,yBAAyB,CAAC,aAAa,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AACjF,aAAa;AACb,YAAY,KAAK,CAAC,aAAa,EAAE,WAAW,EAAE,eAAe,CAAC,CAAC;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,SAAS,CAAC,YAAY,CAAC,aAAa,CAAC,KAAK,EAAE,WAAW,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;AACvF,YAAY,aAAa,GAAG,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC;AACjD,YAAY,WAAW,GAAG,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7C,SAAS;AACT,aAAa,IAAI,WAAW,CAAC,WAAW,EAAE,aAAa,EAAE,eAAe,CAAC,EAAE;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,IAAI,KAAK,CAAC,cAAc,KAAK,aAAa,CAAC,KAAK,KAAK,MAAM,IAAI,WAAW,CAAC,KAAK,KAAK,MAAM,CAAC,EAAE;AAC1G,gBAAgB,yBAAyB,CAAC,WAAW,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AAC/E,aAAa;AACb,YAAY,KAAK,CAAC,WAAW,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC;AAC/D;AACA;AACA;AACA;AACA;AACA,YAAY,SAAS,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;AAC3E,YAAY,WAAW,GAAG,KAAK,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7C,YAAY,aAAa,GAAG,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC;AACjD,SAAS;AACT,aAAa;AACb;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,QAAQ,GAAG,CAAC,CAAC,CAAC;AAC1B,YAAY,IAAI,KAAK,CAAC,OAAO,EAAE;AAC/B,gBAAgB,KAAK,CAAC,GAAG,WAAW,EAAE,CAAC,IAAI,SAAS,EAAE,EAAE,CAAC,EAAE;AAC3D,oBAAoB,IAAI,KAAK,CAAC,CAAC,CAAC,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,IAAI,IAAI,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,KAAK,aAAa,CAAC,KAAK,EAAE;AACvG,wBAAwB,QAAQ,GAAG,CAAC,CAAC;AACrC,wBAAwB,MAAM;AAC9B,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,OAAO,IAAI,QAAQ,IAAI,CAAC,EAAE;AAChD;AACA;AACA,gBAAgB,SAAS,GAAG,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC5C,gBAAgB,IAAI,SAAS,CAAC,KAAK,KAAK,aAAa,CAAC,KAAK,EAAE;AAC7D;AACA,oBAAoB,IAAI,GAAG,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AACjG,iBAAiB;AACjB,qBAAqB;AACrB,oBAAoB,KAAK,CAAC,SAAS,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC;AACrE;AACA;AACA,oBAAoB,KAAK,CAAC,QAAQ,CAAC,GAAG,SAAS,CAAC;AAChD,oBAAoB,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC;AAC3C,iBAAiB;AACjB,gBAAgB,aAAa,GAAG,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC;AACrD,aAAa;AACb,iBAAiB;AACjB;AACA;AACA;AACA;AACA,gBAAgB,IAAI,GAAG,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,WAAW,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;AAChG,gBAAgB,aAAa,GAAG,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC;AACrD,aAAa;AACb,YAAY,IAAI,IAAI,EAAE;AACtB;AACA,gBAAgB,IAAI,KAAK,CAAC,cAAc,EAAE;AAC1C,oBAAoB,mBAAmB,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,CAAC;AACpH,iBAAiB;AACjB,qBAAqB;AACrB,oBAAoB,aAAa,CAAC,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;AAC3F,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,KAAK;AACL,IAAI,IAAI,WAAW,GAAG,SAAS,EAAE;AACjC;AACA,QAAQ,SAAS,CAAC,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;AACxI,KAAK;AACL,SAAS,IAAI,KAAK,CAAC,SAAS,IAAI,WAAW,GAAG,SAAS,EAAE;AACzD;AACA;AACA;AACA,QAAQ,YAAY,CAAC,KAAK,EAAE,WAAW,EAAE,SAAS,CAAC,CAAC;AACpD,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,WAAW,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,eAAe,GAAG,KAAK,KAAK;AACxE;AACA;AACA,IAAI,IAAI,SAAS,CAAC,KAAK,KAAK,UAAU,CAAC,KAAK,EAAE;AAC9C,QAAQ,IAAI,KAAK,CAAC,cAAc,IAAI,SAAS,CAAC,KAAK,KAAK,MAAM,EAAE;AAChE,YAAY,OAAO,SAAS,CAAC,MAAM,KAAK,UAAU,CAAC,MAAM,CAAC;AAC1D,SAAS;AACT;AACA;AACA;AACA;AACA;AACA,QAAQ,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,eAAe,EAAE;AAC/C,YAAY,OAAO,SAAS,CAAC,KAAK,KAAK,UAAU,CAAC,KAAK,CAAC;AACxD,SAAS;AACT,QAAQ,OAAO,IAAI,CAAC;AACpB,KAAK;AACL,IAAI,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AACF,MAAM,aAAa,GAAG,CAAC,IAAI,KAAK;AAChC;AACA;AACA;AACA;AACA,IAAI,OAAO,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;AAC1C,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC;AACtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,eAAe,GAAG,KAAK,KAAK;AAC/D,IAAI,MAAM,GAAG,IAAI,QAAQ,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;AAClD,IAAI,MAAM,WAAW,GAAG,QAAQ,CAAC,UAAU,CAAC;AAC5C,IAAI,MAAM,WAAW,GAAG,QAAQ,CAAC,UAAU,CAAC;AAC5C,IAAI,MAAM,GAAG,GAAG,QAAQ,CAAC,KAAK,CAAC;AAC/B,IAAI,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,CAAC;AACjC,IAAI,IAAI,aAAa,CAAC;AACtB,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,IAAI,KAAK,IAAI,EAAE;AAC1C,QAAQ,IAAI,KAAK,CAAC,GAAG,EAAE;AACvB;AACA;AACA,YAAY,SAAS,GAAG,GAAG,KAAK,KAAK,GAAG,IAAI,GAAG,GAAG,KAAK,eAAe,GAAG,KAAK,GAAG,SAAS,CAAC;AAC3F,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,OAAO,EAAE;AAClD,YAAY,IAAI,KAAK,CAAC,IAAI,IAAI,GAAG,KAAK,MAAM;AAC5C,gBAAgB,CAAC;AACjB,iBAAiB;AACjB;AACA;AACA;AACA,gBAAgB,aAAa,CAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAC;AAC7D,aAAa;AACb,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,SAAS,IAAI,WAAW,KAAK,IAAI,IAAI,WAAW,KAAK,IAAI,EAAE;AAC7E;AACA;AACA,YAAY,cAAc,CAAC,GAAG,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,CAAC,CAAC;AACrF,SAAS;AACT,aAAa,IAAI,WAAW,KAAK,IAAI,EAAE;AACvC;AACA,YAAY,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,IAAI,EAAE;AAC/E;AACA,gBAAgB,GAAG,CAAC,WAAW,GAAG,EAAE,CAAC;AACrC,aAAa;AACb;AACA,YAAY,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AACnF,SAAS;AACT,aAAa,IAAI,KAAK,CAAC,SAAS,IAAI,WAAW,KAAK,IAAI,EAAE;AAC1D;AACA,YAAY,YAAY,CAAC,WAAW,EAAE,CAAC,EAAE,WAAW,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AACjE,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,GAAG,IAAI,SAAS,IAAI,GAAG,KAAK,KAAK,EAAE;AACrD,YAAY,SAAS,GAAG,KAAK,CAAC;AAC9B,SAAS;AACT,KAAK;AACL,SAAS,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,cAAc,KAAK,aAAa,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE;AACtF;AACA,QAAQ,aAAa,CAAC,UAAU,CAAC,WAAW,GAAG,IAAI,CAAC;AACpD,KAAK;AACL,SAAS,IAAI,KAAK,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,KAAK,IAAI,EAAE;AACzD;AACA;AACA,QAAQ,GAAG,CAAC,IAAI,GAAG,IAAI,CAAC;AACxB,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,4BAA4B,GAAG,CAAC,GAAG,KAAK;AAC9C,IAAI,MAAM,UAAU,GAAG,GAAG,CAAC,UAAU,CAAC;AACtC,IAAI,KAAK,MAAM,SAAS,IAAI,UAAU,EAAE;AACxC,QAAQ,IAAI,SAAS,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AAClE,YAAY,IAAI,SAAS,CAAC,MAAM,CAAC,EAAE;AACnC;AACA;AACA,gBAAgB,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AACnD;AACA;AACA,gBAAgB,SAAS,CAAC,MAAM,GAAG,KAAK,CAAC;AACzC;AACA;AACA,gBAAgB,KAAK,MAAM,WAAW,IAAI,UAAU,EAAE;AACtD;AACA,oBAAoB,IAAI,WAAW,KAAK,SAAS,EAAE;AACnD,wBAAwB,IAAI,WAAW,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,MAAM,CAAC,IAAI,QAAQ,KAAK,EAAE,EAAE;AAC1F;AACA;AACA,4BAA4B,IAAI,WAAW,CAAC,QAAQ,KAAK,CAAC;AAC1D,iCAAiC,QAAQ,KAAK,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,QAAQ,KAAK,WAAW,CAAC,MAAM,CAAC,CAAC,EAAE;AACrH,gCAAgC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC;AACxD,gCAAgC,MAAM;AACtC,6BAA6B;AAC7B,yBAAyB;AACzB,6BAA6B;AAC7B;AACA;AACA;AACA,4BAA4B,IAAI,WAAW,CAAC,QAAQ,KAAK,CAAC;AAC1D,iCAAiC,WAAW,CAAC,QAAQ,KAAK,CAAC,6BAA6B,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE;AAChI,gCAAgC,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC;AACxD,gCAAgC,MAAM;AACtC,6BAA6B;AAC7B,yBAAyB;AACzB,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb;AACA,YAAY,4BAA4B,CAAC,SAAS,CAAC,CAAC;AACpD,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA,MAAM,aAAa,GAAG,EAAE,CAAC;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,4BAA4B,GAAG,CAAC,GAAG,KAAK;AAC9C;AACA,IAAI,IAAI,IAAI,CAAC;AACb,IAAI,IAAI,gBAAgB,CAAC;AACzB,IAAI,IAAI,CAAC,CAAC;AACV,IAAI,KAAK,MAAM,SAAS,IAAI,GAAG,CAAC,UAAU,EAAE;AAC5C;AACA;AACA,QAAQ,IAAI,SAAS,CAAC,MAAM,CAAC,KAAK,IAAI,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE;AAChF;AACA;AACA,YAAY,gBAAgB,GAAG,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC;AAC1D,YAAY,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAC/C;AACA;AACA,YAAY,KAAK,CAAC,GAAG,gBAAgB,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;AAC/D,gBAAgB,IAAI,GAAG,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAC3C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;AACjC,oBAAoB,CAAC,IAAI,CAAC,MAAM,CAAC;AACjC,oBAAoB,IAAI,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,MAAM,CAAC;AACtD,qBAAqB,CAAC,KAAK,CAAC,qBAAqB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,SAAS,CAAC,MAAM,CAAC,CAAC,EAAE;AAC3G;AACA;AACA;AACA,oBAAoB,IAAI,mBAAmB,CAAC,IAAI,EAAE,QAAQ,CAAC,EAAE;AAC7D;AACA,wBAAwB,IAAI,gBAAgB,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,gBAAgB,KAAK,IAAI,CAAC,CAAC;AACtG;AACA;AACA;AACA,wBAAwB,2BAA2B,GAAG,IAAI,CAAC;AAC3D;AACA,wBAAwB,IAAI,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,IAAI,QAAQ,CAAC;AAChE,wBAAwB,IAAI,gBAAgB,EAAE;AAC9C,4BAA4B,gBAAgB,CAAC,gBAAgB,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAC1F;AACA;AACA;AACA,4BAA4B,gBAAgB,CAAC,aAAa,GAAG,SAAS,CAAC;AACvE,yBAAyB;AACzB,6BAA6B;AAC7B,4BAA4B,IAAI,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC;AAC7D;AACA,4BAA4B,aAAa,CAAC,IAAI,CAAC;AAC/C,gCAAgC,aAAa,EAAE,SAAS;AACxD,gCAAgC,gBAAgB,EAAE,IAAI;AACtD,6BAA6B,CAAC,CAAC;AAC/B,yBAAyB;AACzB,wBAAwB,IAAI,IAAI,CAAC,MAAM,CAAC,EAAE;AAC1C,4BAA4B,aAAa,CAAC,GAAG,CAAC,CAAC,YAAY,KAAK;AAChE,gCAAgC,IAAI,mBAAmB,CAAC,YAAY,CAAC,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,EAAE;AACtG,oCAAoC,gBAAgB,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,gBAAgB,KAAK,IAAI,CAAC,CAAC;AAC9G,oCAAoC,IAAI,gBAAgB,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE;AACzF,wCAAwC,YAAY,CAAC,aAAa,GAAG,gBAAgB,CAAC,aAAa,CAAC;AACpG,qCAAqC;AACrC,iCAAiC;AACjC,6BAA6B,CAAC,CAAC;AAC/B,yBAAyB;AACzB,qBAAqB;AACrB,yBAAyB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,gBAAgB,KAAK,IAAI,CAAC,EAAE;AACtF;AACA;AACA;AACA;AACA,wBAAwB,aAAa,CAAC,IAAI,CAAC;AAC3C,4BAA4B,gBAAgB,EAAE,IAAI;AAClD,yBAAyB,CAAC,CAAC;AAC3B,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT;AACA;AACA,QAAQ,IAAI,SAAS,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AAClE,YAAY,4BAA4B,CAAC,SAAS,CAAC,CAAC;AACpD,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,mBAAmB,GAAG,CAAC,cAAc,EAAE,QAAQ,KAAK;AAC1D,IAAI,IAAI,cAAc,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AACnE,QAAQ,IAAI,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,IAAI,QAAQ,KAAK,EAAE,EAAE;AAC7E;AACA;AACA,YAAY,OAAO,IAAI,CAAC;AACxB,SAAS;AACT,QAAQ,IAAI,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;AAC9D,YAAY,OAAO,IAAI,CAAC;AACxB,SAAS;AACT,QAAQ,OAAO,KAAK,CAAC;AACrB,KAAK;AACL,IAAI,IAAI,cAAc,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;AAC7C,QAAQ,OAAO,IAAI,CAAC;AACpB,KAAK;AACL,IAAI,OAAO,QAAQ,KAAK,EAAE,CAAC;AAC3B,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,gBAAgB,GAAG,CAAC,KAAK,KAAK;AACpC,IAAI,IAAI,KAAK,CAAC,OAAO,EAAE;AACvB,QAAQ,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AACtE,QAAQ,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AACnE,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,eAAe,EAAE,aAAa,GAAG,KAAK,KAAK;AACxE,IAAI,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC;AAC3B,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;AAC1C,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC;AACtC,IAAI,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO,IAAI,QAAQ,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;AAC7D;AACA;AACA;AACA;AACA;AACA,IAAI,MAAM,SAAS,GAAG,MAAM,CAAC,eAAe,CAAC,GAAG,eAAe,GAAG,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,eAAe,CAAC,CAAC;AACjG,IAAI,WAAW,GAAG,OAAO,CAAC,OAAO,CAAC;AAClC;AACA,IAAI,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;AACvF,QAAQ,MAAM,IAAI,KAAK,CAAC,CAAC;AACzB,qCAAqC,EAAE,WAAW,CAAC,WAAW,EAAE,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAE,CAAC,CAAC,CAAC;AACL,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,OAAO,CAAC,gBAAgB,EAAE;AACnD,QAAQ,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,OAAO,IAAI,EAAE,CAAC;AACpD,QAAQ,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,SAAS,CAAC,MAAM,SAAS,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;AACpH,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,IAAI,aAAa,IAAI,SAAS,CAAC,OAAO,EAAE;AAC5C,QAAQ,KAAK,MAAM,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE;AAC1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,YAAY,IAAI,OAAO,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE;AAC9F,gBAAgB,SAAS,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;AACtD,aAAa;AACb,SAAS;AACT,KAAK;AACL,IAAI,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC;AAC3B,IAAI,SAAS,CAAC,OAAO,IAAI,CAAC,0BAA0B;AACpD,IAAI,OAAO,CAAC,OAAO,GAAG,SAAS,CAAC;AAChC,IAAI,SAAS,CAAC,KAAK,GAAG,QAAQ,CAAC,KAAK,IAAI,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC,UAAU,IAAI,OAAO,GAAG,OAAO,CAAC,CAAC;AACnG,IAAI,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,SAAS,EAAE;AACzC,QAAQ,OAAO,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;AAClC,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,cAAc,EAAE;AAC9B,QAAQ,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;AACrC,QAAQ,kBAAkB,GAAG,cAAc,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,CAAC,6CAA6C,CAAC,CAAC;AAClH;AACA,QAAQ,2BAA2B,GAAG,KAAK,CAAC;AAC5C,KAAK;AACL;AACA,IAAI,KAAK,CAAC,QAAQ,EAAE,SAAS,EAAE,aAAa,CAAC,CAAC;AAC9C,IAAI,IAAI,KAAK,CAAC,cAAc,EAAE;AAC9B;AACA;AACA,QAAQ,GAAG,CAAC,OAAO,IAAI,CAAC,wCAAwC;AAChE,QAAQ,IAAI,iBAAiB,EAAE;AAC/B,YAAY,4BAA4B,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AAC1D,YAAY,KAAK,MAAM,YAAY,IAAI,aAAa,EAAE;AACtD,gBAAgB,MAAM,cAAc,GAAG,YAAY,CAAC,gBAAgB,CAAC;AACrE,gBAAgB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE;AAC7C;AACA;AACA,oBAAoB,MAAM,eAAe,GAAG,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,iBAAiB;AACpF,0BAA0B,yBAAyB,CAAC,cAAc,CAAC;AACnE,0BAA0B,GAAG,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;AACjD,oBAAoB,eAAe,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC;AAC7D,oBAAoB,cAAc,CAAC,UAAU,CAAC,YAAY,EAAE,cAAc,CAAC,MAAM,CAAC,GAAG,eAAe,GAAG,cAAc,CAAC,CAAC;AACvH,iBAAiB;AACjB,aAAa;AACb,YAAY,KAAK,MAAM,YAAY,IAAI,aAAa,EAAE;AACtD,gBAAgB,MAAM,cAAc,GAAG,YAAY,CAAC,gBAAgB,CAAC;AACrE,gBAAgB,MAAM,WAAW,GAAG,YAAY,CAAC,aAAa,CAAC;AAC/D,gBAAgB,IAAI,WAAW,EAAE;AACjC,oBAAoB,MAAM,aAAa,GAAG,WAAW,CAAC,UAAU,CAAC;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,IAAI,gBAAgB,GAAG,WAAW,CAAC,WAAW,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,IAAI,CAAC,KAAK,CAAC,qBAAqB;AACpD,yBAAyB,gBAAgB,IAAI,gBAAgB,CAAC,QAAQ,KAAK,CAAC,6BAA6B,EAAE;AAC3G,wBAAwB,IAAI,eAAe,GAAG,CAAC,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,eAAe,CAAC;AACpI,wBAAwB,OAAO,eAAe,EAAE;AAChD,4BAA4B,IAAI,OAAO,GAAG,CAAC,EAAE,GAAG,eAAe,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC;AAC/G,4BAA4B,IAAI,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,KAAK,cAAc,CAAC,MAAM,CAAC,IAAI,aAAa,KAAK,OAAO,CAAC,UAAU,EAAE;AAC/H,gCAAgC,OAAO,GAAG,OAAO,CAAC,WAAW,CAAC;AAC9D,gCAAgC,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;AAClE,oCAAoC,gBAAgB,GAAG,OAAO,CAAC;AAC/D,oCAAoC,MAAM;AAC1C,iCAAiC;AACjC,6BAA6B;AAC7B,4BAA4B,eAAe,GAAG,eAAe,CAAC,eAAe,CAAC;AAC9E,yBAAyB;AACzB,qBAAqB;AACrB,oBAAoB,IAAI,CAAC,CAAC,gBAAgB,IAAI,aAAa,KAAK,cAAc,CAAC,UAAU;AACzF,wBAAwB,cAAc,CAAC,WAAW,KAAK,gBAAgB,EAAE;AACzE;AACA;AACA;AACA,wBAAwB,IAAI,cAAc,KAAK,gBAAgB,EAAE;AACjE,4BAA4B,IAAI,CAAC,KAAK,CAAC,qBAAqB,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,cAAc,CAAC,MAAM,CAAC,EAAE;AACnH;AACA,gCAAgC,cAAc,CAAC,MAAM,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC;AACpG,6BAA6B;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4BAA4B,IAAI,KAAK,CAAC,qBAAqB;AAC3D,gCAAgC,cAAc,CAAC,QAAQ,KAAK,CAAC;AAC7D,gCAAgC,WAAW,CAAC,MAAM,CAAC,KAAK,cAAc,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC7F,gCAAgC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE;AAC1D,oCAAoC,cAAc,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;AAC3E,iCAAiC;AACjC,qCAAqC;AACrC,oCAAoC,cAAc,CAAC,YAAY,CAAC,MAAM,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7F,iCAAiC;AACjC,6BAA6B;AAC7B;AACA;AACA;AACA;AACA,4BAA4B,aAAa,CAAC,YAAY,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AACzF;AACA;AACA;AACA;AACA,4BAA4B,IAAI,cAAc,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AAC3F,gCAAgC,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE,GAAG,cAAc,CAAC,MAAM,CAAC,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC;AAC7H,6BAA6B;AAC7B,yBAAyB;AACzB,qBAAqB;AACrB,iBAAiB;AACjB,qBAAqB;AACrB;AACA,oBAAoB,IAAI,cAAc,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AACnF;AACA;AACA,wBAAwB,IAAI,aAAa,EAAE;AAC3C,4BAA4B,cAAc,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,GAAG,cAAc,CAAC,MAAM,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC;AACzH,yBAAyB;AACzB,wBAAwB,cAAc,CAAC,MAAM,GAAG,IAAI,CAAC;AACrD,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,QAAQ,IAAI,2BAA2B,EAAE;AACzC,YAAY,4BAA4B,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;AAC1D,SAAS;AACT;AACA;AACA,QAAQ,GAAG,CAAC,OAAO,IAAI,CAAC,CAAC,wCAAwC;AACjE;AACA,QAAQ,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC;AACjC,KAAK;AACL;AACA;AACA;AACA,IAAI,IAAI,KAAK,CAAC,qBAAqB,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,yCAAyC;AACnG,QAAQ,KAAK,MAAM,SAAS,IAAI,SAAS,CAAC,KAAK,CAAC,UAAU,EAAE;AAC5D,YAAY,IAAI,SAAS,CAAC,MAAM,CAAC,KAAK,WAAW,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE;AACzE;AACA;AACA,gBAAgB,IAAI,aAAa,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE;AAChE,oBAAoB,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,CAAC,MAAM,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,KAAK,CAAC;AACvG,iBAAiB;AACjB,gBAAgB,SAAS,CAAC,MAAM,GAAG,IAAI,CAAC;AACxC,aAAa;AACb,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA,MAAM,sBAAsB,GAAG,CAAC,SAAS,KAAK,GAAG,CAAC,aAAa,CAAC,CAAC,KAAK,EAAE,SAAS,CAAC,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC,MAAM,GAAG,GAAG,GAAG,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3K,MAAM,yBAAyB,GAAG,CAAC,cAAc,KAAK,GAAG,CAAC,aAAa,CAAC,CAAC,iBAAiB,CAAC;AAC3F,KAAK,cAAc,CAAC,SAAS;AAC7B,UAAU,CAAC,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC;AAC1E,UAAU,CAAC,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9C,MAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,iBAAiB,KAAK;AACzD,IAAI,IAAI,KAAK,CAAC,YAAY,IAAI,iBAAiB,IAAI,CAAC,OAAO,CAAC,iBAAiB,IAAI,iBAAiB,CAAC,KAAK,CAAC,EAAE;AAC3G,QAAQ,iBAAiB,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,OAAO,CAAC,iBAAiB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3F,KAAK;AACL,CAAC,CAAC;AACF,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,aAAa,KAAK;AACnD,IAAI,IAAI,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,EAAE;AAC5C,QAAQ,OAAO,CAAC,OAAO,IAAI,EAAE,oCAAoC;AACjE,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,YAAY,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,wCAAwC;AACzF,QAAQ,OAAO,CAAC,OAAO,IAAI,GAAG,gCAAgC;AAC9D,QAAQ,OAAO;AACf,KAAK;AACL,IAAI,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAAC;AAC3D;AACA;AACA;AACA,IAAI,MAAM,QAAQ,GAAG,MAAM,aAAa,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;AACjE,IAAI,OAAO,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC,QAAQ,CAAC,GAAG,QAAQ,EAAE,CAAC;AAC9D,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,aAAa,KAAK;AAClD,IAAI,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC;AACtC,IAAI,MAAM,WAAW,GAAG,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;AAClF,IAAI,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC,cAAc,GAAG,GAAG,CAAC;AACnE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,IAAI,YAAY,CAAC;AACrB,IAAI,IAAI,aAAa,EAAE;AACvB,QAAQ,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,YAAY,EAAE;AAClD,YAAY,OAAO,CAAC,OAAO,IAAI,GAAG,gCAAgC;AAClE,YAAY,IAAI,OAAO,CAAC,iBAAiB,EAAE;AAC3C,gBAAgB,OAAO,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,KAAK,CAAC,KAAK,QAAQ,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC;AAC9G,gBAAgB,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC;AACtD,aAAa;AACb,SAAS;AACT,QAAQ,kBAAkB,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC;AACrD,QAAQ,IAAI,KAAK,CAAC,WAAW,EAAE;AAC/B;AACA;AACA;AACA;AACA;AACA,YAAY,YAAY,GAAG,QAAQ,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC;AACnE,SAAS;AACT,KAAK;AACL,SAAS;AACT,QAAQ,kBAAkB,CAAC,GAAG,EAAE,qBAAqB,CAAC,CAAC;AACvD,QAAQ,IAAI,KAAK,CAAC,aAAa,EAAE;AACjC;AACA;AACA;AACA;AACA;AACA,YAAY,YAAY,GAAG,QAAQ,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC;AACrE,SAAS;AACT,KAAK;AACL,IAAI,kBAAkB,CAAC,GAAG,EAAE,qBAAqB,CAAC,CAAC;AACnD,IAAI,IAAI,KAAK,CAAC,aAAa,EAAE;AAC7B,QAAQ,YAAY,GAAG,OAAO,CAAC,YAAY,EAAE,MAAM,QAAQ,CAAC,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC;AAC9F,KAAK;AACL,IAAI,WAAW,EAAE,CAAC;AAClB,IAAI,OAAO,OAAO,CAAC,YAAY,EAAE,MAAM,eAAe,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;AAC1F,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,OAAO,GAAG,CAAC,YAAY,EAAE,EAAE,KAAK,UAAU,CAAC,YAAY,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,UAAU,GAAG,CAAC,YAAY,KAAK,YAAY,YAAY,OAAO;AACpE,KAAK,YAAY,IAAI,YAAY,CAAC,IAAI,IAAI,OAAO,YAAY,CAAC,IAAI,KAAK,UAAU,CAAC,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,eAAe,GAAG,OAAO,OAAO,EAAE,QAAQ,EAAE,aAAa,KAAK;AACpE,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC;AACtC,IAAI,MAAM,SAAS,GAAG,UAAU,CAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;AACxE,IAAI,MAAM,EAAE,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC;AAC3B,IAAI,IAAI,KAAK,CAAC,KAAK,IAAI,aAAa,EAAE;AACtC;AACA,QAAQ,YAAY,CAAC,OAAO,CAAC,CAAC;AAC9B,KAAK;AACL,IAAI,MAAM,SAAS,GAAG,UAAU,CAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;AACxE,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AACrB,QAAQ,OAAO,CAAC,OAAO,IAAI,IAAI,8BAA8B;AAC7D,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,iBAAiB,EAAE;AACjC,QAAQ,MAAM,UAAU,CAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,CAAC,CAAC;AAChE,KAAK;AACL,SAAS;AACT,QAAQ,UAAU,CAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,CAAC,CAAC;AAC1D,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AACrB,QAAQ,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC,aAAa,KAAK,SAAS,GAAG,CAAC,GAAG,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC;AACpG,QAAQ,OAAO,CAAC,OAAO,IAAI,CAAC,IAAI,8BAA8B;AAC9D,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,iBAAiB,EAAE;AACjC,QAAQ,IAAI;AACZ;AACA,YAAY,mBAAmB,CAAC,GAAG,CAAC,CAAC;AACrC,YAAY,IAAI,aAAa,EAAE;AAC/B;AACA,gBAAgB,IAAI,OAAO,CAAC,SAAS,CAAC,OAAO,GAAG,CAAC,yCAAyC;AAC1F,oBAAoB,GAAG,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;AACrC,iBAAiB;AACjB,qBAAqB,IAAI,OAAO,CAAC,SAAS,CAAC,OAAO,GAAG,CAAC,yCAAyC;AAC/F,oBAAoB,GAAG,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC;AACtC,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,QAAQ,OAAO,CAAC,EAAE;AAClB,YAAY,YAAY,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AACjC,SAAS;AACT,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,YAAY,IAAI,EAAE,EAAE;AAClC;AACA;AACA;AACA,QAAQ,EAAE,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC;AAC7B,QAAQ,GAAG,CAAC,MAAM,CAAC,GAAG,SAAS,CAAC;AAChC,KAAK;AACL,IAAI,SAAS,EAAE,CAAC;AAChB,IAAI,SAAS,EAAE,CAAC;AAChB,IAAI,IAAI,KAAK,CAAC,YAAY,EAAE;AAC5B,QAAQ,MAAM,gBAAgB,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;AACvF,QAAQ,MAAM,UAAU,GAAG,MAAM,mBAAmB,CAAC,OAAO,CAAC,CAAC;AAC9D,QAAQ,IAAI,gBAAgB,CAAC,MAAM,KAAK,CAAC,EAAE;AAC3C,YAAY,UAAU,EAAE,CAAC;AACzB,SAAS;AACT,aAAa;AACb,YAAY,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAC3D,YAAY,OAAO,CAAC,OAAO,IAAI,CAAC,uCAAuC;AACvE,YAAY,gBAAgB,CAAC,MAAM,GAAG,CAAC,CAAC;AACxC,SAAS;AACT,KAAK;AACL,SAAS;AACT,QAAQ,mBAAmB,CAAC,OAAO,CAAC,CAAC;AACrC,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,aAAa,KAAK;AAC9D;AACA;AACA;AACA,IAAI,MAAM,WAAW,GAAG,KAAK,CAAC,WAAW,GAAG,IAAI,GAAG,KAAK,CAAC;AACzD,IAAI,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,GAAG,IAAI,GAAG,KAAK,CAAC;AACnD,IAAI,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC;AACrD,IAAI,MAAM,SAAS,GAAG,KAAK,CAAC,SAAS,GAAG,IAAI,GAAG,KAAK,CAAC;AACrD,IAAI,IAAI;AACR,QAAQ,YAAY,GAAG,QAAQ,CAAC;AAChC;AACA;AACA;AACA;AACA,QAAQ,QAAQ,GAAG,WAAW,GAAG,QAAQ,CAAC,MAAM,EAAE,GAAG,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,MAAM,EAAE,CAAC;AAC1F,QAAQ,IAAI,SAAS,IAAI,SAAS,EAAE;AACpC,YAAY,OAAO,CAAC,OAAO,IAAI,CAAC,EAAE,oCAAoC;AACtE,SAAS;AACT,QAAQ,IAAI,SAAS,IAAI,QAAQ,EAAE;AACnC,YAAY,OAAO,CAAC,OAAO,IAAI,CAAC,8BAA8B;AAC9D,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,OAAO,EAAE;AAChD,YAAY,IAAI,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO,EAAE;AACnD;AACA;AACA;AACA,gBAAgB,IAAI,KAAK,CAAC,iBAAiB,EAAE;AAC7C,oBAAoB,OAAO,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC;AAChH,iBAAiB;AACjB,qBAAqB;AACrB,oBAAoB,UAAU,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;AACjE,iBAAiB;AACjB,aAAa;AACb,iBAAiB;AACjB,gBAAgB,MAAM,UAAU,GAAG,GAAG,CAAC,UAAU,CAAC;AAClD,gBAAgB,IAAI,OAAO,CAAC,SAAS,CAAC,OAAO,GAAG,CAAC,yCAAyC;AAC1F,oBAAoB,UAAU,CAAC,WAAW,GAAG,QAAQ,CAAC;AACtD,iBAAiB;AACjB,qBAAqB;AACrB,oBAAoB,GAAG,CAAC,WAAW,GAAG,QAAQ,CAAC;AAC/C,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,KAAK;AACL,IAAI,OAAO,CAAC,EAAE;AACd,QAAQ,YAAY,CAAC,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;AAC/C,KAAK;AACL,IAAI,YAAY,GAAG,IAAI,CAAC;AACxB,IAAI,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AACF,MAAM,eAAe,GAAG,MAAM,YAAY,CAAC;AAC3C,MAAM,mBAAmB,GAAG,CAAC,OAAO,KAAK;AACzC,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC,SAAS,CAAC;AAChD,IAAI,MAAM,GAAG,GAAG,OAAO,CAAC,aAAa,CAAC;AACtC,IAAI,MAAM,aAAa,GAAG,UAAU,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;AAC5D,IAAI,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC,cAAc,GAAG,GAAG,CAAC;AACnE,IAAI,MAAM,iBAAiB,GAAG,OAAO,CAAC,mBAAmB,CAAC;AAC1D,IAAI,IAAI,KAAK,CAAC,YAAY,EAAE;AAC5B,QAAQ,IAAI,KAAK,CAAC,KAAK,EAAE;AACzB,YAAY,OAAO,CAAC,OAAO,IAAI,IAAI,8BAA8B;AACjE,SAAS;AACT,QAAQ,QAAQ,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AACjD,QAAQ,IAAI,KAAK,CAAC,KAAK,EAAE;AACzB,YAAY,OAAO,CAAC,OAAO,IAAI,CAAC,IAAI,8BAA8B;AAClE,SAAS;AACT,KAAK;AACL,IAAI,kBAAkB,CAAC,GAAG,EAAE,oBAAoB,CAAC,CAAC;AAClD,IAAI,IAAI,EAAE,OAAO,CAAC,OAAO,GAAG,EAAE,qCAAqC,EAAE;AACrE,QAAQ,OAAO,CAAC,OAAO,IAAI,EAAE,qCAAqC;AAClE,QAAQ,IAAI,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,cAAc,EAAE;AACxD;AACA,YAAY,eAAe,CAAC,GAAG,CAAC,CAAC;AACjC,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,UAAU,EAAE;AAC9B,YAAY,IAAI,KAAK,CAAC,KAAK,EAAE;AAC7B,gBAAgB,OAAO,CAAC,OAAO,IAAI,IAAI,+BAA+B;AACtE,aAAa;AACb,YAAY,QAAQ,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAC;AACnD,YAAY,IAAI,KAAK,CAAC,KAAK,EAAE;AAC7B,gBAAgB,OAAO,CAAC,OAAO,IAAI,CAAC,IAAI,+BAA+B;AACvE,aAAa;AACb,SAAS;AACT,QAAQ,kBAAkB,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC;AACpD,QAAQ,aAAa,EAAE,CAAC;AACxB,QAAQ,IAAI,KAAK,CAAC,YAAY,EAAE;AAChC,YAAY,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;AAC1C,YAAY,IAAI,CAAC,iBAAiB,EAAE;AACpC,gBAAgB,UAAU,CAAC,OAAO,CAAC,CAAC;AACpC,aAAa;AACb,SAAS;AACT,KAAK;AACL,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,YAAY,EAAE;AAChC;AACA;AACA;AACA;AACA,YAAY,IAAI,KAAK,CAAC,KAAK,EAAE;AAC7B,gBAAgB,OAAO,CAAC,OAAO,IAAI,IAAI,8BAA8B;AACrE,aAAa;AACb,YAAY,QAAQ,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AACrD,YAAY,IAAI,KAAK,CAAC,KAAK,EAAE;AAC7B,gBAAgB,OAAO,CAAC,OAAO,IAAI,CAAC,IAAI,8BAA8B;AACtE,aAAa;AACb,SAAS;AACT,QAAQ,kBAAkB,CAAC,GAAG,EAAE,oBAAoB,CAAC,CAAC;AACtD,QAAQ,aAAa,EAAE,CAAC;AACxB,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,QAAQ,EAAE;AACxC,QAAQ,OAAO,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC;AACzC,KAAK;AACL;AACA;AACA,IAAI,IAAI,KAAK,CAAC,YAAY,EAAE;AAC5B,QAAQ,IAAI,OAAO,CAAC,iBAAiB,EAAE;AACvC,YAAY,OAAO,CAAC,iBAAiB,EAAE,CAAC;AACxC,YAAY,OAAO,CAAC,iBAAiB,GAAG,SAAS,CAAC;AAClD,SAAS;AACT,QAAQ,IAAI,OAAO,CAAC,OAAO,GAAG,GAAG,iCAAiC;AAClE,YAAY,QAAQ,CAAC,MAAM,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;AAC3D,SAAS;AACT,QAAQ,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC,yCAAyC,GAAG,gCAAgC,CAAC;AAC3G,KAAK;AACL;AACA;AACA;AACA,CAAC,CAAC;AACF,MAAM,WAAW,GAAG,CAAC,GAAG,KAAK;AAC7B,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,KAAK,CAAC,SAAS,IAAI,KAAK,CAAC,SAAS,CAAC,EAAE;AACjE,QAAQ,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AACxC,QAAQ,MAAM,WAAW,GAAG,OAAO,CAAC,aAAa,CAAC,WAAW,CAAC;AAC9D,QAAQ,IAAI,WAAW;AACvB,YAAY,CAAC,OAAO,CAAC,OAAO,IAAI,CAAC,gCAAgC,EAAE,oCAAoC,MAAM,CAAC,+BAA+B;AAC7I,YAAY,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC3C,SAAS;AACT;AACA,QAAQ,OAAO,WAAW,CAAC;AAC3B,KAAK;AACL,IAAI,OAAO,KAAK,CAAC;AACjB,CAAC,CAAC;AACF,MAAM,UAAU,GAAG,CAAC,GAAG,KAAK;AAC5B;AACA;AACA,IAAI,IAAI,KAAK,CAAC,cAAc,EAAE;AAC9B,QAAQ,eAAe,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;AAC7C,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;AAC1B,QAAQ,GAAG,CAAC,OAAO,IAAI,CAAC,gCAAgC;AACxD,KAAK;AACL,IAAI,QAAQ,CAAC,MAAM,SAAS,CAAC,GAAG,EAAE,SAAS,EAAE,EAAE,MAAM,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC;AACpF,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,WAAW,CAAC,OAAO,EAAE;AAC9C,QAAQ,WAAW,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,SAAS,CAAC,kBAAkB,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,cAAc,CAAC,CAAC;AAC/F,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,QAAQ,GAAG,CAAC,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK;AAC5C,IAAI,IAAI,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,EAAE;AACtC,QAAQ,IAAI;AACZ,YAAY,OAAO,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC;AACzC,SAAS;AACT,QAAQ,OAAO,CAAC,EAAE;AAClB,YAAY,YAAY,CAAC,CAAC,CAAC,CAAC;AAC5B,SAAS;AACT,KAAK;AACL,IAAI,OAAO,SAAS,CAAC;AACrB,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,kBAAkB,GAAG,CAAC,GAAG,EAAE,aAAa,KAAK;AACnD,IAAI,IAAI,KAAK,CAAC,kBAAkB,EAAE;AAClC,QAAQ,SAAS,CAAC,GAAG,EAAE,UAAU,GAAG,aAAa,EAAE;AACnD,YAAY,OAAO,EAAE,IAAI;AACzB,YAAY,QAAQ,EAAE,IAAI;AAC1B,YAAY,MAAM,EAAE;AACpB,gBAAgB,SAAS,EAAE,SAAS;AACpC,aAAa;AACb,SAAS,CAAC,CAAC;AACX,KAAK;AACL,CAAC,CAAC;AACF,MAAM,eAAe,GAAG,CAAC,GAAG,KAAK,KAAK,CAAC,aAAa;AACpD,MAAM,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;AACnC,MAAM,KAAK,CAAC,iBAAiB;AAC7B,UAAU,GAAG,CAAC,YAAY,CAAC,UAAU,EAAE,EAAE,CAAC;AAC1C,UAAU,SAAS,CAAC;AACpB,MAAM,mBAAmB,GAAG,CAAC,GAAG,KAAK;AACrC,IAAI,MAAM,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAClC,IAAI,IAAI,QAAQ,IAAI,IAAI,EAAE;AAC1B,QAAQ,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE;AAC3D,YAAY,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;AACzC,YAAY,IAAI,OAAO,QAAQ,CAAC,iBAAiB,KAAK,UAAU,EAAE;AAClE,gBAAgB,QAAQ,CAAC,iBAAiB,EAAE,CAAC;AAC7C,aAAa;AACb,YAAY,mBAAmB,CAAC,QAAQ,CAAC,CAAC;AAC1C,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF,MAAM,QAAQ,GAAG,CAAC,GAAG,EAAE,QAAQ,KAAK,UAAU,CAAC,GAAG,CAAC,CAAC,gBAAgB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AACnF,MAAM,QAAQ,GAAG,CAAC,GAAG,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,KAAK;AACrD;AACA,IAAI,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AACpC,IAAI,MAAM,GAAG,GAAG,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC,aAAa,GAAG,GAAG,CAAC;AAC7D,IAAI,MAAM,MAAM,GAAG,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AAC1D,IAAI,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC;AAClC,IAAI,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC,cAAc,GAAG,GAAG,CAAC;AACnE,IAAI,MAAM,GAAG,kBAAkB,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACxE;AACA,IAAI,MAAM,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;AACpE,IAAI,MAAM,cAAc,GAAG,MAAM,KAAK,MAAM,IAAI,CAAC,UAAU,CAAC;AAC5D,IAAI,IAAI,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,EAAE,KAAK,GAAG,CAAC,yCAAyC,IAAI,MAAM,KAAK,SAAS,KAAK,cAAc,EAAE;AAC7H;AACA;AACA,QAAQ,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;AACvD,QAAQ,IAAI,KAAK,CAAC,KAAK,EAAE;AACzB,YAAY,IAAI,OAAO,CAAC,OAAO,GAAG,IAAI,+BAA+B;AACrE,gBAAgB,cAAc,CAAC,CAAC,gBAAgB,EAAE,QAAQ,CAAC,uFAAuF,CAAC,EAAE,WAAW,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,CAAC,CAAC;AACrN,aAAa;AACb,iBAAiB,IAAI,OAAO,CAAC,OAAO,GAAG,IAAI,gCAAgC;AAC3E,gBAAgB,cAAc,CAAC,CAAC,gBAAgB,EAAE,QAAQ,CAAC,4GAA4G,CAAC,EAAE,WAAW,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,CAAC,CAAC;AAC1O,aAAa;AACb,SAAS;AACT,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,QAAQ,EAAE;AACzC;AACA,YAAY,IAAI,KAAK,CAAC,aAAa,IAAI,OAAO,CAAC,UAAU,IAAI,KAAK,GAAG,GAAG,gCAAgC;AACxG,gBAAgB,MAAM,YAAY,GAAG,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC;AAClE,gBAAgB,IAAI,YAAY,EAAE;AAClC;AACA,oBAAoB,YAAY,CAAC,GAAG,CAAC,CAAC,eAAe,KAAK;AAC1D,wBAAwB,IAAI;AAC5B;AACA,4BAA4B,QAAQ,CAAC,eAAe,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC;AAChF,yBAAyB;AACzB,wBAAwB,OAAO,CAAC,EAAE;AAClC,4BAA4B,YAAY,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AACjD,yBAAyB;AACzB,qBAAqB,CAAC,CAAC;AACvB,iBAAiB;AACjB,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,SAAS;AAC/B,gBAAgB,CAAC,KAAK,IAAI,CAAC,gCAAgC,EAAE,oCAAoC,MAAM,CAAC,+BAA+B;AACvI,gBAAgB,IAAI,KAAK,CAAC,eAAe,IAAI,QAAQ,CAAC,qBAAqB,EAAE;AAC7E,oBAAoB,IAAI,QAAQ,CAAC,qBAAqB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,KAAK,KAAK,EAAE;AAC5F,wBAAwB,OAAO;AAC/B,qBAAqB;AACrB,iBAAiB;AACjB;AACA;AACA;AACA;AACA,gBAAgB,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AAC/C,aAAa;AACb,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,cAAc,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,KAAK;AACjD,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC;AACrC;AACA;AACA;AACA;AACA,IAAI,IAAI,KAAK,CAAC,cAAc,IAAI,OAAO,CAAC,OAAO,GAAG,EAAE,mCAAmC,KAAK,GAAG,CAAC,yCAAyC;AACzI,QAAQ,wCAAwC,CAAC,OAAO,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,MAAM,EAAE;AAC9G,YAAY,KAAK,CAAC,GAAG,IAAI,EAAE;AAC3B,gBAAgB,MAAM,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;AACjD,gBAAgB,MAAM,GAAG,GAAG,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC;AAC1E,gBAAgB,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC,cAAc,GAAG,GAAG,CAAC;AAC/E,gBAAgB,IAAI,CAAC,QAAQ,EAAE;AAC/B,oBAAoB,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,QAAQ,KAAK;AAChE,wBAAwB,MAAM,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;AACpD,wBAAwB,OAAO,EAAE,KAAK,UAAU,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,CAAC;AAC/E,qBAAqB,CAAC,CAAC;AACvB,iBAAiB;AACjB,qBAAqB;AACrB,oBAAoB,MAAM,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAC;AAChD,oBAAoB,OAAO,EAAE,KAAK,UAAU,IAAI,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAG,IAAI,CAAC,CAAC;AAC3E,iBAAiB;AACjB,aAAa;AACb,SAAS,CAAC,CAAC,CAAC;AACZ,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,MAAM,IAAI,OAAO,CAAC,SAAS,EAAE;AAC3C,QAAQ,IAAI,KAAK,CAAC,aAAa,IAAI,IAAI,CAAC,QAAQ,EAAE;AAClD,YAAY,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC;AAC/C,SAAS;AACT;AACA,QAAQ,MAAM,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;AAC1D,QAAQ,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,WAAW,CAAC,CAAC,KAAK;AACrD,YAAY,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,KAAK;AAC1C,iBAAiB,WAAW,GAAG,EAAE;AACjC,qBAAqB,CAAC,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,GAAG,CAAC,kCAAkC,WAAW,GAAG,EAAE,0BAA0B,CAAC,EAAE;AACjI;AACA,gBAAgB,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE;AAC7D,oBAAoB,GAAG,GAAG;AAC1B;AACA,wBAAwB,OAAO,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC,CAAC;AAC1D,qBAAqB;AACrB,oBAAoB,GAAG,CAAC,QAAQ,EAAE;AAClC;AACA,wBAAwB,IAAI,KAAK,CAAC,KAAK,EAAE;AACzC,4BAA4B,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;AACzD,4BAA4B;AAC5B;AACA,4BAA4B,CAAC,KAAK,GAAG,CAAC,6CAA6C,CAAC;AACpF;AACA,gCAAgC,CAAC,GAAG,IAAI,GAAG,CAAC,OAAO,GAAG,CAAC,8CAA8C,CAAC;AACtG;AACA,gCAAgC,CAAC,WAAW,GAAG,EAAE,8BAA8B,CAAC;AAChF;AACA,gCAAgC,CAAC,WAAW,GAAG,IAAI,iCAAiC,CAAC,EAAE;AACvF,gCAAgC,cAAc,CAAC,CAAC,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,mIAAmI,CAAC,CAAC,CAAC;AACtO,6BAA6B;AAC7B,yBAAyB;AACzB;AACA,wBAAwB,QAAQ,CAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AACtE,qBAAqB;AACrB,oBAAoB,YAAY,EAAE,IAAI;AACtC,oBAAoB,UAAU,EAAE,IAAI;AACpC,iBAAiB,CAAC,CAAC;AACnB,aAAa;AACb,iBAAiB,IAAI,KAAK,CAAC,QAAQ;AACnC,gBAAgB,KAAK,CAAC,MAAM;AAC5B,gBAAgB,KAAK,GAAG,CAAC;AACzB,gBAAgB,WAAW,GAAG,EAAE,4BAA4B;AAC5D;AACA,gBAAgB,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE;AAC7D,oBAAoB,KAAK,CAAC,GAAG,IAAI,EAAE;AACnC,wBAAwB,IAAI,EAAE,CAAC;AAC/B,wBAAwB,MAAM,GAAG,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;AACrD,wBAAwB,OAAO,CAAC,EAAE,GAAG,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,GAAG,CAAC,mBAAmB,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,EAAE,GAAG,GAAG,CAAC,cAAc,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC;AACvQ,qBAAqB;AACrB,iBAAiB,CAAC,CAAC;AACnB,aAAa;AACb,SAAS,CAAC,CAAC;AACX,QAAQ,IAAI,KAAK,CAAC,gBAAgB,KAAK,CAAC,KAAK,CAAC,QAAQ,IAAI,KAAK,GAAG,CAAC,wCAAwC,EAAE;AAC7G,YAAY,MAAM,kBAAkB,GAAG,IAAI,GAAG,EAAE,CAAC;AACjD,YAAY,SAAS,CAAC,wBAAwB,GAAG,UAAU,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE;AACzF,gBAAgB,GAAG,CAAC,GAAG,CAAC,MAAM;AAC9B,oBAAoB,IAAI,EAAE,CAAC;AAC3B,oBAAoB,MAAM,QAAQ,GAAG,kBAAkB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;AACtE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,IAAI,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,EAAE;AACvD,wBAAwB,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;AAClD,wBAAwB,OAAO,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC9C,qBAAqB;AACrB,yBAAyB,IAAI,SAAS,CAAC,cAAc,CAAC,QAAQ,CAAC;AAC/D,wBAAwB,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,QAAQ;AAC1D,wBAAwB,IAAI,CAAC,QAAQ,CAAC,IAAI,QAAQ,EAAE;AACpD;AACA;AACA;AACA,wBAAwB,OAAO;AAC/B,qBAAqB;AACrB,yBAAyB,IAAI,QAAQ,IAAI,IAAI,EAAE;AAC/C;AACA;AACA,wBAAwB,MAAM,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;AACzD,wBAAwB,MAAM,KAAK,GAAG,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,OAAO,CAAC;AACxG;AACA;AACA;AACA;AACA,wBAAwB,IAAI,KAAK;AACjC,4BAA4B,EAAE,KAAK,GAAG,CAAC,yCAAyC;AAChF,4BAA4B,KAAK,GAAG,GAAG;AACvC,4BAA4B,QAAQ,KAAK,QAAQ,EAAE;AACnD,4BAA4B,MAAM,GAAG,GAAG,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC,aAAa,GAAG,IAAI,CAAC;AACtF,4BAA4B,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC,cAAc,GAAG,GAAG,CAAC;AAC3F,4BAA4B,MAAM,KAAK,GAAG,CAAC,EAAE,GAAG,OAAO,CAAC,UAAU,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC;AACtH,4BAA4B,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,YAAY,KAAK;AAC1G,gCAAgC,IAAI,QAAQ,CAAC,YAAY,CAAC,IAAI,IAAI,EAAE;AACpE,oCAAoC,QAAQ,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;AACxG,iCAAiC;AACjC,6BAA6B,CAAC,CAAC;AAC/B,yBAAyB;AACzB,wBAAwB,OAAO;AAC/B,qBAAqB;AACrB,oBAAoB,IAAI,CAAC,QAAQ,CAAC,GAAG,QAAQ,KAAK,IAAI,IAAI,OAAO,IAAI,CAAC,QAAQ,CAAC,KAAK,SAAS,GAAG,KAAK,GAAG,QAAQ,CAAC;AACjH,iBAAiB,CAAC,CAAC;AACnB,aAAa,CAAC;AACd;AACA;AACA;AACA;AACA;AACA,YAAY,IAAI,CAAC,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,GAAG,CAAC;AACzD,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,OAAO,CAAC,UAAU,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;AAC7F,gBAAgB,GAAG,OAAO;AAC1B,qBAAqB,MAAM,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,iCAAiC;AAClF,qBAAqB,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC,KAAK;AAC5C,oBAAoB,IAAI,EAAE,CAAC;AAC3B,oBAAoB,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,QAAQ,CAAC;AACtD,oBAAoB,kBAAkB,CAAC,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC/D,oBAAoB,IAAI,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,GAAG,GAAG,iCAAiC;AACpF,wBAAwB,CAAC,EAAE,GAAG,OAAO,CAAC,gBAAgB,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;AAC3H,qBAAqB;AACrB,oBAAoB,OAAO,QAAQ,CAAC;AACpC,iBAAiB,CAAC;AAClB,aAAa,CAAC,CAAC,CAAC;AAChB,SAAS;AACT,KAAK;AACL,IAAI,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,mBAAmB,GAAG,OAAO,GAAG,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,KAAK;AAC3E,IAAI,IAAI,IAAI,CAAC;AACb;AACA,IAAI,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,EAAE,+CAA+C,CAAC,EAAE;AAC/E;AACA,QAAQ,OAAO,CAAC,OAAO,IAAI,EAAE,0CAA0C;AACvE,QAAQ,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,iBAAiB,EAAE;AACvD;AACA;AACA;AACA,YAAY,IAAI,GAAG,UAAU,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;AAC9D,YAAY,IAAI,IAAI,CAAC,IAAI,EAAE;AAC3B;AACA,gBAAgB,MAAM,OAAO,GAAG,UAAU,CAAC,CAAC,QAAQ,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,2BAA2B,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC;AACrJ,gBAAgB,IAAI,GAAG,MAAM,IAAI,CAAC;AAClC,gBAAgB,OAAO,EAAE,CAAC;AAC1B,aAAa;AACb,YAAY,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE;AACzD,gBAAgB,MAAM,IAAI,KAAK,CAAC,CAAC,iBAAiB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC,CAAC;AAC9G,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;AACjD;AACA;AACA;AACA,gBAAgB,IAAI,KAAK,CAAC,aAAa,EAAE;AACzC,oBAAoB,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,QAAQ,CAAC;AACvD,iBAAiB;AACjB,gBAAgB,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,8BAA8B,CAAC;AAC9E,gBAAgB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;AACtC,aAAa;AACb,YAAY,MAAM,cAAc,GAAG,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;AACnF;AACA;AACA;AACA,YAAY,IAAI,KAAK,CAAC,MAAM,EAAE;AAC9B,gBAAgB,OAAO,CAAC,OAAO,IAAI,CAAC,yCAAyC;AAC7E,aAAa;AACb;AACA;AACA;AACA;AACA,YAAY,IAAI;AAChB,gBAAgB,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC;AAClC,aAAa;AACb,YAAY,OAAO,CAAC,EAAE;AACtB,gBAAgB,YAAY,CAAC,CAAC,CAAC,CAAC;AAChC,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,MAAM,EAAE;AAC9B,gBAAgB,OAAO,CAAC,OAAO,IAAI,CAAC,CAAC,yCAAyC;AAC9E,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,aAAa,EAAE;AACrC,gBAAgB,OAAO,CAAC,OAAO,IAAI,GAAG,+BAA+B;AACrE,aAAa;AACb,YAAY,cAAc,EAAE,CAAC;AAC7B,YAAY,qBAAqB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;AAC1D,SAAS;AACT,aAAa;AACb;AACA,YAAY,IAAI,GAAG,GAAG,CAAC,WAAW,CAAC;AACnC;AACA;AACA;AACA,YAAY,cAAc,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,OAAO,OAAO,CAAC,OAAO,IAAI,GAAG,+BAA+B,CAAC,CAAC;AAC7H,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE;AACvC;AACA,YAAY,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;AACnC,YAAY,IAAI,KAAK,CAAC,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AACzD,gBAAgB,KAAK,GAAG,KAAK,EAAE,OAAO,CAAC,UAAU,GAAG,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;AACvE,gBAAgB,IAAI,KAAK,CAAC,iBAAiB,IAAI,OAAO,CAAC,UAAU,EAAE;AACnE,oBAAoB,GAAG,CAAC,YAAY,CAAC,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;AACnE,iBAAiB;AACjB,aAAa;AACb,YAAY,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;AACpE,YAAY,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AACtC,gBAAgB,MAAM,iBAAiB,GAAG,UAAU,CAAC,gBAAgB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;AAC1F,gBAAgB,IAAI,CAAC,KAAK,CAAC,iBAAiB;AAC5C,oBAAoB,KAAK,CAAC,SAAS;AACnC;AACA,oBAAoB,KAAK,CAAC,aAAa;AACvC,oBAAoB,OAAO,CAAC,OAAO,GAAG,CAAC,qCAAqC;AAC5E,oBAAoB,KAAK,GAAG,MAAM,OAAO,0BAAiB,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;AAC3G,iBAAiB;AACjB,gBAAgB,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,OAAO,CAAC,OAAO,GAAG,CAAC,wCAAwC,CAAC,CAAC;AAC9G,gBAAgB,iBAAiB,EAAE,CAAC;AACpC,aAAa;AACb,SAAS;AACT,KAAK;AACL;AACA,IAAI,MAAM,iBAAiB,GAAG,OAAO,CAAC,mBAAmB,CAAC;AAC1D,IAAI,MAAM,QAAQ,GAAG,MAAM,cAAc,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AACzD,IAAI,IAAI,KAAK,CAAC,YAAY,IAAI,iBAAiB,IAAI,iBAAiB,CAAC,MAAM,CAAC,EAAE;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA,QAAQ,iBAAiB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AACjD,KAAK;AACL,SAAS;AACT,QAAQ,QAAQ,EAAE,CAAC;AACnB,KAAK;AACL,CAAC,CAAC;AACF,MAAM,qBAAqB,GAAG,CAAC,QAAQ,KAAK;AAC5C,IAAI,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,iBAAiB,EAAE;AACnD,QAAQ,QAAQ,CAAC,QAAQ,EAAE,mBAAmB,CAAC,CAAC;AAChD,KAAK;AACL,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,CAAC,GAAG,KAAK;AACnC,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,6CAA6C,CAAC,EAAE;AACxE,QAAQ,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AACxC,QAAQ,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC;AAC1C,QAAQ,MAAM,YAAY,GAAG,UAAU,CAAC,mBAAmB,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;AAChF,QAAQ,IAAI,KAAK,CAAC,wBAAwB,EAAE;AAC5C;AACA,YAAY,qBAAqB,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;AAC3E,SAAS;AACT,QAAQ,IAAI,EAAE,OAAO,CAAC,OAAO,GAAG,CAAC,+BAA+B,EAAE;AAClE;AACA,YAAY,OAAO,CAAC,OAAO,IAAI,CAAC,+BAA+B;AAC/D,YAAY,IAAI,MAAM,CAAC;AACvB,YAAY,IAAI,KAAK,CAAC,iBAAiB,EAAE;AACzC,gBAAgB,MAAM,GAAG,GAAG,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;AACtD,gBAAgB,IAAI,MAAM,EAAE;AAC5B,oBAAoB,IAAI,KAAK,CAAC,SAAS,IAAI,cAAc,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,yCAAyC;AACzH,wBAAwB,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI;AAClD,8BAA8B,QAAQ,CAAC,GAAG,CAAC,UAAU,EAAE,OAAO,EAAE,GAAG,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;AAC3F,8BAA8B,QAAQ,CAAC,GAAG,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC;AAChE,wBAAwB,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,OAAO,GAAG,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC,CAAC;AAC7E,qBAAqB;AACrB,oBAAoB,uBAAuB,CAAC,GAAG,EAAE,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;AACrF,iBAAiB;AACjB,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,cAAc,IAAI,CAAC,MAAM,EAAE;AACjD;AACA;AACA;AACA;AACA,gBAAgB,IAAI,KAAK,CAAC,iBAAiB;AAC3C,qBAAqB,CAAC,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,SAAS;AACnD;AACA,wBAAwB,OAAO,CAAC,OAAO,IAAI,CAAC,qCAAqC,CAAC,oCAAoC,CAAC,EAAE;AACzH,oBAAoB,mBAAmB,CAAC,GAAG,CAAC,CAAC;AAC7C,iBAAiB;AACjB,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,YAAY,EAAE;AACpC;AACA;AACA,gBAAgB,IAAI,iBAAiB,GAAG,GAAG,CAAC;AAC5C,gBAAgB,QAAQ,iBAAiB,GAAG,iBAAiB,CAAC,UAAU,IAAI,iBAAiB,CAAC,IAAI,GAAG;AACrG;AACA;AACA,oBAAoB,IAAI,CAAC,KAAK,CAAC,iBAAiB;AAChD,wBAAwB,iBAAiB,CAAC,QAAQ,KAAK,CAAC;AACxD,wBAAwB,iBAAiB,CAAC,YAAY,CAAC,MAAM,CAAC;AAC9D,wBAAwB,iBAAiB,CAAC,KAAK,CAAC;AAChD,wBAAwB,iBAAiB,CAAC,KAAK,CAAC,EAAE;AAClD;AACA;AACA,wBAAwB,gBAAgB,CAAC,OAAO,GAAG,OAAO,CAAC,mBAAmB,GAAG,iBAAiB,EAAE,CAAC;AACrG,wBAAwB,MAAM;AAC9B,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb;AACA;AACA,YAAY,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,OAAO,CAAC,SAAS,EAAE;AAC7E,gBAAgB,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,WAAW,CAAC,CAAC,KAAK;AACvF,oBAAoB,IAAI,WAAW,GAAG,EAAE,4BAA4B,GAAG,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE;AACpG,wBAAwB,MAAM,KAAK,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC;AACtD,wBAAwB,OAAO,GAAG,CAAC,UAAU,CAAC,CAAC;AAC/C,wBAAwB,GAAG,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC;AAChD,qBAAqB;AACrB,iBAAiB,CAAC,CAAC;AACnB,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,kBAAkB,EAAE;AAC1C;AACA;AACA;AACA;AACA,gBAAgB,QAAQ,CAAC,MAAM,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;AAC3E,aAAa;AACb,iBAAiB;AACjB,gBAAgB,mBAAmB,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAC3D,aAAa;AACb,SAAS;AACT,aAAa;AACb;AACA;AACA;AACA,YAAY,qBAAqB,CAAC,GAAG,EAAE,OAAO,EAAE,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC5E;AACA,YAAY,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,cAAc,EAAE;AAC1F,gBAAgB,qBAAqB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;AAC9D,aAAa;AACb,iBAAiB,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,gBAAgB,EAAE;AACjG,gBAAgB,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,qBAAqB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC;AACnG,aAAa;AACb,SAAS;AACT,QAAQ,YAAY,EAAE,CAAC;AACvB,KAAK;AACL,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,CAAC,GAAG,KAAK;AACrC;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,MAAM,aAAa,IAAI,GAAG,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,aAAa,CAAC,KAAK,CAAC,OAAO,GAAG,CAAC,kBAAkB,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC;AACxH,IAAI,aAAa,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC;AACjC,IAAI,GAAG,CAAC,YAAY,CAAC,aAAa,EAAE,GAAG,CAAC,UAAU,CAAC,CAAC;AACpD,CAAC,CAAC;AACF,MAAM,kBAAkB,GAAG,CAAC,QAAQ,KAAK;AACzC,IAAI,IAAI,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,oBAAoB,EAAE;AACtD,QAAQ,QAAQ,CAAC,QAAQ,EAAE,sBAAsB,CAAC,CAAC;AACnD,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,YAAY,EAAE;AAC5B,QAAQ,QAAQ,CAAC,QAAQ,EAAE,oBAAoB,CAAC,CAAC;AACjD,KAAK;AACL,CAAC,CAAC;AACF,MAAM,oBAAoB,GAAG,OAAO,GAAG,KAAK;AAC5C,IAAI,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,6CAA6C,CAAC,EAAE;AACxE,QAAQ,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AACxC,QAAQ,IAAI,KAAK,CAAC,YAAY,EAAE;AAChC,YAAY,IAAI,OAAO,CAAC,aAAa,EAAE;AACvC,gBAAgB,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,UAAU,KAAK,UAAU,EAAE,CAAC,CAAC;AACxE,gBAAgB,OAAO,CAAC,aAAa,GAAG,SAAS,CAAC;AAClD,aAAa;AACb,SAAS;AACT,QAAQ,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AAC7B,YAAY,kBAAkB,CAAC,GAAG,CAAC,CAAC;AACpC,SAAS;AACT,aAAa,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,cAAc,EAAE;AAC3F,YAAY,kBAAkB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC;AACvD,SAAS;AACT,aAAa,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,OAAO,CAAC,gBAAgB,EAAE;AAC7F,YAAY,OAAO,CAAC,gBAAgB,CAAC,IAAI,CAAC,MAAM,kBAAkB,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAC;AAC5F,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF,MAAM,oBAAoB,GAAG,CAAC,oBAAoB,EAAE,mBAAmB,KAAK;AAC5E,IAAI,cAAc,CAAC,oBAAoB,CAAC,CAAC;AACzC,IAAI,oBAAoB,CAAC,oBAAoB,CAAC,CAAC;AAC/C,IAAI,eAAe,CAAC,oBAAoB,CAAC,CAAC;AAC1C,IAAI,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAC3C,IAAI,8BAA8B,CAAC,oBAAoB,CAAC,CAAC;AACzD,IAAI,2BAA2B,CAAC,oBAAoB,CAAC,CAAC;AACtD,IAAI,2BAA2B,CAAC,oBAAoB,CAAC,CAAC;AACtD,IAAI,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;AAC3C,IAAI,mBAAmB,CAAC,oBAAoB,EAAE,mBAAmB,CAAC,CAAC;AACnE,IAAI,oBAAoB,CAAC,oBAAoB,CAAC,CAAC;AAC/C,CAAC,CAAC;AACF,MAAM,cAAc,GAAG,CAAC,oBAAoB,KAAK;AACjD,IAAI,MAAM,YAAY,GAAG,oBAAoB,CAAC,SAAS,CAAC;AACxD,IAAI,oBAAoB,CAAC,SAAS,GAAG,UAAU,IAAI,EAAE;AACrD,QAAQ,MAAM,OAAO,GAAG,IAAI,CAAC;AAC7B,QAAQ,MAAM,WAAW,GAAG,KAAK,CAAC,SAAS,GAAG,OAAO,CAAC,UAAU,IAAI,cAAc,GAAG,KAAK,CAAC;AAC3F,QAAQ,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,KAAK,CAAC,CAAC;AAClF,QAAQ,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,EAAE;AAChD,YAAY,IAAI,CAAC,GAAG,CAAC,CAAC;AACtB,YAAY,IAAI,OAAO,EAAE,cAAc,CAAC;AACxC,YAAY,MAAM,eAAe,GAAG;AACpC,gBAAgB,MAAM;AACtB,gBAAgB,MAAM;AACtB,gBAAgB,MAAM;AACtB,gBAAgB,MAAM;AACtB,gBAAgB,MAAM;AACtB,gBAAgB,KAAK;AACrB,gBAAgB,MAAM;AACtB,gBAAgB,MAAM;AACtB,gBAAgB,MAAM;AACtB,gBAAgB,MAAM;AACtB,gBAAgB,MAAM;AACtB,gBAAgB,MAAM;AACtB,gBAAgB,MAAM;AACtB,aAAa,CAAC;AACd,YAAY,OAAO,CAAC,GAAG,OAAO,CAAC,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACvD,gBAAgB,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AACxD,gBAAgB,cAAc,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC,YAAY,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;AAC/G,gBAAgB,IAAI,OAAO,EAAE;AAC7B,oBAAoB,IAAI,KAAK,CAAC,kBAAkB,IAAI,UAAU,CAAC,aAAa,EAAE;AAC9E,wBAAwB,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1E,qBAAqB;AACrB,yBAAyB;AACzB,wBAAwB,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AACxE,qBAAqB;AACrB,iBAAiB;AACjB,gBAAgB,IAAI,cAAc,EAAE;AACpC,oBAAoB,UAAU,CAAC,WAAW,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;AAClF,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,QAAQ,OAAO,UAAU,CAAC;AAC1B,KAAK,CAAC;AACN,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,oBAAoB,GAAG,CAAC,oBAAoB,KAAK;AACvD,IAAI,oBAAoB,CAAC,aAAa,GAAG,oBAAoB,CAAC,WAAW,CAAC;AAC1E,IAAI,oBAAoB,CAAC,WAAW,GAAG,UAAU,QAAQ,EAAE;AAC3D,QAAQ,MAAM,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;AACpE,QAAQ,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AACpE,QAAQ,IAAI,QAAQ,EAAE;AACtB,YAAY,MAAM,cAAc,GAAG,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AAC7E,YAAY,MAAM,WAAW,GAAG,cAAc,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AAC1E,YAAY,WAAW,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;AACnF;AACA,YAAY,4BAA4B,CAAC,IAAI,CAAC,CAAC;AAC/C,YAAY,OAAO;AACnB,SAAS;AACT,QAAQ,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAC5C,KAAK,CAAC;AACN,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,oBAAoB,GAAG,CAAC,gBAAgB,KAAK;AACnD,IAAI,gBAAgB,CAAC,aAAa,GAAG,gBAAgB,CAAC,WAAW,CAAC;AAClE,IAAI,gBAAgB,CAAC,WAAW,GAAG,UAAU,QAAQ,EAAE;AACvD,QAAQ,IAAI,QAAQ,IAAI,OAAO,QAAQ,CAAC,MAAM,CAAC,KAAK,WAAW,EAAE;AACjE,YAAY,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;AAChF,YAAY,IAAI,QAAQ,EAAE;AAC1B;AACA,gBAAgB,MAAM,cAAc,GAAG,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;AACzF;AACA,gBAAgB,MAAM,YAAY,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,QAAQ,CAAC,CAAC;AAChF,gBAAgB,IAAI,YAAY,EAAE;AAClC,oBAAoB,YAAY,CAAC,MAAM,EAAE,CAAC;AAC1C;AACA;AACA,oBAAoB,4BAA4B,CAAC,IAAI,CAAC,CAAC;AACvD,oBAAoB,OAAO;AAC3B,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,QAAQ,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAC5C,KAAK,CAAC;AACN,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA,MAAM,gBAAgB,GAAG,CAAC,oBAAoB,KAAK;AACnD,IAAI,MAAM,eAAe,GAAG,oBAAoB,CAAC,OAAO,CAAC;AACzD,IAAI,oBAAoB,CAAC,OAAO,GAAG,UAAU,GAAG,WAAW,EAAE;AAC7D,QAAQ,WAAW,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAK;AAC1C,YAAY,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAC9C,gBAAgB,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AACvE,aAAa;AACb,YAAY,MAAM,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAC;AACxE,YAAY,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AACxE,YAAY,IAAI,QAAQ,EAAE;AAC1B,gBAAgB,MAAM,eAAe,GAAG,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,CAAC;AACpE,gBAAgB,eAAe,CAAC,MAAM,CAAC,GAAG,QAAQ,CAAC;AACnD,gBAAgB,QAAQ,CAAC,MAAM,CAAC,CAAC,UAAU,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;AAC3E,gBAAgB,QAAQ,CAAC,MAAM,CAAC,GAAG,eAAe,CAAC;AACnD,gBAAgB,MAAM,cAAc,GAAG,qBAAqB,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;AACjF,gBAAgB,MAAM,WAAW,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC;AACtD,gBAAgB,OAAO,WAAW,CAAC,UAAU,CAAC,YAAY,CAAC,QAAQ,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;AAC9F,aAAa;AACb,YAAY,IAAI,QAAQ,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;AAC5E,gBAAgB,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC;AACvC,aAAa;AACb,YAAY,OAAO,eAAe,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;AACxD,SAAS,CAAC,CAAC;AACX,KAAK,CAAC;AACN,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,eAAe,GAAG,CAAC,oBAAoB,KAAK;AAClD,IAAI,oBAAoB,CAAC,MAAM,GAAG,UAAU,GAAG,WAAW,EAAE;AAC5D,QAAQ,WAAW,CAAC,OAAO,CAAC,CAAC,QAAQ,KAAK;AAC1C,YAAY,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AAC9C,gBAAgB,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC;AACvE,aAAa;AACb,YAAY,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;AACvC,SAAS,CAAC,CAAC;AACX,KAAK,CAAC;AACN,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,2BAA2B,GAAG,CAAC,oBAAoB,KAAK;AAC9D,IAAI,MAAM,0BAA0B,GAAG,oBAAoB,CAAC,kBAAkB,CAAC;AAC/E,IAAI,oBAAoB,CAAC,kBAAkB,GAAG,UAAU,QAAQ,EAAE,IAAI,EAAE;AACxE,QAAQ,IAAI,QAAQ,KAAK,YAAY,IAAI,QAAQ,KAAK,WAAW,EAAE;AACnE,YAAY,OAAO,0BAA0B,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;AACzE,SAAS;AACT,QAAQ,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;AAChE,QAAQ,IAAI,IAAI,CAAC;AACjB,QAAQ,SAAS,CAAC,SAAS,GAAG,IAAI,CAAC;AACnC,QAAQ,IAAI,QAAQ,KAAK,YAAY,EAAE;AACvC,YAAY,QAAQ,IAAI,GAAG,SAAS,CAAC,UAAU,GAAG;AAClD,gBAAgB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;AACnC,aAAa;AACb,SAAS;AACT,aAAa,IAAI,QAAQ,KAAK,WAAW,EAAE;AAC3C,YAAY,QAAQ,IAAI,GAAG,SAAS,CAAC,UAAU,GAAG;AAClD,gBAAgB,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;AAClC,aAAa;AACb,SAAS;AACT,KAAK,CAAC;AACN,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,2BAA2B,GAAG,CAAC,oBAAoB,KAAK;AAC9D,IAAI,oBAAoB,CAAC,kBAAkB,GAAG,UAAU,QAAQ,EAAE,IAAI,EAAE;AACxE,QAAQ,IAAI,CAAC,kBAAkB,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;AAChD,KAAK,CAAC;AACN,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,8BAA8B,GAAG,CAAC,oBAAoB,KAAK;AACjE,IAAI,MAAM,6BAA6B,GAAG,oBAAoB,CAAC,qBAAqB,CAAC;AACrF,IAAI,oBAAoB,CAAC,qBAAqB,GAAG,UAAU,QAAQ,EAAE,OAAO,EAAE;AAC9E,QAAQ,IAAI,QAAQ,KAAK,YAAY,IAAI,QAAQ,KAAK,WAAW,EAAE;AACnE,YAAY,OAAO,6BAA6B,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC;AAC/E,SAAS;AACT,QAAQ,IAAI,QAAQ,KAAK,YAAY,EAAE;AACvC,YAAY,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;AAClC,YAAY,OAAO,OAAO,CAAC;AAC3B,SAAS;AACT,aAAa,IAAI,QAAQ,KAAK,WAAW,EAAE;AAC3C,YAAY,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;AACjC,YAAY,OAAO,OAAO,CAAC;AAC3B,SAAS;AACT,QAAQ,OAAO,OAAO,CAAC;AACvB,KAAK,CAAC;AACN,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA,MAAM,gBAAgB,GAAG,CAAC,oBAAoB,KAAK;AACnD,IAAI,MAAM,UAAU,GAAG,MAAM,CAAC,wBAAwB,CAAC,IAAI,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AACtF,IAAI,MAAM,CAAC,cAAc,CAAC,oBAAoB,EAAE,eAAe,EAAE,UAAU,CAAC,CAAC;AAC7E,IAAI,IAAI,KAAK,CAAC,qBAAqB,EAAE;AACrC;AACA,QAAQ,MAAM,CAAC,cAAc,CAAC,oBAAoB,EAAE,aAAa,EAAE;AACnE;AACA;AACA,YAAY,GAAG,GAAG;AAClB,gBAAgB,MAAM,YAAY,GAAG,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAC3E,gBAAgB,MAAM,WAAW,GAAG,YAAY;AAChD,qBAAqB,GAAG,CAAC,CAAC,IAAI,KAAK;AACnC,oBAAoB,IAAI,EAAE,EAAE,EAAE,CAAC;AAC/B,oBAAoB,MAAM,IAAI,GAAG,EAAE,CAAC;AACpC;AACA,oBAAoB,IAAI,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;AACvD,oBAAoB,OAAO,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE;AAChF,wBAAwB,IAAI,WAAW,CAAC,QAAQ,KAAK,CAAC,+BAA+B,WAAW,CAAC,QAAQ,KAAK,CAAC,gCAAgC;AAC/I,4BAA4B,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,WAAW,CAAC,WAAW,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC,CAAC;AAChK,yBAAyB;AACzB,wBAAwB,WAAW,GAAG,WAAW,CAAC,WAAW,CAAC;AAC9D,qBAAqB;AACrB,oBAAoB,OAAO,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,KAAK,GAAG,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACtE,iBAAiB,CAAC;AAClB,qBAAqB,MAAM,CAAC,CAAC,IAAI,KAAK,IAAI,KAAK,EAAE,CAAC;AAClD,qBAAqB,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/B;AACA,gBAAgB,OAAO,GAAG,GAAG,WAAW,GAAG,GAAG,CAAC;AAC/C,aAAa;AACb;AACA;AACA;AACA,YAAY,GAAG,CAAC,KAAK,EAAE;AACvB,gBAAgB,MAAM,YAAY,GAAG,oBAAoB,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AAC3E,gBAAgB,YAAY,CAAC,OAAO,CAAC,CAAC,IAAI,KAAK;AAC/C;AACA,oBAAoB,IAAI,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC;AACvD,oBAAoB,OAAO,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,MAAM,CAAC,EAAE;AAChF,wBAAwB,MAAM,GAAG,GAAG,WAAW,CAAC;AAChD,wBAAwB,WAAW,GAAG,WAAW,CAAC,WAAW,CAAC;AAC9D,wBAAwB,GAAG,CAAC,MAAM,EAAE,CAAC;AACrC,qBAAqB;AACrB;AACA;AACA,oBAAoB,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE;AAC7C,wBAAwB,MAAM,QAAQ,GAAG,IAAI,CAAC,aAAa,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;AAClF,wBAAwB,QAAQ,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;AAC9C,wBAAwB,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,WAAW,CAAC,CAAC;AACpF,qBAAqB;AACrB,yBAAyB;AACzB,wBAAwB,IAAI,CAAC,MAAM,EAAE,CAAC;AACtC,qBAAqB;AACrB,iBAAiB,CAAC,CAAC;AACnB,aAAa;AACb,SAAS,CAAC,CAAC;AACX,KAAK;AACL,SAAS;AACT,QAAQ,MAAM,CAAC,cAAc,CAAC,oBAAoB,EAAE,aAAa,EAAE;AACnE,YAAY,GAAG,GAAG;AAClB,gBAAgB,IAAI,EAAE,CAAC;AACvB;AACA;AACA,gBAAgB,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;AACtE;AACA;AACA,gBAAgB,IAAI,CAAC,CAAC,EAAE,GAAG,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,QAAQ,CAAC,WAAW,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,MAAM,CAAC,6BAA6B;AACzL,oBAAoB,OAAO,QAAQ,CAAC,WAAW,CAAC,WAAW,CAAC;AAC5D,iBAAiB;AACjB,qBAAqB,IAAI,QAAQ,EAAE;AACnC,oBAAoB,OAAO,QAAQ,CAAC,WAAW,CAAC;AAChD,iBAAiB;AACjB,qBAAqB;AACrB;AACA,oBAAoB,OAAO,IAAI,CAAC,aAAa,CAAC;AAC9C,iBAAiB;AACjB,aAAa;AACb,YAAY,GAAG,CAAC,KAAK,EAAE;AACvB,gBAAgB,IAAI,EAAE,CAAC;AACvB;AACA;AACA,gBAAgB,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;AACtE;AACA;AACA;AACA,gBAAgB,IAAI,CAAC,CAAC,EAAE,GAAG,QAAQ,KAAK,IAAI,IAAI,QAAQ,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,QAAQ,CAAC,WAAW,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAG,EAAE,CAAC,QAAQ,MAAM,CAAC,6BAA6B;AACzL,oBAAoB,QAAQ,CAAC,WAAW,CAAC,WAAW,GAAG,KAAK,CAAC;AAC7D,iBAAiB;AACjB,qBAAqB,IAAI,QAAQ,EAAE;AACnC,oBAAoB,QAAQ,CAAC,WAAW,GAAG,KAAK,CAAC;AACjD,iBAAiB;AACjB,qBAAqB;AACrB;AACA;AACA;AACA,oBAAoB,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;AAC/C,oBAAoB,MAAM,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;AACvD,oBAAoB,IAAI,aAAa,EAAE;AACvC,wBAAwB,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAC1E,qBAAqB;AACrB,iBAAiB;AACjB,aAAa;AACb,SAAS,CAAC,CAAC;AACX,KAAK;AACL,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,CAAC,GAAG,EAAE,OAAO,KAAK;AAC9C,IAAI,MAAM,YAAY,SAAS,KAAK,CAAC;AACrC,QAAQ,IAAI,CAAC,CAAC,EAAE;AAChB,YAAY,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC;AAC3B,SAAS;AACT,KAAK;AACL;AACA,IAAI,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,qCAAqC;AAChE,QAAQ,MAAM,YAAY,GAAG,GAAG,CAAC,gBAAgB,CAAC,YAAY,CAAC,CAAC;AAChE,QAAQ,MAAM,CAAC,cAAc,CAAC,GAAG,EAAE,UAAU,EAAE;AAC/C,YAAY,GAAG,GAAG;AAClB,gBAAgB,OAAO,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC;AACpE,aAAa;AACb,SAAS,CAAC,CAAC;AACX,QAAQ,MAAM,CAAC,cAAc,CAAC,GAAG,EAAE,mBAAmB,EAAE;AACxD,YAAY,GAAG,GAAG;AAClB,gBAAgB,OAAO,GAAG,CAAC,QAAQ,CAAC,MAAM,CAAC;AAC3C,aAAa;AACb,SAAS,CAAC,CAAC;AACX,QAAQ,MAAM,CAAC,cAAc,CAAC,GAAG,EAAE,YAAY,EAAE;AACjD,YAAY,GAAG,GAAG;AAClB,gBAAgB,MAAM,UAAU,GAAG,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC3D,gBAAgB,IAAI,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,6CAA6C,CAAC;AAClF,oBAAoB,UAAU,CAAC,IAAI,CAAC,CAAC,OAAO,GAAG,CAAC,+BAA+B;AAC/E,oBAAoB,MAAM,MAAM,GAAG,IAAI,YAAY,EAAE,CAAC;AACtD,oBAAoB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAChE,wBAAwB,MAAM,IAAI,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;AAC3D,wBAAwB,IAAI,IAAI,EAAE;AAClC,4BAA4B,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC9C,yBAAyB;AACzB,qBAAqB;AACrB,oBAAoB,OAAO,MAAM,CAAC;AAClC,iBAAiB;AACjB,gBAAgB,OAAO,YAAY,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;AACrD,aAAa;AACb,SAAS,CAAC,CAAC;AACX,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,oBAAoB,GAAG,CAAC,UAAU,KAAK;AAC7C,IAAI,MAAM,YAAY,GAAG,EAAE,CAAC;AAC5B,IAAI,KAAK,MAAM,SAAS,IAAI,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE;AACpD,QAAQ,IAAI,SAAS,CAAC,MAAM,CAAC,EAAE;AAC/B,YAAY,YAAY,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AACzC,SAAS;AACT,QAAQ,YAAY,CAAC,IAAI,CAAC,GAAG,oBAAoB,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC;AACzE,KAAK;AACL,IAAI,OAAO,YAAY,CAAC;AACxB,CAAC,CAAC;AACF,MAAM,WAAW,GAAG,CAAC,IAAI,KAAK,IAAI,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC;AACvG;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,eAAe,GAAG,CAAC,UAAU,EAAE,QAAQ,KAAK;AAClD,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,IAAI,IAAI,SAAS,CAAC;AAClB,IAAI,OAAO,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACvC,QAAQ,SAAS,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;AAClC,QAAQ,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,SAAS,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;AACjE,YAAY,OAAO,SAAS,CAAC;AAC7B,SAAS;AACT,QAAQ,SAAS,GAAG,eAAe,CAAC,SAAS,CAAC,UAAU,EAAE,QAAQ,CAAC,CAAC;AACpE,QAAQ,IAAI,SAAS,EAAE;AACvB,YAAY,OAAO,SAAS,CAAC;AAC7B,SAAS;AACT,KAAK;AACL,IAAI,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AACF,MAAM,qBAAqB,GAAG,CAAC,CAAC,EAAE,QAAQ,KAAK;AAC/C,IAAI,MAAM,UAAU,GAAG,CAAC,CAAC,CAAC,CAAC;AAC3B,IAAI,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,KAAK,CAAC,CAAC,MAAM,CAAC,KAAK,QAAQ,EAAE;AAC1D,QAAQ,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;AAC3B,KAAK;AACL,IAAI,OAAO,UAAU,CAAC;AACtB,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,WAAW,KAAK;AACnD,IAAI,cAAc,CAAC,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC;AACjF,CAAC,CAAC;AACF,MAAM,kBAAkB,GAAG,CAAC,IAAI,EAAE,WAAW,KAAK;AAClD,IAAI,MAAM,OAAO,GAAG;AACpB,QAAQ,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;AAC/B,QAAQ,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;AACjC,KAAK,CAAC;AACN,IAAI,IAAI,KAAK,CAAC,MAAM,EAAE;AACtB,QAAQ,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;AAC3C,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,YAAY,EAAE;AAC5B,QAAQ,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;AAC7C,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,aAAa,EAAE;AAC7B,QAAQ,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;AAC7C,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,OAAO,EAAE;AACvB,QAAQ,OAAO,CAAC,gBAAgB,GAAG,EAAE,CAAC;AACtC,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,cAAc,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,yCAAyC;AAC1G;AACA,QAAQ,OAAO,CAAC,OAAO,IAAI,CAAC,oCAAoC;AAChE,KAAK;AACL;AACA,IAAI,IAAI,KAAK,CAAC,qBAAqB,IAAI,KAAK,CAAC,MAAM,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,yCAAyC;AACnH,QAAQ,oBAAoB,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AACtD,KAAK;AACL,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,iBAAiB,EAAE;AACrC,YAAY,mBAAmB,CAAC,IAAI,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AACzD,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,YAAY,EAAE;AAChC,YAAY,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAC3C,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,kBAAkB,EAAE;AACtC,YAAY,oBAAoB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AACjD,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,wBAAwB,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,yCAAyC;AAC1G,YAAY,gBAAgB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;AAC7C,SAAS;AACT,KAAK;AACL,IAAI,MAAM,yBAAyB,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;AACvE,IAAI,MAAM,4BAA4B,GAAG,IAAI,CAAC,SAAS,CAAC,oBAAoB,CAAC;AAC7E,IAAI,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,EAAE;AAClC,QAAQ,cAAc,GAAG;AACzB,YAAY,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AACxC,SAAS;AACT,QAAQ,iBAAiB,GAAG;AAC5B,YAAY,iBAAiB,CAAC,IAAI,CAAC,CAAC;AACpC,YAAY,IAAI,KAAK,CAAC,iBAAiB,IAAI,yBAAyB,EAAE;AACtE,gBAAgB,yBAAyB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACrD,aAAa;AACb,SAAS;AACT,QAAQ,oBAAoB,GAAG;AAC/B,YAAY,oBAAoB,CAAC,IAAI,CAAC,CAAC;AACvC,YAAY,IAAI,KAAK,CAAC,oBAAoB,IAAI,4BAA4B,EAAE;AAC5E,gBAAgB,4BAA4B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACxD,aAAa;AACb,SAAS;AACT,QAAQ,cAAc,GAAG;AACzB,YAAY,IAAI,cAAc,EAAE;AAChC,gBAAgB,IAAI,KAAK,CAAC,oBAAoB,EAAE;AAChD,oBAAoB,IAAI,CAAC,YAAY,CAAC;AACtC,wBAAwB,IAAI,EAAE,MAAM;AACpC,wBAAwB,cAAc,EAAE,CAAC,EAAE,OAAO,CAAC,OAAO,GAAG,EAAE,sCAAsC;AACrG,qBAAqB,CAAC,CAAC;AACvB,iBAAiB;AACjB,qBAAqB;AACrB,oBAAoB,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;AACxD,iBAAiB;AACjB,aAAa;AACb,iBAAiB;AACjB,gBAAgB,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AACvC,aAAa;AACb,SAAS;AACT,KAAK,CAAC,CAAC;AACP,IAAI,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,SAAS,CAAC;AAChC,IAAI,OAAO,cAAc,CAAC,IAAI,EAAE,OAAO,EAAE,CAAC,0CAA0C,CAAC,8BAA8B,CAAC;AACpH,CAAC,CAAC;AACF,MAAM,eAAe,GAAG,CAAC,GAAG,KAAK;AACjC,IAAI,IAAI,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACtD,QAAQ,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC;AACtC,QAAQ,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,CAAC,CAAC;AACxC,QAAQ,IAAI,OAAO,CAAC,UAAU,KAAK,IAAI,EAAE;AACzC,YAAY,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,CAAC;AAC9C,YAAY,MAAM,UAAU,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC;AAC3C,YAAY,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;AACtD,YAAY,MAAM,KAAK,GAAG,GAAG,CAAC,WAAW,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;AACtD,YAAY,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,CAAC;AAC1C,YAAY,IAAI,KAAK,EAAE;AACvB,gBAAgB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC1C,oBAAoB,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,CAAC,EAAE,KAAK,GAAG,CAAC,wCAAwC,CAAC,CAAC;AACxG,iBAAiB;AACjB,gBAAgB,OAAO,CAAC,UAAU,GAAG,IAAI,CAAC;AAC1C,gBAAgB,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,GAAG,IAAI,EAAE,UAAU,GAAG,IAAI,CAAC,CAAC;AAC3E,gBAAgB,YAAY,CAAC,OAAO,CAAC,CAAC;AACtC,gBAAgB,WAAW,CAAC,GAAG,CAAC,CAAC;AACjC,aAAa;AACb,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,QAAQ,GAAG,CAAC,WAAW,EAAE,OAAO,EAAE,YAAY,KAAK;AACzD;AACA,IAAI,MAAM,OAAO,GAAG,UAAU,CAAC,WAAW,CAAC,CAAC;AAC5C;AACA,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,+BAA+B;AACtD;AACA;AACA;AACA;AACA;AACA,IAAI,mBAAmB,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;AACrE,CAAC,CAAC;AACG,MAAC,aAAa,GAAG,CAAC,WAAW,EAAE,OAAO,GAAG,EAAE,KAAK;AACrD,IAAI,IAAI,EAAE,CAAC;AACX,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,WAAW,CAAC,IAAI,EAAE;AAC3C,QAAQ,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;AACzC,KAAK;AACL,IAAI,eAAe,EAAE,CAAC;AACtB,IAAI,MAAM,YAAY,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;AACrD,IAAI,MAAM,OAAO,GAAG,EAAE,CAAC;AACvB,IAAI,MAAM,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,EAAE,CAAC;AAC1C,IAAI,MAAM,cAAc,GAAG,GAAG,CAAC,cAAc,CAAC;AAC9C,IAAI,MAAM,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC;AAC1B,IAAI,MAAM,WAAW,iBAAiB,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;AAC1E,IAAI,MAAM,UAAU,iBAAiB,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAChE,IAAI,MAAM,0BAA0B,GAAG,EAAE,CAAC;AAC1C,IAAI,MAAM,MAAM,iBAAiB,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,CAAC,CAAC;AAChF,IAAI,IAAI,eAAe,CAAC;AACxB,IAAI,IAAI,eAAe,GAAG,IAAI,CAAC;AAC/B,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,IAAI,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AAChC,IAAI,GAAG,CAAC,cAAc,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,YAAY,IAAI,IAAI,EAAE,GAAG,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC;AACjF,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;AAC1B,QAAQ,IAAI,OAAO,CAAC,SAAS,EAAE;AAC/B,YAAY,GAAG,CAAC,OAAO,IAAI,CAAC,gCAAgC;AAC5D,SAAS;AACT,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,iBAAiB,EAAE;AACjC;AACA;AACA,QAAQ,GAAG,CAAC,OAAO,IAAI,CAAC,gCAAgC;AACxD,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,iBAAiB,IAAI,KAAK,CAAC,SAAS,EAAE;AACpD,QAAQ,OAAO,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACvC,YAAY,aAAa,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,EAAE,IAAI,CAAC,CAAC;AACvH,SAAS;AACT,KAAK;AACL,IAAI,IAAI,iBAAiB,GAAG,KAAK,CAAC;AAClC,IAAI,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,KAAK;AACpC,QAAQ,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,WAAW,KAAK;AAC3C,YAAY,IAAI,EAAE,CAAC;AACnB,YAAY,MAAM,OAAO,GAAG;AAC5B,gBAAgB,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC;AACvC,gBAAgB,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;AACzC,gBAAgB,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC;AACzC,gBAAgB,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;AAC3C,aAAa,CAAC;AACd;AACA;AACA,YAAY,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,oCAAoC;AACvE,gBAAgB,iBAAiB,GAAG,IAAI,CAAC;AACzC,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,MAAM,EAAE;AAC9B,gBAAgB,OAAO,CAAC,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;AACnD,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,YAAY,EAAE;AACpC,gBAAgB,OAAO,CAAC,WAAW,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC;AACrD,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,OAAO,EAAE;AAC/B,gBAAgB,OAAO,CAAC,gBAAgB,GAAG,EAAE,CAAC;AAC9C,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,aAAa,EAAE;AACrC,gBAAgB,OAAO,CAAC,UAAU,GAAG,CAAC,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,EAAE,CAAC;AAC/F,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,SAAS,IAAI,CAAC,cAAc,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,yCAAyC;AAClH;AACA,gBAAgB,OAAO,CAAC,OAAO,IAAI,CAAC,oCAAoC;AACxE,aAAa;AACb,YAAY,MAAM,OAAO,GAAG,KAAK,CAAC,gBAAgB,IAAI,OAAO,CAAC,gBAAgB;AAC9E,kBAAkB,OAAO,CAAC,gBAAgB,CAAC,OAAO,CAAC,SAAS,CAAC;AAC7D,kBAAkB,OAAO,CAAC,SAAS,CAAC;AACpC,YAAY,MAAM,WAAW,GAAG,cAAc,WAAW,CAAC;AAC1D;AACA,gBAAgB,WAAW,CAAC,IAAI,EAAE;AAClC;AACA,oBAAoB,KAAK,CAAC,IAAI,CAAC,CAAC;AAChC,oBAAoB,IAAI,GAAG,IAAI,CAAC;AAChC,oBAAoB,YAAY,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;AAChD,oBAAoB,IAAI,KAAK,CAAC,SAAS,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,yCAAyC;AACvG;AACA;AACA;AACA;AACA,wBAAwB,IAAI,cAAc,EAAE;AAC5C,4BAA4B,IAAI,KAAK,CAAC,oBAAoB,EAAE;AAC5D,gCAAgC,IAAI,CAAC,YAAY,CAAC;AAClD,oCAAoC,IAAI,EAAE,MAAM;AAChD,oCAAoC,cAAc,EAAE,CAAC,EAAE,OAAO,CAAC,OAAO,GAAG,EAAE,sCAAsC;AACjH,iCAAiC,CAAC,CAAC;AACnC,6BAA6B;AAC7B,iCAAiC;AACjC,gCAAgC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;AACpE,6BAA6B;AAC7B,yBAAyB;AACzB,6BAA6B,IAAI,CAAC,KAAK,CAAC,iBAAiB,IAAI,EAAE,YAAY,IAAI,IAAI,CAAC,EAAE;AACtF,4BAA4B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;AACnD,yBAAyB;AACzB,qBAAqB;AACrB,iBAAiB;AACjB,gBAAgB,iBAAiB,GAAG;AACpC,oBAAoB,IAAI,eAAe,EAAE;AACzC,wBAAwB,YAAY,CAAC,eAAe,CAAC,CAAC;AACtD,wBAAwB,eAAe,GAAG,IAAI,CAAC;AAC/C,qBAAqB;AACrB,oBAAoB,IAAI,eAAe,EAAE;AACzC;AACA,wBAAwB,0BAA0B,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC9D,qBAAqB;AACrB,yBAAyB;AACzB,wBAAwB,GAAG,CAAC,GAAG,CAAC,MAAM,iBAAiB,CAAC,IAAI,CAAC,CAAC,CAAC;AAC/D,qBAAqB;AACrB,iBAAiB;AACjB,gBAAgB,oBAAoB,GAAG;AACvC,oBAAoB,GAAG,CAAC,GAAG,CAAC,MAAM,oBAAoB,CAAC,IAAI,CAAC,CAAC,CAAC;AAC9D,iBAAiB;AACjB,gBAAgB,gBAAgB,GAAG;AACnC,oBAAoB,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC;AAC7D,iBAAiB;AACjB,aAAa,CAAC;AACd;AACA,YAAY,IAAI,KAAK,CAAC,qBAAqB,IAAI,KAAK,CAAC,MAAM,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,yCAAyC;AAC3H,gBAAgB,oBAAoB,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AACrE,aAAa;AACb,iBAAiB;AACjB,gBAAgB,IAAI,KAAK,CAAC,iBAAiB,EAAE;AAC7C,oBAAoB,mBAAmB,CAAC,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;AACxE,iBAAiB;AACjB,gBAAgB,IAAI,KAAK,CAAC,YAAY,EAAE;AACxC,oBAAoB,cAAc,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;AAC1D,iBAAiB;AACjB,gBAAgB,IAAI,KAAK,CAAC,kBAAkB,EAAE;AAC9C,oBAAoB,oBAAoB,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;AAChE,iBAAiB;AACjB,gBAAgB,IAAI,KAAK,CAAC,wBAAwB,IAAI,OAAO,CAAC,OAAO,GAAG,CAAC,yCAAyC;AAClH,oBAAoB,gBAAgB,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;AAC5D,iBAAiB;AACjB,aAAa;AACb;AACA;AACA;AACA,YAAY,IAAI,KAAK,CAAC,cAAc,IAAI,OAAO,CAAC,OAAO,GAAG,EAAE,iCAAiC;AAC7F,gBAAgB,WAAW,CAAC,cAAc,GAAG,IAAI,CAAC;AAClD,aAAa;AACb,YAAY,IAAI,KAAK,CAAC,oBAAoB,EAAE;AAC5C;AACA;AACA;AACA,gBAAgB,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,UAAU,YAAY,EAAE;AACzE,oBAAoB,QAAQ,CAAC,IAAI,EAAE,OAAO,EAAE,YAAY,CAAC,CAAC;AAC1D,iBAAiB,CAAC;AAClB,aAAa;AACb,YAAY,OAAO,CAAC,cAAc,GAAG,UAAU,CAAC,CAAC,CAAC,CAAC;AACnD,YAAY,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE;AAC5E,gBAAgB,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;AACtC,gBAAgB,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,WAAW,EAAE,OAAO,EAAE,CAAC,wCAAwC,CAAC,CAAC;AAC/H,aAAa;AACb,SAAS,CAAC,CAAC;AACX,KAAK,CAAC,CAAC;AACP;AACA,IAAI,IAAI,iBAAiB,EAAE;AAC3B,QAAQ,UAAU,CAAC,SAAS,IAAI,WAAW,CAAC;AAC5C,KAAK;AACL;AACA,IAAI,IAAI,KAAK,CAAC,qBAAqB,KAAK,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,iBAAiB,CAAC,EAAE;AACzF,QAAQ,UAAU,CAAC,SAAS,IAAI,OAAO,GAAG,YAAY,CAAC;AACvD,KAAK;AACL;AACA,IAAI,IAAI,UAAU,CAAC,SAAS,CAAC,MAAM,EAAE;AACrC,QAAQ,UAAU,CAAC,YAAY,CAAC,aAAa,EAAE,EAAE,CAAC,CAAC;AACnD;AACA,QAAQ,MAAM,KAAK,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,OAAO,MAAM,IAAI,IAAI,EAAE,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,wBAAwB,CAAC,GAAG,CAAC,CAAC;AACxG,QAAQ,IAAI,KAAK,IAAI,IAAI,EAAE;AAC3B,YAAY,UAAU,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;AACpD,SAAS;AACT;AACA;AACA,QAAQ,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,WAAW,GAAG,WAAW,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;AAC/F,KAAK;AACL;AACA,IAAI,eAAe,GAAG,KAAK,CAAC;AAC5B,IAAI,IAAI,0BAA0B,CAAC,MAAM,EAAE;AAC3C,QAAQ,0BAA0B,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC;AAC3E,KAAK;AACL,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,OAAO,EAAE;AAC3B,YAAY,GAAG,CAAC,GAAG,CAAC,OAAO,eAAe,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AACrF,SAAS;AACT,aAAa;AACb,YAAY,GAAG,CAAC,GAAG,CAAC,OAAO,eAAe,GAAG,UAAU,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC;AAC1E,SAAS;AACT,KAAK;AACL;AACA,IAAI,YAAY,EAAE,CAAC;AACnB,EAAE;AACF,MAAM,QAAQ,GAAG,CAAC,CAAC,EAAE,QAAQ,KAAK,QAAQ,CAAC;AAC3C,MAAM,qBAAqB,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,SAAS,EAAE,qBAAqB,KAAK;AAClF,IAAI,IAAI,KAAK,CAAC,YAAY,IAAI,SAAS,EAAE;AACzC;AACA;AACA;AACA;AACA,QAAQ,IAAI,KAAK,CAAC,wBAAwB,EAAE;AAC5C;AACA,YAAY,IAAI,qBAAqB,EAAE;AACvC;AACA;AACA;AACA,gBAAgB,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,KAAK,GAAG,EAAE,mCAAmC,CAAC;AACxG,aAAa;AACb,iBAAiB;AACjB;AACA;AACA;AACA,gBAAgB,SAAS,GAAG,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,EAAE,mCAAmC,CAAC,CAAC;AAC3G,aAAa;AACb,SAAS;AACT,QAAQ,SAAS,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,IAAI,EAAE,MAAM,CAAC,KAAK;AACjD,YAAY,MAAM,MAAM,GAAG,KAAK,CAAC,kBAAkB,GAAG,qBAAqB,CAAC,GAAG,EAAE,KAAK,CAAC,GAAG,GAAG,CAAC;AAC9F,YAAY,MAAM,OAAO,GAAG,iBAAiB,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;AAC/D,YAAY,MAAM,IAAI,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;AACjD,YAAY,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC;AACjD,YAAY,CAAC,OAAO,CAAC,aAAa,GAAG,OAAO,CAAC,aAAa,IAAI,EAAE,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;AACnH,SAAS,CAAC,CAAC;AACX,KAAK;AACL,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,CAAC,OAAO,EAAE,UAAU,KAAK,CAAC,EAAE,KAAK;AAC3D,IAAI,IAAI;AACR,QAAQ,IAAI,KAAK,CAAC,QAAQ,EAAE;AAC5B,YAAY,IAAI,OAAO,CAAC,OAAO,GAAG,GAAG,iCAAiC;AACtE;AACA,gBAAgB,OAAO,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC;AACvD,aAAa;AACb,iBAAiB;AACjB,gBAAgB,CAAC,OAAO,CAAC,iBAAiB,GAAG,OAAO,CAAC,iBAAiB,IAAI,EAAE,EAAE,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,CAAC;AACrG,aAAa;AACb,SAAS;AACT,aAAa;AACb,YAAY,OAAO,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC;AAClD,SAAS;AACT,KAAK;AACL,IAAI,OAAO,CAAC,EAAE;AACd,QAAQ,YAAY,CAAC,CAAC,CAAC,CAAC;AACxB,KAAK;AACL,CAAC,CAAC;AACF,MAAM,qBAAqB,GAAG,CAAC,GAAG,EAAE,KAAK,KAAK;AAC9C,IAAI,IAAI,KAAK,CAAC,0BAA0B,IAAI,KAAK,GAAG,CAAC;AACrD,QAAQ,OAAO,GAAG,CAAC;AACnB,IAAI,IAAI,KAAK,CAAC,wBAAwB,IAAI,KAAK,GAAG,CAAC;AACnD,QAAQ,OAAO,GAAG,CAAC;AACnB,IAAI,IAAI,KAAK,CAAC,sBAAsB,IAAI,KAAK,GAAG,EAAE;AAClD,QAAQ,OAAO,GAAG,CAAC,IAAI,CAAC;AACxB,IAAI,IAAI,KAAK,CAAC,wBAAwB,IAAI,KAAK,GAAG,EAAE;AACpD,QAAQ,OAAO,GAAG,CAAC,aAAa,CAAC;AACjC,IAAI,OAAO,GAAG,CAAC;AACf,CAAC,CAAC;AACF;AACA,MAAM,gBAAgB,GAAG,CAAC,KAAK,KAAK,uBAAuB;AAC3D,OAAO;AACP,QAAQ,OAAO,EAAE,CAAC,KAAK,GAAG,CAAC,mCAAmC,CAAC;AAC/D,QAAQ,OAAO,EAAE,CAAC,KAAK,GAAG,CAAC,mCAAmC,CAAC;AAC/D,KAAK;AACL,MAAM,CAAC,KAAK,GAAG,CAAC,mCAAmC,CAAC,CAAC;AACrD;AACA;AACA;AACA;AACA;AACA;AACK,MAAC,QAAQ,GAAG,CAAC,KAAK,MAAM,GAAG,CAAC,OAAO,GAAG,KAAK,EAAE;AAClD,MAAM,kBAAkB,GAAG,CAAC,IAAI,KAAK,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;AAC9D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,qBAAqB,GAAG,CAAC,GAAG,EAAE,gBAAgB,KAAK;AACzD,IAAI,IAAI,GAAG,IAAI,IAAI,EAAE;AACrB,QAAQ,MAAM,OAAO,GAAG;AACxB,YAAY,OAAO,EAAE,CAAC;AACtB,YAAY,YAAY,EAAE,CAAC;AAC3B,YAAY,gBAAgB,EAAE,IAAI,GAAG,CAAC,gBAAgB,CAAC;AACvD,SAAS,CAAC;AACV,QAAQ,MAAM,gBAAgB,GAAG,EAAE,CAAC;AACpC,QAAQ,qBAAqB,CAAC,GAAG,EAAE,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;AACxE,QAAQ,gBAAgB,CAAC,OAAO,CAAC,CAAC,eAAe,KAAK;AACtD,YAAY,IAAI,eAAe,IAAI,IAAI,EAAE;AACzC,gBAAgB,MAAM,OAAO,GAAG,eAAe,CAAC,MAAM,CAAC,CAAC;AACxD,gBAAgB,IAAI,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAClD,gBAAgB,IAAI,MAAM,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAClD,gBAAgB,IAAI,OAAO,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AACpD,gBAAgB,IAAI,MAAM,IAAI,IAAI,EAAE;AACpC,oBAAoB,MAAM,GAAG,CAAC,CAAC;AAC/B,oBAAoB,OAAO,CAAC,YAAY,EAAE,CAAC;AAC3C,oBAAoB,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC;AAClD,oBAAoB,OAAO,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AACpD,oBAAoB,IAAI,OAAO,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AAC5E,wBAAwB,OAAO,CAAC,YAAY,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;AACxE,qBAAqB;AACrB,yBAAyB,IAAI,OAAO,CAAC,QAAQ,KAAK,CAAC,2BAA2B;AAC9E,wBAAwB,IAAI,MAAM,KAAK,CAAC,EAAE;AAC1C,4BAA4B,MAAM,WAAW,GAAG,OAAO,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;AACzE,4BAA4B,IAAI,WAAW,KAAK,EAAE,EAAE;AACpD;AACA,gCAAgC,eAAe,CAAC,MAAM,EAAE,CAAC;AACzD,gCAAgC,OAAO;AACvC,6BAA6B;AAC7B,yBAAyB;AACzB,wBAAwB,MAAM,qBAAqB,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AACjF,wBAAwB,qBAAqB,CAAC,SAAS,GAAG,CAAC,EAAE,YAAY,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;AACvF,wBAAwB,OAAO,CAAC,UAAU,CAAC,YAAY,CAAC,qBAAqB,EAAE,OAAO,CAAC,CAAC;AACxF,qBAAqB;AACrB,iBAAiB;AACjB,gBAAgB,IAAI,iBAAiB,GAAG,CAAC,EAAE,eAAe,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;AACxE,gBAAgB,MAAM,qBAAqB,GAAG,eAAe,CAAC,aAAa,CAAC;AAC5E,gBAAgB,IAAI,qBAAqB,EAAE;AAC3C,oBAAoB,IAAI,qBAAqB,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE;AAC9D;AACA;AACA;AACA,wBAAwB,iBAAiB,IAAI,CAAC,CAAC,CAAC,CAAC;AACjD,qBAAqB;AACrB,yBAAyB,IAAI,qBAAqB,CAAC,MAAM,CAAC,KAAK,GAAG,EAAE;AACpE;AACA;AACA;AACA,wBAAwB,iBAAiB,IAAI,CAAC,EAAE,CAAC,CAAC;AAClD,qBAAqB;AACrB,iBAAiB;AACjB,gBAAgB,eAAe,CAAC,SAAS,GAAG,iBAAiB,CAAC;AAC9D,aAAa;AACb,SAAS,CAAC,CAAC;AACX,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,qBAAqB,GAAG,CAAC,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,gBAAgB,KAAK;AACxE,IAAI,IAAI,IAAI,IAAI,IAAI,EAAE;AACtB,QAAQ,OAAO;AACf,KAAK;AACL,IAAI,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE;AAC9B,QAAQ,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACpC,KAAK;AACL,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AACzD,QAAQ,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,SAAS,KAAK;AAC/C,YAAY,MAAM,OAAO,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;AAClD,YAAY,IAAI,OAAO,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,EAAE,CAAC,EAAE;AACpG,gBAAgB,MAAM,OAAO,GAAG;AAChC,oBAAoB,OAAO,EAAE,CAAC;AAC9B,iBAAiB,CAAC;AAClB,gBAAgB,sBAAsB,CAAC,GAAG,EAAE,SAAS,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;AAC1F,aAAa;AACb,YAAY,qBAAqB,CAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,gBAAgB,CAAC,CAAC;AAC7E,SAAS,CAAC,CAAC;AACX,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,sBAAsB,GAAG,CAAC,GAAG,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,KAAK;AAC1E,IAAI,IAAI,KAAK,IAAI,IAAI,EAAE;AACvB,QAAQ,MAAM,MAAM,GAAG,EAAE,OAAO,CAAC,OAAO,CAAC;AACzC,QAAQ,OAAO,CAAC,YAAY,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AACjD,QAAQ,IAAI,OAAO,CAAC,MAAM,CAAC,IAAI,IAAI,EAAE;AACrC,YAAY,OAAO,CAAC,MAAM,CAAC,CAAC,SAAS,GAAG,CAAC,EAAE,cAAc,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AACtE,SAAS;AACT,QAAQ,IAAI,KAAK,CAAC,UAAU,IAAI,IAAI,EAAE;AACtC,YAAY,MAAM,KAAK,GAAG,CAAC,CAAC;AAC5B,YAAY,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,UAAU,EAAE,KAAK,KAAK;AAC5D,gBAAgB,2BAA2B,CAAC,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;AAC5F,aAAa,CAAC,CAAC;AACf,SAAS;AACT;AACA;AACA;AACA,QAAQ,IAAI,OAAO,IAAI,KAAK,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,gBAAgB,CAAC,EAAE;AACxF,YAAY,MAAM,MAAM,GAAG,OAAO,CAAC,aAAa,CAAC;AACjD,YAAY,IAAI,MAAM,IAAI,MAAM,CAAC,UAAU,EAAE;AAC7C,gBAAgB,MAAM,gBAAgB,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;AACvE,gBAAgB,MAAM,OAAO,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,QAAQ,KAAK,CAAC,gCAAgC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC;AACjI,gBAAgB,IAAI,OAAO,EAAE;AAC7B,oBAAoB,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AACxE,oBAAoB,KAAK,CAAC,KAAK,CAAC,YAAY,CAAC,gBAAgB,EAAE,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC;AAC7H,iBAAiB;AACjB,aAAa;AACb,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,2BAA2B,GAAG,CAAC,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK;AACxF,IAAI,MAAM,QAAQ,GAAG,UAAU,CAAC,KAAK,CAAC;AACtC,IAAI,IAAI,QAAQ,IAAI,IAAI,EAAE;AAC1B,QAAQ,OAAO;AACf,KAAK;AACL,IAAI,MAAM,MAAM,GAAG,OAAO,CAAC,OAAO,EAAE,CAAC;AACrC,IAAI,MAAM,OAAO,GAAG,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC;AAC5D,IAAI,QAAQ,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;AACnC,IAAI,QAAQ,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;AACnC,IAAI,IAAI,QAAQ,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AAC7D,QAAQ,QAAQ,CAAC,YAAY,CAAC,gBAAgB,EAAE,OAAO,CAAC,CAAC;AACzD,KAAK;AACL,SAAS,IAAI,QAAQ,CAAC,QAAQ,KAAK,CAAC,2BAA2B;AAC/D,QAAQ,MAAM,UAAU,GAAG,QAAQ,CAAC,UAAU,CAAC;AAC/C,QAAQ,MAAM,QAAQ,GAAG,UAAU,CAAC,QAAQ,CAAC;AAC7C,QAAQ,IAAI,QAAQ,KAAK,OAAO,IAAI,QAAQ,KAAK,QAAQ,EAAE;AAC3D,YAAY,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC;AAC5D,YAAY,MAAM,qBAAqB,GAAG,GAAG,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;AACxE,YAAY,UAAU,CAAC,YAAY,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC;AACrE,SAAS;AACT,KAAK;AACL,SAAS,IAAI,QAAQ,CAAC,QAAQ,KAAK,CAAC,8BAA8B;AAClE,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,EAAE;AAC9B,YAAY,MAAM,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;AACpD,YAAY,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC;AACxE,YAAY,QAAQ,CAAC,SAAS,GAAG,UAAU,CAAC;AAC5C,SAAS;AACT,KAAK;AACL,IAAI,IAAI,UAAU,CAAC,UAAU,IAAI,IAAI,EAAE;AACvC;AACA,QAAQ,MAAM,UAAU,GAAG,KAAK,GAAG,CAAC,CAAC;AACrC,QAAQ,UAAU,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK;AACxD,YAAY,2BAA2B,CAAC,GAAG,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,CAAC;AACxF,SAAS,CAAC,CAAC;AACX,KAAK;AACL,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA,MAAM,QAAQ,iBAAiB,IAAI,OAAO,EAAE,CAAC;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,UAAU,GAAG,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACK,MAAC,gBAAgB,GAAG,CAAC,YAAY,EAAE,OAAO,KAAK,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC,cAAc,GAAG,YAAY,GAAG,OAAO,EAAE;AACnH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,YAAY,GAAG,CAAC,WAAW,EAAE,OAAO,KAAK;AAC/C,IAAI,MAAM,OAAO,GAAG;AACpB,QAAQ,OAAO,EAAE,CAAC;AAClB,QAAQ,aAAa,EAAE,WAAW;AAClC,QAAQ,SAAS,EAAE,OAAO;AAC1B,QAAQ,gBAAgB,EAAE,IAAI,GAAG,EAAE;AACnC,KAAK,CAAC;AACN,IAAI,IAAI,KAAK,CAAC,KAAK,EAAE;AACrB,QAAQ,OAAO,CAAC,aAAa,GAAG,CAAC,CAAC;AAClC,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,MAAM,IAAI,KAAK,CAAC,QAAQ,EAAE;AACxC,QAAQ,OAAO,CAAC,mBAAmB,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,OAAO,CAAC,mBAAmB,GAAG,CAAC,CAAC,CAAC,CAAC;AAC5F,KAAK;AACL,IAAI,IAAI,KAAK,CAAC,YAAY,EAAE;AAC5B,QAAQ,OAAO,CAAC,gBAAgB,GAAG,IAAI,OAAO,CAAC,CAAC,CAAC,MAAM,OAAO,CAAC,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC;AACtF,QAAQ,WAAW,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC;AAChC,QAAQ,WAAW,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC;AACjC,KAAK;AACL,IAAI,qBAAqB,CAAC,WAAW,EAAE,OAAO,EAAE,OAAO,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;AAC5E,IAAI,OAAO,QAAQ,CAAC,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;AAC9C,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,CAAC,GAAG,EAAE,UAAU,KAAK,UAAU,IAAI,GAAG,CAAC;AACjE,MAAM,YAAY,GAAG,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,WAAW,IAAI,OAAO,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;AACtE,MAAM,gBAAgB,GAAG,KAAK,CAAC,SAAS;AACxC,MAAM,CAAC,UAAU,CAAC;AAClB,MAAM;AACN,QAAQ,WAAW;AACnB,QAAQ,wGAAwG;AAChH,KAAK,CAAC;AACN,MAAM,eAAe,GAAG,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC,KAAK,CAAC,GAAG,gBAAgB,EAAE,GAAG,CAAC,CAAC,CAAC;AAC3E,MAAM,cAAc,GAAG,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,gBAAgB,EAAE,GAAG,CAAC,CAAC,CAAC;AACpE,MAAC,cAAc,GAAG,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,gBAAgB,EAAE,GAAG,CAAC,EAAE;AACzE,MAAM,eAAe,GAAG,CAAC,OAAO,MAAM,WAAW,GAAG,OAAO,CAAC,CAAC;AAC7D,MAAM,UAAU,iBAAiB,IAAI,GAAG,EAAE,CAAC;AAC3C,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,YAAY,KAAK;AACvD;AACA,IAAI,MAAM,UAAU,GAAG,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC;AAC5D,IAAI,MAAM,QAAQ,GAAG,OAAO,CAAC,cAAc,CAAC;AAC5C,IAAI,IAAI,KAAK,CAAC,KAAK,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;AACrD,QAAQ,eAAe,CAAC,CAAC,iCAAiC,EAAE,OAAO,CAAC,SAAS,CAAC,mBAAmB,EAAE,OAAO,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC,CAAC;AAClJ,QAAQ,OAAO,SAAS,CAAC;AACzB,KAAK;AACL,IAAI,MAAM,MAAM,GAAG,CAAC,KAAK,CAAC,oBAAoB,GAAG,UAAU,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,KAAK,CAAC;AAClF,IAAI,IAAI,MAAM,EAAE;AAChB,QAAQ,OAAO,MAAM,CAAC,UAAU,CAAC,CAAC;AAClC,KAAK;AACL;AACA,IAAI,OAAO;AACX;AACA;AACA;AACA;AACA,IAAI,CAAC,EAAE,EAAE,QAAQ,CAAC,SAAS,EAAE,KAAK,CAAC,oBAAoB,IAAI,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,cAAc,KAAK;AACpI,QAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,EAAE;AACzC,YAAY,UAAU,CAAC,GAAG,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;AACrD,SAAS;AACT,QAAQ,OAAO,cAAc,CAAC,UAAU,CAAC,CAAC;AAC1C,KAAK,EAAE,YAAY,CAAC,CAAC;AACrB,CAAC,CAAC;AACF,MAAM,MAAM,iBAAiB,IAAI,GAAG,EAAE,CAAC;AACvC,MAAM,mBAAmB,GAAG,EAAE,CAAC;AAC/B,MAAM,GAAG,GAAG,OAAO,MAAM,KAAK,WAAW,GAAG,MAAM,GAAG,EAAE,CAAC;AACnD,MAAC,GAAG,GAAG,GAAG,CAAC,QAAQ,IAAI,EAAE,IAAI,EAAE,EAAE,GAAG;AACpC,MAAC,CAAC,IAAI,GAAG,CAAC,WAAW,IAAI,MAAM;AACpC,CAAC,EAAE;AACH,MAAM,GAAG,GAAG;AACZ,IAAI,OAAO,EAAE,CAAC;AACd,IAAI,cAAc,EAAE,EAAE;AACtB,IAAI,GAAG,EAAE,CAAC,CAAC,KAAK,CAAC,EAAE;AACnB,IAAI,GAAG,EAAE,CAAC,CAAC,KAAK,qBAAqB,CAAC,CAAC,CAAC;AACxC,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,KAAK,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC;AAC1F,IAAI,GAAG,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,IAAI,KAAK,EAAE,CAAC,mBAAmB,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,CAAC;AAC7F,IAAI,EAAE,EAAE,CAAC,SAAS,EAAE,IAAI,KAAK,IAAI,WAAW,CAAC,SAAS,EAAE,IAAI,CAAC;AAC7D,CAAC,CAAC;AACF,MAAM,kBAAkB,GAAG,CAAC,OAAO,KAAK;AACxC,IAAI,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;AAChC,CAAC,CAAC;AACF,MAAM,cAAc;AACpB;AACA,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,SAAS;AACtC,oBAAoB,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,EAAE,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;AAClF,MAAM,IAAI,CAAC;AACX,MAAM,uBAAuB,iBAAiB,CAAC,MAAM;AACrD,IAAI,IAAI,uBAAuB,GAAG,KAAK,CAAC;AACxC,IAAI,IAAI;AACR,QAAQ,GAAG,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,cAAc,CAAC,EAAE,EAAE,SAAS,EAAE;AAC7E,YAAY,GAAG,GAAG;AAClB,gBAAgB,uBAAuB,GAAG,IAAI,CAAC;AAC/C,aAAa;AACb,SAAS,CAAC,CAAC,CAAC;AACZ,KAAK;AACL,IAAI,OAAO,CAAC,EAAE,GAAG;AACjB,IAAI,OAAO,uBAAuB,CAAC;AACnC,CAAC,GAAG,CAAC;AACA,MAAC,cAAc,GAAG,CAAC,CAAC,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE;AACjD,MAAM,gCAAgC,GAAG,KAAK,CAAC,gBAAgB;AAC/D,oBAAoB,CAAC,MAAM;AAC3B,QAAQ,IAAI;AACZ,YAAY,IAAI,aAAa,EAAE,CAAC;AAChC,YAAY,OAAO,OAAO,IAAI,aAAa,EAAE,CAAC,WAAW,KAAK,UAAU,CAAC;AACzE,SAAS;AACT,QAAQ,OAAO,CAAC,EAAE,GAAG;AACrB,QAAQ,OAAO,KAAK,CAAC;AACrB,KAAK,GAAG;AACR,MAAM,KAAK,CAAC;AACZ,MAAM,aAAa,GAAG,EAAE,CAAC;AACzB,MAAM,cAAc,GAAG,EAAE,CAAC;AAC1B,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAC7B,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,KAAK,KAAK,CAAC,EAAE,KAAK;AAC5C,IAAI,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnB,IAAI,IAAI,CAAC,YAAY,EAAE;AACvB,QAAQ,YAAY,GAAG,IAAI,CAAC;AAC5B,QAAQ,IAAI,KAAK,IAAI,GAAG,CAAC,OAAO,GAAG,CAAC,iCAAiC;AACrE,YAAY,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC5B,SAAS;AACT,aAAa;AACb,YAAY,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAC3B,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF,MAAM,OAAO,GAAG,CAAC,KAAK,KAAK;AAC3B,IAAI,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AAC3C,QAAQ,IAAI;AACZ,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,GAAG,EAAE,CAAC,CAAC;AACxC,SAAS;AACT,QAAQ,OAAO,CAAC,EAAE;AAClB,YAAY,YAAY,CAAC,CAAC,CAAC,CAAC;AAC5B,SAAS;AACT,KAAK;AACL,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AACrB,CAAC,CAAC;AACF,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK;AAC3C,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC;AACd,IAAI,IAAI,EAAE,GAAG,CAAC,CAAC;AACf,IAAI,OAAO,CAAC,GAAG,KAAK,CAAC,MAAM,IAAI,CAAC,EAAE,GAAG,WAAW,CAAC,GAAG,EAAE,IAAI,OAAO,EAAE;AACnE,QAAQ,IAAI;AACZ,YAAY,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;AAC3B,SAAS;AACT,QAAQ,OAAO,CAAC,EAAE;AAClB,YAAY,YAAY,CAAC,CAAC,CAAC,CAAC;AAC5B,SAAS;AACT,KAAK;AACL,IAAI,IAAI,CAAC,KAAK,KAAK,CAAC,MAAM,EAAE;AAC5B,QAAQ,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;AACzB,KAAK;AACL,SAAS,IAAI,CAAC,KAAK,CAAC,EAAE;AACtB,QAAQ,KAAK,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAC3B,KAAK;AACL,CAAC,CAAC;AACF,MAAM,KAAK,GAAG,MAAM;AACpB,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;AAC1B,QAAQ,eAAe,EAAE,CAAC;AAC1B,KAAK;AACL;AACA;AACA;AACA,IAAI,OAAO,CAAC,aAAa,CAAC,CAAC;AAC3B;AACA,IAAI,IAAI,KAAK,CAAC,UAAU,EAAE;AAC1B,QAAQ,MAAM,OAAO,GAAG,CAAC,GAAG,CAAC,OAAO,GAAG,CAAC,qCAAqC,CAAC;AAC9E,cAAc,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,IAAI,GAAG,GAAG,IAAI,CAAC,CAAC;AAChF,cAAc,QAAQ,CAAC;AACvB,QAAQ,cAAc,CAAC,cAAc,EAAE,OAAO,CAAC,CAAC;AAChD,QAAQ,cAAc,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;AACnD,QAAQ,IAAI,cAAc,CAAC,MAAM,GAAG,CAAC,EAAE;AACvC,YAAY,iBAAiB,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,CAAC;AACtD,YAAY,cAAc,CAAC,MAAM,GAAG,CAAC,CAAC;AACtC,SAAS;AACT,QAAQ,KAAK,YAAY,GAAG,aAAa,CAAC,MAAM,GAAG,cAAc,CAAC,MAAM,GAAG,iBAAiB,CAAC,MAAM,GAAG,CAAC,GAAG;AAC1G;AACA;AACA,YAAY,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAC3B,SAAS;AACT,aAAa;AACb,YAAY,eAAe,GAAG,CAAC,CAAC;AAChC,SAAS;AACT,KAAK;AACL,SAAS;AACT,QAAQ,OAAO,CAAC,cAAc,CAAC,CAAC;AAChC,QAAQ,KAAK,YAAY,GAAG,aAAa,CAAC,MAAM,GAAG,CAAC,GAAG;AACvD;AACA;AACA,YAAY,GAAG,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AAC3B,SAAS;AACT,KAAK;AACL,CAAC,CAAC;AACF,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,cAAc,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACnD,MAAM,QAAQ,iBAAiB,SAAS,CAAC,aAAa,EAAE,KAAK,CAAC,CAAC;AAC/D,MAAM,SAAS,iBAAiB,SAAS,CAAC,cAAc,EAAE,IAAI,CAAC;;;;","names":[],"sources":["@stencil/core/internal/app-data","node_modules/@stencil/core/internal/client/index.js?app-data=conditional"],"sourcesContent":["export const NAMESPACE = 'genexus-ide-ui';\nexport const BUILD = /* genexus-ide-ui */ { allRenderFn: true, appendChildSlotFix: false, asyncLoading: true, asyncQueue: false, attachStyles: true, cloneNodeFix: false, cmpDidLoad: true, cmpDidRender: true, cmpDidUnload: false, cmpDidUpdate: false, cmpShouldUpdate: false, cmpWillLoad: true, cmpWillRender: false, cmpWillUpdate: false, connectedCallback: true, constructableCSS: false, cssAnnotations: true, devTools: true, disconnectedCallback: true, element: false, event: true, experimentalSlotFixes: false, formAssociated: false, hasRenderFn: true, hostListener: true, hostListenerTarget: false, hostListenerTargetBody: false, hostListenerTargetDocument: false, hostListenerTargetParent: false, hostListenerTargetWindow: false, hotModuleReplacement: true, hydrateClientSide: false, hydrateServerSide: false, hydratedAttribute: false, hydratedClass: true, initializeNextTick: false, invisiblePrehydration: true, isDebug: false, isDev: true, isTesting: false, lazyLoad: true, lifecycle: true, lifecycleDOMEvents: false, member: true, method: true, mode: false, observeAttribute: true, profile: true, prop: true, propBoolean: true, propMutable: true, propNumber: true, propString: true, reflect: true, scoped: false, scopedSlotTextContentFix: false, scriptDataOpts: false, shadowDelegatesFocus: true, shadowDom: true, slot: true, slotChildNodesFix: false, slotRelocation: true, state: true, style: true, svg: false, taskQueue: true, transformTagName: false, updatable: true, vdomAttribute: true, vdomClass: true, vdomFunctional: false, vdomKey: true, vdomListener: true, vdomPropOrAttr: true, vdomRef: true, vdomRender: true, vdomStyle: true, vdomText: true, vdomXlink: false, watchCallback: true };\nexport const Env = /* genexus-ide-ui */ {};\n","/**\n * Virtual DOM patching algorithm based on Snabbdom by\n * Simon Friis Vindum (@paldepind)\n * Licensed under the MIT License\n * https://github.com/snabbdom/snabbdom/blob/master/LICENSE\n *\n * Modified for Stencil's renderer and slot projection\n */\nlet scopeId;\nlet contentRef;\nlet hostTagName;\nlet customError;\nlet i = 0;\nlet useNativeShadowDom = false;\nlet checkSlotFallbackVisibility = false;\nlet checkSlotRelocate = false;\nlet isSvgMode = false;\nlet renderingRef = null;\nlet queueCongestion = 0;\nlet queuePending = false;\n/*\n Stencil Client Platform v4.9.1 | MIT Licensed | https://stenciljs.com\n */\nimport { BUILD, NAMESPACE } from '@stencil/core/internal/app-data';\nconst Build = {\n isDev: BUILD.isDev ? true : false,\n isBrowser: true,\n isServer: false,\n isTesting: BUILD.isTesting ? true : false,\n};\nconst getAssetPath = (path) => {\n const assetUrl = new URL(path, plt.$resourcesUrl$);\n return assetUrl.origin !== win.location.origin ? assetUrl.href : assetUrl.pathname;\n};\nconst setAssetPath = (path) => (plt.$resourcesUrl$ = path);\nconst createTime = (fnName, tagName = '') => {\n if (BUILD.profile && performance.mark) {\n const key = `st:${fnName}:${tagName}:${i++}`;\n // Start\n performance.mark(key);\n // End\n return () => performance.measure(`[Stencil] ${fnName}() <${tagName}>`, key);\n }\n else {\n return () => {\n return;\n };\n }\n};\nconst uniqueTime = (key, measureText) => {\n if (BUILD.profile && performance.mark) {\n if (performance.getEntriesByName(key, 'mark').length === 0) {\n performance.mark(key);\n }\n return () => {\n if (performance.getEntriesByName(measureText, 'measure').length === 0) {\n performance.measure(measureText, key);\n }\n };\n }\n else {\n return () => {\n return;\n };\n }\n};\nconst inspect = (ref) => {\n const hostRef = getHostRef(ref);\n if (!hostRef) {\n return undefined;\n }\n const flags = hostRef.$flags$;\n const hostElement = hostRef.$hostElement$;\n return {\n renderCount: hostRef.$renderCount$,\n flags: {\n hasRendered: !!(flags & 2 /* HOST_FLAGS.hasRendered */),\n hasConnected: !!(flags & 1 /* HOST_FLAGS.hasConnected */),\n isWaitingForChildren: !!(flags & 4 /* HOST_FLAGS.isWaitingForChildren */),\n isConstructingInstance: !!(flags & 8 /* HOST_FLAGS.isConstructingInstance */),\n isQueuedForUpdate: !!(flags & 16 /* HOST_FLAGS.isQueuedForUpdate */),\n hasInitializedComponent: !!(flags & 32 /* HOST_FLAGS.hasInitializedComponent */),\n hasLoadedComponent: !!(flags & 64 /* HOST_FLAGS.hasLoadedComponent */),\n isWatchReady: !!(flags & 128 /* HOST_FLAGS.isWatchReady */),\n isListenReady: !!(flags & 256 /* HOST_FLAGS.isListenReady */),\n needsRerender: !!(flags & 512 /* HOST_FLAGS.needsRerender */),\n },\n instanceValues: hostRef.$instanceValues$,\n ancestorComponent: hostRef.$ancestorComponent$,\n hostElement,\n lazyInstance: hostRef.$lazyInstance$,\n vnode: hostRef.$vnode$,\n modeName: hostRef.$modeName$,\n onReadyPromise: hostRef.$onReadyPromise$,\n onReadyResolve: hostRef.$onReadyResolve$,\n onInstancePromise: hostRef.$onInstancePromise$,\n onInstanceResolve: hostRef.$onInstanceResolve$,\n onRenderResolve: hostRef.$onRenderResolve$,\n queuedListeners: hostRef.$queuedListeners$,\n rmListeners: hostRef.$rmListeners$,\n ['s-id']: hostElement['s-id'],\n ['s-cr']: hostElement['s-cr'],\n ['s-lr']: hostElement['s-lr'],\n ['s-p']: hostElement['s-p'],\n ['s-rc']: hostElement['s-rc'],\n ['s-sc']: hostElement['s-sc'],\n };\n};\nconst installDevTools = () => {\n if (BUILD.devTools) {\n const stencil = (win.stencil = win.stencil || {});\n const originalInspect = stencil.inspect;\n stencil.inspect = (ref) => {\n let result = inspect(ref);\n if (!result && typeof originalInspect === 'function') {\n result = originalInspect(ref);\n }\n return result;\n };\n }\n};\nconst CONTENT_REF_ID = 'r';\nconst ORG_LOCATION_ID = 'o';\nconst SLOT_NODE_ID = 's';\nconst TEXT_NODE_ID = 't';\nconst HYDRATE_ID = 's-id';\nconst HYDRATED_STYLE_ID = 'sty-id';\nconst HYDRATE_CHILD_ID = 'c-id';\nconst HYDRATED_CSS = '{visibility:hidden}.hydrated{visibility:inherit}';\n/**\n * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.\n *\n * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser\n * support as of Stencil v4.\n */\nconst SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';\nconst XLINK_NS = 'http://www.w3.org/1999/xlink';\nconst FORM_ASSOCIATED_CUSTOM_ELEMENT_CALLBACKS = [\n 'formAssociatedCallback',\n 'formResetCallback',\n 'formDisabledCallback',\n 'formStateRestoreCallback',\n];\n/**\n * Default style mode id\n */\n/**\n * Reusable empty obj/array\n * Don't add values to these!!\n */\nconst EMPTY_OBJ = {};\n/**\n * Namespaces\n */\nconst SVG_NS = 'http://www.w3.org/2000/svg';\nconst HTML_NS = 'http://www.w3.org/1999/xhtml';\nconst isDef = (v) => v != null;\n/**\n * Check whether a value is a 'complex type', defined here as an object or a\n * function.\n *\n * @param o the value to check\n * @returns whether it's a complex type or not\n */\nconst isComplexType = (o) => {\n // https://jsperf.com/typeof-fn-object/5\n o = typeof o;\n return o === 'object' || o === 'function';\n};\n/**\n * Helper method for querying a `meta` tag that contains a nonce value\n * out of a DOM's head.\n *\n * @param doc The DOM containing the `head` to query against\n * @returns The content of the meta tag representing the nonce value, or `undefined` if no tag\n * exists or the tag has no content.\n */\nfunction queryNonceMetaTagContent(doc) {\n var _a, _b, _c;\n return (_c = (_b = (_a = doc.head) === null || _a === void 0 ? void 0 : _a.querySelector('meta[name=\"csp-nonce\"]')) === null || _b === void 0 ? void 0 : _b.getAttribute('content')) !== null && _c !== void 0 ? _c : undefined;\n}\n/**\n * Production h() function based on Preact by\n * Jason Miller (@developit)\n * Licensed under the MIT License\n * https://github.com/developit/preact/blob/master/LICENSE\n *\n * Modified for Stencil's compiler and vdom\n */\n// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, child?: d.ChildType): d.VNode;\n// export function h(nodeName: string | d.FunctionalComponent, vnodeData: d.PropsType, ...children: d.ChildType[]): d.VNode;\nconst h = (nodeName, vnodeData, ...children) => {\n let child = null;\n let key = null;\n let slotName = null;\n let simple = false;\n let lastSimple = false;\n const vNodeChildren = [];\n const walk = (c) => {\n for (let i = 0; i < c.length; i++) {\n child = c[i];\n if (Array.isArray(child)) {\n walk(child);\n }\n else if (child != null && typeof child !== 'boolean') {\n if ((simple = typeof nodeName !== 'function' && !isComplexType(child))) {\n child = String(child);\n }\n else if (BUILD.isDev && typeof nodeName !== 'function' && child.$flags$ === undefined) {\n consoleDevError(`vNode passed as children has unexpected type.\nMake sure it's using the correct h() function.\nEmpty objects can also be the cause, look for JSX comments that became objects.`);\n }\n if (simple && lastSimple) {\n // If the previous child was simple (string), we merge both\n vNodeChildren[vNodeChildren.length - 1].$text$ += child;\n }\n else {\n // Append a new vNode, if it's text, we create a text vNode\n vNodeChildren.push(simple ? newVNode(null, child) : child);\n }\n lastSimple = simple;\n }\n }\n };\n walk(children);\n if (vnodeData) {\n if (BUILD.isDev && nodeName === 'input') {\n validateInputProperties(vnodeData);\n }\n if (BUILD.vdomKey && vnodeData.key) {\n key = vnodeData.key;\n }\n if (BUILD.slotRelocation && vnodeData.name) {\n slotName = vnodeData.name;\n }\n // normalize class / className attributes\n if (BUILD.vdomClass) {\n const classData = vnodeData.className || vnodeData.class;\n if (classData) {\n vnodeData.class =\n typeof classData !== 'object'\n ? classData\n : Object.keys(classData)\n .filter((k) => classData[k])\n .join(' ');\n }\n }\n }\n if (BUILD.isDev && vNodeChildren.some(isHost)) {\n consoleDevError(`The must be the single root component. Make sure:\n- You are NOT using hostData() and in the same component.\n- is used once, and it's the single root component of the render() function.`);\n }\n if (BUILD.vdomFunctional && typeof nodeName === 'function') {\n // nodeName is a functional component\n return nodeName(vnodeData === null ? {} : vnodeData, vNodeChildren, vdomFnUtils);\n }\n const vnode = newVNode(nodeName, null);\n vnode.$attrs$ = vnodeData;\n if (vNodeChildren.length > 0) {\n vnode.$children$ = vNodeChildren;\n }\n if (BUILD.vdomKey) {\n vnode.$key$ = key;\n }\n if (BUILD.slotRelocation) {\n vnode.$name$ = slotName;\n }\n return vnode;\n};\n/**\n * A utility function for creating a virtual DOM node from a tag and some\n * possible text content.\n *\n * @param tag the tag for this element\n * @param text possible text content for the node\n * @returns a newly-minted virtual DOM node\n */\nconst newVNode = (tag, text) => {\n const vnode = {\n $flags$: 0,\n $tag$: tag,\n $text$: text,\n $elm$: null,\n $children$: null,\n };\n if (BUILD.vdomAttribute) {\n vnode.$attrs$ = null;\n }\n if (BUILD.vdomKey) {\n vnode.$key$ = null;\n }\n if (BUILD.slotRelocation) {\n vnode.$name$ = null;\n }\n return vnode;\n};\nconst Host = {};\n/**\n * Check whether a given node is a Host node or not\n *\n * @param node the virtual DOM node to check\n * @returns whether it's a Host node or not\n */\nconst isHost = (node) => node && node.$tag$ === Host;\n/**\n * Implementation of {@link d.FunctionalUtilities} for Stencil's VDom.\n *\n * Note that these functions convert from {@link d.VNode} to\n * {@link d.ChildNode} to give functional component developers a friendly\n * interface.\n */\nconst vdomFnUtils = {\n forEach: (children, cb) => children.map(convertToPublic).forEach(cb),\n map: (children, cb) => children.map(convertToPublic).map(cb).map(convertToPrivate),\n};\n/**\n * Convert a {@link d.VNode} to a {@link d.ChildNode} in order to present a\n * friendlier public interface (hence, 'convertToPublic').\n *\n * @param node the virtual DOM node to convert\n * @returns a converted child node\n */\nconst convertToPublic = (node) => ({\n vattrs: node.$attrs$,\n vchildren: node.$children$,\n vkey: node.$key$,\n vname: node.$name$,\n vtag: node.$tag$,\n vtext: node.$text$,\n});\n/**\n * Convert a {@link d.ChildNode} back to an equivalent {@link d.VNode} in\n * order to use the resulting object in the virtual DOM. The initial object was\n * likely created as part of presenting a public API, so converting it back\n * involved making it 'private' again (hence, `convertToPrivate`).\n *\n * @param node the child node to convert\n * @returns a converted virtual DOM node\n */\nconst convertToPrivate = (node) => {\n if (typeof node.vtag === 'function') {\n const vnodeData = Object.assign({}, node.vattrs);\n if (node.vkey) {\n vnodeData.key = node.vkey;\n }\n if (node.vname) {\n vnodeData.name = node.vname;\n }\n return h(node.vtag, vnodeData, ...(node.vchildren || []));\n }\n const vnode = newVNode(node.vtag, node.vtext);\n vnode.$attrs$ = node.vattrs;\n vnode.$children$ = node.vchildren;\n vnode.$key$ = node.vkey;\n vnode.$name$ = node.vname;\n return vnode;\n};\n/**\n * Validates the ordering of attributes on an input element\n *\n * @param inputElm the element to validate\n */\nconst validateInputProperties = (inputElm) => {\n const props = Object.keys(inputElm);\n const value = props.indexOf('value');\n if (value === -1) {\n return;\n }\n const typeIndex = props.indexOf('type');\n const minIndex = props.indexOf('min');\n const maxIndex = props.indexOf('max');\n const stepIndex = props.indexOf('step');\n if (value < typeIndex || value < minIndex || value < maxIndex || value < stepIndex) {\n consoleDevWarn(`The \"value\" prop of should be set after \"min\", \"max\", \"type\" and \"step\"`);\n }\n};\n/**\n * Entrypoint of the client-side hydration process. Facilitates calls to hydrate the\n * document and all its nodes.\n *\n * This process will also reconstruct the shadow root and slot DOM nodes for components using shadow DOM.\n *\n * @param hostElm The element to hydrate.\n * @param tagName The element's tag name.\n * @param hostId The host ID assigned to the element by the server.\n * @param hostRef The host reference for the element.\n */\nconst initializeClientHydrate = (hostElm, tagName, hostId, hostRef) => {\n const endHydrate = createTime('hydrateClient', tagName);\n const shadowRoot = hostElm.shadowRoot;\n const childRenderNodes = [];\n const slotNodes = [];\n const shadowRootNodes = BUILD.shadowDom && shadowRoot ? [] : null;\n const vnode = (hostRef.$vnode$ = newVNode(tagName, null));\n if (!plt.$orgLocNodes$) {\n initializeDocumentHydrate(doc.body, (plt.$orgLocNodes$ = new Map()));\n }\n hostElm[HYDRATE_ID] = hostId;\n hostElm.removeAttribute(HYDRATE_ID);\n clientHydrate(vnode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, hostElm, hostId);\n childRenderNodes.map((c) => {\n const orgLocationId = c.$hostId$ + '.' + c.$nodeId$;\n const orgLocationNode = plt.$orgLocNodes$.get(orgLocationId);\n const node = c.$elm$;\n // Put the node back in its original location since the native Shadow DOM\n // can handle rendering it its correct location now\n if (orgLocationNode && supportsShadow && orgLocationNode['s-en'] === '') {\n orgLocationNode.parentNode.insertBefore(node, orgLocationNode.nextSibling);\n }\n if (!shadowRoot) {\n node['s-hn'] = tagName;\n if (orgLocationNode) {\n node['s-ol'] = orgLocationNode;\n node['s-ol']['s-nr'] = node;\n }\n }\n plt.$orgLocNodes$.delete(orgLocationId);\n });\n if (BUILD.shadowDom && shadowRoot) {\n shadowRootNodes.map((shadowRootNode) => {\n if (shadowRootNode) {\n shadowRoot.appendChild(shadowRootNode);\n }\n });\n }\n endHydrate();\n};\n/**\n * Recursively constructs the virtual node tree for a host element and its children.\n * The tree is constructed by parsing the annotations set on the nodes by the server.\n *\n * In addition to constructing the vNode tree, we also track information about the node's\n * descendants like which are slots, which should exist in the shadow root, and which\n * are nodes that should be rendered as children of the parent node.\n *\n * @param parentVNode The vNode representing the parent node.\n * @param childRenderNodes An array of all child nodes in the parent's node tree.\n * @param slotNodes An array of all slot nodes in the parent's node tree.\n * @param shadowRootNodes An array all nodes that should be rendered in the shadow root in the parent's node tree.\n * @param hostElm The parent element.\n * @param node The node to construct the vNode tree for.\n * @param hostId The host ID assigned to the element by the server.\n */\nconst clientHydrate = (parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node, hostId) => {\n let childNodeType;\n let childIdSplt;\n let childVNode;\n let i;\n if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {\n childNodeType = node.getAttribute(HYDRATE_CHILD_ID);\n if (childNodeType) {\n // got the node data from the element's attribute\n // `${hostId}.${nodeId}.${depth}.${index}`\n childIdSplt = childNodeType.split('.');\n if (childIdSplt[0] === hostId || childIdSplt[0] === '0') {\n childVNode = {\n $flags$: 0,\n $hostId$: childIdSplt[0],\n $nodeId$: childIdSplt[1],\n $depth$: childIdSplt[2],\n $index$: childIdSplt[3],\n $tag$: node.tagName.toLowerCase(),\n $elm$: node,\n $attrs$: null,\n $children$: null,\n $key$: null,\n $name$: null,\n $text$: null,\n };\n childRenderNodes.push(childVNode);\n node.removeAttribute(HYDRATE_CHILD_ID);\n // this is a new child vnode\n // so ensure its parent vnode has the vchildren array\n if (!parentVNode.$children$) {\n parentVNode.$children$ = [];\n }\n // add our child vnode to a specific index of the vnode's children\n parentVNode.$children$[childVNode.$index$] = childVNode;\n // this is now the new parent vnode for all the next child checks\n parentVNode = childVNode;\n if (shadowRootNodes && childVNode.$depth$ === '0') {\n shadowRootNodes[childVNode.$index$] = childVNode.$elm$;\n }\n }\n }\n // recursively drill down, end to start so we can remove nodes\n for (i = node.childNodes.length - 1; i >= 0; i--) {\n clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.childNodes[i], hostId);\n }\n if (node.shadowRoot) {\n // keep drilling down through the shadow root nodes\n for (i = node.shadowRoot.childNodes.length - 1; i >= 0; i--) {\n clientHydrate(parentVNode, childRenderNodes, slotNodes, shadowRootNodes, hostElm, node.shadowRoot.childNodes[i], hostId);\n }\n }\n }\n else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {\n // `${COMMENT_TYPE}.${hostId}.${nodeId}.${depth}.${index}`\n childIdSplt = node.nodeValue.split('.');\n if (childIdSplt[1] === hostId || childIdSplt[1] === '0') {\n // comment node for either the host id or a 0 host id\n childNodeType = childIdSplt[0];\n childVNode = {\n $flags$: 0,\n $hostId$: childIdSplt[1],\n $nodeId$: childIdSplt[2],\n $depth$: childIdSplt[3],\n $index$: childIdSplt[4],\n $elm$: node,\n $attrs$: null,\n $children$: null,\n $key$: null,\n $name$: null,\n $tag$: null,\n $text$: null,\n };\n if (childNodeType === TEXT_NODE_ID) {\n childVNode.$elm$ = node.nextSibling;\n if (childVNode.$elm$ && childVNode.$elm$.nodeType === 3 /* NODE_TYPE.TextNode */) {\n childVNode.$text$ = childVNode.$elm$.textContent;\n childRenderNodes.push(childVNode);\n // remove the text comment since it's no longer needed\n node.remove();\n if (!parentVNode.$children$) {\n parentVNode.$children$ = [];\n }\n parentVNode.$children$[childVNode.$index$] = childVNode;\n if (shadowRootNodes && childVNode.$depth$ === '0') {\n shadowRootNodes[childVNode.$index$] = childVNode.$elm$;\n }\n }\n }\n else if (childVNode.$hostId$ === hostId) {\n // this comment node is specifically for this host id\n if (childNodeType === SLOT_NODE_ID) {\n // `${SLOT_NODE_ID}.${hostId}.${nodeId}.${depth}.${index}.${slotName}`;\n childVNode.$tag$ = 'slot';\n if (childIdSplt[5]) {\n node['s-sn'] = childVNode.$name$ = childIdSplt[5];\n }\n else {\n node['s-sn'] = '';\n }\n node['s-sr'] = true;\n if (BUILD.shadowDom && shadowRootNodes) {\n // browser support shadowRoot and this is a shadow dom component\n // create an actual slot element\n childVNode.$elm$ = doc.createElement(childVNode.$tag$);\n if (childVNode.$name$) {\n // add the slot name attribute\n childVNode.$elm$.setAttribute('name', childVNode.$name$);\n }\n // insert the new slot element before the slot comment\n node.parentNode.insertBefore(childVNode.$elm$, node);\n // remove the slot comment since it's not needed for shadow\n node.remove();\n if (childVNode.$depth$ === '0') {\n shadowRootNodes[childVNode.$index$] = childVNode.$elm$;\n }\n }\n slotNodes.push(childVNode);\n if (!parentVNode.$children$) {\n parentVNode.$children$ = [];\n }\n parentVNode.$children$[childVNode.$index$] = childVNode;\n }\n else if (childNodeType === CONTENT_REF_ID) {\n // `${CONTENT_REF_ID}.${hostId}`;\n if (BUILD.shadowDom && shadowRootNodes) {\n // remove the content ref comment since it's not needed for shadow\n node.remove();\n }\n else if (BUILD.slotRelocation) {\n hostElm['s-cr'] = node;\n node['s-cn'] = true;\n }\n }\n }\n }\n }\n else if (parentVNode && parentVNode.$tag$ === 'style') {\n const vnode = newVNode(null, node.textContent);\n vnode.$elm$ = node;\n vnode.$index$ = '0';\n parentVNode.$children$ = [vnode];\n }\n};\n/**\n * Recursively locate any comments representing an original location for a node in a node's\n * children or shadowRoot children.\n *\n * @param node The node to search.\n * @param orgLocNodes A map of the original location annotation and the current node being searched.\n */\nconst initializeDocumentHydrate = (node, orgLocNodes) => {\n if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {\n let i = 0;\n for (; i < node.childNodes.length; i++) {\n initializeDocumentHydrate(node.childNodes[i], orgLocNodes);\n }\n if (node.shadowRoot) {\n for (i = 0; i < node.shadowRoot.childNodes.length; i++) {\n initializeDocumentHydrate(node.shadowRoot.childNodes[i], orgLocNodes);\n }\n }\n }\n else if (node.nodeType === 8 /* NODE_TYPE.CommentNode */) {\n const childIdSplt = node.nodeValue.split('.');\n if (childIdSplt[0] === ORG_LOCATION_ID) {\n orgLocNodes.set(childIdSplt[1] + '.' + childIdSplt[2], node);\n node.nodeValue = '';\n // useful to know if the original location is\n // the root light-dom of a shadow dom component\n node['s-en'] = childIdSplt[3];\n }\n }\n};\n// Private\nconst computeMode = (elm) => modeResolutionChain.map((h) => h(elm)).find((m) => !!m);\n// Public\nconst setMode = (handler) => modeResolutionChain.push(handler);\nconst getMode = (ref) => getHostRef(ref).$modeName$;\n/**\n * Parse a new property value for a given property type.\n *\n * While the prop value can reasonably be expected to be of `any` type as far as TypeScript's type checker is concerned,\n * it is not safe to assume that the string returned by evaluating `typeof propValue` matches:\n * 1. `any`, the type given to `propValue` in the function signature\n * 2. the type stored from `propType`.\n *\n * This function provides the capability to parse/coerce a property's value to potentially any other JavaScript type.\n *\n * Property values represented in TSX preserve their type information. In the example below, the number 0 is passed to\n * a component. This `propValue` will preserve its type information (`typeof propValue === 'number'`). Note that is\n * based on the type of the value being passed in, not the type declared of the class member decorated with `@Prop`.\n * ```tsx\n * \n * ```\n *\n * HTML prop values on the other hand, will always a string\n *\n * @param propValue the new value to coerce to some type\n * @param propType the type of the prop, expressed as a binary number\n * @returns the parsed/coerced value\n */\nconst parsePropertyValue = (propValue, propType) => {\n // ensure this value is of the correct prop type\n if (propValue != null && !isComplexType(propValue)) {\n if (BUILD.propBoolean && propType & 4 /* MEMBER_FLAGS.Boolean */) {\n // per the HTML spec, any string value means it is a boolean true value\n // but we'll cheat here and say that the string \"false\" is the boolean false\n return propValue === 'false' ? false : propValue === '' || !!propValue;\n }\n if (BUILD.propNumber && propType & 2 /* MEMBER_FLAGS.Number */) {\n // force it to be a number\n return parseFloat(propValue);\n }\n if (BUILD.propString && propType & 1 /* MEMBER_FLAGS.String */) {\n // could have been passed as a number or boolean\n // but we still want it as a string\n return String(propValue);\n }\n // redundant return here for better minification\n return propValue;\n }\n // not sure exactly what type we want\n // so no need to change to a different type\n return propValue;\n};\nconst getElement = (ref) => (BUILD.lazyLoad ? getHostRef(ref).$hostElement$ : ref);\nconst createEvent = (ref, name, flags) => {\n const elm = getElement(ref);\n return {\n emit: (detail) => {\n if (BUILD.isDev && !elm.isConnected) {\n consoleDevWarn(`The \"${name}\" event was emitted, but the dispatcher node is no longer connected to the dom.`);\n }\n return emitEvent(elm, name, {\n bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),\n composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),\n cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),\n detail,\n });\n },\n };\n};\n/**\n * Helper function to create & dispatch a custom Event on a provided target\n * @param elm the target of the Event\n * @param name the name to give the custom Event\n * @param opts options for configuring a custom Event\n * @returns the custom Event\n */\nconst emitEvent = (elm, name, opts) => {\n const ev = plt.ce(name, opts);\n elm.dispatchEvent(ev);\n return ev;\n};\nconst rootAppliedStyles = /*@__PURE__*/ new WeakMap();\nconst registerStyle = (scopeId, cssText, allowCS) => {\n let style = styles.get(scopeId);\n if (supportsConstructableStylesheets && allowCS) {\n style = (style || new CSSStyleSheet());\n if (typeof style === 'string') {\n style = cssText;\n }\n else {\n style.replaceSync(cssText);\n }\n }\n else {\n style = cssText;\n }\n styles.set(scopeId, style);\n};\nconst addStyle = (styleContainerNode, cmpMeta, mode) => {\n var _a;\n const scopeId = getScopeId(cmpMeta, mode);\n const style = styles.get(scopeId);\n if (!BUILD.attachStyles) {\n return scopeId;\n }\n // if an element is NOT connected then getRootNode() will return the wrong root node\n // so the fallback is to always use the document for the root node in those cases\n styleContainerNode = styleContainerNode.nodeType === 11 /* NODE_TYPE.DocumentFragment */ ? styleContainerNode : doc;\n if (style) {\n if (typeof style === 'string') {\n styleContainerNode = styleContainerNode.head || styleContainerNode;\n let appliedStyles = rootAppliedStyles.get(styleContainerNode);\n let styleElm;\n if (!appliedStyles) {\n rootAppliedStyles.set(styleContainerNode, (appliedStyles = new Set()));\n }\n if (!appliedStyles.has(scopeId)) {\n if (BUILD.hydrateClientSide &&\n styleContainerNode.host &&\n (styleElm = styleContainerNode.querySelector(`[${HYDRATED_STYLE_ID}=\"${scopeId}\"]`))) {\n // This is only happening on native shadow-dom, do not needs CSS var shim\n styleElm.innerHTML = style;\n }\n else {\n styleElm = doc.createElement('style');\n styleElm.innerHTML = style;\n // Apply CSP nonce to the style tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n styleElm.setAttribute('nonce', nonce);\n }\n if (BUILD.hydrateServerSide || BUILD.hotModuleReplacement) {\n styleElm.setAttribute(HYDRATED_STYLE_ID, scopeId);\n }\n styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));\n }\n // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM\n if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {\n styleElm.innerHTML += SLOT_FB_CSS;\n }\n if (appliedStyles) {\n appliedStyles.add(scopeId);\n }\n }\n }\n else if (BUILD.constructableCSS && !styleContainerNode.adoptedStyleSheets.includes(style)) {\n styleContainerNode.adoptedStyleSheets = [...styleContainerNode.adoptedStyleSheets, style];\n }\n }\n return scopeId;\n};\nconst attachStyles = (hostRef) => {\n const cmpMeta = hostRef.$cmpMeta$;\n const elm = hostRef.$hostElement$;\n const flags = cmpMeta.$flags$;\n const endAttachStyles = createTime('attachStyles', cmpMeta.$tagName$);\n const scopeId = addStyle(BUILD.shadowDom && supportsShadow && elm.shadowRoot ? elm.shadowRoot : elm.getRootNode(), cmpMeta, hostRef.$modeName$);\n if ((BUILD.shadowDom || BUILD.scoped) && BUILD.cssAnnotations && flags & 10 /* CMP_FLAGS.needsScopedEncapsulation */) {\n // only required when we're NOT using native shadow dom (slot)\n // or this browser doesn't support native shadow dom\n // and this host element was NOT created with SSR\n // let's pick out the inner content for slot projection\n // create a node to represent where the original\n // content was first placed, which is useful later on\n // DOM WRITE!!\n elm['s-sc'] = scopeId;\n elm.classList.add(scopeId + '-h');\n if (BUILD.scoped && flags & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {\n elm.classList.add(scopeId + '-s');\n }\n }\n endAttachStyles();\n};\nconst getScopeId = (cmp, mode) => 'sc-' + (BUILD.mode && mode && cmp.$flags$ & 32 /* CMP_FLAGS.hasMode */ ? cmp.$tagName$ + '-' + mode : cmp.$tagName$);\nconst convertScopedToShadow = (css) => css.replace(/\\/\\*!@([^\\/]+)\\*\\/[^\\{]+\\{/g, '$1{');\n/**\n * Production setAccessor() function based on Preact by\n * Jason Miller (@developit)\n * Licensed under the MIT License\n * https://github.com/developit/preact/blob/master/LICENSE\n *\n * Modified for Stencil's compiler and vdom\n */\n/**\n * When running a VDom render set properties present on a VDom node onto the\n * corresponding HTML element.\n *\n * Note that this function has special functionality for the `class`,\n * `style`, `key`, and `ref` attributes, as well as event handlers (like\n * `onClick`, etc). All others are just passed through as-is.\n *\n * @param elm the HTMLElement onto which attributes should be set\n * @param memberName the name of the attribute to set\n * @param oldValue the old value for the attribute\n * @param newValue the new value for the attribute\n * @param isSvg whether we're in an svg context or not\n * @param flags bitflags for Vdom variables\n */\nconst setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {\n if (oldValue !== newValue) {\n let isProp = isMemberInElement(elm, memberName);\n let ln = memberName.toLowerCase();\n if (BUILD.vdomClass && memberName === 'class') {\n const classList = elm.classList;\n const oldClasses = parseClassList(oldValue);\n const newClasses = parseClassList(newValue);\n classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));\n classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));\n }\n else if (BUILD.vdomStyle && memberName === 'style') {\n // update style attribute, css properties and values\n if (BUILD.updatable) {\n for (const prop in oldValue) {\n if (!newValue || newValue[prop] == null) {\n if (!BUILD.hydrateServerSide && prop.includes('-')) {\n elm.style.removeProperty(prop);\n }\n else {\n elm.style[prop] = '';\n }\n }\n }\n }\n for (const prop in newValue) {\n if (!oldValue || newValue[prop] !== oldValue[prop]) {\n if (!BUILD.hydrateServerSide && prop.includes('-')) {\n elm.style.setProperty(prop, newValue[prop]);\n }\n else {\n elm.style[prop] = newValue[prop];\n }\n }\n }\n }\n else if (BUILD.vdomKey && memberName === 'key')\n ;\n else if (BUILD.vdomRef && memberName === 'ref') {\n // minifier will clean this up\n if (newValue) {\n newValue(elm);\n }\n }\n else if (BUILD.vdomListener &&\n (BUILD.lazyLoad ? !isProp : !elm.__lookupSetter__(memberName)) &&\n memberName[0] === 'o' &&\n memberName[1] === 'n') {\n // Event Handlers\n // so if the member name starts with \"on\" and the 3rd characters is\n // a capital letter, and it's not already a member on the element,\n // then we're assuming it's an event listener\n if (memberName[2] === '-') {\n // on- prefixed events\n // allows to be explicit about the dom event to listen without any magic\n // under the hood:\n // // listens for \"click\"\n // // listens for \"Click\"\n // // listens for \"ionChange\"\n // // listens for \"EVENTS\"\n memberName = memberName.slice(3);\n }\n else if (isMemberInElement(win, ln)) {\n // standard event\n // the JSX attribute could have been \"onMouseOver\" and the\n // member name \"onmouseover\" is on the window's prototype\n // so let's add the listener \"mouseover\", which is all lowercased\n memberName = ln.slice(2);\n }\n else {\n // custom event\n // the JSX attribute could have been \"onMyCustomEvent\"\n // so let's trim off the \"on\" prefix and lowercase the first character\n // and add the listener \"myCustomEvent\"\n // except for the first character, we keep the event name case\n memberName = ln[2] + memberName.slice(3);\n }\n if (oldValue || newValue) {\n // Need to account for \"capture\" events.\n // If the event name ends with \"Capture\", we'll update the name to remove\n // the \"Capture\" suffix and make sure the event listener is setup to handle the capture event.\n const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);\n // Make sure we only replace the last instance of \"Capture\"\n memberName = memberName.replace(CAPTURE_EVENT_REGEX, '');\n if (oldValue) {\n plt.rel(elm, memberName, oldValue, capture);\n }\n if (newValue) {\n plt.ael(elm, memberName, newValue, capture);\n }\n }\n }\n else if (BUILD.vdomPropOrAttr) {\n // Set property if it exists and it's not a SVG\n const isComplex = isComplexType(newValue);\n if ((isProp || (isComplex && newValue !== null)) && !isSvg) {\n try {\n if (!elm.tagName.includes('-')) {\n const n = newValue == null ? '' : newValue;\n // Workaround for Safari, moving the caret when re-assigning the same valued\n if (memberName === 'list') {\n isProp = false;\n }\n else if (oldValue == null || elm[memberName] != n) {\n elm[memberName] = n;\n }\n }\n else {\n elm[memberName] = newValue;\n }\n }\n catch (e) {\n /**\n * in case someone tries to set a read-only property, e.g. \"namespaceURI\", we just ignore it\n */\n }\n }\n /**\n * Need to manually update attribute if:\n * - memberName is not an attribute\n * - if we are rendering the host element in order to reflect attribute\n * - if it's a SVG, since properties might not work in \n * - if the newValue is null/undefined or 'false'.\n */\n let xlink = false;\n if (BUILD.vdomXlink) {\n if (ln !== (ln = ln.replace(/^xlink\\:?/, ''))) {\n memberName = ln;\n xlink = true;\n }\n }\n if (newValue == null || newValue === false) {\n if (newValue !== false || elm.getAttribute(memberName) === '') {\n if (BUILD.vdomXlink && xlink) {\n elm.removeAttributeNS(XLINK_NS, memberName);\n }\n else {\n elm.removeAttribute(memberName);\n }\n }\n }\n else if ((!isProp || flags & 4 /* VNODE_FLAGS.isHost */ || isSvg) && !isComplex) {\n newValue = newValue === true ? '' : newValue;\n if (BUILD.vdomXlink && xlink) {\n elm.setAttributeNS(XLINK_NS, memberName, newValue);\n }\n else {\n elm.setAttribute(memberName, newValue);\n }\n }\n }\n }\n};\nconst parseClassListRegex = /\\s/;\n/**\n * Parsed a string of classnames into an array\n * @param value className string, e.g. \"foo bar baz\"\n * @returns list of classes, e.g. [\"foo\", \"bar\", \"baz\"]\n */\nconst parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));\nconst CAPTURE_EVENT_SUFFIX = 'Capture';\nconst CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');\nconst updateElement = (oldVnode, newVnode, isSvgMode, memberName) => {\n // if the element passed in is a shadow root, which is a document fragment\n // then we want to be adding attrs/props to the shadow root's \"host\" element\n // if it's not a shadow root, then we add attrs/props to the same element\n const elm = newVnode.$elm$.nodeType === 11 /* NODE_TYPE.DocumentFragment */ && newVnode.$elm$.host\n ? newVnode.$elm$.host\n : newVnode.$elm$;\n const oldVnodeAttrs = (oldVnode && oldVnode.$attrs$) || EMPTY_OBJ;\n const newVnodeAttrs = newVnode.$attrs$ || EMPTY_OBJ;\n if (BUILD.updatable) {\n // remove attributes no longer present on the vnode by setting them to undefined\n for (memberName in oldVnodeAttrs) {\n if (!(memberName in newVnodeAttrs)) {\n setAccessor(elm, memberName, oldVnodeAttrs[memberName], undefined, isSvgMode, newVnode.$flags$);\n }\n }\n }\n // add new & update changed attributes\n for (memberName in newVnodeAttrs) {\n setAccessor(elm, memberName, oldVnodeAttrs[memberName], newVnodeAttrs[memberName], isSvgMode, newVnode.$flags$);\n }\n};\n/**\n * Create a DOM Node corresponding to one of the children of a given VNode.\n *\n * @param oldParentVNode the parent VNode from the previous render\n * @param newParentVNode the parent VNode from the current render\n * @param childIndex the index of the VNode, in the _new_ parent node's\n * children, for which we will create a new DOM node\n * @param parentElm the parent DOM node which our new node will be a child of\n * @returns the newly created node\n */\nconst createElm = (oldParentVNode, newParentVNode, childIndex, parentElm) => {\n var _a;\n // tslint:disable-next-line: prefer-const\n const newVNode = newParentVNode.$children$[childIndex];\n let i = 0;\n let elm;\n let childNode;\n let oldVNode;\n if (BUILD.slotRelocation && !useNativeShadowDom) {\n // remember for later we need to check to relocate nodes\n checkSlotRelocate = true;\n if (newVNode.$tag$ === 'slot') {\n if (scopeId) {\n // scoped css needs to add its scoped id to the parent element\n parentElm.classList.add(scopeId + '-s');\n }\n newVNode.$flags$ |= newVNode.$children$\n ? // slot element has fallback content\n 2 /* VNODE_FLAGS.isSlotFallback */\n : // slot element does not have fallback content\n 1 /* VNODE_FLAGS.isSlotReference */;\n }\n }\n if (BUILD.isDev && newVNode.$elm$) {\n consoleDevError(`The JSX ${newVNode.$text$ !== null ? `\"${newVNode.$text$}\" text` : `\"${newVNode.$tag$}\" element`} node should not be shared within the same renderer. The renderer caches element lookups in order to improve performance. However, a side effect from this is that the exact same JSX node should not be reused. For more information please see https://stenciljs.com/docs/templating-jsx#avoid-shared-jsx-nodes`);\n }\n if (BUILD.vdomText && newVNode.$text$ !== null) {\n // create text node\n elm = newVNode.$elm$ = doc.createTextNode(newVNode.$text$);\n }\n else if (BUILD.slotRelocation && newVNode.$flags$ & 1 /* VNODE_FLAGS.isSlotReference */) {\n // create a slot reference node\n elm = newVNode.$elm$ =\n BUILD.isDebug || BUILD.hydrateServerSide ? slotReferenceDebugNode(newVNode) : doc.createTextNode('');\n }\n else {\n if (BUILD.svg && !isSvgMode) {\n isSvgMode = newVNode.$tag$ === 'svg';\n }\n // create element\n elm = newVNode.$elm$ = (BUILD.svg\n ? doc.createElementNS(isSvgMode ? SVG_NS : HTML_NS, BUILD.slotRelocation && newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */\n ? 'slot-fb'\n : newVNode.$tag$)\n : doc.createElement(BUILD.slotRelocation && newVNode.$flags$ & 2 /* VNODE_FLAGS.isSlotFallback */\n ? 'slot-fb'\n : newVNode.$tag$));\n if (BUILD.svg && isSvgMode && newVNode.$tag$ === 'foreignObject') {\n isSvgMode = false;\n }\n // add css classes, attrs, props, listeners, etc.\n if (BUILD.vdomAttribute) {\n updateElement(null, newVNode, isSvgMode);\n }\n if ((BUILD.shadowDom || BUILD.scoped) && isDef(scopeId) && elm['s-si'] !== scopeId) {\n // if there is a scopeId and this is the initial render\n // then let's add the scopeId as a css class\n elm.classList.add((elm['s-si'] = scopeId));\n }\n if (newVNode.$children$) {\n for (i = 0; i < newVNode.$children$.length; ++i) {\n // create the node\n childNode = createElm(oldParentVNode, newVNode, i, elm);\n // return node could have been null\n if (childNode) {\n // append our new node\n elm.appendChild(childNode);\n }\n }\n }\n if (BUILD.svg) {\n if (newVNode.$tag$ === 'svg') {\n // Only reset the SVG context when we're exiting element\n isSvgMode = false;\n }\n else if (elm.tagName === 'foreignObject') {\n // Reenter SVG context when we're exiting element\n isSvgMode = true;\n }\n }\n }\n // This needs to always happen so we can hide nodes that are projected\n // to another component but don't end up in a slot\n elm['s-hn'] = hostTagName;\n if (BUILD.slotRelocation) {\n if (newVNode.$flags$ & (2 /* VNODE_FLAGS.isSlotFallback */ | 1 /* VNODE_FLAGS.isSlotReference */)) {\n // remember the content reference comment\n elm['s-sr'] = true;\n // Persist the name of the slot that this slot was going to be projected into.\n elm['s-fs'] = (_a = newVNode.$attrs$) === null || _a === void 0 ? void 0 : _a.slot;\n // remember the content reference comment\n elm['s-cr'] = contentRef;\n // remember the slot name, or empty string for default slot\n elm['s-sn'] = newVNode.$name$ || '';\n // check if we've got an old vnode for this slot\n oldVNode = oldParentVNode && oldParentVNode.$children$ && oldParentVNode.$children$[childIndex];\n if (oldVNode && oldVNode.$tag$ === newVNode.$tag$ && oldParentVNode.$elm$) {\n if (BUILD.experimentalSlotFixes) {\n // we've got an old slot vnode and the wrapper is being replaced\n // so let's move the old slot content to the root of the element currently being rendered\n relocateToHostRoot(oldParentVNode.$elm$);\n }\n else {\n // we've got an old slot vnode and the wrapper is being replaced\n // so let's move the old slot content back to its original location\n putBackInOriginalLocation(oldParentVNode.$elm$, false);\n }\n }\n }\n }\n return elm;\n};\n/**\n * Relocates all child nodes of an element that were a part of a previous slot relocation\n * to the root of the Stencil component currently being rendered. This happens when a parent\n * element of a slot reference node dynamically changes and triggers a re-render. We cannot use\n * `putBackInOriginalLocation()` because that may relocate nodes to elements that will not be re-rendered\n * and so they will not be relocated again.\n *\n * @param parentElm The element potentially containing relocated nodes.\n */\nconst relocateToHostRoot = (parentElm) => {\n plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;\n const host = parentElm.closest(hostTagName.toLowerCase());\n if (host != null) {\n for (const childNode of Array.from(parentElm.childNodes)) {\n // Only relocate nodes that were slotted in\n if (childNode['s-sh'] != null) {\n host.insertBefore(childNode, null);\n // Reset so we can correctly move the node around again.\n childNode['s-sh'] = undefined;\n // When putting an element node back in its original location,\n // we need to reset the `slot` attribute back to the value it originally had\n // so we can correctly relocate it again in the future\n if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */ && !!childNode['s-sn']) {\n childNode.setAttribute('slot', childNode['s-sn']);\n }\n // Need to tell the render pipeline to check to relocate slot content again\n checkSlotRelocate = true;\n }\n }\n }\n plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;\n};\nconst putBackInOriginalLocation = (parentElm, recursive) => {\n var _a;\n plt.$flags$ |= 1 /* PLATFORM_FLAGS.isTmpDisconnected */;\n const oldSlotChildNodes = parentElm.childNodes;\n for (let i = oldSlotChildNodes.length - 1; i >= 0; i--) {\n const childNode = oldSlotChildNodes[i];\n if (childNode['s-hn'] !== hostTagName && childNode['s-ol']) {\n // and relocate it back to it's original location\n parentReferenceNode(childNode).insertBefore(childNode, referenceNode(childNode));\n // remove the old original location comment entirely\n // later on the patch function will know what to do\n // and move this to the correct spot if need be\n childNode['s-ol'].remove();\n childNode['s-ol'] = undefined;\n // Reset so we can correctly move the node around again.\n childNode['s-sh'] = undefined;\n // When putting an element node back in its original location,\n // we need to reset the `slot` attribute back to the value it originally had\n // so we can correctly relocate it again in the future\n if (childNode.nodeType === 1 /* NODE_TYPE.ElementNode */) {\n childNode.setAttribute('slot', (_a = childNode['s-sn']) !== null && _a !== void 0 ? _a : '');\n }\n checkSlotRelocate = true;\n }\n if (recursive) {\n putBackInOriginalLocation(childNode, recursive);\n }\n }\n plt.$flags$ &= ~1 /* PLATFORM_FLAGS.isTmpDisconnected */;\n};\n/**\n * Create DOM nodes corresponding to a list of {@link d.Vnode} objects and\n * add them to the DOM in the appropriate place.\n *\n * @param parentElm the DOM node which should be used as a parent for the new\n * DOM nodes\n * @param before a child of the `parentElm` which the new children should be\n * inserted before (optional)\n * @param parentVNode the parent virtual DOM node\n * @param vnodes the new child virtual DOM nodes to produce DOM nodes for\n * @param startIdx the index in the child virtual DOM nodes at which to start\n * creating DOM nodes (inclusive)\n * @param endIdx the index in the child virtual DOM nodes at which to stop\n * creating DOM nodes (inclusive)\n */\nconst addVnodes = (parentElm, before, parentVNode, vnodes, startIdx, endIdx) => {\n let containerElm = ((BUILD.slotRelocation && parentElm['s-cr'] && parentElm['s-cr'].parentNode) || parentElm);\n let childNode;\n if (BUILD.shadowDom && containerElm.shadowRoot && containerElm.tagName === hostTagName) {\n containerElm = containerElm.shadowRoot;\n }\n for (; startIdx <= endIdx; ++startIdx) {\n if (vnodes[startIdx]) {\n childNode = createElm(null, parentVNode, startIdx, parentElm);\n if (childNode) {\n vnodes[startIdx].$elm$ = childNode;\n containerElm.insertBefore(childNode, BUILD.slotRelocation ? referenceNode(before) : before);\n }\n }\n }\n};\n/**\n * Remove the DOM elements corresponding to a list of {@link d.VNode} objects.\n * This can be used to, for instance, clean up after a list of children which\n * should no longer be shown.\n *\n * This function also handles some of Stencil's slot relocation logic.\n *\n * @param vnodes a list of virtual DOM nodes to remove\n * @param startIdx the index at which to start removing nodes (inclusive)\n * @param endIdx the index at which to stop removing nodes (inclusive)\n */\nconst removeVnodes = (vnodes, startIdx, endIdx) => {\n for (let index = startIdx; index <= endIdx; ++index) {\n const vnode = vnodes[index];\n if (vnode) {\n const elm = vnode.$elm$;\n nullifyVNodeRefs(vnode);\n if (elm) {\n if (BUILD.slotRelocation) {\n // we're removing this element\n // so it's possible we need to show slot fallback content now\n checkSlotFallbackVisibility = true;\n if (elm['s-ol']) {\n // remove the original location comment\n elm['s-ol'].remove();\n }\n else {\n // it's possible that child nodes of the node\n // that's being removed are slot nodes\n putBackInOriginalLocation(elm, true);\n }\n }\n // remove the vnode's element from the dom\n elm.remove();\n }\n }\n }\n};\n/**\n * Reconcile the children of a new VNode with the children of an old VNode by\n * traversing the two collections of children, identifying nodes that are\n * conserved or changed, calling out to `patch` to make any necessary\n * updates to the DOM, and rearranging DOM nodes as needed.\n *\n * The algorithm for reconciling children works by analyzing two 'windows' onto\n * the two arrays of children (`oldCh` and `newCh`). We keep track of the\n * 'windows' by storing start and end indices and references to the\n * corresponding array entries. Initially the two 'windows' are basically equal\n * to the entire array, but we progressively narrow the windows until there are\n * no children left to update by doing the following:\n *\n * 1. Skip any `null` entries at the beginning or end of the two arrays, so\n * that if we have an initial array like the following we'll end up dealing\n * only with a window bounded by the highlighted elements:\n *\n * [null, null, VNode1 , ... , VNode2, null, null]\n * ^^^^^^ ^^^^^^\n *\n * 2. Check to see if the elements at the head and tail positions are equal\n * across the windows. This will basically detect elements which haven't\n * been added, removed, or changed position, i.e. if you had the following\n * VNode elements (represented as HTML):\n *\n * oldVNode: `

HEY

`\n * newVNode: `

THERE

`\n *\n * Then when comparing the children of the `
` tag we check the equality\n * of the VNodes corresponding to the `

` tags and, since they are the\n * same tag in the same position, we'd be able to avoid completely\n * re-rendering the subtree under them with a new DOM element and would just\n * call out to `patch` to handle reconciling their children and so on.\n *\n * 3. Check, for both windows, to see if the element at the beginning of the\n * window corresponds to the element at the end of the other window. This is\n * a heuristic which will let us identify _some_ situations in which\n * elements have changed position, for instance it _should_ detect that the\n * children nodes themselves have not changed but merely moved in the\n * following example:\n *\n * oldVNode: `

`\n * newVNode: `
`\n *\n * If we find cases like this then we also need to move the concrete DOM\n * elements corresponding to the moved children to write the re-order to the\n * DOM.\n *\n * 4. Finally, if VNodes have the `key` attribute set on them we check for any\n * nodes in the old children which have the same key as the first element in\n * our window on the new children. If we find such a node we handle calling\n * out to `patch`, moving relevant DOM nodes, and so on, in accordance with\n * what we find.\n *\n * Finally, once we've narrowed our 'windows' to the point that either of them\n * collapse (i.e. they have length 0) we then handle any remaining VNode\n * insertion or deletion that needs to happen to get a DOM state that correctly\n * reflects the new child VNodes. If, for instance, after our window on the old\n * children has collapsed we still have more nodes on the new children that\n * we haven't dealt with yet then we need to add them, or if the new children\n * collapse but we still have unhandled _old_ children then we need to make\n * sure the corresponding DOM nodes are removed.\n *\n * @param parentElm the node into which the parent VNode is rendered\n * @param oldCh the old children of the parent node\n * @param newVNode the new VNode which will replace the parent\n * @param newCh the new children of the parent node\n * @param isInitialRender whether or not this is the first render of the vdom\n */\nconst updateChildren = (parentElm, oldCh, newVNode, newCh, isInitialRender = false) => {\n let oldStartIdx = 0;\n let newStartIdx = 0;\n let idxInOld = 0;\n let i = 0;\n let oldEndIdx = oldCh.length - 1;\n let oldStartVnode = oldCh[0];\n let oldEndVnode = oldCh[oldEndIdx];\n let newEndIdx = newCh.length - 1;\n let newStartVnode = newCh[0];\n let newEndVnode = newCh[newEndIdx];\n let node;\n let elmToMove;\n while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {\n if (oldStartVnode == null) {\n // VNode might have been moved left\n oldStartVnode = oldCh[++oldStartIdx];\n }\n else if (oldEndVnode == null) {\n oldEndVnode = oldCh[--oldEndIdx];\n }\n else if (newStartVnode == null) {\n newStartVnode = newCh[++newStartIdx];\n }\n else if (newEndVnode == null) {\n newEndVnode = newCh[--newEndIdx];\n }\n else if (isSameVnode(oldStartVnode, newStartVnode, isInitialRender)) {\n // if the start nodes are the same then we should patch the new VNode\n // onto the old one, and increment our `newStartIdx` and `oldStartIdx`\n // indices to reflect that. We don't need to move any DOM Nodes around\n // since things are matched up in order.\n patch(oldStartVnode, newStartVnode, isInitialRender);\n oldStartVnode = oldCh[++oldStartIdx];\n newStartVnode = newCh[++newStartIdx];\n }\n else if (isSameVnode(oldEndVnode, newEndVnode, isInitialRender)) {\n // likewise, if the end nodes are the same we patch new onto old and\n // decrement our end indices, and also likewise in this case we don't\n // need to move any DOM Nodes.\n patch(oldEndVnode, newEndVnode, isInitialRender);\n oldEndVnode = oldCh[--oldEndIdx];\n newEndVnode = newCh[--newEndIdx];\n }\n else if (isSameVnode(oldStartVnode, newEndVnode, isInitialRender)) {\n // case: \"Vnode moved right\"\n //\n // We've found that the last node in our window on the new children is\n // the same VNode as the _first_ node in our window on the old children\n // we're dealing with now. Visually, this is the layout of these two\n // nodes:\n //\n // newCh: [..., newStartVnode , ... , newEndVnode , ...]\n // ^^^^^^^^^^^\n // oldCh: [..., oldStartVnode , ... , oldEndVnode , ...]\n // ^^^^^^^^^^^^^\n //\n // In this situation we need to patch `newEndVnode` onto `oldStartVnode`\n // and move the DOM element for `oldStartVnode`.\n if (BUILD.slotRelocation && (oldStartVnode.$tag$ === 'slot' || newEndVnode.$tag$ === 'slot')) {\n putBackInOriginalLocation(oldStartVnode.$elm$.parentNode, false);\n }\n patch(oldStartVnode, newEndVnode, isInitialRender);\n // We need to move the element for `oldStartVnode` into a position which\n // will be appropriate for `newEndVnode`. For this we can use\n // `.insertBefore` and `oldEndVnode.$elm$.nextSibling`. If there is a\n // sibling for `oldEndVnode.$elm$` then we want to move the DOM node for\n // `oldStartVnode` between `oldEndVnode` and it's sibling, like so:\n //\n // \n // \n // \n // \n // \n // \n // ```\n // In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback\n // will be called with `newValue = \"some-value\"` and will set the shadowed property (this.someAttribute = \"another-value\")\n // to the value that was set inline i.e. \"some-value\" from above example. When\n // the connectedCallback attempts to un-shadow it will use \"some-value\" as the initial value rather than \"another-value\"\n //\n // The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed\n // by connectedCallback as this attributeChangedCallback will not fire.\n //\n // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties\n //\n // TODO(STENCIL-16) we should think about whether or not we actually want to be reflecting the attributes to\n // properties here given that this goes against best practices outlined here\n // https://developers.google.com/web/fundamentals/web-components/best-practices#avoid-reentrancy\n if (this.hasOwnProperty(propName)) {\n newValue = this[propName];\n delete this[propName];\n }\n else if (prototype.hasOwnProperty(propName) &&\n typeof this[propName] === 'number' &&\n this[propName] == newValue) {\n // if the propName exists on the prototype of `Cstr`, this update may be a result of Stencil using native\n // APIs to reflect props as attributes. Calls to `setAttribute(someElement, propName)` will result in\n // `propName` to be converted to a `DOMString`, which may not be what we want for other primitive props.\n return;\n }\n else if (propName == null) {\n // At this point we should know this is not a \"member\", so we can treat it like watching an attribute\n // on a vanilla web component\n const hostRef = getHostRef(this);\n const flags = hostRef === null || hostRef === void 0 ? void 0 : hostRef.$flags$;\n // We only want to trigger the callback(s) if:\n // 1. The instance is ready\n // 2. The watchers are ready\n // 3. The value has changed\n if (flags &&\n !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&\n flags & 128 /* HOST_FLAGS.isWatchReady */ &&\n newValue !== oldValue) {\n const elm = BUILD.lazyLoad ? hostRef.$hostElement$ : this;\n const instance = BUILD.lazyLoad ? hostRef.$lazyInstance$ : elm;\n const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];\n entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {\n if (instance[callbackName] != null) {\n instance[callbackName].call(instance, newValue, oldValue, attrName);\n }\n });\n }\n return;\n }\n this[propName] = newValue === null && typeof this[propName] === 'boolean' ? false : newValue;\n });\n };\n // Create an array of attributes to observe\n // This list in comprised of all strings used within a `@Watch()` decorator\n // on a component as well as any Stencil-specific \"members\" (`@Prop()`s and `@State()`s).\n // As such, there is no way to guarantee type-safety here that a user hasn't entered\n // an invalid attribute.\n Cstr.observedAttributes = Array.from(new Set([\n ...Object.keys((_a = cmpMeta.$watchers$) !== null && _a !== void 0 ? _a : {}),\n ...members\n .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)\n .map(([propName, m]) => {\n var _a;\n const attrName = m[1] || propName;\n attrNameToPropName.set(attrName, propName);\n if (BUILD.reflect && m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {\n (_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]);\n }\n return attrName;\n }),\n ]));\n }\n }\n return Cstr;\n};\n/**\n * Initialize a Stencil component given a reference to its host element, its\n * runtime bookkeeping data structure, runtime metadata about the component,\n * and (optionally) an HMR version ID.\n *\n * @param elm a host element\n * @param hostRef the element's runtime bookkeeping object\n * @param cmpMeta runtime metadata for the Stencil component\n * @param hmrVersionId an (optional) HMR version ID\n */\nconst initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {\n let Cstr;\n // initializeComponent\n if ((hostRef.$flags$ & 32 /* HOST_FLAGS.hasInitializedComponent */) === 0) {\n // Let the runtime know that the component has been initialized\n hostRef.$flags$ |= 32 /* HOST_FLAGS.hasInitializedComponent */;\n if (BUILD.lazyLoad || BUILD.hydrateClientSide) {\n // lazy loaded components\n // request the component's implementation to be\n // wired up with the host element\n Cstr = loadModule(cmpMeta, hostRef, hmrVersionId);\n if (Cstr.then) {\n // Await creates a micro-task avoid if possible\n const endLoad = uniqueTime(`st:load:${cmpMeta.$tagName$}:${hostRef.$modeName$}`, `[Stencil] Load module for <${cmpMeta.$tagName$}>`);\n Cstr = await Cstr;\n endLoad();\n }\n if ((BUILD.isDev || BUILD.isDebug) && !Cstr) {\n throw new Error(`Constructor for \"${cmpMeta.$tagName$}#${hostRef.$modeName$}\" was not found`);\n }\n if (BUILD.member && !Cstr.isProxied) {\n // we've never proxied this Constructor before\n // let's add the getters/setters to its prototype before\n // the first time we create an instance of the implementation\n if (BUILD.watchCallback) {\n cmpMeta.$watchers$ = Cstr.watchers;\n }\n proxyComponent(Cstr, cmpMeta, 2 /* PROXY_FLAGS.proxyState */);\n Cstr.isProxied = true;\n }\n const endNewInstance = createTime('createInstance', cmpMeta.$tagName$);\n // ok, time to construct the instance\n // but let's keep track of when we start and stop\n // so that the getters/setters don't incorrectly step on data\n if (BUILD.member) {\n hostRef.$flags$ |= 8 /* HOST_FLAGS.isConstructingInstance */;\n }\n // construct the lazy-loaded component implementation\n // passing the hostRef is very important during\n // construction in order to directly wire together the\n // host element and the lazy-loaded instance\n try {\n new Cstr(hostRef);\n }\n catch (e) {\n consoleError(e);\n }\n if (BUILD.member) {\n hostRef.$flags$ &= ~8 /* HOST_FLAGS.isConstructingInstance */;\n }\n if (BUILD.watchCallback) {\n hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */;\n }\n endNewInstance();\n fireConnectedCallback(hostRef.$lazyInstance$);\n }\n else {\n // sync constructor component\n Cstr = elm.constructor;\n // wait for the CustomElementRegistry to mark the component as ready before setting `isWatchReady`. Otherwise,\n // watchers may fire prematurely if `customElements.get()`/`customElements.whenDefined()` resolves _before_\n // Stencil has completed instantiating the component.\n customElements.whenDefined(cmpMeta.$tagName$).then(() => (hostRef.$flags$ |= 128 /* HOST_FLAGS.isWatchReady */));\n }\n if (BUILD.style && Cstr.style) {\n // this component has styles but we haven't registered them yet\n let style = Cstr.style;\n if (BUILD.mode && typeof style !== 'string') {\n style = style[(hostRef.$modeName$ = computeMode(elm))];\n if (BUILD.hydrateServerSide && hostRef.$modeName$) {\n elm.setAttribute('s-mode', hostRef.$modeName$);\n }\n }\n const scopeId = getScopeId(cmpMeta, hostRef.$modeName$);\n if (!styles.has(scopeId)) {\n const endRegisterStyles = createTime('registerStyles', cmpMeta.$tagName$);\n if (!BUILD.hydrateServerSide &&\n BUILD.shadowDom &&\n // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field\n BUILD.shadowDomShim &&\n cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) {\n style = await import('./shadow-css.js').then((m) => m.scopeCss(style, scopeId, false));\n }\n registerStyle(scopeId, style, !!(cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */));\n endRegisterStyles();\n }\n }\n }\n // we've successfully created a lazy instance\n const ancestorComponent = hostRef.$ancestorComponent$;\n const schedule = () => scheduleUpdate(hostRef, true);\n if (BUILD.asyncLoading && ancestorComponent && ancestorComponent['s-rc']) {\n // this is the initial load and this component it has an ancestor component\n // but the ancestor component has NOT fired its will update lifecycle yet\n // so let's just cool our jets and wait for the ancestor to continue first\n // this will get fired off when the ancestor component\n // finally gets around to rendering its lazy self\n // fire off the initial update\n ancestorComponent['s-rc'].push(schedule);\n }\n else {\n schedule();\n }\n};\nconst fireConnectedCallback = (instance) => {\n if (BUILD.lazyLoad && BUILD.connectedCallback) {\n safeCall(instance, 'connectedCallback');\n }\n};\nconst connectedCallback = (elm) => {\n if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {\n const hostRef = getHostRef(elm);\n const cmpMeta = hostRef.$cmpMeta$;\n const endConnected = createTime('connectedCallback', cmpMeta.$tagName$);\n if (BUILD.hostListenerTargetParent) {\n // only run if we have listeners being attached to a parent\n addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, true);\n }\n if (!(hostRef.$flags$ & 1 /* HOST_FLAGS.hasConnected */)) {\n // first time this component has connected\n hostRef.$flags$ |= 1 /* HOST_FLAGS.hasConnected */;\n let hostId;\n if (BUILD.hydrateClientSide) {\n hostId = elm.getAttribute(HYDRATE_ID);\n if (hostId) {\n if (BUILD.shadowDom && supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {\n const scopeId = BUILD.mode\n ? addStyle(elm.shadowRoot, cmpMeta, elm.getAttribute('s-mode'))\n : addStyle(elm.shadowRoot, cmpMeta);\n elm.classList.remove(scopeId + '-h', scopeId + '-s');\n }\n initializeClientHydrate(elm, cmpMeta.$tagName$, hostId, hostRef);\n }\n }\n if (BUILD.slotRelocation && !hostId) {\n // initUpdate\n // if the slot polyfill is required we'll need to put some nodes\n // in here to act as original content anchors as we move nodes around\n // host element has been connected to the DOM\n if (BUILD.hydrateServerSide ||\n ((BUILD.slot || BUILD.shadowDom) &&\n // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field\n cmpMeta.$flags$ & (4 /* CMP_FLAGS.hasSlotRelocation */ | 8 /* CMP_FLAGS.needsShadowDomShim */))) {\n setContentReference(elm);\n }\n }\n if (BUILD.asyncLoading) {\n // find the first ancestor component (if there is one) and register\n // this component as one of the actively loading child components for its ancestor\n let ancestorComponent = elm;\n while ((ancestorComponent = ancestorComponent.parentNode || ancestorComponent.host)) {\n // climb up the ancestors looking for the first\n // component that hasn't finished its lifecycle update yet\n if ((BUILD.hydrateClientSide &&\n ancestorComponent.nodeType === 1 /* NODE_TYPE.ElementNode */ &&\n ancestorComponent.hasAttribute('s-id') &&\n ancestorComponent['s-p']) ||\n ancestorComponent['s-p']) {\n // we found this components first ancestor component\n // keep a reference to this component's ancestor component\n attachToAncestor(hostRef, (hostRef.$ancestorComponent$ = ancestorComponent));\n break;\n }\n }\n }\n // Lazy properties\n // https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties\n if (BUILD.prop && !BUILD.hydrateServerSide && cmpMeta.$members$) {\n Object.entries(cmpMeta.$members$).map(([memberName, [memberFlags]]) => {\n if (memberFlags & 31 /* MEMBER_FLAGS.Prop */ && elm.hasOwnProperty(memberName)) {\n const value = elm[memberName];\n delete elm[memberName];\n elm[memberName] = value;\n }\n });\n }\n if (BUILD.initializeNextTick) {\n // connectedCallback, taskQueue, initialLoad\n // angular sets attribute AFTER connectCallback\n // https://github.com/angular/angular/issues/18909\n // https://github.com/angular/angular/issues/19940\n nextTick(() => initializeComponent(elm, hostRef, cmpMeta));\n }\n else {\n initializeComponent(elm, hostRef, cmpMeta);\n }\n }\n else {\n // not the first time this has connected\n // reattach any event listeners to the host\n // since they would have been removed when disconnected\n addHostEventListeners(elm, hostRef, cmpMeta.$listeners$, false);\n // fire off connectedCallback() on component instance\n if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {\n fireConnectedCallback(hostRef.$lazyInstance$);\n }\n else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {\n hostRef.$onReadyPromise$.then(() => fireConnectedCallback(hostRef.$lazyInstance$));\n }\n }\n endConnected();\n }\n};\nconst setContentReference = (elm) => {\n // only required when we're NOT using native shadow dom (slot)\n // or this browser doesn't support native shadow dom\n // and this host element was NOT created with SSR\n // let's pick out the inner content for slot projection\n // create a node to represent where the original\n // content was first placed, which is useful later on\n const contentRefElm = (elm['s-cr'] = doc.createComment(BUILD.isDebug ? `content-ref (host=${elm.localName})` : ''));\n contentRefElm['s-cn'] = true;\n elm.insertBefore(contentRefElm, elm.firstChild);\n};\nconst disconnectInstance = (instance) => {\n if (BUILD.lazyLoad && BUILD.disconnectedCallback) {\n safeCall(instance, 'disconnectedCallback');\n }\n if (BUILD.cmpDidUnload) {\n safeCall(instance, 'componentDidUnload');\n }\n};\nconst disconnectedCallback = async (elm) => {\n if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0) {\n const hostRef = getHostRef(elm);\n if (BUILD.hostListener) {\n if (hostRef.$rmListeners$) {\n hostRef.$rmListeners$.map((rmListener) => rmListener());\n hostRef.$rmListeners$ = undefined;\n }\n }\n if (!BUILD.lazyLoad) {\n disconnectInstance(elm);\n }\n else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$lazyInstance$) {\n disconnectInstance(hostRef.$lazyInstance$);\n }\n else if (hostRef === null || hostRef === void 0 ? void 0 : hostRef.$onReadyPromise$) {\n hostRef.$onReadyPromise$.then(() => disconnectInstance(hostRef.$lazyInstance$));\n }\n }\n};\nconst patchPseudoShadowDom = (hostElementPrototype, descriptorPrototype) => {\n patchCloneNode(hostElementPrototype);\n patchSlotAppendChild(hostElementPrototype);\n patchSlotAppend(hostElementPrototype);\n patchSlotPrepend(hostElementPrototype);\n patchSlotInsertAdjacentElement(hostElementPrototype);\n patchSlotInsertAdjacentHTML(hostElementPrototype);\n patchSlotInsertAdjacentText(hostElementPrototype);\n patchTextContent(hostElementPrototype);\n patchChildSlotNodes(hostElementPrototype, descriptorPrototype);\n patchSlotRemoveChild(hostElementPrototype);\n};\nconst patchCloneNode = (HostElementPrototype) => {\n const orgCloneNode = HostElementPrototype.cloneNode;\n HostElementPrototype.cloneNode = function (deep) {\n const srcNode = this;\n const isShadowDom = BUILD.shadowDom ? srcNode.shadowRoot && supportsShadow : false;\n const clonedNode = orgCloneNode.call(srcNode, isShadowDom ? deep : false);\n if (BUILD.slot && !isShadowDom && deep) {\n let i = 0;\n let slotted, nonStencilNode;\n const stencilPrivates = [\n 's-id',\n 's-cr',\n 's-lr',\n 's-rc',\n 's-sc',\n 's-p',\n 's-cn',\n 's-sr',\n 's-sn',\n 's-hn',\n 's-ol',\n 's-nr',\n 's-si',\n ];\n for (; i < srcNode.childNodes.length; i++) {\n slotted = srcNode.childNodes[i]['s-nr'];\n nonStencilNode = stencilPrivates.every((privateField) => !srcNode.childNodes[i][privateField]);\n if (slotted) {\n if (BUILD.appendChildSlotFix && clonedNode.__appendChild) {\n clonedNode.__appendChild(slotted.cloneNode(true));\n }\n else {\n clonedNode.appendChild(slotted.cloneNode(true));\n }\n }\n if (nonStencilNode) {\n clonedNode.appendChild(srcNode.childNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\n/**\n * Patches the `appendChild` method on a `scoped` Stencil component.\n * The patch will attempt to find a slot with the same name as the node being appended\n * and insert it into the slot reference if found. Otherwise, it falls-back to the original\n * `appendChild` method.\n *\n * @param HostElementPrototype The Stencil component to be patched\n */\nconst patchSlotAppendChild = (HostElementPrototype) => {\n HostElementPrototype.__appendChild = HostElementPrototype.appendChild;\n HostElementPrototype.appendChild = function (newChild) {\n const slotName = (newChild['s-sn'] = getSlotName(newChild));\n const slotNode = getHostSlotNode(this.childNodes, slotName);\n if (slotNode) {\n const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);\n const appendAfter = slotChildNodes[slotChildNodes.length - 1];\n appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);\n // Check if there is fallback content that should be hidden\n updateFallbackSlotVisibility(this);\n return;\n }\n return this.__appendChild(newChild);\n };\n};\n/**\n * Patches the `removeChild` method on a `scoped` Stencil component.\n * This patch attempts to remove the specified node from a slot reference\n * if the slot exists. Otherwise, it falls-back to the original `removeChild` method.\n *\n * @param ElementPrototype The Stencil component to be patched\n */\nconst patchSlotRemoveChild = (ElementPrototype) => {\n ElementPrototype.__removeChild = ElementPrototype.removeChild;\n ElementPrototype.removeChild = function (toRemove) {\n if (toRemove && typeof toRemove['s-sn'] !== 'undefined') {\n const slotNode = getHostSlotNode(this.childNodes, toRemove['s-sn']);\n if (slotNode) {\n // Get all slot content\n const slotChildNodes = getHostSlotChildNodes(slotNode, toRemove['s-sn']);\n // See if any of the slotted content matches the node to remove\n const existingNode = slotChildNodes.find((n) => n === toRemove);\n if (existingNode) {\n existingNode.remove();\n // Check if there is fallback content that should be displayed if that\n // was the last node in the slot\n updateFallbackSlotVisibility(this);\n return;\n }\n }\n }\n return this.__removeChild(toRemove);\n };\n};\n/**\n * Patches the `prepend` method for a slotted node inside a scoped component.\n *\n * @param HostElementPrototype the `Element` to be patched\n */\nconst patchSlotPrepend = (HostElementPrototype) => {\n const originalPrepend = HostElementPrototype.prepend;\n HostElementPrototype.prepend = function (...newChildren) {\n newChildren.forEach((newChild) => {\n if (typeof newChild === 'string') {\n newChild = this.ownerDocument.createTextNode(newChild);\n }\n const slotName = (newChild['s-sn'] = getSlotName(newChild));\n const slotNode = getHostSlotNode(this.childNodes, slotName);\n if (slotNode) {\n const slotPlaceholder = document.createTextNode('');\n slotPlaceholder['s-nr'] = newChild;\n slotNode['s-cr'].parentNode.__appendChild(slotPlaceholder);\n newChild['s-ol'] = slotPlaceholder;\n const slotChildNodes = getHostSlotChildNodes(slotNode, slotName);\n const appendAfter = slotChildNodes[0];\n return appendAfter.parentNode.insertBefore(newChild, appendAfter.nextSibling);\n }\n if (newChild.nodeType === 1 && !!newChild.getAttribute('slot')) {\n newChild.hidden = true;\n }\n return originalPrepend.call(this, newChild);\n });\n };\n};\n/**\n * Patches the `append` method for a slotted node inside a scoped component. The patched method uses\n * `appendChild` under-the-hood while creating text nodes for any new children that passed as bare strings.\n *\n * @param HostElementPrototype the `Element` to be patched\n */\nconst patchSlotAppend = (HostElementPrototype) => {\n HostElementPrototype.append = function (...newChildren) {\n newChildren.forEach((newChild) => {\n if (typeof newChild === 'string') {\n newChild = this.ownerDocument.createTextNode(newChild);\n }\n this.appendChild(newChild);\n });\n };\n};\n/**\n * Patches the `insertAdjacentHTML` method for a slotted node inside a scoped component. Specifically,\n * we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the element\n * gets inserted into the DOM in the correct location.\n *\n * @param HostElementPrototype the `Element` to be patched\n */\nconst patchSlotInsertAdjacentHTML = (HostElementPrototype) => {\n const originalInsertAdjacentHtml = HostElementPrototype.insertAdjacentHTML;\n HostElementPrototype.insertAdjacentHTML = function (position, text) {\n if (position !== 'afterbegin' && position !== 'beforeend') {\n return originalInsertAdjacentHtml.call(this, position, text);\n }\n const container = this.ownerDocument.createElement('_');\n let node;\n container.innerHTML = text;\n if (position === 'afterbegin') {\n while ((node = container.firstChild)) {\n this.prepend(node);\n }\n }\n else if (position === 'beforeend') {\n while ((node = container.firstChild)) {\n this.append(node);\n }\n }\n };\n};\n/**\n * Patches the `insertAdjacentText` method for a slotted node inside a scoped component. Specifically,\n * we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the text node\n * gets inserted into the DOM in the correct location.\n *\n * @param HostElementPrototype the `Element` to be patched\n */\nconst patchSlotInsertAdjacentText = (HostElementPrototype) => {\n HostElementPrototype.insertAdjacentText = function (position, text) {\n this.insertAdjacentHTML(position, text);\n };\n};\n/**\n * Patches the `insertAdjacentElement` method for a slotted node inside a scoped component. Specifically,\n * we only need to patch the behavior for the specific `beforeend` and `afterbegin` positions so the element\n * gets inserted into the DOM in the correct location.\n *\n * @param HostElementPrototype the `Element` to be patched\n */\nconst patchSlotInsertAdjacentElement = (HostElementPrototype) => {\n const originalInsertAdjacentElement = HostElementPrototype.insertAdjacentElement;\n HostElementPrototype.insertAdjacentElement = function (position, element) {\n if (position !== 'afterbegin' && position !== 'beforeend') {\n return originalInsertAdjacentElement.call(this, position, element);\n }\n if (position === 'afterbegin') {\n this.prepend(element);\n return element;\n }\n else if (position === 'beforeend') {\n this.append(element);\n return element;\n }\n return element;\n };\n};\n/**\n * Patches the text content of an unnamed slotted node inside a scoped component\n * @param hostElementPrototype the `Element` to be patched\n */\nconst patchTextContent = (hostElementPrototype) => {\n const descriptor = Object.getOwnPropertyDescriptor(Node.prototype, 'textContent');\n Object.defineProperty(hostElementPrototype, '__textContent', descriptor);\n if (BUILD.experimentalSlotFixes) {\n // Patch `textContent` to mimic shadow root behavior\n Object.defineProperty(hostElementPrototype, 'textContent', {\n // To mimic shadow root behavior, we need to return the text content of all\n // nodes in a slot reference node\n get() {\n const slotRefNodes = getAllChildSlotNodes(this.childNodes);\n const textContent = slotRefNodes\n .map((node) => {\n var _a, _b;\n const text = [];\n // Need to get the text content of all nodes in the slot reference node\n let slotContent = node.nextSibling;\n while (slotContent && slotContent['s-sn'] === node['s-sn']) {\n if (slotContent.nodeType === 3 /* NODE_TYPES.TEXT_NODE */ || slotContent.nodeType === 1 /* NODE_TYPES.ELEMENT_NODE */) {\n text.push((_b = (_a = slotContent.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : '');\n }\n slotContent = slotContent.nextSibling;\n }\n return text.filter((ref) => ref !== '').join(' ');\n })\n .filter((text) => text !== '')\n .join(' ');\n // Pad the string to return\n return ' ' + textContent + ' ';\n },\n // To mimic shadow root behavior, we need to overwrite all nodes in a slot\n // reference node. If a default slot reference node exists, the text content will be\n // placed there. Otherwise, the new text node will be hidden\n set(value) {\n const slotRefNodes = getAllChildSlotNodes(this.childNodes);\n slotRefNodes.forEach((node) => {\n // Remove the existing content of the slot\n let slotContent = node.nextSibling;\n while (slotContent && slotContent['s-sn'] === node['s-sn']) {\n const tmp = slotContent;\n slotContent = slotContent.nextSibling;\n tmp.remove();\n }\n // If this is a default slot, add the text node in the slot location.\n // Otherwise, destroy the slot reference node\n if (node['s-sn'] === '') {\n const textNode = this.ownerDocument.createTextNode(value);\n textNode['s-sn'] = '';\n node.parentElement.insertBefore(textNode, node.nextSibling);\n }\n else {\n node.remove();\n }\n });\n },\n });\n }\n else {\n Object.defineProperty(hostElementPrototype, 'textContent', {\n get() {\n var _a;\n // get the 'default slot', which would be the first slot in a shadow tree (if we were using one), whose name is\n // the empty string\n const slotNode = getHostSlotNode(this.childNodes, '');\n // when a slot node is found, the textContent _may_ be found in the next sibling (text) node, depending on how\n // nodes were reordered during the vdom render. first try to get the text content from the sibling.\n if (((_a = slotNode === null || slotNode === void 0 ? void 0 : slotNode.nextSibling) === null || _a === void 0 ? void 0 : _a.nodeType) === 3 /* NODE_TYPES.TEXT_NODE */) {\n return slotNode.nextSibling.textContent;\n }\n else if (slotNode) {\n return slotNode.textContent;\n }\n else {\n // fallback to the original implementation\n return this.__textContent;\n }\n },\n set(value) {\n var _a;\n // get the 'default slot', which would be the first slot in a shadow tree (if we were using one), whose name is\n // the empty string\n const slotNode = getHostSlotNode(this.childNodes, '');\n // when a slot node is found, the textContent _may_ need to be placed in the next sibling (text) node,\n // depending on how nodes were reordered during the vdom render. first try to set the text content on the\n // sibling.\n if (((_a = slotNode === null || slotNode === void 0 ? void 0 : slotNode.nextSibling) === null || _a === void 0 ? void 0 : _a.nodeType) === 3 /* NODE_TYPES.TEXT_NODE */) {\n slotNode.nextSibling.textContent = value;\n }\n else if (slotNode) {\n slotNode.textContent = value;\n }\n else {\n // we couldn't find a slot, but that doesn't mean that there isn't one. if this check ran before the DOM\n // loaded, we could have missed it. check for a content reference element on the scoped component and insert\n // it there\n this.__textContent = value;\n const contentRefElm = this['s-cr'];\n if (contentRefElm) {\n this.insertBefore(contentRefElm, this.firstChild);\n }\n }\n },\n });\n }\n};\nconst patchChildSlotNodes = (elm, cmpMeta) => {\n class FakeNodeList extends Array {\n item(n) {\n return this[n];\n }\n }\n // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field\n if (cmpMeta.$flags$ & 8 /* CMP_FLAGS.needsShadowDomShim */) {\n const childNodesFn = elm.__lookupGetter__('childNodes');\n Object.defineProperty(elm, 'children', {\n get() {\n return this.childNodes.map((n) => n.nodeType === 1);\n },\n });\n Object.defineProperty(elm, 'childElementCount', {\n get() {\n return elm.children.length;\n },\n });\n Object.defineProperty(elm, 'childNodes', {\n get() {\n const childNodes = childNodesFn.call(this);\n if ((plt.$flags$ & 1 /* PLATFORM_FLAGS.isTmpDisconnected */) === 0 &&\n getHostRef(this).$flags$ & 2 /* HOST_FLAGS.hasRendered */) {\n const result = new FakeNodeList();\n for (let i = 0; i < childNodes.length; i++) {\n const slot = childNodes[i]['s-nr'];\n if (slot) {\n result.push(slot);\n }\n }\n return result;\n }\n return FakeNodeList.from(childNodes);\n },\n });\n }\n};\n/**\n * Recursively finds all slot reference nodes ('s-sr') in a series of child nodes.\n *\n * @param childNodes The set of child nodes to search for slot reference nodes.\n * @returns An array of slot reference nodes.\n */\nconst getAllChildSlotNodes = (childNodes) => {\n const slotRefNodes = [];\n for (const childNode of Array.from(childNodes)) {\n if (childNode['s-sr']) {\n slotRefNodes.push(childNode);\n }\n slotRefNodes.push(...getAllChildSlotNodes(childNode.childNodes));\n }\n return slotRefNodes;\n};\nconst getSlotName = (node) => node['s-sn'] || (node.nodeType === 1 && node.getAttribute('slot')) || '';\n/**\n * Recursively searches a series of child nodes for a slot with the provided name.\n * @param childNodes the nodes to search for a slot with a specific name.\n * @param slotName the name of the slot to match on.\n * @returns a reference to the slot node that matches the provided name, `null` otherwise\n */\nconst getHostSlotNode = (childNodes, slotName) => {\n let i = 0;\n let childNode;\n for (; i < childNodes.length; i++) {\n childNode = childNodes[i];\n if (childNode['s-sr'] && childNode['s-sn'] === slotName) {\n return childNode;\n }\n childNode = getHostSlotNode(childNode.childNodes, slotName);\n if (childNode) {\n return childNode;\n }\n }\n return null;\n};\nconst getHostSlotChildNodes = (n, slotName) => {\n const childNodes = [n];\n while ((n = n.nextSibling) && n['s-sn'] === slotName) {\n childNodes.push(n);\n }\n return childNodes;\n};\nconst defineCustomElement = (Cstr, compactMeta) => {\n customElements.define(compactMeta[1], proxyCustomElement(Cstr, compactMeta));\n};\nconst proxyCustomElement = (Cstr, compactMeta) => {\n const cmpMeta = {\n $flags$: compactMeta[0],\n $tagName$: compactMeta[1],\n };\n if (BUILD.member) {\n cmpMeta.$members$ = compactMeta[2];\n }\n if (BUILD.hostListener) {\n cmpMeta.$listeners$ = compactMeta[3];\n }\n if (BUILD.watchCallback) {\n cmpMeta.$watchers$ = Cstr.$watchers$;\n }\n if (BUILD.reflect) {\n cmpMeta.$attrsToReflect$ = [];\n }\n if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {\n // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field\n cmpMeta.$flags$ |= 8 /* CMP_FLAGS.needsShadowDomShim */;\n }\n // TODO(STENCIL-914): this check and `else` block can go away and be replaced by just the `scoped` check\n if (BUILD.experimentalSlotFixes && BUILD.scoped && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {\n patchPseudoShadowDom(Cstr.prototype, cmpMeta);\n }\n else {\n if (BUILD.slotChildNodesFix) {\n patchChildSlotNodes(Cstr.prototype, cmpMeta);\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNode(Cstr.prototype);\n }\n if (BUILD.appendChildSlotFix) {\n patchSlotAppendChild(Cstr.prototype);\n }\n if (BUILD.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {\n patchTextContent(Cstr.prototype);\n }\n }\n const originalConnectedCallback = Cstr.prototype.connectedCallback;\n const originalDisconnectedCallback = Cstr.prototype.disconnectedCallback;\n Object.assign(Cstr.prototype, {\n __registerHost() {\n registerHost(this, cmpMeta);\n },\n connectedCallback() {\n connectedCallback(this);\n if (BUILD.connectedCallback && originalConnectedCallback) {\n originalConnectedCallback.call(this);\n }\n },\n disconnectedCallback() {\n disconnectedCallback(this);\n if (BUILD.disconnectedCallback && originalDisconnectedCallback) {\n originalDisconnectedCallback.call(this);\n }\n },\n __attachShadow() {\n if (supportsShadow) {\n if (BUILD.shadowDelegatesFocus) {\n this.attachShadow({\n mode: 'open',\n delegatesFocus: !!(cmpMeta.$flags$ & 16 /* CMP_FLAGS.shadowDelegatesFocus */),\n });\n }\n else {\n this.attachShadow({ mode: 'open' });\n }\n }\n else {\n this.shadowRoot = this;\n }\n },\n });\n Cstr.is = cmpMeta.$tagName$;\n return proxyComponent(Cstr, cmpMeta, 1 /* PROXY_FLAGS.isElementConstructor */ | 2 /* PROXY_FLAGS.proxyState */);\n};\nconst forceModeUpdate = (elm) => {\n if (BUILD.style && BUILD.mode && !BUILD.lazyLoad) {\n const mode = computeMode(elm);\n const hostRef = getHostRef(elm);\n if (hostRef.$modeName$ !== mode) {\n const cmpMeta = hostRef.$cmpMeta$;\n const oldScopeId = elm['s-sc'];\n const scopeId = getScopeId(cmpMeta, mode);\n const style = elm.constructor.style[mode];\n const flags = cmpMeta.$flags$;\n if (style) {\n if (!styles.has(scopeId)) {\n registerStyle(scopeId, style, !!(flags & 1 /* CMP_FLAGS.shadowDomEncapsulation */));\n }\n hostRef.$modeName$ = mode;\n elm.classList.remove(oldScopeId + '-h', oldScopeId + '-s');\n attachStyles(hostRef);\n forceUpdate(elm);\n }\n }\n }\n};\n/**\n * Kick off hot-module-replacement for a component. In order to replace the\n * component in-place we:\n *\n * 1. get a reference to the {@link d.HostRef} for the element\n * 2. reset the element's runtime flags\n * 3. re-run the initialization logic for the element (via\n * {@link initializeComponent})\n *\n * @param hostElement the host element for the component which we want to start\n * doing HMR\n * @param cmpMeta runtime metadata for the component\n * @param hmrVersionId the current HMR version ID\n */\nconst hmrStart = (hostElement, cmpMeta, hmrVersionId) => {\n // ¯\\_(ツ)_/¯\n const hostRef = getHostRef(hostElement);\n // reset state flags to only have been connected\n hostRef.$flags$ = 1 /* HOST_FLAGS.hasConnected */;\n // TODO\n // detach any event listeners that may have been added\n // because we're not passing an exact event name it'll\n // remove all of this element's event, which is good\n // re-initialize the component\n initializeComponent(hostElement, hostRef, cmpMeta, hmrVersionId);\n};\nconst bootstrapLazy = (lazyBundles, options = {}) => {\n var _a;\n if (BUILD.profile && performance.mark) {\n performance.mark('st:app:start');\n }\n installDevTools();\n const endBootstrap = createTime('bootstrapLazy');\n const cmpTags = [];\n const exclude = options.exclude || [];\n const customElements = win.customElements;\n const head = doc.head;\n const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');\n const dataStyles = /*@__PURE__*/ doc.createElement('style');\n const deferredConnectedCallbacks = [];\n const styles = /*@__PURE__*/ doc.querySelectorAll(`[${HYDRATED_STYLE_ID}]`);\n let appLoadFallback;\n let isBootstrapping = true;\n let i = 0;\n Object.assign(plt, options);\n plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;\n if (BUILD.asyncQueue) {\n if (options.syncQueue) {\n plt.$flags$ |= 4 /* PLATFORM_FLAGS.queueSync */;\n }\n }\n if (BUILD.hydrateClientSide) {\n // If the app is already hydrated there is not point to disable the\n // async queue. This will improve the first input delay\n plt.$flags$ |= 2 /* PLATFORM_FLAGS.appLoaded */;\n }\n if (BUILD.hydrateClientSide && BUILD.shadowDom) {\n for (; i < styles.length; i++) {\n registerStyle(styles[i].getAttribute(HYDRATED_STYLE_ID), convertScopedToShadow(styles[i].innerHTML), true);\n }\n }\n let hasSlotRelocation = false;\n lazyBundles.map((lazyBundle) => {\n lazyBundle[1].map((compactMeta) => {\n var _a;\n const cmpMeta = {\n $flags$: compactMeta[0],\n $tagName$: compactMeta[1],\n $members$: compactMeta[2],\n $listeners$: compactMeta[3],\n };\n // Check if we are using slots outside the shadow DOM in this component.\n // We'll use this information later to add styles for `slot-fb` elements\n if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {\n hasSlotRelocation = true;\n }\n if (BUILD.member) {\n cmpMeta.$members$ = compactMeta[2];\n }\n if (BUILD.hostListener) {\n cmpMeta.$listeners$ = compactMeta[3];\n }\n if (BUILD.reflect) {\n cmpMeta.$attrsToReflect$ = [];\n }\n if (BUILD.watchCallback) {\n cmpMeta.$watchers$ = (_a = compactMeta[4]) !== null && _a !== void 0 ? _a : {};\n }\n if (BUILD.shadowDom && !supportsShadow && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {\n // TODO(STENCIL-854): Remove code related to legacy shadowDomShim field\n cmpMeta.$flags$ |= 8 /* CMP_FLAGS.needsShadowDomShim */;\n }\n const tagName = BUILD.transformTagName && options.transformTagName\n ? options.transformTagName(cmpMeta.$tagName$)\n : cmpMeta.$tagName$;\n const HostElement = class extends HTMLElement {\n // StencilLazyHost\n constructor(self) {\n // @ts-ignore\n super(self);\n self = this;\n registerHost(self, cmpMeta);\n if (BUILD.shadowDom && cmpMeta.$flags$ & 1 /* CMP_FLAGS.shadowDomEncapsulation */) {\n // this component is using shadow dom\n // and this browser supports shadow dom\n // add the read-only property \"shadowRoot\" to the host element\n // adding the shadow root build conditionals to minimize runtime\n if (supportsShadow) {\n if (BUILD.shadowDelegatesFocus) {\n self.attachShadow({\n mode: 'open',\n delegatesFocus: !!(cmpMeta.$flags$ & 16 /* CMP_FLAGS.shadowDelegatesFocus */),\n });\n }\n else {\n self.attachShadow({ mode: 'open' });\n }\n }\n else if (!BUILD.hydrateServerSide && !('shadowRoot' in self)) {\n self.shadowRoot = self;\n }\n }\n }\n connectedCallback() {\n if (appLoadFallback) {\n clearTimeout(appLoadFallback);\n appLoadFallback = null;\n }\n if (isBootstrapping) {\n // connectedCallback will be processed once all components have been registered\n deferredConnectedCallbacks.push(this);\n }\n else {\n plt.jmp(() => connectedCallback(this));\n }\n }\n disconnectedCallback() {\n plt.jmp(() => disconnectedCallback(this));\n }\n componentOnReady() {\n return getHostRef(this).$onReadyPromise$;\n }\n };\n // TODO(STENCIL-914): this check and `else` block can go away and be replaced by just the `scoped` check\n if (BUILD.experimentalSlotFixes && BUILD.scoped && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {\n patchPseudoShadowDom(HostElement.prototype, cmpMeta);\n }\n else {\n if (BUILD.slotChildNodesFix) {\n patchChildSlotNodes(HostElement.prototype, cmpMeta);\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNode(HostElement.prototype);\n }\n if (BUILD.appendChildSlotFix) {\n patchSlotAppendChild(HostElement.prototype);\n }\n if (BUILD.scopedSlotTextContentFix && cmpMeta.$flags$ & 2 /* CMP_FLAGS.scopedCssEncapsulation */) {\n patchTextContent(HostElement.prototype);\n }\n }\n // if the component is formAssociated we need to set that on the host\n // element so that it will be ready for `attachInternals` to be called on\n // it later on\n if (BUILD.formAssociated && cmpMeta.$flags$ & 64 /* CMP_FLAGS.formAssociated */) {\n HostElement.formAssociated = true;\n }\n if (BUILD.hotModuleReplacement) {\n // if we're in an HMR dev build then we need to set up the callback\n // which will carry out the work of actually replacing the module for\n // this particular component\n HostElement.prototype['s-hmr'] = function (hmrVersionId) {\n hmrStart(this, cmpMeta, hmrVersionId);\n };\n }\n cmpMeta.$lazyBundleId$ = lazyBundle[0];\n if (!exclude.includes(tagName) && !customElements.get(tagName)) {\n cmpTags.push(tagName);\n customElements.define(tagName, proxyComponent(HostElement, cmpMeta, 1 /* PROXY_FLAGS.isElementConstructor */));\n }\n });\n });\n // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM\n if (hasSlotRelocation) {\n dataStyles.innerHTML += SLOT_FB_CSS;\n }\n // Add hydration styles\n if (BUILD.invisiblePrehydration && (BUILD.hydratedClass || BUILD.hydratedAttribute)) {\n dataStyles.innerHTML += cmpTags + HYDRATED_CSS;\n }\n // If we have styles, add them to the DOM\n if (dataStyles.innerHTML.length) {\n dataStyles.setAttribute('data-styles', '');\n // Apply CSP nonce to the style tag if it exists\n const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);\n if (nonce != null) {\n dataStyles.setAttribute('nonce', nonce);\n }\n // Insert the styles into the document head\n // NOTE: this _needs_ to happen last so we can ensure the nonce (and other attributes) are applied\n head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);\n }\n // Process deferred connectedCallbacks now all components have been registered\n isBootstrapping = false;\n if (deferredConnectedCallbacks.length) {\n deferredConnectedCallbacks.map((host) => host.connectedCallback());\n }\n else {\n if (BUILD.profile) {\n plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30, 'timeout')));\n }\n else {\n plt.jmp(() => (appLoadFallback = setTimeout(appDidLoad, 30)));\n }\n }\n // Fallback appLoad event\n endBootstrap();\n};\nconst Fragment = (_, children) => children;\nconst addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {\n if (BUILD.hostListener && listeners) {\n // this is called immediately within the element's constructor\n // initialize our event listeners on the host element\n // we do this now so that we can listen to events that may\n // have fired even before the instance is ready\n if (BUILD.hostListenerTargetParent) {\n // this component may have event listeners that should be attached to the parent\n if (attachParentListeners) {\n // this is being ran from within the connectedCallback\n // which is important so that we know the host element actually has a parent element\n // filter out the listeners to only have the ones that ARE being attached to the parent\n listeners = listeners.filter(([flags]) => flags & 32 /* LISTENER_FLAGS.TargetParent */);\n }\n else {\n // this is being ran from within the component constructor\n // everything BUT the parent element listeners should be attached at this time\n // filter out the listeners that are NOT being attached to the parent\n listeners = listeners.filter(([flags]) => !(flags & 32 /* LISTENER_FLAGS.TargetParent */));\n }\n }\n listeners.map(([flags, name, method]) => {\n const target = BUILD.hostListenerTarget ? getHostListenerTarget(elm, flags) : elm;\n const handler = hostListenerProxy(hostRef, method);\n const opts = hostListenerOpts(flags);\n plt.ael(target, name, handler, opts);\n (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));\n });\n }\n};\nconst hostListenerProxy = (hostRef, methodName) => (ev) => {\n try {\n if (BUILD.lazyLoad) {\n if (hostRef.$flags$ & 256 /* HOST_FLAGS.isListenReady */) {\n // instance is ready, let's call it's member method for this event\n hostRef.$lazyInstance$[methodName](ev);\n }\n else {\n (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);\n }\n }\n else {\n hostRef.$hostElement$[methodName](ev);\n }\n }\n catch (e) {\n consoleError(e);\n }\n};\nconst getHostListenerTarget = (elm, flags) => {\n if (BUILD.hostListenerTargetDocument && flags & 4 /* LISTENER_FLAGS.TargetDocument */)\n return doc;\n if (BUILD.hostListenerTargetWindow && flags & 8 /* LISTENER_FLAGS.TargetWindow */)\n return win;\n if (BUILD.hostListenerTargetBody && flags & 16 /* LISTENER_FLAGS.TargetBody */)\n return doc.body;\n if (BUILD.hostListenerTargetParent && flags & 32 /* LISTENER_FLAGS.TargetParent */)\n return elm.parentElement;\n return elm;\n};\n// prettier-ignore\nconst hostListenerOpts = (flags) => supportsListenerOptions\n ? ({\n passive: (flags & 1 /* LISTENER_FLAGS.Passive */) !== 0,\n capture: (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0,\n })\n : (flags & 2 /* LISTENER_FLAGS.Capture */) !== 0;\n/**\n * Assigns the given value to the nonce property on the runtime platform object.\n * During runtime, this value is used to set the nonce attribute on all dynamically created script and style tags.\n * @param nonce The value to be assigned to the platform nonce property.\n * @returns void\n */\nconst setNonce = (nonce) => (plt.$nonce$ = nonce);\nconst setPlatformOptions = (opts) => Object.assign(plt, opts);\n/**\n * Updates the DOM generated on the server with annotations such as node attributes and\n * comment nodes to facilitate future client-side hydration. These annotations are used for things\n * like moving elements back to their original hosts if using Shadow DOM on the client, and for quickly\n * reconstructing the vNode representations of the DOM.\n *\n * @param doc The DOM generated by the server.\n * @param staticComponents Any components that should be considered static and do not need client-side hydration.\n */\nconst insertVdomAnnotations = (doc, staticComponents) => {\n if (doc != null) {\n const docData = {\n hostIds: 0,\n rootLevelIds: 0,\n staticComponents: new Set(staticComponents),\n };\n const orgLocationNodes = [];\n parseVNodeAnnotations(doc, doc.body, docData, orgLocationNodes);\n orgLocationNodes.forEach((orgLocationNode) => {\n if (orgLocationNode != null) {\n const nodeRef = orgLocationNode['s-nr'];\n let hostId = nodeRef['s-host-id'];\n let nodeId = nodeRef['s-node-id'];\n let childId = `${hostId}.${nodeId}`;\n if (hostId == null) {\n hostId = 0;\n docData.rootLevelIds++;\n nodeId = docData.rootLevelIds;\n childId = `${hostId}.${nodeId}`;\n if (nodeRef.nodeType === 1 /* NODE_TYPE.ElementNode */) {\n nodeRef.setAttribute(HYDRATE_CHILD_ID, childId);\n }\n else if (nodeRef.nodeType === 3 /* NODE_TYPE.TextNode */) {\n if (hostId === 0) {\n const textContent = nodeRef.nodeValue.trim();\n if (textContent === '') {\n // useless whitespace node at the document root\n orgLocationNode.remove();\n return;\n }\n }\n const commentBeforeTextNode = doc.createComment(childId);\n commentBeforeTextNode.nodeValue = `${TEXT_NODE_ID}.${childId}`;\n nodeRef.parentNode.insertBefore(commentBeforeTextNode, nodeRef);\n }\n }\n let orgLocationNodeId = `${ORG_LOCATION_ID}.${childId}`;\n const orgLocationParentNode = orgLocationNode.parentElement;\n if (orgLocationParentNode) {\n if (orgLocationParentNode['s-en'] === '') {\n // ending with a \".\" means that the parent element\n // of this node's original location is a SHADOW dom element\n // and this node is apart of the root level light dom\n orgLocationNodeId += `.`;\n }\n else if (orgLocationParentNode['s-en'] === 'c') {\n // ending with a \".c\" means that the parent element\n // of this node's original location is a SCOPED element\n // and this node is apart of the root level light dom\n orgLocationNodeId += `.c`;\n }\n }\n orgLocationNode.nodeValue = orgLocationNodeId;\n }\n });\n }\n};\n/**\n * Recursively parses a node generated by the server and its children to set host and child id\n * attributes read during client-side hydration. This function also tracks whether each node is\n * an original location reference node meaning that a node has been moved via slot relocation.\n *\n * @param doc The DOM generated by the server.\n * @param node The node to parse.\n * @param docData An object containing metadata about the document.\n * @param orgLocationNodes An array of nodes that have been moved via slot relocation.\n */\nconst parseVNodeAnnotations = (doc, node, docData, orgLocationNodes) => {\n if (node == null) {\n return;\n }\n if (node['s-nr'] != null) {\n orgLocationNodes.push(node);\n }\n if (node.nodeType === 1 /* NODE_TYPE.ElementNode */) {\n node.childNodes.forEach((childNode) => {\n const hostRef = getHostRef(childNode);\n if (hostRef != null && !docData.staticComponents.has(childNode.nodeName.toLowerCase())) {\n const cmpData = {\n nodeIds: 0,\n };\n insertVNodeAnnotations(doc, childNode, hostRef.$vnode$, docData, cmpData);\n }\n parseVNodeAnnotations(doc, childNode, docData, orgLocationNodes);\n });\n }\n};\n/**\n * Insert attribute annotations on an element for its host ID and, potentially, its child ID.\n * Also makes calls to insert annotations on the element's children, keeping track of the depth of\n * the component tree.\n *\n * @param doc The DOM generated by the server.\n * @param hostElm The element to insert annotations for.\n * @param vnode The vNode representation of the element.\n * @param docData An object containing metadata about the document.\n * @param cmpData An object containing metadata about the component.\n */\nconst insertVNodeAnnotations = (doc, hostElm, vnode, docData, cmpData) => {\n if (vnode != null) {\n const hostId = ++docData.hostIds;\n hostElm.setAttribute(HYDRATE_ID, hostId);\n if (hostElm['s-cr'] != null) {\n hostElm['s-cr'].nodeValue = `${CONTENT_REF_ID}.${hostId}`;\n }\n if (vnode.$children$ != null) {\n const depth = 0;\n vnode.$children$.forEach((vnodeChild, index) => {\n insertChildVNodeAnnotations(doc, vnodeChild, cmpData, hostId, depth, index);\n });\n }\n // If this element does not already have a child ID and has a sibling comment node\n // representing a slot, we use the content of the comment to set the child ID attribute\n // on the host element.\n if (hostElm && vnode && vnode.$elm$ && !hostElm.hasAttribute(HYDRATE_CHILD_ID)) {\n const parent = hostElm.parentElement;\n if (parent && parent.childNodes) {\n const parentChildNodes = Array.from(parent.childNodes);\n const comment = parentChildNodes.find((node) => node.nodeType === 8 /* NODE_TYPE.CommentNode */ && node['s-sr']);\n if (comment) {\n const index = parentChildNodes.indexOf(hostElm) - 1;\n vnode.$elm$.setAttribute(HYDRATE_CHILD_ID, `${comment['s-host-id']}.${comment['s-node-id']}.0.${index}`);\n }\n }\n }\n }\n};\n/**\n * Recursively analyzes the type of a child vNode and inserts annotations on the vNodes's element based on its type.\n * Element nodes receive a child ID attribute, text nodes have a comment with the child ID inserted before them,\n * and comment nodes representing a slot have their node value set to a slot node ID containing the child ID.\n *\n * @param doc The DOM generated by the server.\n * @param vnodeChild The vNode to insert annotations for.\n * @param cmpData An object containing metadata about the component.\n * @param hostId The host ID of this element's parent.\n * @param depth How deep this element sits in the component tree relative to its parent.\n * @param index The index of this element in its parent's children array.\n */\nconst insertChildVNodeAnnotations = (doc, vnodeChild, cmpData, hostId, depth, index) => {\n const childElm = vnodeChild.$elm$;\n if (childElm == null) {\n return;\n }\n const nodeId = cmpData.nodeIds++;\n const childId = `${hostId}.${nodeId}.${depth}.${index}`;\n childElm['s-host-id'] = hostId;\n childElm['s-node-id'] = nodeId;\n if (childElm.nodeType === 1 /* NODE_TYPE.ElementNode */) {\n childElm.setAttribute(HYDRATE_CHILD_ID, childId);\n }\n else if (childElm.nodeType === 3 /* NODE_TYPE.TextNode */) {\n const parentNode = childElm.parentNode;\n const nodeName = parentNode.nodeName;\n if (nodeName !== 'STYLE' && nodeName !== 'SCRIPT') {\n const textNodeId = `${TEXT_NODE_ID}.${childId}`;\n const commentBeforeTextNode = doc.createComment(textNodeId);\n parentNode.insertBefore(commentBeforeTextNode, childElm);\n }\n }\n else if (childElm.nodeType === 8 /* NODE_TYPE.CommentNode */) {\n if (childElm['s-sr']) {\n const slotName = childElm['s-sn'] || '';\n const slotNodeId = `${SLOT_NODE_ID}.${childId}.${slotName}`;\n childElm.nodeValue = slotNodeId;\n }\n }\n if (vnodeChild.$children$ != null) {\n // Increment depth each time we recur deeper into the tree\n const childDepth = depth + 1;\n vnodeChild.$children$.forEach((vnode, index) => {\n insertChildVNodeAnnotations(doc, vnode, cmpData, hostId, childDepth, index);\n });\n }\n};\n/**\n * A WeakMap mapping runtime component references to their corresponding host reference\n * instances.\n */\nconst hostRefs = /*@__PURE__*/ new WeakMap();\n/**\n * Given a {@link d.RuntimeRef} retrieve the corresponding {@link d.HostRef}\n *\n * @param ref the runtime ref of interest\n * @returns the Host reference (if found) or undefined\n */\nconst getHostRef = (ref) => hostRefs.get(ref);\n/**\n * Register a lazy instance with the {@link hostRefs} object so it's\n * corresponding {@link d.HostRef} can be retrieved later.\n *\n * @param lazyInstance the lazy instance of interest\n * @param hostRef that instances `HostRef` object\n * @returns a reference to the host ref WeakMap\n */\nconst registerInstance = (lazyInstance, hostRef) => hostRefs.set((hostRef.$lazyInstance$ = lazyInstance), hostRef);\n/**\n * Register a host element for a Stencil component, setting up various metadata\n * and callbacks based on {@link BUILD} flags as well as the component's runtime\n * metadata.\n *\n * @param hostElement the host element to register\n * @param cmpMeta runtime metadata for that component\n * @returns a reference to the host ref WeakMap\n */\nconst registerHost = (hostElement, cmpMeta) => {\n const hostRef = {\n $flags$: 0,\n $hostElement$: hostElement,\n $cmpMeta$: cmpMeta,\n $instanceValues$: new Map(),\n };\n if (BUILD.isDev) {\n hostRef.$renderCount$ = 0;\n }\n if (BUILD.method && BUILD.lazyLoad) {\n hostRef.$onInstancePromise$ = new Promise((r) => (hostRef.$onInstanceResolve$ = r));\n }\n if (BUILD.asyncLoading) {\n hostRef.$onReadyPromise$ = new Promise((r) => (hostRef.$onReadyResolve$ = r));\n hostElement['s-p'] = [];\n hostElement['s-rc'] = [];\n }\n addHostEventListeners(hostElement, hostRef, cmpMeta.$listeners$, false);\n return hostRefs.set(hostElement, hostRef);\n};\nconst isMemberInElement = (elm, memberName) => memberName in elm;\nconst consoleError = (e, el) => (customError || console.error)(e, el);\nconst STENCIL_DEV_MODE = BUILD.isTesting\n ? ['STENCIL:'] // E2E testing\n : [\n '%cstencil',\n 'color: white;background:#4c47ff;font-weight: bold; font-size:10px; padding:2px 6px; border-radius: 5px',\n ];\nconst consoleDevError = (...m) => console.error(...STENCIL_DEV_MODE, ...m);\nconst consoleDevWarn = (...m) => console.warn(...STENCIL_DEV_MODE, ...m);\nconst consoleDevInfo = (...m) => console.info(...STENCIL_DEV_MODE, ...m);\nconst setErrorHandler = (handler) => (customError = handler);\nconst cmpModules = /*@__PURE__*/ new Map();\nconst loadModule = (cmpMeta, hostRef, hmrVersionId) => {\n // loadModuleImport\n const exportName = cmpMeta.$tagName$.replace(/-/g, '_');\n const bundleId = cmpMeta.$lazyBundleId$;\n if (BUILD.isDev && typeof bundleId !== 'string') {\n consoleDevError(`Trying to lazily load component <${cmpMeta.$tagName$}> with style mode \"${hostRef.$modeName$}\", but it does not exist.`);\n return undefined;\n }\n const module = !BUILD.hotModuleReplacement ? cmpModules.get(bundleId) : false;\n if (module) {\n return module[exportName];\n }\n /*!__STENCIL_STATIC_IMPORT_SWITCH__*/\n return import(\n /* @vite-ignore */\n /* webpackInclude: /\\.entry\\.js$/ */\n /* webpackExclude: /\\.system\\.entry\\.js$/ */\n /* webpackMode: \"lazy\" */\n `./${bundleId}.entry.js${BUILD.hotModuleReplacement && hmrVersionId ? '?s-hmr=' + hmrVersionId : ''}`).then((importedModule) => {\n if (!BUILD.hotModuleReplacement) {\n cmpModules.set(bundleId, importedModule);\n }\n return importedModule[exportName];\n }, consoleError);\n};\nconst styles = /*@__PURE__*/ new Map();\nconst modeResolutionChain = [];\nconst win = typeof window !== 'undefined' ? window : {};\nconst doc = win.document || { head: {} };\nconst H = (win.HTMLElement || class {\n});\nconst plt = {\n $flags$: 0,\n $resourcesUrl$: '',\n jmp: (h) => h(),\n raf: (h) => requestAnimationFrame(h),\n ael: (el, eventName, listener, opts) => el.addEventListener(eventName, listener, opts),\n rel: (el, eventName, listener, opts) => el.removeEventListener(eventName, listener, opts),\n ce: (eventName, opts) => new CustomEvent(eventName, opts),\n};\nconst setPlatformHelpers = (helpers) => {\n Object.assign(plt, helpers);\n};\nconst supportsShadow = \n// TODO(STENCIL-854): Remove code related to legacy shadowDomShim field\nBUILD.shadowDomShim && BUILD.shadowDom\n ? /*@__PURE__*/ (() => (doc.head.attachShadow + '').indexOf('[native') > -1)()\n : true;\nconst supportsListenerOptions = /*@__PURE__*/ (() => {\n let supportsListenerOptions = false;\n try {\n doc.addEventListener('e', null, Object.defineProperty({}, 'passive', {\n get() {\n supportsListenerOptions = true;\n },\n }));\n }\n catch (e) { }\n return supportsListenerOptions;\n})();\nconst promiseResolve = (v) => Promise.resolve(v);\nconst supportsConstructableStylesheets = BUILD.constructableCSS\n ? /*@__PURE__*/ (() => {\n try {\n new CSSStyleSheet();\n return typeof new CSSStyleSheet().replaceSync === 'function';\n }\n catch (e) { }\n return false;\n })()\n : false;\nconst queueDomReads = [];\nconst queueDomWrites = [];\nconst queueDomWritesLow = [];\nconst queueTask = (queue, write) => (cb) => {\n queue.push(cb);\n if (!queuePending) {\n queuePending = true;\n if (write && plt.$flags$ & 4 /* PLATFORM_FLAGS.queueSync */) {\n nextTick(flush);\n }\n else {\n plt.raf(flush);\n }\n }\n};\nconst consume = (queue) => {\n for (let i = 0; i < queue.length; i++) {\n try {\n queue[i](performance.now());\n }\n catch (e) {\n consoleError(e);\n }\n }\n queue.length = 0;\n};\nconst consumeTimeout = (queue, timeout) => {\n let i = 0;\n let ts = 0;\n while (i < queue.length && (ts = performance.now()) < timeout) {\n try {\n queue[i++](ts);\n }\n catch (e) {\n consoleError(e);\n }\n }\n if (i === queue.length) {\n queue.length = 0;\n }\n else if (i !== 0) {\n queue.splice(0, i);\n }\n};\nconst flush = () => {\n if (BUILD.asyncQueue) {\n queueCongestion++;\n }\n // always force a bunch of medium callbacks to run, but still have\n // a throttle on how many can run in a certain time\n // DOM READS!!!\n consume(queueDomReads);\n // DOM WRITES!!!\n if (BUILD.asyncQueue) {\n const timeout = (plt.$flags$ & 6 /* PLATFORM_FLAGS.queueMask */) === 2 /* PLATFORM_FLAGS.appLoaded */\n ? performance.now() + 14 * Math.ceil(queueCongestion * (1.0 / 10.0))\n : Infinity;\n consumeTimeout(queueDomWrites, timeout);\n consumeTimeout(queueDomWritesLow, timeout);\n if (queueDomWrites.length > 0) {\n queueDomWritesLow.push(...queueDomWrites);\n queueDomWrites.length = 0;\n }\n if ((queuePending = queueDomReads.length + queueDomWrites.length + queueDomWritesLow.length > 0)) {\n // still more to do yet, but we've run out of time\n // let's let this thing cool off and try again in the next tick\n plt.raf(flush);\n }\n else {\n queueCongestion = 0;\n }\n }\n else {\n consume(queueDomWrites);\n if ((queuePending = queueDomReads.length > 0)) {\n // still more to do yet, but we've run out of time\n // let's let this thing cool off and try again in the next tick\n plt.raf(flush);\n }\n }\n};\nconst nextTick = (cb) => promiseResolve().then(cb);\nconst readTask = /*@__PURE__*/ queueTask(queueDomReads, false);\nconst writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);\nexport { BUILD, Env, NAMESPACE } from '@stencil/core/internal/app-data';\nexport { Build, Fragment, H, H as HTMLElement, Host, STENCIL_DEV_MODE, addHostEventListeners, bootstrapLazy, cmpModules, connectedCallback, consoleDevError, consoleDevInfo, consoleDevWarn, consoleError, createEvent, defineCustomElement, disconnectedCallback, doc, forceModeUpdate, forceUpdate, getAssetPath, getElement, getHostRef, getMode, getRenderingRef, getValue, h, insertVdomAnnotations, isMemberInElement, loadModule, modeResolutionChain, nextTick, parsePropertyValue, plt, postUpdateComponent, promiseResolve, proxyComponent, proxyCustomElement, readTask, registerHost, registerInstance, renderVdom, setAssetPath, setErrorHandler, setMode, setNonce, setPlatformHelpers, setPlatformOptions, setValue, styles, supportsConstructableStylesheets, supportsListenerOptions, supportsShadow, win, writeTask };\n"],"version":3} \ No newline at end of file diff --git a/packages/mercury/showcase/assets/components/ch-chat/markdown-viewer.css b/packages/mercury/showcase/assets/components/ch-chat/markdown-viewer.css deleted file mode 100644 index adda31a30..000000000 --- a/packages/mercury/showcase/assets/components/ch-chat/markdown-viewer.css +++ /dev/null @@ -1 +0,0 @@ -h6,h5,h4,h3,h2,h1{--heading-base__font-family: var(--mer-font-family--title);--heading__color: var( --mer-heading__gray--light );--heading-h1__font-size: var(--mer-font__size--xl);--heading-h1__font-weight: var(--mer-font__weight--bold);--heading-h1__line-height: var(--mer-line-height--tight);--heading-h2__font-size: var(--mer-font__size--lg);--heading-h2__font-weight: var(--mer-font__weight--bold);--heading-h2__line-height: var(--mer-line-height--tight);--heading-h3__font-size: var(--mer-font__size--sm);--heading-h3__font-weight: var(--mer-font__weight--bold);--heading-h3__line-height: var(--mer-line-height--regular);--heading-h4__font-size: var(--mer-font__size--xs);--heading-h4__font-weight: var(--mer-font__weight--bold);--heading-h4__line-height: var(--mer-line-height--spaced);--heading-h5__font-size: var(--mer-font__size--2xs);--heading-h5__font-weight: var(--mer-font__weight--bold);--heading-h5__line-height: var(--mer-line-height--spaced);--heading-h6__font-size: var(--mer-font__size--3xs);--heading-h6__font-weight: var(--mer-font__weight--semi-bold);--heading-h6__line-height: var(--mer-line-height--spaced);font-family:var(--mer-font-family--title);line-height:var(--mer-line-height--tight);color:var(--heading__color)}h1{font-size:var(--mer-font__size--xl);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h1__line-height)}h2{font-size:var(--mer-font__size--lg);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h2__line-height)}h3{font-size:var(--mer-font__size--sm);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h3__line-height)}h4{font-size:var(--mer-font__size--xs);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h4__line-height)}h5{font-size:var(--mer-font__size--2xs);font-weight:var(--mer-font__weight--bold);line-height:var(--heading-h5__line-height)}h6{font-size:var(--mer-font__size--3xs);font-weight:var(--mer-font__weight--semi-bold);line-height:var(--heading-h6__line-height)}a{text-decoration:underline}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}h1{margin-block:var(--mer-spacing--md) var(--mer-spacing--xs);padding-block-end:var(--mer-spacing--xs)}h2{margin-block:var(--mer-spacing--sm) 6px;padding-block-end:6px}h3{margin-block:var(--mer-spacing--xs) var(--mer-spacing--2xs);padding-block-end:var(--mer-spacing--2xs)}h4{margin-block:var(--mer-spacing--2xs) var(--mer-spacing--3xs);padding-block-end:var(--mer-spacing--3xs)}h5{margin-block:var(--mer-spacing--2xs) var(--mer-spacing--3xs);padding-block-end:var(--mer-spacing--3xs)}h6{margin-block:var(--mer-spacing--2xs) var(--mer-spacing--3xs);padding-block-end:var(--mer-spacing--3xs)}h1,h2,h3,h4,h5,h6{border-block-end:1px solid var(--mer-border-color__on-surface)}p,ul,ol,table,ch-code{margin-block:var(--mer-spacing--xs)}ul,ol{padding-inline-start:var(--mer-spacing--xl)}blockquote{margin-block:var(--mer-spacing--xs);padding-block:var(--mer-spacing--xs);padding-inline:calc(var(--mer-spacing--xl) - 4px) var(--mer-spacing--xl);border-inline-start:4px solid var(--mer-color__primary--400)}blockquote>p:first-of-type{margin-block-start:0}blockquote>p:last-of-type{margin-block-end:0}strong{font-weight:700}tr{border:1px solid var(--mer-border-color__on-surface)}th,td{padding:var(--mer-spacing--xs);border-inline-start:1px solid var(--mer-border-color__on-surface)}tr>td:first-child,tr>th:first-child{border-inline-start:unset}thead>tr,tbody>tr:nth-child(2n){background-color:var(--mer-color__neutral-gray--700)}.code-block-container{position:relative}.code-block-header{display:grid;grid-auto-columns:max-content;grid-auto-flow:column;justify-content:flex-end;position:absolute;inset-block-start:var(--mer-spacing--md);inset-inline-end:var(--mer-spacing--xs);padding:6px;background-color:var(--mer-surface__elevation--01);border-radius:var(--mer-border__radius--xs)}.button-copy-code{inline-size:18px;block-size:18px}.button-copy-code::before{content:"";display:grid;inline-size:100%;block-size:100%;-webkit-mask:no-repeat center/100% var(--icon__system_copy_primary--enabled);background-color:currentColor}.button-copy-code:focus-visible{outline:1px solid currentColor}ch-code{border:1px solid var(--mer-border-color__on-surface);border-radius:4px;padding:var(--mer-spacing--md)}ch-code{--code__color-base: var(--mer-text__on-surface);--code__color-blue: var(--mer-color__primary--400);--code__color-light-blue: var(--mer-color__primary--200);--code__color-red: var(--mer-color__message-red--200);--code__color-green: var(--mer-color__message-green--200);--code__bg-color: var(--mer-surface__elevation--01);--code__border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--03);--code__border-radius: var(--mer-border__radius--sm);--code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm);--ch-code__doctag: var(--code__color-blue);--ch-code__keyword: var(--code__color-blue);--ch-code__meta__keyword: var(--code__color-blue);--ch-code__template-tag: var(--code__color-blue);--ch-code__template-variable: var(--code__color-blue);--ch-code__type: var(--code__color-blue);--ch-code__variable-language: var(--code__color-blue);--ch-code__title: var(--code__color-base);--ch-code__title-class: var(--code__color-base);--ch-code__title-class-inherited: var(--code__color-base);--ch-code__title-function: var(--code__color-base);--ch-code__attr: var(--code__color-blue);--ch-code__attribute: var(--code__color-blue);--ch-code__literal: var(--code__color-blue);--ch-code__meta: var(--code__color-blue);--ch-code__number: var(--code__color-blue);--ch-code__operator: var(--code__color-blue);--ch-code__variable: var(--code__color-blue);--ch-code__selector-attr: var(--code__color-blue);--ch-code__selector-class: var(--code__color-blue);--ch-code__selector-id: var(--code__color-blue);--ch-code__regexp: var(--code__color-green);--ch-code__string: var(--code__color-green);--ch-code__meta__string: var(--code__color-green);--ch-code__built-in: var(--code__color-green);--ch-code__symbol: #e36209;--ch-code__comment: var(--code__color-green);--ch-code__code: var(--code__color-green);--ch-code__formula: var(--code__color-green);--ch-code__name: var(--code__color-light-blue);--ch-code__quote: var(--code__color-light-blue);--ch-code__selector-tag: var(--code__color-light-blue);--ch-code__selector-pseudo: var(--code__color-light-blue);--ch-code__subst: #24292e;scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb__bg-color) var(--scrollbar-track__bg-color);padding:var(--code__padding);background-color:var(--code__bg-color);border:var(--code__border);border-radius:var(--code__border-radius);font-size:13px;line-height:1.55em;overflow:auto}ch-code::-webkit-scrollbar{width:var(--scrollbar__size);height:var(--scrollbar__size)}ch-code::-webkit-scrollbar-track{background-color:var(--scrollbar-track__bg-color);border-radius:var(--scrollbar-track__border-radius)}ch-code::-webkit-scrollbar-thumb{background-color:var(--scrollbar-thumb__bg-color);border-radius:var(--scrollbar-thumb__border-radius)}ch-code::-webkit-scrollbar-corner{background:var(--scrollbar-corner__bg)}code{padding-block:var(--mer-spacing--3xs);padding-inline:var(--mer-spacing--2xs);background-color:var(--mer-elevation__bg-color--01);border-radius:2px;font-size:calc(1em - 2px)}img{display:inline-block;max-inline-size:25%}:host>:first-child,ch-theme+*{margin-block-start:0px}:host>:last-child{margin-block-end:0px} diff --git a/packages/mercury/showcase/assets/components/ch-chat/mercury-code-render.js b/packages/mercury/showcase/assets/components/ch-chat/mercury-code-render.js deleted file mode 100644 index 091580041..000000000 --- a/packages/mercury/showcase/assets/components/ch-chat/mercury-code-render.js +++ /dev/null @@ -1,59 +0,0 @@ -import { h } from "./index-29553cff.js"; - -const copy = text => () => navigator.clipboard.writeText(text); -export const mercuryCodeRender = copyButtonAccessibleName => options => - h( - "div", - { class: "code-block-container" }, - h( - "div", - { class: "code-block-header" }, - h("button", { - "aria-label": copyButtonAccessibleName, - title: copyButtonAccessibleName, - class: "button-copy-code", - type: "button", - onClick: copy(options.plainText) - }) - ), - h("ch-code", { - language: options.language, - lastNestedChildClass: options.lastNestedChildClass, - value: options.plainText - }) - ); -export const mercuryChatMessageRender = theme => messageModel => - messageModel.role === "assistant" && messageModel.status === "waiting" - ? [ - h("span", { part: "message__processing" }, messageModel.content), - h("div", { - class: "processing-animation", - part: "processing-animation" - }) - ] - : [ - h( - "span", - { part: `message__role ${messageModel.role}` }, - messageModel.role === "user" ? "You" : "GeneXus Code Fixer" - ), - h( - "time", - { dateTime: messageModel.metadata, part: "message__time" }, - messageModel.metadata - ), - messageModel.role === "user" - ? h("span", { part: "message__content user" }, messageModel.content) - : h("ch-markdown-viewer", { - part: - messageModel.role === "assistant" && - (messageModel.status === "complete" || !messageModel.status) && - !messageModel.parts - ? `message__content no-error` - : "message__content", - theme: theme, - showIndicator: false, - renderCode: mercuryCodeRender("Copy code"), - value: messageModel.content - }) - ]; diff --git a/packages/mercury/showcase/assets/components/ch-chat/shadow-css-8fcf3ba9.js b/packages/mercury/showcase/assets/components/ch-chat/shadow-css-8fcf3ba9.js deleted file mode 100644 index 46b18cb5f..000000000 --- a/packages/mercury/showcase/assets/components/ch-chat/shadow-css-8fcf3ba9.js +++ /dev/null @@ -1,478 +0,0 @@ -/* - Stencil Client Platform v4.9.1 | MIT Licensed | https://stenciljs.com - */ -/** - * Utility function that will escape all regular expression special characters in a string. - * - * @param text The string potentially containing special characters. - * @returns The string with all special characters escaped. - */ -const escapeRegExpSpecialCharacters = (text) => { - return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); -}; - -/** - * @license - * Copyright Google Inc. All Rights Reserved. - * - * Use of this source code is governed by an MIT-style license that can be - * found in the LICENSE file at https://angular.io/license - * - * This file is a port of shadowCSS from `webcomponents.js` to TypeScript. - * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js - * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts - */ -const safeSelector = (selector) => { - const placeholders = []; - let index = 0; - // Replaces attribute selectors with placeholders. - // The WS in [attr="va lue"] would otherwise be interpreted as a selector separator. - selector = selector.replace(/(\[[^\]]*\])/g, (_, keep) => { - const replaceBy = `__ph-${index}__`; - placeholders.push(keep); - index++; - return replaceBy; - }); - // Replaces the expression in `:nth-child(2n + 1)` with a placeholder. - // WS and "+" would otherwise be interpreted as selector separators. - const content = selector.replace(/(:nth-[-\w]+)(\([^)]+\))/g, (_, pseudo, exp) => { - const replaceBy = `__ph-${index}__`; - placeholders.push(exp); - index++; - return pseudo + replaceBy; - }); - const ss = { - content, - placeholders, - }; - return ss; -}; -const restoreSafeSelector = (placeholders, content) => { - return content.replace(/__ph-(\d+)__/g, (_, index) => placeholders[+index]); -}; -const _polyfillHost = '-shadowcsshost'; -const _polyfillSlotted = '-shadowcssslotted'; -// note: :host-context pre-processed to -shadowcsshostcontext. -const _polyfillHostContext = '-shadowcsscontext'; -const _parenSuffix = ')(?:\\((' + '(?:\\([^)(]*\\)|[^)(]*)+?' + ')\\))?([^,{]*)'; -const _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim'); -const _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim'); -const _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim'); -const _polyfillHostNoCombinator = _polyfillHost + '-no-combinator'; -const _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\s]*)/; -const _shadowDOMSelectorsRe = [/::shadow/g, /::content/g]; -const _selectorReSuffix = '([>\\s~+[.,{:][\\s\\S]*)?$'; -const _polyfillHostRe = /-shadowcsshost/gim; -/** - * Little helper for generating a regex that will match a specified - * CSS selector when that selector is _not_ a part of a `@supports` rule. - * - * The pattern will match the provided `selector` (i.e. ':host', ':host-context', etc.) - * when that selector is not a part of a `@supports` selector rule _or_ if the selector - * is a part of the rule's declaration. - * - * For instance, if we create the regex with the selector ':host-context': - * - '@supports selector(:host-context())' will return no matches (starts with '@supports') - * - '@supports selector(:host-context()) { :host-context() { ... }}' will match the second ':host-context' (part of declaration) - * - ':host-context() { ... }' will match ':host-context' (selector is not a '@supports' rule) - * - ':host() { ... }' will return no matches (selector doesn't match selector used to create regex) - * - * @param selector The CSS selector we want to match for replacement - * @returns A look-behind regex containing the selector - */ -const createSupportsRuleRe = (selector) => new RegExp(`((? { - return input.replace(_commentRe, ''); -}; -const _commentWithHashRe = /\/\*\s*#\s*source(Mapping)?URL=[\s\S]+?\*\//g; -const extractCommentsWithHash = (input) => { - return input.match(_commentWithHashRe) || []; -}; -const _ruleRe = /(\s*)([^;\{\}]+?)(\s*)((?:{%BLOCK%}?\s*;?)|(?:\s*;))/g; -const _curlyRe = /([{}])/g; -const _selectorPartsRe = /(^.*?[^\\])??((:+)(.*)|$)/; -const OPEN_CURLY = '{'; -const CLOSE_CURLY = '}'; -const BLOCK_PLACEHOLDER = '%BLOCK%'; -const processRules = (input, ruleCallback) => { - const inputWithEscapedBlocks = escapeBlocks(input); - let nextBlockIndex = 0; - return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => { - const selector = m[2]; - let content = ''; - let suffix = m[4]; - let contentPrefix = ''; - if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) { - content = inputWithEscapedBlocks.blocks[nextBlockIndex++]; - suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1); - contentPrefix = '{'; - } - const cssRule = { - selector, - content, - }; - const rule = ruleCallback(cssRule); - return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`; - }); -}; -const escapeBlocks = (input) => { - const inputParts = input.split(_curlyRe); - const resultParts = []; - const escapedBlocks = []; - let bracketCount = 0; - let currentBlockParts = []; - for (let partIndex = 0; partIndex < inputParts.length; partIndex++) { - const part = inputParts[partIndex]; - if (part === CLOSE_CURLY) { - bracketCount--; - } - if (bracketCount > 0) { - currentBlockParts.push(part); - } - else { - if (currentBlockParts.length > 0) { - escapedBlocks.push(currentBlockParts.join('')); - resultParts.push(BLOCK_PLACEHOLDER); - currentBlockParts = []; - } - resultParts.push(part); - } - if (part === OPEN_CURLY) { - bracketCount++; - } - } - if (currentBlockParts.length > 0) { - escapedBlocks.push(currentBlockParts.join('')); - resultParts.push(BLOCK_PLACEHOLDER); - } - const strEscapedBlocks = { - escapedString: resultParts.join(''), - blocks: escapedBlocks, - }; - return strEscapedBlocks; -}; -/** - * Replaces certain strings within the CSS with placeholders - * that will later be replaced with class selectors appropriate - * for the level of encapsulation (shadow or scoped). - * - * When performing these replacements, we want to ignore selectors that are a - * part of an `@supports` rule. Replacing these selectors will result in invalid - * CSS that gets passed to autoprefixer/postcss once the placeholders are replaced. - * For example, a rule like: - * - * ```css - * @supports selector(:host()) { - * :host { - * color: red; - * } - * } - * ``` - * - * Should be converted to: - * - * ```css - * @supports selector(:host()) { - * -shadowcsshost { - * color: red; - * } - * } - * ``` - * - * The order the regex replacements happen in matters since we match - * against a whole selector word so we need to match all of `:host-context` - * before we try to replace `:host`. Otherwise the pattern for `:host` would match - * `:host-context` resulting in something like `:-shadowcsshost-context`. - * - * @param cssText A CSS string for a component - * @returns The modified CSS string - */ -const insertPolyfillHostInCssText = (cssText) => { - // These replacements use a special syntax with the `$1`. When the replacement - // occurs, `$1` maps to the content of the string leading up to the selector - // to be replaced. - // - // Otherwise, we will replace all the preceding content in addition to the - // selector because of the lookbehind in the regex. - // - // e.g. `/*!@___0___*/:host {}` => `/*!@___0___*/--shadowcsshost {}` - cssText = cssText - .replace(_colonHostContextRe, `$1${_polyfillHostContext}`) - .replace(_colonHostRe, `$1${_polyfillHost}`) - .replace(_colonSlottedRe, `$1${_polyfillSlotted}`); - return cssText; -}; -const convertColonRule = (cssText, regExp, partReplacer) => { - // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule - return cssText.replace(regExp, (...m) => { - if (m[2]) { - const parts = m[2].split(','); - const r = []; - for (let i = 0; i < parts.length; i++) { - const p = parts[i].trim(); - if (!p) - break; - r.push(partReplacer(_polyfillHostNoCombinator, p, m[3])); - } - return r.join(','); - } - else { - return _polyfillHostNoCombinator + m[3]; - } - }); -}; -const colonHostPartReplacer = (host, part, suffix) => { - return host + part.replace(_polyfillHost, '') + suffix; -}; -const convertColonHost = (cssText) => { - return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer); -}; -const colonHostContextPartReplacer = (host, part, suffix) => { - if (part.indexOf(_polyfillHost) > -1) { - return colonHostPartReplacer(host, part, suffix); - } - else { - return host + part + suffix + ', ' + part + ' ' + host + suffix; - } -}; -const convertColonSlotted = (cssText, slotScopeId) => { - const slotClass = '.' + slotScopeId + ' > '; - const selectors = []; - cssText = cssText.replace(_cssColonSlottedRe, (...m) => { - if (m[2]) { - const compound = m[2].trim(); - const suffix = m[3]; - const slottedSelector = slotClass + compound + suffix; - let prefixSelector = ''; - for (let i = m[4] - 1; i >= 0; i--) { - const char = m[5][i]; - if (char === '}' || char === ',') { - break; - } - prefixSelector = char + prefixSelector; - } - const orgSelector = (prefixSelector + slottedSelector).trim(); - const addedSelector = `${prefixSelector.trimEnd()}${slottedSelector.trim()}`.trim(); - if (orgSelector !== addedSelector) { - const updatedSelector = `${addedSelector}, ${orgSelector}`; - selectors.push({ - orgSelector, - updatedSelector, - }); - } - return slottedSelector; - } - else { - return _polyfillHostNoCombinator + m[3]; - } - }); - return { - selectors, - cssText, - }; -}; -const convertColonHostContext = (cssText) => { - return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer); -}; -const convertShadowDOMSelectors = (cssText) => { - return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText); -}; -const makeScopeMatcher = (scopeSelector) => { - const lre = /\[/g; - const rre = /\]/g; - scopeSelector = scopeSelector.replace(lre, '\\[').replace(rre, '\\]'); - return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm'); -}; -const selectorNeedsScoping = (selector, scopeSelector) => { - const re = makeScopeMatcher(scopeSelector); - return !re.test(selector); -}; -const injectScopingSelector = (selector, scopingSelector) => { - return selector.replace(_selectorPartsRe, (_, before = '', _colonGroup, colon = '', after = '') => { - return before + scopingSelector + colon + after; - }); -}; -const applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => { - // In Android browser, the lastIndex is not reset when the regex is used in String.replace() - _polyfillHostRe.lastIndex = 0; - if (_polyfillHostRe.test(selector)) { - const replaceBy = `.${hostSelector}`; - return selector - .replace(_polyfillHostNoCombinatorRe, (_, selector) => injectScopingSelector(selector, replaceBy)) - .replace(_polyfillHostRe, replaceBy + ' '); - } - return scopeSelector + ' ' + selector; -}; -const applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => { - const isRe = /\[is=([^\]]*)\]/g; - scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]); - const className = '.' + scopeSelector; - const _scopeSelectorPart = (p) => { - let scopedP = p.trim(); - if (!scopedP) { - return ''; - } - if (p.indexOf(_polyfillHostNoCombinator) > -1) { - scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector); - } - else { - // remove :host since it should be unnecessary - const t = p.replace(_polyfillHostRe, ''); - if (t.length > 0) { - scopedP = injectScopingSelector(t, className); - } - } - return scopedP; - }; - const safeContent = safeSelector(selector); - selector = safeContent.content; - let scopedSelector = ''; - let startIndex = 0; - let res; - const sep = /( |>|\+|~(?!=))\s*/g; - // If a selector appears before :host it should not be shimmed as it - // matches on ancestor elements and not on elements in the host's shadow - // `:host-context(div)` is transformed to - // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator` - // the `div` is not part of the component in the 2nd selectors and should not be scoped. - // Historically `component-tag:host` was matching the component so we also want to preserve - // this behavior to avoid breaking legacy apps (it should not match). - // The behavior should be: - // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything) - // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a - // `:host-context(tag)`) - const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1; - // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present - let shouldScope = !hasHost; - while ((res = sep.exec(selector)) !== null) { - const separator = res[1]; - const part = selector.slice(startIndex, res.index).trim(); - shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1; - const scopedPart = shouldScope ? _scopeSelectorPart(part) : part; - scopedSelector += `${scopedPart} ${separator} `; - startIndex = sep.lastIndex; - } - const part = selector.substring(startIndex); - shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1; - scopedSelector += shouldScope ? _scopeSelectorPart(part) : part; - // replace the placeholders with their original values - return restoreSafeSelector(safeContent.placeholders, scopedSelector); -}; -const scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => { - return selector - .split(',') - .map((shallowPart) => { - if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) { - return shallowPart.trim(); - } - if (selectorNeedsScoping(shallowPart, scopeSelectorText)) { - return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim(); - } - else { - return shallowPart.trim(); - } - }) - .join(', '); -}; -const scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => { - return processRules(cssText, (rule) => { - let selector = rule.selector; - let content = rule.content; - if (rule.selector[0] !== '@') { - selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector); - } - else if (rule.selector.startsWith('@media') || - rule.selector.startsWith('@supports') || - rule.selector.startsWith('@page') || - rule.selector.startsWith('@document')) { - content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector); - } - const cssRule = { - selector: selector.replace(/\s{2,}/g, ' ').trim(), - content, - }; - return cssRule; - }); -}; -const scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => { - cssText = insertPolyfillHostInCssText(cssText); - cssText = convertColonHost(cssText); - cssText = convertColonHostContext(cssText); - const slotted = convertColonSlotted(cssText, slotScopeId); - cssText = slotted.cssText; - cssText = convertShadowDOMSelectors(cssText); - if (scopeId) { - cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId); - } - cssText = replaceShadowCssHost(cssText, hostScopeId); - cssText = cssText.replace(/>\s*\*\s+([^{, ]+)/gm, ' $1 '); - return { - cssText: cssText.trim(), - // We need to replace the shadow CSS host string in each of these selectors since we created - // them prior to the replacement happening in the components CSS text. - slottedSelectors: slotted.selectors.map((ref) => ({ - orgSelector: replaceShadowCssHost(ref.orgSelector, hostScopeId), - updatedSelector: replaceShadowCssHost(ref.updatedSelector, hostScopeId), - })), - }; -}; -/** - * Helper function that replaces the interim string representing a `:host` selector with - * the host scope selector class for the element. - * - * @param cssText The CSS string to make the replacement in - * @param hostScopeId The scope ID that will be used as the class representing the host element - * @returns CSS with the selector replaced - */ -const replaceShadowCssHost = (cssText, hostScopeId) => { - return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`); -}; -const scopeCss = (cssText, scopeId, commentOriginalSelector) => { - const hostScopeId = scopeId + '-h'; - const slotScopeId = scopeId + '-s'; - const commentsWithHash = extractCommentsWithHash(cssText); - cssText = stripComments(cssText); - const orgSelectors = []; - if (commentOriginalSelector) { - const processCommentedSelector = (rule) => { - const placeholder = `/*!@___${orgSelectors.length}___*/`; - const comment = `/*!@${rule.selector}*/`; - orgSelectors.push({ placeholder, comment }); - rule.selector = placeholder + rule.selector; - return rule; - }; - cssText = processRules(cssText, (rule) => { - if (rule.selector[0] !== '@') { - return processCommentedSelector(rule); - } - else if (rule.selector.startsWith('@media') || - rule.selector.startsWith('@supports') || - rule.selector.startsWith('@page') || - rule.selector.startsWith('@document')) { - rule.content = processRules(rule.content, processCommentedSelector); - return rule; - } - return rule; - }); - } - const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId); - cssText = [scoped.cssText, ...commentsWithHash].join('\n'); - if (commentOriginalSelector) { - orgSelectors.forEach(({ placeholder, comment }) => { - cssText = cssText.replace(placeholder, comment); - }); - } - scoped.slottedSelectors.forEach((slottedSelector) => { - const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector), 'g'); - cssText = cssText.replace(regex, slottedSelector.updatedSelector); - }); - return cssText; -}; - -export { scopeCss }; - -//# sourceMappingURL=shadow-css-8fcf3ba9.js.map \ No newline at end of file diff --git a/packages/mercury/showcase/assets/components/ch-chat/shadow-css-8fcf3ba9.js.map b/packages/mercury/showcase/assets/components/ch-chat/shadow-css-8fcf3ba9.js.map deleted file mode 100644 index 9bd48c7fc..000000000 --- a/packages/mercury/showcase/assets/components/ch-chat/shadow-css-8fcf3ba9.js.map +++ /dev/null @@ -1 +0,0 @@ -{"file":"shadow-css-8fcf3ba9.js","mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,6BAA6B,GAAG,CAAC,IAAI,KAAK;AAChD,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;AACvD,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,YAAY,GAAG,CAAC,QAAQ,KAAK;AACnC,IAAI,MAAM,YAAY,GAAG,EAAE,CAAC;AAC5B,IAAI,IAAI,KAAK,GAAG,CAAC,CAAC;AAClB;AACA;AACA,IAAI,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC,EAAE,IAAI,KAAK;AAC9D,QAAQ,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;AAC5C,QAAQ,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAChC,QAAQ,KAAK,EAAE,CAAC;AAChB,QAAQ,OAAO,SAAS,CAAC;AACzB,KAAK,CAAC,CAAC;AACP;AACA;AACA,IAAI,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,2BAA2B,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,GAAG,KAAK;AACtF,QAAQ,MAAM,SAAS,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,CAAC;AAC5C,QAAQ,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/B,QAAQ,KAAK,EAAE,CAAC;AAChB,QAAQ,OAAO,MAAM,GAAG,SAAS,CAAC;AAClC,KAAK,CAAC,CAAC;AACP,IAAI,MAAM,EAAE,GAAG;AACf,QAAQ,OAAO;AACf,QAAQ,YAAY;AACpB,KAAK,CAAC;AACN,IAAI,OAAO,EAAE,CAAC;AACd,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,CAAC,YAAY,EAAE,OAAO,KAAK;AACvD,IAAI,OAAO,OAAO,CAAC,OAAO,CAAC,eAAe,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,YAAY,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC;AAChF,CAAC,CAAC;AACF,MAAM,aAAa,GAAG,gBAAgB,CAAC;AACvC,MAAM,gBAAgB,GAAG,mBAAmB,CAAC;AAC7C;AACA,MAAM,oBAAoB,GAAG,mBAAmB,CAAC;AACjD,MAAM,YAAY,GAAG,UAAU,GAAG,2BAA2B,GAAG,gBAAgB,CAAC;AACjF,MAAM,eAAe,GAAG,IAAI,MAAM,CAAC,GAAG,GAAG,aAAa,GAAG,YAAY,EAAE,KAAK,CAAC,CAAC;AAC9E,MAAM,sBAAsB,GAAG,IAAI,MAAM,CAAC,GAAG,GAAG,oBAAoB,GAAG,YAAY,EAAE,KAAK,CAAC,CAAC;AAC5F,MAAM,kBAAkB,GAAG,IAAI,MAAM,CAAC,GAAG,GAAG,gBAAgB,GAAG,YAAY,EAAE,KAAK,CAAC,CAAC;AACpF,MAAM,yBAAyB,GAAG,aAAa,GAAG,gBAAgB,CAAC;AACnE,MAAM,2BAA2B,GAAG,sCAAsC,CAAC;AAC3E,MAAM,qBAAqB,GAAG,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AAC1D,MAAM,iBAAiB,GAAG,4BAA4B,CAAC;AACvD,MAAM,eAAe,GAAG,mBAAmB,CAAC;AAC5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,oBAAoB,GAAG,CAAC,QAAQ,KAAK,IAAI,MAAM,CAAC,CAAC,kCAAkC,EAAE,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;AAClH,MAAM,eAAe,GAAG,oBAAoB,CAAC,WAAW,CAAC,CAAC;AAC1D,MAAM,YAAY,GAAG,oBAAoB,CAAC,OAAO,CAAC,CAAC;AACnD,MAAM,mBAAmB,GAAG,oBAAoB,CAAC,eAAe,CAAC,CAAC;AAClE,MAAM,UAAU,GAAG,sBAAsB,CAAC;AAC1C,MAAM,aAAa,GAAG,CAAC,KAAK,KAAK;AACjC,IAAI,OAAO,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC;AACzC,CAAC,CAAC;AACF,MAAM,kBAAkB,GAAG,8CAA8C,CAAC;AAC1E,MAAM,uBAAuB,GAAG,CAAC,KAAK,KAAK;AAC3C,IAAI,OAAO,KAAK,CAAC,KAAK,CAAC,kBAAkB,CAAC,IAAI,EAAE,CAAC;AACjD,CAAC,CAAC;AACF,MAAM,OAAO,GAAG,uDAAuD,CAAC;AACxE,MAAM,QAAQ,GAAG,SAAS,CAAC;AAC3B,MAAM,gBAAgB,GAAG,2BAA2B,CAAC;AACrD,MAAM,UAAU,GAAG,GAAG,CAAC;AACvB,MAAM,WAAW,GAAG,GAAG,CAAC;AACxB,MAAM,iBAAiB,GAAG,SAAS,CAAC;AACpC,MAAM,YAAY,GAAG,CAAC,KAAK,EAAE,YAAY,KAAK;AAC9C,IAAI,MAAM,sBAAsB,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;AACvD,IAAI,IAAI,cAAc,GAAG,CAAC,CAAC;AAC3B,IAAI,OAAO,sBAAsB,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC,KAAK;AAC3E,QAAQ,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAC9B,QAAQ,IAAI,OAAO,GAAG,EAAE,CAAC;AACzB,QAAQ,IAAI,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAC1B,QAAQ,IAAI,aAAa,GAAG,EAAE,CAAC;AAC/B,QAAQ,IAAI,MAAM,IAAI,MAAM,CAAC,UAAU,CAAC,GAAG,GAAG,iBAAiB,CAAC,EAAE;AAClE,YAAY,OAAO,GAAG,sBAAsB,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC,CAAC;AACtE,YAAY,MAAM,GAAG,MAAM,CAAC,SAAS,CAAC,iBAAiB,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;AACpE,YAAY,aAAa,GAAG,GAAG,CAAC;AAChC,SAAS;AACT,QAAQ,MAAM,OAAO,GAAG;AACxB,YAAY,QAAQ;AACpB,YAAY,OAAO;AACnB,SAAS,CAAC;AACV,QAAQ,MAAM,IAAI,GAAG,YAAY,CAAC,OAAO,CAAC,CAAC;AAC3C,QAAQ,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,aAAa,CAAC,EAAE,IAAI,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;AACxF,KAAK,CAAC,CAAC;AACP,CAAC,CAAC;AACF,MAAM,YAAY,GAAG,CAAC,KAAK,KAAK;AAChC,IAAI,MAAM,UAAU,GAAG,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;AAC7C,IAAI,MAAM,WAAW,GAAG,EAAE,CAAC;AAC3B,IAAI,MAAM,aAAa,GAAG,EAAE,CAAC;AAC7B,IAAI,IAAI,YAAY,GAAG,CAAC,CAAC;AACzB,IAAI,IAAI,iBAAiB,GAAG,EAAE,CAAC;AAC/B,IAAI,KAAK,IAAI,SAAS,GAAG,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC,MAAM,EAAE,SAAS,EAAE,EAAE;AACxE,QAAQ,MAAM,IAAI,GAAG,UAAU,CAAC,SAAS,CAAC,CAAC;AAC3C,QAAQ,IAAI,IAAI,KAAK,WAAW,EAAE;AAClC,YAAY,YAAY,EAAE,CAAC;AAC3B,SAAS;AACT,QAAQ,IAAI,YAAY,GAAG,CAAC,EAAE;AAC9B,YAAY,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACzC,SAAS;AACT,aAAa;AACb,YAAY,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AAC9C,gBAAgB,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;AAC/D,gBAAgB,WAAW,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;AACpD,gBAAgB,iBAAiB,GAAG,EAAE,CAAC;AACvC,aAAa;AACb,YAAY,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AACnC,SAAS;AACT,QAAQ,IAAI,IAAI,KAAK,UAAU,EAAE;AACjC,YAAY,YAAY,EAAE,CAAC;AAC3B,SAAS;AACT,KAAK;AACL,IAAI,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAE;AACtC,QAAQ,aAAa,CAAC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;AACvD,QAAQ,WAAW,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;AAC5C,KAAK;AACL,IAAI,MAAM,gBAAgB,GAAG;AAC7B,QAAQ,aAAa,EAAE,WAAW,CAAC,IAAI,CAAC,EAAE,CAAC;AAC3C,QAAQ,MAAM,EAAE,aAAa;AAC7B,KAAK,CAAC;AACN,IAAI,OAAO,gBAAgB,CAAC;AAC5B,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,2BAA2B,GAAG,CAAC,OAAO,KAAK;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,OAAO,GAAG,OAAO;AACrB,SAAS,OAAO,CAAC,mBAAmB,EAAE,CAAC,EAAE,EAAE,oBAAoB,CAAC,CAAC,CAAC;AAClE,SAAS,OAAO,CAAC,YAAY,EAAE,CAAC,EAAE,EAAE,aAAa,CAAC,CAAC,CAAC;AACpD,SAAS,OAAO,CAAC,eAAe,EAAE,CAAC,EAAE,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC;AAC3D,IAAI,OAAO,OAAO,CAAC;AACnB,CAAC,CAAC;AACF,MAAM,gBAAgB,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,YAAY,KAAK;AAC5D;AACA,IAAI,OAAO,OAAO,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,KAAK;AAC7C,QAAQ,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;AAClB,YAAY,MAAM,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AAC1C,YAAY,MAAM,CAAC,GAAG,EAAE,CAAC;AACzB,YAAY,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACnD,gBAAgB,MAAM,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;AAC1C,gBAAgB,IAAI,CAAC,CAAC;AACtB,oBAAoB,MAAM;AAC1B,gBAAgB,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,yBAAyB,EAAE,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACzE,aAAa;AACb,YAAY,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/B,SAAS;AACT,aAAa;AACb,YAAY,OAAO,yBAAyB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACpD,SAAS;AACT,KAAK,CAAC,CAAC;AACP,CAAC,CAAC;AACF,MAAM,qBAAqB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,KAAK;AACtD,IAAI,OAAO,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,EAAE,EAAE,CAAC,GAAG,MAAM,CAAC;AAC3D,CAAC,CAAC;AACF,MAAM,gBAAgB,GAAG,CAAC,OAAO,KAAK;AACtC,IAAI,OAAO,gBAAgB,CAAC,OAAO,EAAE,eAAe,EAAE,qBAAqB,CAAC,CAAC;AAC7E,CAAC,CAAC;AACF,MAAM,4BAA4B,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,KAAK;AAC7D,IAAI,IAAI,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,EAAE;AAC1C,QAAQ,OAAO,qBAAqB,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;AACzD,KAAK;AACL,SAAS;AACT,QAAQ,OAAO,IAAI,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,IAAI,GAAG,MAAM,CAAC;AACxE,KAAK;AACL,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,CAAC,OAAO,EAAE,WAAW,KAAK;AACtD,IAAI,MAAM,SAAS,GAAG,GAAG,GAAG,WAAW,GAAG,KAAK,CAAC;AAChD,IAAI,MAAM,SAAS,GAAG,EAAE,CAAC;AACzB,IAAI,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,kBAAkB,EAAE,CAAC,GAAG,CAAC,KAAK;AAC5D,QAAQ,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE;AAClB,YAAY,MAAM,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;AACzC,YAAY,MAAM,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAChC,YAAY,MAAM,eAAe,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,CAAC;AAClE,YAAY,IAAI,cAAc,GAAG,EAAE,CAAC;AACpC,YAAY,KAAK,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,EAAE;AAChD,gBAAgB,MAAM,IAAI,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AACrC,gBAAgB,IAAI,IAAI,KAAK,GAAG,IAAI,IAAI,KAAK,GAAG,EAAE;AAClD,oBAAoB,MAAM;AAC1B,iBAAiB;AACjB,gBAAgB,cAAc,GAAG,IAAI,GAAG,cAAc,CAAC;AACvD,aAAa;AACb,YAAY,MAAM,WAAW,GAAG,CAAC,cAAc,GAAG,eAAe,EAAE,IAAI,EAAE,CAAC;AAC1E,YAAY,MAAM,aAAa,GAAG,CAAC,EAAE,cAAc,CAAC,OAAO,EAAE,CAAC,EAAE,eAAe,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;AAChG,YAAY,IAAI,WAAW,KAAK,aAAa,EAAE;AAC/C,gBAAgB,MAAM,eAAe,GAAG,CAAC,EAAE,aAAa,CAAC,EAAE,EAAE,WAAW,CAAC,CAAC,CAAC;AAC3E,gBAAgB,SAAS,CAAC,IAAI,CAAC;AAC/B,oBAAoB,WAAW;AAC/B,oBAAoB,eAAe;AACnC,iBAAiB,CAAC,CAAC;AACnB,aAAa;AACb,YAAY,OAAO,eAAe,CAAC;AACnC,SAAS;AACT,aAAa;AACb,YAAY,OAAO,yBAAyB,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACpD,SAAS;AACT,KAAK,CAAC,CAAC;AACP,IAAI,OAAO;AACX,QAAQ,SAAS;AACjB,QAAQ,OAAO;AACf,KAAK,CAAC;AACN,CAAC,CAAC;AACF,MAAM,uBAAuB,GAAG,CAAC,OAAO,KAAK;AAC7C,IAAI,OAAO,gBAAgB,CAAC,OAAO,EAAE,sBAAsB,EAAE,4BAA4B,CAAC,CAAC;AAC3F,CAAC,CAAC;AACF,MAAM,yBAAyB,GAAG,CAAC,OAAO,KAAK;AAC/C,IAAI,OAAO,qBAAqB,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,OAAO,KAAK,MAAM,CAAC,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,EAAE,OAAO,CAAC,CAAC;AACpG,CAAC,CAAC;AACF,MAAM,gBAAgB,GAAG,CAAC,aAAa,KAAK;AAC5C,IAAI,MAAM,GAAG,GAAG,KAAK,CAAC;AACtB,IAAI,MAAM,GAAG,GAAG,KAAK,CAAC;AACtB,IAAI,aAAa,GAAG,aAAa,CAAC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;AAC1E,IAAI,OAAO,IAAI,MAAM,CAAC,IAAI,GAAG,aAAa,GAAG,GAAG,GAAG,iBAAiB,EAAE,GAAG,CAAC,CAAC;AAC3E,CAAC,CAAC;AACF,MAAM,oBAAoB,GAAG,CAAC,QAAQ,EAAE,aAAa,KAAK;AAC1D,IAAI,MAAM,EAAE,GAAG,gBAAgB,CAAC,aAAa,CAAC,CAAC;AAC/C,IAAI,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;AAC9B,CAAC,CAAC;AACF,MAAM,qBAAqB,GAAG,CAAC,QAAQ,EAAE,eAAe,KAAK;AAC7D,IAAI,OAAO,QAAQ,CAAC,OAAO,CAAC,gBAAgB,EAAE,CAAC,CAAC,EAAE,MAAM,GAAG,EAAE,EAAE,WAAW,EAAE,KAAK,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,KAAK;AACvG,QAAQ,OAAO,MAAM,GAAG,eAAe,GAAG,KAAK,GAAG,KAAK,CAAC;AACxD,KAAK,CAAC,CAAC;AACP,CAAC,CAAC;AACF,MAAM,wBAAwB,GAAG,CAAC,QAAQ,EAAE,aAAa,EAAE,YAAY,KAAK;AAC5E;AACA,IAAI,eAAe,CAAC,SAAS,GAAG,CAAC,CAAC;AAClC,IAAI,IAAI,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE;AACxC,QAAQ,MAAM,SAAS,GAAG,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC;AAC7C,QAAQ,OAAO,QAAQ;AACvB,aAAa,OAAO,CAAC,2BAA2B,EAAE,CAAC,CAAC,EAAE,QAAQ,KAAK,qBAAqB,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC;AAC9G,aAAa,OAAO,CAAC,eAAe,EAAE,SAAS,GAAG,GAAG,CAAC,CAAC;AACvD,KAAK;AACL,IAAI,OAAO,aAAa,GAAG,GAAG,GAAG,QAAQ,CAAC;AAC1C,CAAC,CAAC;AACF,MAAM,wBAAwB,GAAG,CAAC,QAAQ,EAAE,aAAa,EAAE,YAAY,KAAK;AAC5E,IAAI,MAAM,IAAI,GAAG,kBAAkB,CAAC;AACpC,IAAI,aAAa,GAAG,aAAa,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC3E,IAAI,MAAM,SAAS,GAAG,GAAG,GAAG,aAAa,CAAC;AAC1C,IAAI,MAAM,kBAAkB,GAAG,CAAC,CAAC,KAAK;AACtC,QAAQ,IAAI,OAAO,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AAC/B,QAAQ,IAAI,CAAC,OAAO,EAAE;AACtB,YAAY,OAAO,EAAE,CAAC;AACtB,SAAS;AACT,QAAQ,IAAI,CAAC,CAAC,OAAO,CAAC,yBAAyB,CAAC,GAAG,CAAC,CAAC,EAAE;AACvD,YAAY,OAAO,GAAG,wBAAwB,CAAC,CAAC,EAAE,aAAa,EAAE,YAAY,CAAC,CAAC;AAC/E,SAAS;AACT,aAAa;AACb;AACA,YAAY,MAAM,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;AACrD,YAAY,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,EAAE;AAC9B,gBAAgB,OAAO,GAAG,qBAAqB,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC;AAC9D,aAAa;AACb,SAAS;AACT,QAAQ,OAAO,OAAO,CAAC;AACvB,KAAK,CAAC;AACN,IAAI,MAAM,WAAW,GAAG,YAAY,CAAC,QAAQ,CAAC,CAAC;AAC/C,IAAI,QAAQ,GAAG,WAAW,CAAC,OAAO,CAAC;AACnC,IAAI,IAAI,cAAc,GAAG,EAAE,CAAC;AAC5B,IAAI,IAAI,UAAU,GAAG,CAAC,CAAC;AACvB,IAAI,IAAI,GAAG,CAAC;AACZ,IAAI,MAAM,GAAG,GAAG,qBAAqB,CAAC;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,MAAM,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC,yBAAyB,CAAC,GAAG,CAAC,CAAC,CAAC;AACrE;AACA,IAAI,IAAI,WAAW,GAAG,CAAC,OAAO,CAAC;AAC/B,IAAI,OAAO,CAAC,GAAG,GAAG,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,IAAI,EAAE;AAChD,QAAQ,MAAM,SAAS,GAAG,GAAG,CAAC,CAAC,CAAC,CAAC;AACjC,QAAQ,MAAM,IAAI,GAAG,QAAQ,CAAC,KAAK,CAAC,UAAU,EAAE,GAAG,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC;AAClE,QAAQ,WAAW,GAAG,WAAW,IAAI,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,GAAG,CAAC,CAAC,CAAC;AAClF,QAAQ,MAAM,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AACzE,QAAQ,cAAc,IAAI,CAAC,EAAE,UAAU,CAAC,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC;AACxD,QAAQ,UAAU,GAAG,GAAG,CAAC,SAAS,CAAC;AACnC,KAAK;AACL,IAAI,MAAM,IAAI,GAAG,QAAQ,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;AAChD,IAAI,WAAW,GAAG,WAAW,IAAI,IAAI,CAAC,OAAO,CAAC,yBAAyB,CAAC,GAAG,CAAC,CAAC,CAAC;AAC9E,IAAI,cAAc,IAAI,WAAW,GAAG,kBAAkB,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;AACpE;AACA,IAAI,OAAO,mBAAmB,CAAC,WAAW,CAAC,YAAY,EAAE,cAAc,CAAC,CAAC;AACzE,CAAC,CAAC;AACF,MAAM,aAAa,GAAG,CAAC,QAAQ,EAAE,iBAAiB,EAAE,YAAY,EAAE,YAAY,KAAK;AACnF,IAAI,OAAO,QAAQ;AACnB,SAAS,KAAK,CAAC,GAAG,CAAC;AACnB,SAAS,GAAG,CAAC,CAAC,WAAW,KAAK;AAC9B,QAAQ,IAAI,YAAY,IAAI,WAAW,CAAC,OAAO,CAAC,GAAG,GAAG,YAAY,CAAC,GAAG,CAAC,CAAC,EAAE;AAC1E,YAAY,OAAO,WAAW,CAAC,IAAI,EAAE,CAAC;AACtC,SAAS;AACT,QAAQ,IAAI,oBAAoB,CAAC,WAAW,EAAE,iBAAiB,CAAC,EAAE;AAClE,YAAY,OAAO,wBAAwB,CAAC,WAAW,EAAE,iBAAiB,EAAE,YAAY,CAAC,CAAC,IAAI,EAAE,CAAC;AACjG,SAAS;AACT,aAAa;AACb,YAAY,OAAO,WAAW,CAAC,IAAI,EAAE,CAAC;AACtC,SAAS;AACT,KAAK,CAAC;AACN,SAAS,IAAI,CAAC,IAAI,CAAC,CAAC;AACpB,CAAC,CAAC;AACF,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,YAAY,EAAE,uBAAuB,KAAK;AAC5G,IAAI,OAAO,YAAY,CAAC,OAAO,EAAE,CAAC,IAAI,KAAK;AAC3C,QAAQ,IAAI,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC;AACrC,QAAQ,IAAI,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;AACnC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AACtC,YAAY,QAAQ,GAAG,aAAa,CAAC,IAAI,CAAC,QAAQ,EAAE,iBAAiB,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;AACnG,SAAS;AACT,aAAa,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC;AACnD,YAAY,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC;AACjD,YAAY,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC;AAC7C,YAAY,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE;AACnD,YAAY,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC;AAClG,SAAS;AACT,QAAQ,MAAM,OAAO,GAAG;AACxB,YAAY,QAAQ,EAAE,QAAQ,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE;AAC7D,YAAY,OAAO;AACnB,SAAS,CAAC;AACV,QAAQ,OAAO,OAAO,CAAC;AACvB,KAAK,CAAC,CAAC;AACP,CAAC,CAAC;AACF,MAAM,YAAY,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,uBAAuB,KAAK;AAC9F,IAAI,OAAO,GAAG,2BAA2B,CAAC,OAAO,CAAC,CAAC;AACnD,IAAI,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;AACxC,IAAI,OAAO,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAC;AAC/C,IAAI,MAAM,OAAO,GAAG,mBAAmB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;AAC9D,IAAI,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC;AAC9B,IAAI,OAAO,GAAG,yBAAyB,CAAC,OAAO,CAAC,CAAC;AACjD,IAAI,IAAI,OAAO,EAAE;AACjB,QAAQ,OAAO,GAAG,cAAc,CAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;AAC7E,KAAK;AACL,IAAI,OAAO,GAAG,oBAAoB,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;AACzD,IAAI,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,sBAAsB,EAAE,MAAM,CAAC,CAAC;AAC9D,IAAI,OAAO;AACX,QAAQ,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE;AAC/B;AACA;AACA,QAAQ,gBAAgB,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG,MAAM;AAC1D,YAAY,WAAW,EAAE,oBAAoB,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC;AAC3E,YAAY,eAAe,EAAE,oBAAoB,CAAC,GAAG,CAAC,eAAe,EAAE,WAAW,CAAC;AACnF,SAAS,CAAC,CAAC;AACX,KAAK,CAAC;AACN,CAAC,CAAC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,oBAAoB,GAAG,CAAC,OAAO,EAAE,WAAW,KAAK;AACvD,IAAI,OAAO,OAAO,CAAC,OAAO,CAAC,+BAA+B,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;AAC/E,CAAC,CAAC;AACG,MAAC,QAAQ,GAAG,CAAC,OAAO,EAAE,OAAO,EAAE,uBAAuB,KAAK;AAChE,IAAI,MAAM,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;AACvC,IAAI,MAAM,WAAW,GAAG,OAAO,GAAG,IAAI,CAAC;AACvC,IAAI,MAAM,gBAAgB,GAAG,uBAAuB,CAAC,OAAO,CAAC,CAAC;AAC9D,IAAI,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;AACrC,IAAI,MAAM,YAAY,GAAG,EAAE,CAAC;AAC5B,IAAI,IAAI,uBAAuB,EAAE;AACjC,QAAQ,MAAM,wBAAwB,GAAG,CAAC,IAAI,KAAK;AACnD,YAAY,MAAM,WAAW,GAAG,CAAC,OAAO,EAAE,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;AACrE,YAAY,MAAM,OAAO,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;AACrD,YAAY,YAAY,CAAC,IAAI,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,CAAC,CAAC;AACxD,YAAY,IAAI,CAAC,QAAQ,GAAG,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC;AACxD,YAAY,OAAO,IAAI,CAAC;AACxB,SAAS,CAAC;AACV,QAAQ,OAAO,GAAG,YAAY,CAAC,OAAO,EAAE,CAAC,IAAI,KAAK;AAClD,YAAY,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE;AAC1C,gBAAgB,OAAO,wBAAwB,CAAC,IAAI,CAAC,CAAC;AACtD,aAAa;AACb,iBAAiB,IAAI,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,QAAQ,CAAC;AACvD,gBAAgB,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC;AACrD,gBAAgB,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC;AACjD,gBAAgB,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,WAAW,CAAC,EAAE;AACvD,gBAAgB,IAAI,CAAC,OAAO,GAAG,YAAY,CAAC,IAAI,CAAC,OAAO,EAAE,wBAAwB,CAAC,CAAC;AACpF,gBAAgB,OAAO,IAAI,CAAC;AAC5B,aAAa;AACb,YAAY,OAAO,IAAI,CAAC;AACxB,SAAS,CAAC,CAAC;AACX,KAAK;AACL,IAAI,MAAM,MAAM,GAAG,YAAY,CAAC,OAAO,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;AAC5E,IAAI,OAAO,GAAG,CAAC,MAAM,CAAC,OAAO,EAAE,GAAG,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAC/D,IAAI,IAAI,uBAAuB,EAAE;AACjC,QAAQ,YAAY,CAAC,OAAO,CAAC,CAAC,EAAE,WAAW,EAAE,OAAO,EAAE,KAAK;AAC3D,YAAY,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,OAAO,CAAC,CAAC;AAC5D,SAAS,CAAC,CAAC;AACX,KAAK;AACL,IAAI,MAAM,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,eAAe,KAAK;AACzD,QAAQ,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,6BAA6B,CAAC,eAAe,CAAC,WAAW,CAAC,EAAE,GAAG,CAAC,CAAC;AAClG,QAAQ,OAAO,GAAG,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;AAC1E,KAAK,CAAC,CAAC;AACP,IAAI,OAAO,OAAO,CAAC;AACnB;;;;","names":[],"sources":["node_modules/@stencil/core/internal/client/shadow-css.js"],"sourcesContent":["/*\n Stencil Client Platform v4.9.1 | MIT Licensed | https://stenciljs.com\n */\n/**\n * Utility function that will escape all regular expression special characters in a string.\n *\n * @param text The string potentially containing special characters.\n * @returns The string with all special characters escaped.\n */\nconst escapeRegExpSpecialCharacters = (text) => {\n return text.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n};\n\n/**\n * @license\n * Copyright Google Inc. All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n *\n * This file is a port of shadowCSS from `webcomponents.js` to TypeScript.\n * https://github.com/webcomponents/webcomponentsjs/blob/4efecd7e0e/src/ShadowCSS/ShadowCSS.js\n * https://github.com/angular/angular/blob/master/packages/compiler/src/shadow_css.ts\n */\nconst safeSelector = (selector) => {\n const placeholders = [];\n let index = 0;\n // Replaces attribute selectors with placeholders.\n // The WS in [attr=\"va lue\"] would otherwise be interpreted as a selector separator.\n selector = selector.replace(/(\\[[^\\]]*\\])/g, (_, keep) => {\n const replaceBy = `__ph-${index}__`;\n placeholders.push(keep);\n index++;\n return replaceBy;\n });\n // Replaces the expression in `:nth-child(2n + 1)` with a placeholder.\n // WS and \"+\" would otherwise be interpreted as selector separators.\n const content = selector.replace(/(:nth-[-\\w]+)(\\([^)]+\\))/g, (_, pseudo, exp) => {\n const replaceBy = `__ph-${index}__`;\n placeholders.push(exp);\n index++;\n return pseudo + replaceBy;\n });\n const ss = {\n content,\n placeholders,\n };\n return ss;\n};\nconst restoreSafeSelector = (placeholders, content) => {\n return content.replace(/__ph-(\\d+)__/g, (_, index) => placeholders[+index]);\n};\nconst _polyfillHost = '-shadowcsshost';\nconst _polyfillSlotted = '-shadowcssslotted';\n// note: :host-context pre-processed to -shadowcsshostcontext.\nconst _polyfillHostContext = '-shadowcsscontext';\nconst _parenSuffix = ')(?:\\\\((' + '(?:\\\\([^)(]*\\\\)|[^)(]*)+?' + ')\\\\))?([^,{]*)';\nconst _cssColonHostRe = new RegExp('(' + _polyfillHost + _parenSuffix, 'gim');\nconst _cssColonHostContextRe = new RegExp('(' + _polyfillHostContext + _parenSuffix, 'gim');\nconst _cssColonSlottedRe = new RegExp('(' + _polyfillSlotted + _parenSuffix, 'gim');\nconst _polyfillHostNoCombinator = _polyfillHost + '-no-combinator';\nconst _polyfillHostNoCombinatorRe = /-shadowcsshost-no-combinator([^\\s]*)/;\nconst _shadowDOMSelectorsRe = [/::shadow/g, /::content/g];\nconst _selectorReSuffix = '([>\\\\s~+[.,{:][\\\\s\\\\S]*)?$';\nconst _polyfillHostRe = /-shadowcsshost/gim;\n/**\n * Little helper for generating a regex that will match a specified\n * CSS selector when that selector is _not_ a part of a `@supports` rule.\n *\n * The pattern will match the provided `selector` (i.e. ':host', ':host-context', etc.)\n * when that selector is not a part of a `@supports` selector rule _or_ if the selector\n * is a part of the rule's declaration.\n *\n * For instance, if we create the regex with the selector ':host-context':\n * - '@supports selector(:host-context())' will return no matches (starts with '@supports')\n * - '@supports selector(:host-context()) { :host-context() { ... }}' will match the second ':host-context' (part of declaration)\n * - ':host-context() { ... }' will match ':host-context' (selector is not a '@supports' rule)\n * - ':host() { ... }' will return no matches (selector doesn't match selector used to create regex)\n *\n * @param selector The CSS selector we want to match for replacement\n * @returns A look-behind regex containing the selector\n */\nconst createSupportsRuleRe = (selector) => new RegExp(`((? {\n return input.replace(_commentRe, '');\n};\nconst _commentWithHashRe = /\\/\\*\\s*#\\s*source(Mapping)?URL=[\\s\\S]+?\\*\\//g;\nconst extractCommentsWithHash = (input) => {\n return input.match(_commentWithHashRe) || [];\n};\nconst _ruleRe = /(\\s*)([^;\\{\\}]+?)(\\s*)((?:{%BLOCK%}?\\s*;?)|(?:\\s*;))/g;\nconst _curlyRe = /([{}])/g;\nconst _selectorPartsRe = /(^.*?[^\\\\])??((:+)(.*)|$)/;\nconst OPEN_CURLY = '{';\nconst CLOSE_CURLY = '}';\nconst BLOCK_PLACEHOLDER = '%BLOCK%';\nconst processRules = (input, ruleCallback) => {\n const inputWithEscapedBlocks = escapeBlocks(input);\n let nextBlockIndex = 0;\n return inputWithEscapedBlocks.escapedString.replace(_ruleRe, (...m) => {\n const selector = m[2];\n let content = '';\n let suffix = m[4];\n let contentPrefix = '';\n if (suffix && suffix.startsWith('{' + BLOCK_PLACEHOLDER)) {\n content = inputWithEscapedBlocks.blocks[nextBlockIndex++];\n suffix = suffix.substring(BLOCK_PLACEHOLDER.length + 1);\n contentPrefix = '{';\n }\n const cssRule = {\n selector,\n content,\n };\n const rule = ruleCallback(cssRule);\n return `${m[1]}${rule.selector}${m[3]}${contentPrefix}${rule.content}${suffix}`;\n });\n};\nconst escapeBlocks = (input) => {\n const inputParts = input.split(_curlyRe);\n const resultParts = [];\n const escapedBlocks = [];\n let bracketCount = 0;\n let currentBlockParts = [];\n for (let partIndex = 0; partIndex < inputParts.length; partIndex++) {\n const part = inputParts[partIndex];\n if (part === CLOSE_CURLY) {\n bracketCount--;\n }\n if (bracketCount > 0) {\n currentBlockParts.push(part);\n }\n else {\n if (currentBlockParts.length > 0) {\n escapedBlocks.push(currentBlockParts.join(''));\n resultParts.push(BLOCK_PLACEHOLDER);\n currentBlockParts = [];\n }\n resultParts.push(part);\n }\n if (part === OPEN_CURLY) {\n bracketCount++;\n }\n }\n if (currentBlockParts.length > 0) {\n escapedBlocks.push(currentBlockParts.join(''));\n resultParts.push(BLOCK_PLACEHOLDER);\n }\n const strEscapedBlocks = {\n escapedString: resultParts.join(''),\n blocks: escapedBlocks,\n };\n return strEscapedBlocks;\n};\n/**\n * Replaces certain strings within the CSS with placeholders\n * that will later be replaced with class selectors appropriate\n * for the level of encapsulation (shadow or scoped).\n *\n * When performing these replacements, we want to ignore selectors that are a\n * part of an `@supports` rule. Replacing these selectors will result in invalid\n * CSS that gets passed to autoprefixer/postcss once the placeholders are replaced.\n * For example, a rule like:\n *\n * ```css\n * @supports selector(:host()) {\n * :host {\n * color: red;\n * }\n * }\n * ```\n *\n * Should be converted to:\n *\n * ```css\n * @supports selector(:host()) {\n * -shadowcsshost {\n * color: red;\n * }\n * }\n * ```\n *\n * The order the regex replacements happen in matters since we match\n * against a whole selector word so we need to match all of `:host-context`\n * before we try to replace `:host`. Otherwise the pattern for `:host` would match\n * `:host-context` resulting in something like `:-shadowcsshost-context`.\n *\n * @param cssText A CSS string for a component\n * @returns The modified CSS string\n */\nconst insertPolyfillHostInCssText = (cssText) => {\n // These replacements use a special syntax with the `$1`. When the replacement\n // occurs, `$1` maps to the content of the string leading up to the selector\n // to be replaced.\n //\n // Otherwise, we will replace all the preceding content in addition to the\n // selector because of the lookbehind in the regex.\n //\n // e.g. `/*!@___0___*/:host {}` => `/*!@___0___*/--shadowcsshost {}`\n cssText = cssText\n .replace(_colonHostContextRe, `$1${_polyfillHostContext}`)\n .replace(_colonHostRe, `$1${_polyfillHost}`)\n .replace(_colonSlottedRe, `$1${_polyfillSlotted}`);\n return cssText;\n};\nconst convertColonRule = (cssText, regExp, partReplacer) => {\n // m[1] = :host(-context), m[2] = contents of (), m[3] rest of rule\n return cssText.replace(regExp, (...m) => {\n if (m[2]) {\n const parts = m[2].split(',');\n const r = [];\n for (let i = 0; i < parts.length; i++) {\n const p = parts[i].trim();\n if (!p)\n break;\n r.push(partReplacer(_polyfillHostNoCombinator, p, m[3]));\n }\n return r.join(',');\n }\n else {\n return _polyfillHostNoCombinator + m[3];\n }\n });\n};\nconst colonHostPartReplacer = (host, part, suffix) => {\n return host + part.replace(_polyfillHost, '') + suffix;\n};\nconst convertColonHost = (cssText) => {\n return convertColonRule(cssText, _cssColonHostRe, colonHostPartReplacer);\n};\nconst colonHostContextPartReplacer = (host, part, suffix) => {\n if (part.indexOf(_polyfillHost) > -1) {\n return colonHostPartReplacer(host, part, suffix);\n }\n else {\n return host + part + suffix + ', ' + part + ' ' + host + suffix;\n }\n};\nconst convertColonSlotted = (cssText, slotScopeId) => {\n const slotClass = '.' + slotScopeId + ' > ';\n const selectors = [];\n cssText = cssText.replace(_cssColonSlottedRe, (...m) => {\n if (m[2]) {\n const compound = m[2].trim();\n const suffix = m[3];\n const slottedSelector = slotClass + compound + suffix;\n let prefixSelector = '';\n for (let i = m[4] - 1; i >= 0; i--) {\n const char = m[5][i];\n if (char === '}' || char === ',') {\n break;\n }\n prefixSelector = char + prefixSelector;\n }\n const orgSelector = (prefixSelector + slottedSelector).trim();\n const addedSelector = `${prefixSelector.trimEnd()}${slottedSelector.trim()}`.trim();\n if (orgSelector !== addedSelector) {\n const updatedSelector = `${addedSelector}, ${orgSelector}`;\n selectors.push({\n orgSelector,\n updatedSelector,\n });\n }\n return slottedSelector;\n }\n else {\n return _polyfillHostNoCombinator + m[3];\n }\n });\n return {\n selectors,\n cssText,\n };\n};\nconst convertColonHostContext = (cssText) => {\n return convertColonRule(cssText, _cssColonHostContextRe, colonHostContextPartReplacer);\n};\nconst convertShadowDOMSelectors = (cssText) => {\n return _shadowDOMSelectorsRe.reduce((result, pattern) => result.replace(pattern, ' '), cssText);\n};\nconst makeScopeMatcher = (scopeSelector) => {\n const lre = /\\[/g;\n const rre = /\\]/g;\n scopeSelector = scopeSelector.replace(lre, '\\\\[').replace(rre, '\\\\]');\n return new RegExp('^(' + scopeSelector + ')' + _selectorReSuffix, 'm');\n};\nconst selectorNeedsScoping = (selector, scopeSelector) => {\n const re = makeScopeMatcher(scopeSelector);\n return !re.test(selector);\n};\nconst injectScopingSelector = (selector, scopingSelector) => {\n return selector.replace(_selectorPartsRe, (_, before = '', _colonGroup, colon = '', after = '') => {\n return before + scopingSelector + colon + after;\n });\n};\nconst applySimpleSelectorScope = (selector, scopeSelector, hostSelector) => {\n // In Android browser, the lastIndex is not reset when the regex is used in String.replace()\n _polyfillHostRe.lastIndex = 0;\n if (_polyfillHostRe.test(selector)) {\n const replaceBy = `.${hostSelector}`;\n return selector\n .replace(_polyfillHostNoCombinatorRe, (_, selector) => injectScopingSelector(selector, replaceBy))\n .replace(_polyfillHostRe, replaceBy + ' ');\n }\n return scopeSelector + ' ' + selector;\n};\nconst applyStrictSelectorScope = (selector, scopeSelector, hostSelector) => {\n const isRe = /\\[is=([^\\]]*)\\]/g;\n scopeSelector = scopeSelector.replace(isRe, (_, ...parts) => parts[0]);\n const className = '.' + scopeSelector;\n const _scopeSelectorPart = (p) => {\n let scopedP = p.trim();\n if (!scopedP) {\n return '';\n }\n if (p.indexOf(_polyfillHostNoCombinator) > -1) {\n scopedP = applySimpleSelectorScope(p, scopeSelector, hostSelector);\n }\n else {\n // remove :host since it should be unnecessary\n const t = p.replace(_polyfillHostRe, '');\n if (t.length > 0) {\n scopedP = injectScopingSelector(t, className);\n }\n }\n return scopedP;\n };\n const safeContent = safeSelector(selector);\n selector = safeContent.content;\n let scopedSelector = '';\n let startIndex = 0;\n let res;\n const sep = /( |>|\\+|~(?!=))\\s*/g;\n // If a selector appears before :host it should not be shimmed as it\n // matches on ancestor elements and not on elements in the host's shadow\n // `:host-context(div)` is transformed to\n // `-shadowcsshost-no-combinatordiv, div -shadowcsshost-no-combinator`\n // the `div` is not part of the component in the 2nd selectors and should not be scoped.\n // Historically `component-tag:host` was matching the component so we also want to preserve\n // this behavior to avoid breaking legacy apps (it should not match).\n // The behavior should be:\n // - `tag:host` -> `tag[h]` (this is to avoid breaking legacy apps, should not match anything)\n // - `tag :host` -> `tag [h]` (`tag` is not scoped because it's considered part of a\n // `:host-context(tag)`)\n const hasHost = selector.indexOf(_polyfillHostNoCombinator) > -1;\n // Only scope parts after the first `-shadowcsshost-no-combinator` when it is present\n let shouldScope = !hasHost;\n while ((res = sep.exec(selector)) !== null) {\n const separator = res[1];\n const part = selector.slice(startIndex, res.index).trim();\n shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;\n const scopedPart = shouldScope ? _scopeSelectorPart(part) : part;\n scopedSelector += `${scopedPart} ${separator} `;\n startIndex = sep.lastIndex;\n }\n const part = selector.substring(startIndex);\n shouldScope = shouldScope || part.indexOf(_polyfillHostNoCombinator) > -1;\n scopedSelector += shouldScope ? _scopeSelectorPart(part) : part;\n // replace the placeholders with their original values\n return restoreSafeSelector(safeContent.placeholders, scopedSelector);\n};\nconst scopeSelector = (selector, scopeSelectorText, hostSelector, slotSelector) => {\n return selector\n .split(',')\n .map((shallowPart) => {\n if (slotSelector && shallowPart.indexOf('.' + slotSelector) > -1) {\n return shallowPart.trim();\n }\n if (selectorNeedsScoping(shallowPart, scopeSelectorText)) {\n return applyStrictSelectorScope(shallowPart, scopeSelectorText, hostSelector).trim();\n }\n else {\n return shallowPart.trim();\n }\n })\n .join(', ');\n};\nconst scopeSelectors = (cssText, scopeSelectorText, hostSelector, slotSelector, commentOriginalSelector) => {\n return processRules(cssText, (rule) => {\n let selector = rule.selector;\n let content = rule.content;\n if (rule.selector[0] !== '@') {\n selector = scopeSelector(rule.selector, scopeSelectorText, hostSelector, slotSelector);\n }\n else if (rule.selector.startsWith('@media') ||\n rule.selector.startsWith('@supports') ||\n rule.selector.startsWith('@page') ||\n rule.selector.startsWith('@document')) {\n content = scopeSelectors(rule.content, scopeSelectorText, hostSelector, slotSelector);\n }\n const cssRule = {\n selector: selector.replace(/\\s{2,}/g, ' ').trim(),\n content,\n };\n return cssRule;\n });\n};\nconst scopeCssText = (cssText, scopeId, hostScopeId, slotScopeId, commentOriginalSelector) => {\n cssText = insertPolyfillHostInCssText(cssText);\n cssText = convertColonHost(cssText);\n cssText = convertColonHostContext(cssText);\n const slotted = convertColonSlotted(cssText, slotScopeId);\n cssText = slotted.cssText;\n cssText = convertShadowDOMSelectors(cssText);\n if (scopeId) {\n cssText = scopeSelectors(cssText, scopeId, hostScopeId, slotScopeId);\n }\n cssText = replaceShadowCssHost(cssText, hostScopeId);\n cssText = cssText.replace(/>\\s*\\*\\s+([^{, ]+)/gm, ' $1 ');\n return {\n cssText: cssText.trim(),\n // We need to replace the shadow CSS host string in each of these selectors since we created\n // them prior to the replacement happening in the components CSS text.\n slottedSelectors: slotted.selectors.map((ref) => ({\n orgSelector: replaceShadowCssHost(ref.orgSelector, hostScopeId),\n updatedSelector: replaceShadowCssHost(ref.updatedSelector, hostScopeId),\n })),\n };\n};\n/**\n * Helper function that replaces the interim string representing a `:host` selector with\n * the host scope selector class for the element.\n *\n * @param cssText The CSS string to make the replacement in\n * @param hostScopeId The scope ID that will be used as the class representing the host element\n * @returns CSS with the selector replaced\n */\nconst replaceShadowCssHost = (cssText, hostScopeId) => {\n return cssText.replace(/-shadowcsshost-no-combinator/g, `.${hostScopeId}`);\n};\nconst scopeCss = (cssText, scopeId, commentOriginalSelector) => {\n const hostScopeId = scopeId + '-h';\n const slotScopeId = scopeId + '-s';\n const commentsWithHash = extractCommentsWithHash(cssText);\n cssText = stripComments(cssText);\n const orgSelectors = [];\n if (commentOriginalSelector) {\n const processCommentedSelector = (rule) => {\n const placeholder = `/*!@___${orgSelectors.length}___*/`;\n const comment = `/*!@${rule.selector}*/`;\n orgSelectors.push({ placeholder, comment });\n rule.selector = placeholder + rule.selector;\n return rule;\n };\n cssText = processRules(cssText, (rule) => {\n if (rule.selector[0] !== '@') {\n return processCommentedSelector(rule);\n }\n else if (rule.selector.startsWith('@media') ||\n rule.selector.startsWith('@supports') ||\n rule.selector.startsWith('@page') ||\n rule.selector.startsWith('@document')) {\n rule.content = processRules(rule.content, processCommentedSelector);\n return rule;\n }\n return rule;\n });\n }\n const scoped = scopeCssText(cssText, scopeId, hostScopeId, slotScopeId);\n cssText = [scoped.cssText, ...commentsWithHash].join('\\n');\n if (commentOriginalSelector) {\n orgSelectors.forEach(({ placeholder, comment }) => {\n cssText = cssText.replace(placeholder, comment);\n });\n }\n scoped.slottedSelectors.forEach((slottedSelector) => {\n const regex = new RegExp(escapeRegExpSpecialCharacters(slottedSelector.orgSelector), 'g');\n cssText = cssText.replace(regex, slottedSelector.updatedSelector);\n });\n return cssText;\n};\n\nexport { scopeCss };\n"],"version":3} \ No newline at end of file diff --git a/packages/mercury/showcase/assets/images/copy.svg b/packages/mercury/showcase/assets/images/copy.svg deleted file mode 100644 index d7e3eebf5..000000000 --- a/packages/mercury/showcase/assets/images/copy.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/packages/mercury/showcase/assets/images/favicon.fig b/packages/mercury/showcase/assets/images/favicon.fig deleted file mode 100644 index 46d35e183..000000000 Binary files a/packages/mercury/showcase/assets/images/favicon.fig and /dev/null differ diff --git a/packages/mercury/showcase/assets/images/favicon.png b/packages/mercury/showcase/assets/images/favicon.png deleted file mode 100644 index d509b8142..000000000 Binary files a/packages/mercury/showcase/assets/images/favicon.png and /dev/null differ diff --git a/packages/mercury/showcase/assets/json/navbar-items.json b/packages/mercury/showcase/assets/json/navbar-items.json deleted file mode 100644 index 02ff86108..000000000 --- a/packages/mercury/showcase/assets/json/navbar-items.json +++ /dev/null @@ -1,153 +0,0 @@ -{ - "components": { - "listCaption": "components", - "items": [ - { - "caption": "accordion", - "url": "accordion.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/accordion#ch-accordion-render" - }, - { - "caption": "button", - "url": "button.html", - "chameleonUrl": null - }, - { - "caption": "checkbox", - "url": "checkbox.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/checkbox#ch-checkbox" - }, - { - "caption": "combo-box", - "url": "combo-box.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/combobox#ch-combo-box" - }, - { - "caption": "form", - "url": "form.html", - "chameleonUrl": null - }, - { - "caption": "dialog", - "url": "dialog.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/dialog#ch-dialog" - }, - { - "caption": "dropdown", - "url": "dropdown.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/dropdown#ch-dropdown-render.html" - }, - { - "caption": "icon", - "url": "icon.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/image#ch-image" - }, - { - "caption": "input", - "url": "input.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/edit#ch-edit" - }, - { - "caption": "label", - "url": "label.html", - "chameleonUrl": null - }, - { - "caption": "layouts", - "url": "layouts.html", - "chameleonUrl": null - }, - { - "caption": "list-box", - "url": "list-box.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/action-list#ch-action-list-render" - }, - { - "caption": "radio-group", - "url": "radio-group.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/radio-group#ch-radio-group-render" - }, - { - "caption": "tab", - "url": "tab.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/tab#ch-tab-render" - }, - { - "caption": "tabular-grid", - "url": "tabular-grid.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/gx-grid#gx-grid-chameleon" - }, - { - "caption": "pills", - "url": "pills.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/combobox#ch-combo-box" - }, - { - "caption": "property-grid", - "url": "property-grid.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/gx-grid#gx-grid-chameleon" - }, - { - "caption": "slider", - "url": "slider.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/slider#ch-segmented-control-item" - }, - { - "caption": "tooltip", - "url": "tooltip.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/tooltip#ch-tooltip" - }, - { - "caption": "tree-view", - "url": "tree-view.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/tree-view#ch-tree-view-render" - }, - { - "caption": "typography", - "url": "typography.html", - "chameleonUrl": null - }, - { - "caption": "widget", - "url": "widget.html", - "chameleonUrl": null - }, - { - "caption": "sidebar", - "url": "sidebar.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/sidebar#ch-sidebar", - "hidden": true - } - ] - }, - "documentation": { - "listCaption": "documentation", - "items": [ - { - "caption": "spacing", - "url": "doc-spacing.html", - "chameleonUrl": null - }, - { - "caption": "utility classes", - "url": "doc-utility-classes.html", - "chameleonUrl": null - }, - { - "caption": "items", - "url": "doc-items.html", - "chameleonUrl": null - }, - { - "caption": "gemini-migration", - "url": "doc-gemini-migration.html", - "chameleonUrl": null - }, - { - "caption": "icons", - "url": "doc-icons.html", - "chameleonUrl": "https://github.com/genexuslabs/chameleon-controls-library/tree/main/src/components/image#ch-image" - } - ] - } -} diff --git a/packages/mercury/showcase/assets/models/accordion.js b/packages/mercury/showcase/assets/models/accordion.js deleted file mode 100644 index 81b6067b9..000000000 --- a/packages/mercury/showcase/assets/models/accordion.js +++ /dev/null @@ -1,43 +0,0 @@ -export const accordionModel = [ - { - id: "file", - caption: "objects: file", - expanded: true - }, - { - id: "domain", - caption: "objects: domain" - }, - { - id: "procedure", - caption: "objects: procedure" - }, - { - id: "document", - caption: "objects: document" - } -]; - -export const accordionWithIconsModel = [ - { - id: "file", - caption: "objects: file", - startImgSrc: "objects/file", - expanded: true - }, - { - id: "domain", - caption: "objects: domain", - startImgSrc: "objects/domain" - }, - { - id: "procedure", - caption: "objects: procedure", - startImgSrc: "objects/procedure" - }, - { - id: "document", - caption: "objects: document", - startImgSrc: "objects/document" - } -]; diff --git a/packages/mercury/showcase/assets/models/action-list.js b/packages/mercury/showcase/assets/models/action-list.js deleted file mode 100644 index 32fb67b02..000000000 --- a/packages/mercury/showcase/assets/models/action-list.js +++ /dev/null @@ -1,934 +0,0 @@ -const chatIconPath = - "https://unpkg.com/@genexus/unanimo@0.10.0/dist/assets/icons/chat.svg"; -const editIconPath = - "https://unpkg.com/@genexus/unanimo@0.10.0/dist/assets/icons/edit.svg"; -const deleteIconPath = - "https://unpkg.com/@genexus/unanimo@0.10.0/dist/assets/icons/delete.svg"; - -export const withIconsModel = [ - { - id: "workflow", - type: "actionable", - caption: "Workflow", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/workflow" }] - } - } - }, - { - id: "work-panel", - type: "actionable", - caption: "Work Panel", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/work-panel" }] - } - } - }, - { - id: "webpanel", - type: "actionable", - caption: "Webpanel", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/webpanel" }] - } - } - }, - { - id: "web-component", - type: "actionable", - caption: "Web Component", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/web-component" }] - } - } - }, - { - id: "version", - type: "actionable", - caption: "Version", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/version" }] - } - } - }, - { - id: "url-rewrite", - type: "actionable", - caption: "Url Rewrite", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/url-rewrite" }] - } - } - }, - { - id: "transaction", - type: "actionable", - caption: "Transaction", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/transaction" }] - } - } - }, - { - id: "to-be-defined", - type: "actionable", - caption: "To Be Defined", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/to-be-defined" }] - } - } - }, - { - id: "theme", - type: "actionable", - caption: "Theme", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/theme" }] - } - } - }, - { - id: "theme-web", - type: "actionable", - caption: "Theme Web", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/theme-web" }] - } - } - }, - { - id: "theme-for-sd", - type: "actionable", - caption: "Theme For Sd", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/theme-for-sd" }] - } - } - }, - { - id: "table", - type: "actionable", - caption: "Table", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/table" }] - } - } - }, - { - id: "super-app", - type: "actionable", - caption: "Super App", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/super-app" }] - } - } - }, - { - id: "subtype-group", - type: "actionable", - caption: "Subtype Group", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/subtype-group" }] - } - } - }, - { - id: "structured-data-type", - type: "actionable", - caption: "Structured Data Type", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/structured-data-type" }] - } - } - }, - { - id: "stencil", - type: "actionable", - caption: "Stencil", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/stencil" }] - } - } - }, - { - id: "roles", - type: "actionable", - caption: "Roles", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/roles" }] - } - } - }, - { - id: "report", - type: "actionable", - caption: "Report", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/report" }] - } - } - }, - { - id: "references", - type: "actionable", - caption: "References", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/references" }] - } - } - }, - { - id: "query", - type: "actionable", - caption: "Query", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/query" }] - } - } - }, - { - id: "procedure", - type: "actionable", - caption: "Procedure", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/procedure" }] - } - } - }, - { - id: "patterns", - type: "actionable", - caption: "Patterns", - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/patterns" }] - } - } - } -]; - -const GxEAIRecentChatsAdditionalInfo = { - "stretch-start": { - center: [{ imgSrc: chatIconPath, imageType: "mask" }] - }, - "stretch-end": { - center: [ - { - accessibleName: "Edit caption", - imgSrc: editIconPath, - imageType: "mask", - action: { - type: "modify", - showOnHover: true - } - }, - { - accessibleName: "Delete item", - imgSrc: deleteIconPath, - imageType: "mask", - action: { - type: "remove", - showOnHover: true - } - }, - { - accessibleName: "Pin item", - imageType: "mask", - action: { - type: "fix" - } - } - ] - } -}; - -export const actionListModel = [ - { - id: "2023 employee contracts", - type: "actionable", - caption: "2023 employee contracts", - additionalInformation: GxEAIRecentChatsAdditionalInfo - }, - { - id: "Investors reports", - type: "actionable", - caption: "Investors reports", - additionalInformation: GxEAIRecentChatsAdditionalInfo - }, - { - id: "2022 employee contracts", - type: "actionable", - caption: "2022 employee contracts", - additionalInformation: GxEAIRecentChatsAdditionalInfo - }, - { - id: "Yesterday", - type: "group", - caption: "Yesterday", - items: [ - { - id: "Pluto Exploration Contract", - type: "actionable", - caption: "Pluto Exploration Contract", - additionalInformation: GxEAIRecentChatsAdditionalInfo - }, - { - id: "Saturn Exploration Contract", - type: "actionable", - fixed: true, - caption: "Saturn Exploration Contract", - additionalInformation: GxEAIRecentChatsAdditionalInfo - }, - { - id: "Mars Exploration Contract", - type: "actionable", - caption: "Mars Exploration Contract", - additionalInformation: GxEAIRecentChatsAdditionalInfo - } - ] - } -]; - -export const keyboardNavigation = [ - { - id: "item 1", - type: "group", - caption: "item 1", - expandable: true, - expanded: true, - items: [ - { - id: "item 1.1", - type: "actionable", - caption: "item 1.1", - selected: true, - additionalInformation: { - "stretch-start": { - center: [{ imgSrc: "objects/query" }] - }, - "stretch-end": { - center: [{ caption: "6.0.0-next.5" }] - } - } - }, - { - id: "item 1.2", - type: "actionable", - caption: "item 1.2" - }, - { - id: "item 1.3", - type: "actionable", - caption: "item 1.3" - }, - { - id: "item 1.4", - type: "actionable", - caption: "item 1.4" - } - ] - }, - { type: "separator" }, - { - id: "item 2", - type: "group", - caption: "item 2", - expandable: true, - expanded: false, - items: [ - { - id: "item 2.1", - type: "actionable", - caption: "item 2.1", - disabled: true - }, - { - id: "item 2.2", - type: "actionable", - caption: "item 2.2" - }, - { - id: "item 2.3", - type: "actionable", - caption: "item 2.3", - disabled: true - }, - { - id: "item 2.4", - type: "actionable", - caption: "item 2.4" - } - ] - }, - { type: "separator" }, - { - id: "item 3", - type: "group", - caption: "item 3", - expandable: true, - expanded: false, - items: [ - { - id: "item 3.1", - type: "actionable", - caption: "item 3.1", - disabled: true - }, - { - id: "item 3.2", - type: "actionable", - caption: "item 3.2" - }, - { - id: "item 3.3", - type: "actionable", - caption: "item 3.3", - disabled: true - }, - { - id: "item 3.4", - type: "actionable", - caption: "item 3.4", - disabled: true - } - ] - }, - { type: "separator" }, - { - id: "item 4", - type: "group", - caption: "item 4", - disabled: true, - expandable: true, - expanded: false, - items: [ - { - id: "item 4.1", - type: "actionable", - caption: "item 4.1", - disabled: true - }, - { - id: "item 4.2", - type: "actionable", - caption: "item 4.2" - } - ] - }, - { type: "separator" }, - { - id: "item 5", - type: "group", - caption: "item 5", - items: [ - { - id: "item 5.1", - type: "actionable", - caption: "item 5.1", - disabled: true - }, - { - id: "item 5.2", - type: "actionable", - caption: "item 5.2" - }, - { - id: "item 5.3", - type: "actionable", - caption: "item 5.3", - disabled: true - }, - { - id: "item 5.4", - type: "actionable", - caption: "item 5.4", - disabled: true - } - ] - }, - { type: "separator" }, - { - id: "item 6", - type: "group", - caption: "item 6", - items: [ - { - id: "item 6.1", - type: "actionable", - caption: "item 6.1", - disabled: true - }, - { - id: "item 6.1", - type: "actionable", - caption: "item 6.1", - disabled: true - } - ] - }, - { type: "separator" }, - { - id: "item 7", - type: "actionable", - caption: "item 7" - }, - { - id: "item 8", - type: "actionable", - caption: "item 8" - }, - { - id: "item 9", - type: "actionable", - caption: "item 9" - }, - { - id: "item 10", - type: "group", - caption: "item 10", - expandable: true, - items: [ - { - id: "item 10.1", - type: "actionable", - caption: "item 10.1", - disabled: true - }, - { - id: "item 10.1", - type: "actionable", - caption: "item 10.1", - disabled: true - } - ] - }, - { type: "separator" }, - { - id: "item 11", - type: "group", - caption: "item 11", - expandable: true, - expanded: true, - items: [ - { - id: "item 11.1", - type: "actionable", - caption: "item 11.1" - }, - { - id: "item 11.2", - type: "actionable", - caption: "item 11.2", - disabled: true - } - ] - }, - { type: "separator" }, - { - id: "item 12", - type: "actionable", - caption: "item 12" - }, - { - id: "item 13", - type: "actionable", - caption: "item 13", - disabled: true - }, - { type: "separator" }, - { - id: "item 14", - type: "group", - caption: "item 14", - disabled: true, - items: [ - { - id: "item 14.1", - type: "actionable", - caption: "item 14.1" - }, - { - id: "item 14.1", - type: "actionable", - caption: "item 14.1" - } - ] - } -]; - -// Presidents - -export const argentinianPresidents = [ - { - id: "president-1", - type: "group", - caption: "Juan Domingo Perón", - expandable: false, - expanded: true, - items: [ - { - id: "1946-1952", - type: "actionable", - caption: "1946-1952", - selected: false - }, - { - id: "1952-1955", - type: "actionable", - caption: "1952-1955", - selected: false - }, - { - id: "1973-1974", - type: "actionable", - caption: "1973-1974", - selected: false - } - ] - }, - { - id: "president-2", - type: "group", - caption: "Arturo Frondizi", - expandable: false, - expanded: true, - items: [ - { - id: "1958-1962", - type: "actionable", - caption: "1958-1962", - selected: false - } - ] - }, - { - id: "president-3", - type: "group", - caption: "Raúl Alfonsín", - expandable: false, - expanded: true, - items: [ - { - id: "1983-1989", - type: "actionable", - caption: "1983-1989", - selected: false - } - ] - }, - { - id: "president-4", - type: "group", - caption: "Carlos Menem", - expandable: false, - expanded: true, - items: [ - { - id: "1989-1995", - type: "actionable", - caption: "1989-1995", - selected: false - }, - { - id: "1995-1999", - type: "actionable", - caption: "1995-1999", - selected: false - } - ] - }, - { - id: "president-5", - type: "group", - caption: "Cristina Fernández de Kirchner", - expandable: false, - expanded: true, - items: [ - { - id: "2007-2011", - type: "actionable", - caption: "2007-2011", - selected: false - }, - { - id: "2011-2015", - type: "actionable", - caption: "2011-2015", - selected: false - } - ] - }, - { - id: "president-6", - type: "group", - caption: "Mauricio Macri", - expandable: false, - expanded: true, - items: [ - { - id: "2015-2019", - type: "actionable", - caption: "2015-2019", - selected: false - } - ] - }, - { - id: "president-7", - type: "group", - caption: "Alberto Fernández", - expandable: false, - expanded: true, - items: [ - { - id: "2019-2023", - type: "actionable", - caption: "2019-2023", - selected: false - } - ] - } -]; - -const presidentsModelBR = [ - { - id: "president-1", - type: "group", - caption: "Getúlio Vargas", - expandable: false, - expanded: true, - items: [ - { - id: "1930-1945", - type: "actionable", - caption: "1930-1945", - selected: false - }, - { - id: "1951-1954", - type: "actionable", - caption: "1951-1954", - selected: false - } - ] - }, - { - id: "president-2", - type: "group", - caption: "Juscelino Kubitschek", - expandable: false, - expanded: true, - items: [ - { - id: "1956-1961", - type: "actionable", - caption: "1956-1961", - selected: false - } - ] - }, - { - id: "president-3", - type: "group", - caption: "João Goulart", - expandable: false, - expanded: true, - items: [ - { - id: "1961-1964", - type: "actionable", - caption: "1961-1964", - selected: false - } - ] - }, - { - id: "president-4", - type: "group", - caption: "Fernando Collor", - expandable: false, - expanded: true, - items: [ - { - id: "1990-1992", - type: "actionable", - caption: "1990-1992", - selected: false - } - ] - }, - { - id: "president-5", - type: "group", - caption: "Fernando Henrique Cardoso", - expandable: false, - expanded: true, - items: [ - { - id: "1995-1999", - type: "actionable", - caption: "1995-1999", - selected: false - }, - { - id: "1999-2003", - type: "actionable", - caption: "1999-2003", - selected: false - } - ] - }, - { - id: "president-6", - type: "group", - caption: "Luiz Inácio Lula da Silva", - expandable: false, - expanded: true, - items: [ - { - id: "2003-2007", - type: "actionable", - caption: "2003-2007", - selected: false - }, - { - id: "2007-2011", - type: "actionable", - caption: "2007-2011", - selected: false - }, - { - id: "2023-", - type: "actionable", - caption: "2023-present", - selected: false - } - ] - }, - { - id: "president-7", - type: "group", - caption: "Dilma Rousseff", - expandable: false, - expanded: true, - items: [ - { - id: "2011-2016", - type: "actionable", - caption: "2011-2016", - selected: false - } - ] - }, - { - id: "president-8", - type: "group", - caption: "Jair Bolsonaro", - expandable: false, - expanded: true, - items: [ - { - id: "2019-2023", - type: "actionable", - caption: "2019-2023", - selected: false - } - ] - } -]; - -const presidentsModelUY = [ - { - id: "president-1", - type: "group", - caption: "José Batlle y Ordóñez", - expandable: false, - expanded: true, - items: [ - { - id: "1903-1907", - type: "actionable", - caption: "1903-1907", - selected: false - }, - { - id: "1911-1915", - type: "actionable", - caption: "1911-1915", - selected: false - } - ] - }, - { - id: "president-2", - type: "group", - caption: "Luis Batlle Berres", - expandable: false, - expanded: true, - items: [ - { - id: "1947-1951", - type: "actionable", - caption: "1947-1951", - selected: false - } - ] - }, - { - id: "president-3", - type: "group", - caption: "Jorge Pacheco Areco", - expandable: false, - expanded: true, - items: [ - { - id: "1967-1972", - type: "actionable", - caption: "1967-1972", - selected: false - } - ] - }, - { - id: "president-4", - type: "group", - caption: "Julio María Sanguinetti", - expandable: false, - expanded: true, - items: [ - { - id: "1985-1990", - type: "actionable", - caption: "1985-1990", - selected: false - }, - { - id: "1995-2000", - type: "actionable", - caption: "1995-2000", - selected: false - } - ] - } -]; diff --git a/packages/mercury/showcase/assets/models/combo-box.js b/packages/mercury/showcase/assets/models/combo-box.js deleted file mode 100644 index 4d6c61c45..000000000 --- a/packages/mercury/showcase/assets/models/combo-box.js +++ /dev/null @@ -1,221 +0,0 @@ -export const comboBoxWithIconsModel = [ - { - value: "workflow", - caption: "Workflow", - startImgSrc: "objects/workflow" - }, - { - value: "work-panel", - caption: "Work Panel", - startImgSrc: "objects/work-panel" - }, - { - value: "webpanel", - caption: "Webpanel", - startImgSrc: "objects/webpanel" - }, - { - value: "web-component", - caption: "Web Component", - startImgSrc: "objects/web-component" - }, - { - value: "version", - caption: "Version", - startImgSrc: "objects/version" - }, - { - value: "url-rewrite", - caption: "Url Rewrite", - startImgSrc: "objects/url-rewrite" - }, - { - value: "transaction", - caption: "Transaction", - startImgSrc: "objects/transaction" - }, - { - value: "to-be-defined", - caption: "To Be Defined", - startImgSrc: "objects/to-be-defined" - }, - { - value: "theme", - caption: "Theme", - startImgSrc: "objects/theme" - }, - { - value: "theme-web", - caption: "Theme Web", - startImgSrc: "objects/theme-web" - }, - { - value: "theme-for-sd", - caption: "Theme For Sd", - startImgSrc: "objects/theme-for-sd" - }, - { - value: "table", - caption: "Table", - startImgSrc: "objects/table" - }, - { - value: "super-app", - caption: "Super App", - startImgSrc: "objects/super-app" - }, - { - value: "subtype-group", - caption: "Subtype Group", - startImgSrc: "objects/subtype-group" - }, - { - value: "structured-data-type", - caption: "Structured Data Type", - startImgSrc: "objects/structured-data-type" - }, - { - value: "stencil", - caption: "Stencil", - startImgSrc: "objects/stencil" - }, - { - value: "roles", - caption: "Roles", - startImgSrc: "objects/roles" - }, - { - value: "report", - caption: "Report", - startImgSrc: "objects/report" - }, - { - value: "references", - caption: "References", - startImgSrc: "objects/references" - }, - { - value: "query", - caption: "Query", - startImgSrc: "objects/query" - }, - { - value: "procedure", - caption: "Procedure", - startImgSrc: "objects/procedure" - }, - { - value: "patterns", - caption: "Patterns", - startImgSrc: "objects/patterns" - } -]; - -export const comboBox1Model = [ - { - value: "Value 1", - caption: "Label for the value 1" - }, - { - value: "Value 2", - caption: "Label for the value 222", - items: [ - { - value: "Value 2.1", - caption: "Label for the value 2.1" - }, - { - value: "Value 2.2", - caption: "Label for the value 2.2" - } - ] - }, - { - value: "Value 3", - caption: "Label for the value 3", - disabled: true - }, - { value: "Value 4", caption: "Label for the value 4" }, - { - value: "Value 5", - caption: "Label for the value 5", - disabled: true, - expandable: true, - items: [ - { - value: "Value 5.1", - caption: "Label for the value 5.1" - }, - { - value: "Value 5.2", - caption: "Label for the value 5.2" - }, - { - value: "Value 5.3", - caption: "Label for the value 5.3", - disabled: false - }, - { - value: "Value 5.4", - caption: "Label for the value 5.4" - } - ] - }, - { - value: "Value 6", - caption: "Label for the value 6", - expandable: true, - expanded: true, - items: [ - { - value: "Value 6.1", - caption: "Label for the value 6.1", - disabled: true - }, - { - value: "Value 6.2", - caption: "Label for the value 6.2", - disabled: true - }, - { - value: "Value 6.3", - caption: "Label for the value 6.3", - disabled: false - }, - { - value: "Value 6.4", - caption: "Label for the value 6.4" - } - ] - }, - { - value: "Value 7", - caption: "Label for the value 7", - disabled: true - }, - { value: "Value 8", caption: "Label for the value 8" }, - { - value: "Value 9", - caption: "Label for the value 9", - expandable: true, - items: [ - { - value: "Value 9.1", - caption: "Label for the value 9.1" - }, - { - value: "Value 9.2", - caption: "Label for the value 9.2" - }, - { - value: "Value 9.3", - caption: "Label for the value 9.3", - disabled: false - }, - { - value: "Value 9.4", - caption: "Label for the value 9.4" - } - ] - } -]; diff --git a/packages/mercury/showcase/assets/models/dropdown.js b/packages/mercury/showcase/assets/models/dropdown.js deleted file mode 100644 index b50901ef2..000000000 --- a/packages/mercury/showcase/assets/models/dropdown.js +++ /dev/null @@ -1,122 +0,0 @@ -export const dropdownPlainSimple = [ - { - id: "1", - caption: "Item 1" - }, - { - id: "2", - caption: "Item 2" - }, - { - id: "3", - caption: "Item 3" - }, - { - id: "4", - caption: "Item 4" - }, - { - id: "5", - caption: "Item 5", - showSeparator: true - } -]; - -export const dropdownPlainIcons = [ - { - id: "1", - caption: "Item 1", - startImgSrc: "objects/web-component" - }, - { - id: "2", - caption: "Item 2", - startImgSrc: "objects/web-component" - }, - { - id: "3", - caption: "Item 3", - startImgSrc: "objects/web-component" - }, - { - id: "4", - caption: "Item 4", - startImgSrc: "objects/web-component" - }, - { - id: "5", - caption: "Item 5", - startImgSrc: "objects/web-component" - } -]; - -export const dropdownNested = [ - { - id: "1", - caption: "Main Item 1" - }, - { - id: "2", - caption: "Main Item 2", - items: [ - { - id: "2-1", - caption: "Nested Item 1" - }, - { - id: "2-2", - caption: "Nested Item 2" - } - ], - itemsPosition: "right" - }, - { - id: "3", - caption: "Main Item 3", - items: [ - { - id: "3-1", - caption: "Nested Item 1" - }, - { - id: "3-2", - caption: "Nested Item 2", - itemsPosition: "right" - } - ], - itemsPosition: "right" - } -]; - -export const dropdownWithSeparators = [ - { - id: "1.1", - caption: "Item 1.1" - }, - { - id: "1.2", - caption: "Item 1.2" - }, - { - id: "1.3", - caption: "Item 1.3", - showSeparator: true - }, - { - id: "2.1", - caption: "Item 2.1" - }, - { - id: "2.2", - caption: "Item 2.2", - showSeparator: true - }, - { - id: "3.1", - caption: "Item 3.1" - }, - { - id: "3.2", - caption: "Item 3.2" - } -]; diff --git a/packages/mercury/showcase/assets/models/pills.js b/packages/mercury/showcase/assets/models/pills.js deleted file mode 100644 index 5796a2307..000000000 --- a/packages/mercury/showcase/assets/models/pills.js +++ /dev/null @@ -1,98 +0,0 @@ -// Status pills -export const pillStatusModel = [ - { - value: "enabled", - caption: "Enabled" - }, - { - value: "processing", - caption: "Processing" - }, - { - value: "success", - caption: "Success" - }, - { - value: "error", - caption: "Error" - }, - { - value: "warning", - caption: "Warning" - } -]; - -// Dummy pills for showing "grouped" pills: - -export const devStatusModel = [ - { value: "draft", caption: "Draft" }, - { value: "in_progress", caption: "In Progress" }, - { value: "review", caption: "In Review" }, - { value: "approved", caption: "Approved" }, - { value: "deployed", caption: "Deployed" }, - { value: "archived", caption: "Archived" } -]; - -export const projectPhasesModel = [ - { value: "analysis", caption: "Analysis" }, - { value: "design", caption: "Design" }, - { value: "development", caption: "Development" }, - { value: "testing", caption: "Testing" }, - { value: "deployment", caption: "Deployment" }, - { value: "maintenance", caption: "Maintenance" } -]; - -export const moduleTypesModel = [ - { value: "backend", caption: "Backend" }, - { value: "frontend", caption: "Frontend" }, - { value: "api", caption: "API" }, - { value: "integration", caption: "Integration" }, - { value: "security", caption: "Security" }, - { value: "ui", caption: "UI/UX" } -]; - -export const userRolesModel = [ - { value: "admin", caption: "Admin" }, - { value: "developer", caption: "Developer" }, - { value: "analyst", caption: "Analyst" }, - { value: "tester", caption: "Tester" }, - { value: "client", caption: "Client" } -]; - -export const issueTypesModel = [ - { value: "bug", caption: "Bug" }, - { value: "feature", caption: "Feature" }, - { value: "improvement", caption: "Improvement" }, - { value: "task", caption: "Task" }, - { value: "support", caption: "Support" } -]; - -export const priorityLevelsModel = [ - { value: "low", caption: "Low" }, - { value: "medium", caption: "Medium" }, - { value: "high", caption: "High" }, - { value: "critical", caption: "Critical" } -]; - -export const environmentTypesModel = [ - { value: "development", caption: "Development" }, - { value: "testing", caption: "Testing" }, - { value: "staging", caption: "Staging" }, - { value: "production", caption: "Production" } -]; - -export const taskStatusModel = [ - { value: "todo", caption: "To Do" }, - { value: "in_progress", caption: "In Progress" }, - { value: "review", caption: "In Review" }, - { value: "done", caption: "Done" }, - { value: "blocked", caption: "Blocked" } -]; - -export const componentCategoriesModel = [ - { value: "ui_component", caption: "UI Component" }, - { value: "logic_component", caption: "Logic Component" }, - { value: "service", caption: "Service" }, - { value: "database", caption: "Database" }, - { value: "api", caption: "API" } -]; diff --git a/packages/mercury/showcase/assets/models/tree-chameleon.js b/packages/mercury/showcase/assets/models/tree-chameleon.js deleted file mode 100644 index d4f5a59c9..000000000 --- a/packages/mercury/showcase/assets/models/tree-chameleon.js +++ /dev/null @@ -1,1536 +0,0 @@ -const KB_EXPLORER_ORDER = { - module: 1, - folder: 2, - api: 3, - dso: 3, - stencil: 3, - sdPanel: 3, - masterPanel: 3, - procedure: 3, - webPanel: 3, - globalEvents: 4, - domain: 5, - localization: 6, - files: 7, - images: 8 -}; - -const FIRST_LEVEL_SIZE = 10; -const SECOND_LEVEL_SIZE = 20; -const THIRD_LEVEL_SIZE = 20; - -const fileSystem_root = [ - { - id: "dev", - caption: "dev", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - }, - { - id: "etc", - caption: "etc", - editable: false, - parts: "item--folder", - dragDisabled: true, - dropDisabled: true, - items: [ - { - id: "cups", - caption: "cups", - parts: "objects-file", - startImgSrc: "--icon-path", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - }, - { - id: "httpd", - caption: "httpd", - parts: "objects-file", - startImgSrc: "--icon-path", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - }, - { - id: "init", - caption: "init.d", - parts: "objects-file", - startImgSrc: "--icon-path", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - } - ] - }, - { - id: "sbin", - caption: "sbin", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - }, - { - id: "tmp", - caption: "tmp", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - }, - { - id: "Users", - caption: "Users", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - items: [ - { - id: "jdoe", - caption: "jdoe", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - }, - { - id: "jmiller", - caption: "jmiller", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - }, - { - id: "mysql", - caption: "mysql", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - } - ] - }, - { - id: "usr", - caption: "usr", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - items: [ - { - id: "bin", - caption: "bin", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - }, - { - id: "lib", - caption: "lib", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - }, - { - id: "local", - caption: "local", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - } - ] - }, - { - id: "var", - caption: "var", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - items: [ - { - id: "log", - caption: "log", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - }, - { - id: "spool", - caption: "spool", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - }, - { - id: "yp", - caption: "yp", - parts: "item--folder", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true - } - ] - } -]; - -export const fileSystemModel = [ - { - id: "root", - caption: "/", - parts: "item--folder", - editable: false, - expanded: true, - dragDisabled: true, - dropDisabled: true, - items: fileSystem_root - } -]; - -const kbExplorer_root = [ - { - id: "Main_Programs", - caption: "Main Programs", - parts: "objects-category", - editable: false, - startImgSrc: "--icon-path", - dragDisabled: true, - dropDisabled: true, - lazy: true, - order: 0, - expanded: true - }, - { - id: "Root_Module", - caption: "Root Module", - editable: false, - parts: "item--module", - dragDisabled: true, - lazy: true, - order: 1 - }, - { - id: "References", - caption: "References", - parts: "objects-references", - editable: false, - startImgSrc: "--icon-path", - dragDisabled: true, - dropDisabled: true, - order: 2 - }, - { - id: "Customization", - caption: "Customization", - parts: "objects-customization", - editable: false, - startImgSrc: "--icons-path", - dragDisabled: true, - dropDisabled: true, - lazy: true, - order: 3, - expanded: true - }, - { - id: "Documentation", - caption: "Documentation", - parts: "objects-document", - editable: false, - leaf: true, - startImgSrc: "--icon-path", - dragDisabled: true, - dropDisabled: true, - order: 4 - } -]; - -export const kbExplorerModel = [ - { - id: "root", - caption: "GeneXusNext Develop 1", - parts: "objects-version", - editable: false, - expanded: true, - leaf: false, - startImgSrc: "--icon-path", - dragDisabled: true, - dropDisabled: true, - items: kbExplorer_root - } -]; - -const kbExplorerModel_MainPrograms = [ - { - id: "Main_Programs.Prompt", - caption: "Prompt", - parts: "objects-panel-for-sd", - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - metadata: "Panel", - order: KB_EXPLORER_ORDER.sdPanel - }, - { - id: "Main_Programs.ApiHealthCheck", - caption: "ApiHealthCheck", - parts: "objects-api", - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.api - }, - { - id: "Main_Programs.BackHome", - caption: "BackHome", - parts: "objects-web-panel", - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.webPanel - }, - { - id: "Main_Programs.Login", - caption: "Login", - parts: "objects-web-panel", - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.webPanel - }, - { - id: "Main_Programs.ProvisioningServices", - caption: "ProvisioningServices", - parts: "objects-api", - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.api - }, - { - id: "Main_Programs.VersionCheck", - caption: "VersionCheck", - parts: "objects-procedure", - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.procedure - } -]; - -const kbExplorerModel_RootModule = [ - { - id: "Root_Module.Images", - caption: "Images", - parts: "objects-image", - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.images - }, - { - id: "Root_Module.GXNext", - caption: "GXNext", - parts: "objects-dso", - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.dso - }, - { - id: "Root_Module.GeneXusNext", - caption: "GeneXusNext", - parts: "objects-dso", - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.dso - }, - { - id: "Root_Module.Files", - caption: "Files", - parts: "objects-file", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.files - }, - { - id: "Root_Module.Domain", - caption: "Domain", - parts: "objects-domain", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.domain - } -]; - -const kbExplorerModel_Customization = [ - { - id: "Customization.Files", - caption: "Files", - parts: "objects-file", - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.files - }, - { - id: "Customization.Images", - caption: "Images", - parts: "objects-image", - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.images - }, - { - id: "Customization.Localization", - caption: "Localization 1", - parts: "objects-lenguage", - dragDisabled: true, - dropDisabled: true, - lazy: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.localization - } -]; - -const kbExplorerModel_Customization_Localization = [ - { - id: "Customization.Localization.Arabic", - caption: "Arabic", - parts: "objects-lenguage", - checkbox: true, - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.localization - }, - { - id: "Customization.Localization.English", - caption: "English", - parts: "objects-lenguage", - checkbox: true, - checked: true, - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.localization - }, - { - id: "Customization.Localization.Spanish", - caption: "Spanish", - parts: "objects-lenguage", - checkbox: true, - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.localization - }, - { - id: "Customization.Localization.Italian", - caption: "Italian", - parts: "objects-lenguage", - checkbox: true, - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.localization - } -]; - -const kbExplorerModel_RootModule_General = [ - { - id: "Root_Module.General.Security", - caption: "Security", - parts: "item--module", - order: KB_EXPLORER_ORDER.module - }, - { - id: "Root_Module.General.Services", - caption: "Services", - parts: "item--module", - order: KB_EXPLORER_ORDER.module - }, - { - id: "Root_Module.General.UI", - caption: "UI", - parts: "item--module", - lazy: true, - order: KB_EXPLORER_ORDER.module - }, - { - id: "Root_Module.General.Domain", - caption: "Domain", - parts: "objects-domain", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.domain - }, - { - id: "Root_Module.General.GlobalEvents", - caption: "GlobalEvents", - parts: "objects-external-object", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.globalEvents - } -]; - -const kbExplorerModel_RootModule_General_UI = [ - { - id: "Root_Module.General.UI.DesignSystem", - caption: "DesignSystem", - parts: "item--module", - order: KB_EXPLORER_ORDER.module - }, - { - id: "Root_Module.General.UI.Q2", - caption: "Q2", - parts: "item--folder", - lazy: true, - order: KB_EXPLORER_ORDER.folder - }, - { - id: "Root_Module.General.UI.Popups", - caption: "Popups", - parts: "item--module", - order: KB_EXPLORER_ORDER.module - }, - { - id: "Root_Module.General.UI.Stencils", - caption: "Stencils", - parts: "item--folder", - lazy: true, - order: KB_EXPLORER_ORDER.folder - }, - { - id: "Root_Module.General.UI.Domain", - caption: "Domain", - parts: "objects-domain", - editable: false, - dragDisabled: true, - dropDisabled: true, - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.domain - }, - { - id: "Root_Module.General.UI.Login", - caption: "Login", - parts: "item--pending-commit objects-panel-for-sd", - leaf: true, - startImgSrc: "--icon-path", - metadata: "Panel", - order: KB_EXPLORER_ORDER.sdPanel - } -]; - -const kbExplorerModel_RootModule_General_UI_Q2 = [ - { - id: "Root_Module.General.UI.Q2.ContactUs", - caption: "ContactUs", - parts: "objects-panel-for-sd", - leaf: true, - startImgSrc: "--icon-path", - metadata: "Panel", - order: KB_EXPLORER_ORDER.sdPanel - }, - { - id: "Root_Module.General.UI.Q2.ProjectDetail", - caption: "ProjectDetail", - parts: "item--pending-commit objects-panel-for-sd", - leaf: true, - startImgSrc: "--icon-path", - metadata: "Panel", - order: KB_EXPLORER_ORDER.sdPanel - }, - { - id: "Root_Module.General.UI.Q2.MyApps", - caption: "MyApps", - parts: "objects-panel-for-sd", - leaf: true, - startImgSrc: "--icon-path", - metadata: "Panel", - order: KB_EXPLORER_ORDER.sdPanel - } -]; - -const kbExplorerModel_RootModule_General_UI_Stencils = [ - { - id: "Root_Module.General.UI.Stencils.StencilPublishProject", - caption: "StencilPublishProject", - parts: "objects-stencil", - leaf: true, - startImgSrc: "--icon-path", - order: KB_EXPLORER_ORDER.stencil - } -]; - -export const importObjectsModel = [ - { - id: "Category", - caption: "Category", - parts: "objects-category", - startImgSrc: "--icon-path", - items: [ - { - id: "Category.Main_Programs", - caption: "Main Programs", - parts: "objects-category", - startImgSrc: "--icon-path", - leaf: true - } - ] - }, - { - id: "Design System", - caption: "Design System", - parts: "objects-dso", - startImgSrc: "--icon-path", - items: [ - { - id: "Design_System.ActionGroup", - caption: "ActionGroup", - parts: "objects-dso", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "Design_System.DynamicActionGroup", - caption: "DynamicActionGroup", - parts: "objects-dso", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "Design_System.UserControls", - caption: "UserControls", - parts: "objects-dso", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "Design_System.Dropdown", - caption: "Dropdown", - parts: "objects-dso", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "Design_System.UnanimoAngularWithoutUserControls", - caption: "UnanimoAngularWithoutUserControls", - parts: "objects-dso", - startImgSrc: "--icon-path", - leaf: true - } - ] - }, - { - id: "Module", - caption: "Module", - parts: "objects-module", - startImgSrc: "--icon-path", - indeterminate: true, - items: [ - { - id: "Module.General", - caption: "General", - parts: "objects-module", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "Module.General.UI", - caption: "General.UI", - parts: "objects-module", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "Module.General.Services", - caption: "General.Services", - parts: "objects-module", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "Module.GeneralReporting", - caption: "GeneralReporting", - parts: "objects-module", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "Module.GeneXusUnanimo", - caption: "GeneXusUnanimo", - parts: "objects-module", - startImgSrc: "--icon-path", - checked: false, - leaf: true - }, - { - id: "Module.GeneXus", - caption: "GeneXus", - parts: "objects-module", - startImgSrc: "--icon-path", - checked: false, - leaf: true - } - ] - }, - [ - { - id: "Data Provider", - caption: "Data Provider", - parts: "objects-data-provider", - startImgSrc: "--icon-path", - items: [ - { - id: "Data_Provider.General.UI.SidebarItemsDP", - caption: "General.UI.SidebarItemsDP", - parts: "objects-data-provider", - startImgSrc: "--icon-path", - leaf: true - } - ] - }, - { - id: "Panel", - caption: "Panel", - parts: "objects-panel-for-sd", - lazy: true, - startImgSrc: "--icon-path" - } - ] -]; - -const importOBjectsPanelModel = [ - [ - { - id: "Panel.ActionGroupTests", - caption: "ActionGroupTests", - parts: "objects-panel-for-sd", - startImgSrc: "--icon-path", - metadata: "Panel", - leaf: true - }, - { - id: "Panel.DropdownTests", - caption: "DropdownTests", - parts: "objects-panel-for-sd", - startImgSrc: "--icon-path", - metadata: "Panel", - leaf: true - } - ] -]; - -export const preferencesModel = [ - { - id: "root", - caption: "GeneXusNext", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - expanded: true, - items: [ - { - id: "Environment.GeneXusNext", - caption: "GeneXusNext Develop 1", - parts: "objects-version", - lazy: true, - startImgSrc: "--icon-path" - }, - { - id: "Environment.TeamDev", - caption: "Team Development", - parts: "objects-teamdev", - leaf: true, - startImgSrc: "--icon-path", - order: 1 - }, - { - id: "Environment.Patterns", - caption: "Patterns", - parts: "objects-patterns", - startImgSrc: "--icon-path", - order: 2, - items: [ - { - id: "Environment.Patterns.ConversationalFlows", - caption: "Conversational Flows", - parts: "objects-conversational-flows", - leaf: true, - startImgSrc: "--icon-path" - }, - { - id: "Environment.Patterns.WorkWith", - caption: "Work With", - parts: "objects-workwith-for-sd", - leaf: true, - startImgSrc: "--icon-path" - }, - { - id: "Environment.Patterns.WorkWithForWeb", - caption: "Work With for Web", - parts: "objects-work-with-web", - leaf: true, - startImgSrc: "--icon-path" - } - ] - }, - { - id: "Environment.Workflow", - caption: "Workflow", - parts: "objects-workflow", - startImgSrc: "--icon-path", - order: 3, - items: [ - { - id: "Environment.Workflow.Roles", - caption: "Roles", - parts: "objects-roles", - leaf: true, - startImgSrc: "--icon-path", - order: 0 - }, - { - id: "Environment.Workflow.Documents", - caption: "Documents", - parts: "objects-document-workflow", - leaf: true, - startImgSrc: "--icon-path", - order: 1 - }, - { - id: "Environment.Workflow.Calendars", - caption: "Calendars", - parts: "objects-calendars", - leaf: true, - startImgSrc: "--icon-path", - order: 2 - }, - { - id: "Environment.Workflow.Notification_Templates", - caption: "Notification templates", - parts: "objects-notification-templates", - leaf: true, - startImgSrc: "--icon-path", - order: 3 - } - ] - } - ] - } -]; - -const Environment_GeneXusNext_preferencesModel = [ - { - id: "Environment.GeneXusNext.JavaMySQL", - caption: "JavaMySQL", - parts: "objects-java", - startImgSrc: "--icon-path", - items: [ - { - id: "Environment.GeneXusNext.JavaMySQL.Backend", - caption: "Back end", - parts: "objects-generator", - items: [ - { - id: "Environment.GeneXusNext.JavaMySQL.Backend.DefaultJava", - caption: "Default (Java)", - parts: "objects-java", - startImgSrc: "--icon-path", - leaf: true, - order: 0 - }, - { - id: "Environment.GeneXusNext.JavaMySQL.Backend.DataStores", - caption: "Data Stores", - parts: "objects-datastore", - order: 1, - items: [ - { - id: "Environment.GeneXusNext.JavaMySQL.Backend.DataStores.DefaultMySQL", - caption: "Default (MySQL)", - parts: "objects-mysql", - leaf: true, - startImgSrc: "--icon-path" - }, - { - id: "Environment.GeneXusNext.JavaMySQL.Backend.DataStores.GAMMySQL", - caption: "GAM (MySQL)", - parts: "objects-mysql", - leaf: true, - startImgSrc: "--icon-path", - order: 1 - } - ] - }, - { - id: "Environment.GeneXusNext.JavaMySQL.Backend.Services", - caption: "Services", - parts: "objects-datastore-green", - leaf: true, - startImgSrc: "--icon-path", - order: 2 - } - ] - }, - { - id: "Environment.GeneXusNext.JavaMySQL.Frontend", - caption: "Front end", - parts: "objects-sd", - order: 1, - items: [ - { - id: "Environment.GeneXusNext.JavaMySQL.Frontend.WebJava", - caption: "Web (Java)", - parts: "objects-java", - leaf: true, - startImgSrc: "--icon-path" - }, - { - id: "Environment.GeneXusNext.JavaMySQL.Frontend.WebAngular", - caption: "Web (Angular)", - parts: "objects-angular", - leaf: true, - startImgSrc: "--icon-path", - order: 1 - } - ] - }, - { - id: "Environment.GeneXusNext.JavaMySQL.Deployment", - caption: "Deployment", - parts: "objects-deployment-unit", - order: 2, - items: [ - { - id: "Environment.GeneXusNext.JavaMySQL.Deployment.Backend", - caption: "Backend", - parts: "objects-deployment-unit", - leaf: true, - startImgSrc: "--icon-path" - }, - { - id: "Environment.GeneXusNext.JavaMySQL.Deployment.Frontend", - caption: "Frontend", - parts: "objects-deployment-unit", - leaf: true, - startImgSrc: "--icon-path" - } - ] - } - ] - } -]; - -export const lazyLoadItemsDictionary = { - root: kbExplorer_root, - Main_Programs: kbExplorerModel_MainPrograms, - Root_Module: kbExplorerModel_RootModule, - Customization: kbExplorerModel_Customization, - "Customization.Localization": kbExplorerModel_Customization_Localization, - "Root_Module.General": kbExplorerModel_RootModule_General, - "Root_Module.General.UI": kbExplorerModel_RootModule_General_UI, - "Root_Module.General.UI.Q2": kbExplorerModel_RootModule_General_UI_Q2, - "Root_Module.General.UI.Stencils": - kbExplorerModel_RootModule_General_UI_Stencils, - Panel: importOBjectsPanelModel, - "Environment.GeneXusNext": Environment_GeneXusNext_preferencesModel -}; - -export const lazyLargeModel = []; - -for (let i = 0; i < FIRST_LEVEL_SIZE; i++) { - lazyLargeModel.push({ - id: "item-" + i, - caption: "item-" + i, - parts: "objects-patterns", - lazy: true, - leaf: false, - startImgSrc: "--icon-path", - items: [] - }); -} - -export const eagerLargeModel = []; - -for (let i = 0; i < FIRST_LEVEL_SIZE; i++) { - const subEagerLargeModel = []; - const modelId = "item-" + i; - - for (let j = 0; j < SECOND_LEVEL_SIZE; j++) { - const subModelId = modelId + "-" + j; - const subSubEagerLargeModel = []; - - for (let k = 0; k < THIRD_LEVEL_SIZE; k++) { - const subSubModelId = subModelId + "-" + k; - - subSubEagerLargeModel.push({ - id: subSubModelId, - caption: subSubModelId, - parts: "objects-file", - startImgSrc: "--icon-path", - leaf: true - }); - } - - subEagerLargeModel.push({ - id: subModelId, - caption: subModelId, - expanded: true, - leaf: false, - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - items: subSubEagerLargeModel - }); - } - - eagerLargeModel.push({ - id: modelId, - caption: modelId, - expanded: true, - leaf: false, - parts: "objects-patterns", - startImgSrc: "--icon-path", - items: subEagerLargeModel - }); -} - -const modelLazyUpdated1 = [ - { - id: "lazy-loaded-1", - caption: "Lazy Loaded 1 (drag disabled)", - parts: "objects-patterns", - startImgSrc: "--icon-path", - leaf: true, - checkbox: true, - dragDisabled: true - }, - { - id: "lazy-loaded-2", - caption: "Lazy Loaded 2 (lazy, drag disabled, drop disabled)", - parts: "objects-patterns", - startImgSrc: "--icon-path", - leaf: false, - lazy: true, - checkbox: true, - dragDisabled: true, - dropDisabled: true, - toggleCheckboxes: true - } -]; - -const modelLazyUpdated2 = [ - { - id: "lazy-loaded-3", - caption: "Lazy Loaded 3 (drag disabled)", - parts: "objects-patterns", - startImgSrc: "--icon-path", - leaf: true, - checkbox: true, - dragDisabled: true - }, - { - id: "lazy-loaded-4", - caption: "Lazy Loaded 4 (drag disabled)", - parts: "objects-patterns", - startImgSrc: "--icon-path", - leaf: true, - checkbox: true, - dragDisabled: true - } -]; - -export const lazyLoadTreeItemsCallback = modelId => - new Promise(resolve => { - let lazyModel = - modelId === "lazy-loaded-2" ? modelLazyUpdated2 : modelLazyUpdated1; - - if (modelId.startsWith("item-")) { - lazyModel = []; - - for (let j = 0; j < SECOND_LEVEL_SIZE; j++) { - const subModelId = modelId + "-" + j; - const subModelItems = []; - - for (let k = 0; k < THIRD_LEVEL_SIZE; k++) { - subModelItems.push({ - id: subModelId + "-" + k, - caption: subModelId + "-" + k, - parts: "objects-file", - leaf: true, - startImgSrc: "--icon-path" - }); - } - - lazyModel.push({ - id: subModelId, - caption: subModelId, - parts: "objects-patterns", - expanded: true, - leaf: false, - startImgSrc: "--icon-path", - items: subModelItems - }); - } - } - - const lazyModelResultFromDictionary = lazyLoadItemsDictionary[modelId]; - - if (lazyModelResultFromDictionary) { - lazyModel = lazyModelResultFromDictionary; - } - - setTimeout(() => { - resolve(structuredClone(lazyModel)); - }, 500); // Resolves or rejects after 500ms second - }); - -export const disabledItemsModel = [ - { - id: "number-1", - caption: "number-1", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - leaf: false, - items: [ - { - id: "number-1-1", - caption: "number-1-1", - class: "ch-tree-view-item--success", - leaf: false, - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - items: [ - { - id: "number-1-1-1", - caption: "number-1-1-1", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "number-1-1-2", - caption: "number-1-1-2", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - leaf: false, - items: [ - { - id: "number-1-1-2-1", - caption: "number-1-1-2-1", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - leaf: false, - items: [ - { - id: "new-item-added-1", - caption: "new-item-added-1", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: true, - leaf: true - }, - { - id: "new-item-added-2", - caption: "new-item-added-2", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: false, - leaf: true - }, - { - id: "new-item-added-3", - caption: "new-item-added-3", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: true, - leaf: true - }, - { - id: "new-item-added-4", - caption: "new-item-added-4", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: false, - expanded: true, - leaf: false, - items: [ - { - id: "new-item-added-4-1", - caption: "new-item-added-4-1", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: false, - leaf: true - }, - { - id: "new-item-added-4-2", - caption: "new-item-added-4-2", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: true, - expanded: true, - leaf: false, - items: [ - { - id: "new-item-added-4-2-1", - caption: "new-item-added-4-2-1", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: true, - expanded: true, - leaf: false, - items: [ - { - id: "new-item-added-4-2-1-1", - caption: "new-item-added-4-2-1-1", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: false, - leaf: true - }, - { - id: "new-item-added-4-2-1-2", - caption: "new-item-added-4-2-1-2", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: false, - leaf: true - }, - { - id: "new-item-added-4-2-1-3", - caption: "new-item-added-4-2-1-3", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: true, - leaf: true - }, - { - id: "new-item-added-4-2-1-4", - caption: "new-item-added-4-2-1-4", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: false, - leaf: true - } - ] - }, - { - id: "new-item-added-4-2-2", - caption: "new-item-added-4-2-2", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: true, - leaf: true - } - ] - } - ] - }, - { - id: "new-item-added-5", - caption: "new-item-added-5", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: true, - expanded: true, - leaf: false, - items: [ - { - id: "new-item-added-5-1", - caption: "new-item-added-5-1", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: false, - leaf: true - }, - { - id: "new-item-added-5-2", - caption: "new-item-added-5-2", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - disabled: true, - leaf: true - } - ] - } - ] - }, - { - id: "number-1-1-2-2", - caption: "number-1-1-2-2", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - leaf: true - } - ] - } - ] - }, - { - id: "number-1-2", - caption: "number-1-2", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - leaf: true - } - ] - }, - { - id: "number-2", - caption: "number-2", - parts: "objects-datastore", - startImgSrc: "--icon-path", - leaf: false, - items: [ - { - id: "number-2-1", - caption: "number-2-1", - parts: "objects-patterns", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "number-2-2", - caption: "number-2-2", - parts: "objects-patterns", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "number-2-3", - caption: "number-2-3", - parts: "objects-patterns", - startImgSrc: "--icon-path", - disabled: true, - leaf: true - } - ] - }, - { - id: "number-3", - caption: "number-3", - parts: "objects-datastore", - startImgSrc: "--icon-path", - leaf: false, - disabled: true, - expanded: true, - items: [ - { - id: "number-3-1", - caption: "number-3-1", - parts: "objects-patterns", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "number-3-2", - caption: "number-3-2", - parts: "objects-patterns", - startImgSrc: "--icon-path", - disabled: true, - leaf: true - }, - { - id: "number-3-3", - caption: "number-3-3", - parts: "objects-patterns", - startImgSrc: "--icon-path", - leaf: true - } - ] - } -]; - -export const simpleModel1 = [ - { - id: "number-1", - caption: "number-1 label (always editable)", - class: "tree-view-item tree-view-item--success", - parts: "objects-datastore", - startImgSrc: "--icon-path", - leaf: false, - editable: true, - items: [ - { - id: "number-1-1", - caption: "number-1-1 (always editable)", - parts: "objects-patterns", - startImgSrc: "--icon-path", - leaf: false, - editable: true, - items: [ - { - id: "number-1-1-1", - caption: "number-1-1-1", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "number-1-1-2", - caption: "number-1-1-2", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - leaf: false, - items: [ - { - id: "number-1-1-2-1", - caption: "number-1-1-2-1 (lazy, drag disabled)", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - leaf: false, - lazy: true, - checkbox: true, - dragDisabled: true, - toggleCheckboxes: true - }, - { - id: "number-1-1-2-2", - caption: "number-1-1-2-2", - parts: "objects-java", - startImgSrc: "--icon-path", - leaf: true - } - ] - } - ] - }, - { - id: "number-1-2", - caption: "number-1-2", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - leaf: true - } - ] - }, - { - id: "number-2", - caption: "number-2", - class: "tree-view-item tree-view-item--custom-image", - parts: "objects-java", - startImgSrc: "--icon-path", - leaf: false, - items: [ - { - id: "number-2-1", - caption: "number-2-1", - parts: "objects-java", - startImgSrc: "--icon-path", - leaf: true - }, - { - id: "number-2-2", - caption: "number-2-2", - parts: "objects-knowledge-base", - startImgSrc: "--icon-path", - leaf: true - } - ] - } -]; - -export const simpleModel2 = [ - { - id: "number-a", - caption: "number-a (always editable)", - parts: "objects-apple", - startImgSrc: "--icon-path", - leaf: true, - editable: true - }, - { - id: "number-b", - caption: "number-b", - parts: "objects-file", - startImgSrc: "--icon-path", - leaf: false, - items: [ - { - id: "number-2.1", - caption: "number-2.1", - parts: "objects-patterns", - startImgSrc: "--icon-path", - leaf: false, - items: [ - { - id: "number-2.1.1", - caption: "number-2.1.1", - parts: "objects-java", - startImgSrc: "--icon-path", - leaf: false, - items: [ - { - id: "number-2.1.1.1", - caption: "number-2.1.1.1", - parts: "objects-mysql", - startImgSrc: "--icon-path", - leaf: true - } - ] - } - ] - } - ] - }, - { - id: "number-3", - caption: "number-3", - parts: "objects-patterns", - startImgSrc: "--icon-path", - leaf: true - } -]; diff --git a/packages/mercury/showcase/assets/models/tree.js b/packages/mercury/showcase/assets/models/tree.js deleted file mode 100644 index 4bfd93ace..000000000 --- a/packages/mercury/showcase/assets/models/tree.js +++ /dev/null @@ -1,365 +0,0 @@ -/* -Index: -noIconsModel -> A model that has no icons -iconsModel -> A model where all items have icons -checkboxesNoIcons -> A model with checkboxes but no icons -checkboxesWithIcons -> A model with checkboxes and with icons -*/ - -/* - - - - - - - - - - - - -noIconsModel -- - - - - - - - - - - - */ -export const noIconsModel = [ - { - id: "root", - caption: "GeneXusNext Develop", - editable: false, - expanded: true, - leaf: false, - items: [ - { - id: "Main_Programs", - caption: "Main Programs", - editable: false, - expanded: true, - items: [ - { - id: "Main_Programs.Prompt", - caption: "Prompt", - leaf: true, - metadata: "Panel" - }, - { - id: "Main_Programs.ApiHealthCheck", - caption: "ApiHealthCheck", - leaf: true - }, - { - id: "Main_Programs.BackHome", - caption: "BackHome", - leaf: true - }, - { - id: "Main_Programs.Login", - caption: "Login", - leaf: true - }, - { - id: "Main_Programs.ProvisioningServices", - caption: "ProvisioningServices", - leaf: true - }, - { - id: "Main_Programs.VersionCheck", - caption: "VersionCheck", - leaf: true - } - ] - }, - { - id: "Root_Module", - caption: "Root Module", - expanded: true, - items: [ - { - id: "Root_Module.Images", - caption: "Images", - leaf: true - }, - { - id: "Root_Module.GXNext", - caption: "GXNext", - leaf: true - }, - { - id: "Root_Module.GeneXusNext", - caption: "GeneXusNext", - leaf: true - }, - { - id: "Root_Module.Files", - caption: "Files", - editable: false, - leaf: true - }, - { - id: "Root_Module.Domain", - caption: "Domain", - editable: false, - leaf: true - } - ] - }, - { - id: "Customization", - caption: "Customization", - expanded: true, - items: [ - { - id: "Customization.Files", - caption: "Files", - leaf: true - }, - { - id: "Customization.Images", - caption: "Images", - leaf: true - } - ] - }, - { - id: "Documentation", - caption: "Documentation", - editable: false, - leaf: true - } - ] - } -]; - -/* - - - - - - - - - - - - -iconsModel -- - - - - - - - - - - - */ - -export const iconsModel = [ - { - id: "root", - caption: "GeneXusNext Develop", - startImgSrc: "objects/version", - expanded: true, - leaf: false, - items: [ - { - id: "Main_Programs", - caption: "Main Programs", - startImgSrc: "objects/category", - expanded: true, - items: [ - { - id: "Main_Programs.Prompt", - caption: "Prompt", - startImgSrc: "objects/panel-for-sd", - leaf: true, - metadata: "Panel" - }, - { - id: "Main_Programs.ApiHealthCheck", - caption: "ApiHealthCheck", - startImgSrc: "objects/api", - leaf: true - }, - { - id: "Main_Programs.BackHome", - caption: "BackHome", - startImgSrc: "objects/web-panel", - leaf: true - }, - { - id: "Main_Programs.Login", - caption: "Login", - startImgSrc: "objects/web-panel", - leaf: true - }, - { - id: "Main_Programs.ProvisioningServices", - caption: "ProvisioningServices", - startImgSrc: "objects/api", - leaf: true - }, - { - id: "Main_Programs.VersionCheck", - caption: "VersionCheck", - startImgSrc: "objects/procedure", - leaf: true - } - ] - }, - { - id: "Root_Module", - caption: "Root Module", - startImgSrc: "objects/module", - expanded: true, - items: [ - { - id: "Root_Module.Images", - caption: "Images", - startImgSrc: "objects/image", - leaf: true - }, - { - id: "Root_Module.GXNext", - caption: "GXNext", - startImgSrc: "objects/dso", - leaf: true - }, - { - id: "Root_Module.GeneXusNext", - caption: "GeneXusNext", - startImgSrc: "objects/dso", - leaf: true - }, - { - id: "Root_Module.Files", - caption: "Files", - startImgSrc: "objects/file", - leaf: true - }, - { - id: "Root_Module.Domain", - caption: "Domain", - startImgSrc: "objects/domain", - leaf: true - } - ] - }, - { - id: "References", - caption: "References", - startImgSrc: "objects/references", - leaf: true - }, - { - id: "Customization", - caption: "Customization", - startImgSrc: "objects/customization", - expanded: true, - items: [ - { - id: "Customization.Files", - caption: "Files", - startImgSrc: "objects/file", - leaf: true - }, - { - id: "Customization.Images", - caption: "Images", - startImgSrc: "objects/image", - leaf: true - } - ] - }, - { - id: "Documentation", - caption: "Documentation", - startImgSrc: "objects/document", - leaf: true - } - ] - } -]; - -/* - - - - - - - - - - - - -checkboxesModel -- - - - - - - - - - - - */ -export const checkboxesModel = [ - { - id: "root", - caption: "GeneXusNext Develop", - editable: false, - expanded: true, - leaf: false, - items: [ - { - id: "Main_Programs", - caption: "Main Programs", - editable: false, - expanded: true, - items: [ - { - id: "Main_Programs.Prompt", - caption: "Prompt", - leaf: true, - metadata: "Panel" - }, - { - id: "Main_Programs.ApiHealthCheck", - caption: "ApiHealthCheck", - leaf: true - }, - { - id: "Main_Programs.BackHome", - caption: "BackHome", - leaf: true - }, - { - id: "Main_Programs.Login", - caption: "Login", - leaf: true - }, - { - id: "Main_Programs.ProvisioningServices", - caption: "ProvisioningServices", - leaf: true - }, - { - id: "Main_Programs.VersionCheck", - caption: "VersionCheck", - leaf: true - } - ] - }, - { - id: "Root_Module", - caption: "Root Module", - expanded: true, - items: [ - { - id: "Root_Module.Images", - caption: "Images", - leaf: true - }, - { - id: "Root_Module.GXNext", - caption: "GXNext", - leaf: true - }, - { - id: "Root_Module.GeneXusNext", - caption: "GeneXusNext", - leaf: true - }, - { - id: "Root_Module.Files", - caption: "Files", - editable: false, - leaf: true - }, - { - id: "Root_Module.Domain", - caption: "Domain", - editable: false, - leaf: true - } - ] - }, - { - id: "References", - caption: "References", - editable: false - }, - { - id: "Customization", - caption: "Customization", - expanded: true, - items: [ - { - id: "Customization.Files", - caption: "Files", - leaf: true - }, - { - id: "Customization.Images", - caption: "Images", - leaf: true - } - ] - }, - { - id: "Documentation", - caption: "Documentation", - editable: false, - leaf: true - } - ] - } -]; diff --git a/packages/mercury/showcase/assets/scripts/assets-manager.js b/packages/mercury/showcase/assets/scripts/assets-manager.js deleted file mode 100644 index 0c4686c1d..000000000 --- a/packages/mercury/showcase/assets/scripts/assets-manager.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";const a={},d={},g="/",u=":";export const MERCURY_ALIAS="mer",registerAssets=(e,t,r)=>{a[e]||d[t]||(a[e]=r,d[t]=e)},getAsset=(e,t)=>{const r=d[e]??e,n=a[r];if(!n)return;const o=n.icons[t.category];if(!o)return;const c=o[t.name];if(c)return t.colorType?c[t.colorType]:c},getIconPath=(e,t=MERCURY_ALIAS)=>{const r=e.colorType?`${g}${e.colorType}`:"";return`${t}${g}${e.category}${g}${e.name}${r}`},getIconPathExpanded=(e,t,r=MERCURY_ALIAS)=>`${getIconPath(e,r)}${u}${getIconPath(t,r)}`;const l=(e,t,r)=>{const n=t===MERCURY_ALIAS?"":`-${t}`;return r?`var(--icon${n}__${e}--${r})`:`var(--icon${n}__${e})`},f=e=>{const t=e.split(g),r=t[0],n=d[r]??r;if(!a[n]){const i=t[0],S=t[1],p=t[2];return{vendor:MERCURY_ALIAS,category:i,name:S,colorType:p}}const c=t[1],s=t[2],m=t[3];return{vendor:r,category:c,name:s,colorType:m}};export const getImagePathCallback=e=>{const{vendor:t,category:r,name:n,colorType:o}=f(e),c=getAsset(t,o?{category:r,name:n,colorType:o}:{category:r,name:n});if(!c)return;const s={base:l(c.enabled.name,t)};return c.hover&&(s.hover=l(c.hover.name,t)),c.active&&(s.active=l(c.active.name,t)),c.disabled&&(s.disabled=l(c.disabled.name,t)),s},getActionMenuImagePathCallback=(e,t)=>{if(!e.startImgSrc&&t==="start"||!e.endImgSrc&&t==="end")return;const r=t==="start"?e.startImgSrc:e.endImgSrc;return getImagePathCallback(r)},getActionListImagePathCallback=e=>e.imgSrc?getImagePathCallback(e.imgSrc):void 0,getNavigationListImagePathCallback=e=>e.startImgSrc?getImagePathCallback(e.startImgSrc):void 0,getTreeViewImagePathCallback=(e,t)=>{if(!e.startImgSrc&&t==="start"||!e.endImgSrc&&t==="end")return;const n=(t==="start"?e.startImgSrc:e.endImgSrc).split(u),o=getImagePathCallback(n[0]);if(o)return n[1]?{default:o,expanded:getImagePathCallback(n[1])}:{default:o}},getComboBoxImagePathCallback=(e,t)=>{if(!e.startImgSrc&&t==="start"||!e.endImgSrc&&t==="end")return;const r=t==="start"?e.startImgSrc:e.endImgSrc;return getImagePathCallback(r)},getImagePathCallbackDefinitions={"ch-accordion-render":getImagePathCallback,"ch-action-menu-render":getActionMenuImagePathCallback,"ch-action-list-render":getActionListImagePathCallback,"ch-combo-box-render":getComboBoxImagePathCallback,"ch-navigation-list-render":getNavigationListImagePathCallback,"ch-checkbox":getImagePathCallback,"ch-edit":getImagePathCallback,"ch-image":getImagePathCallback,"ch-tree-view-render":getTreeViewImagePathCallback}; diff --git a/packages/mercury/showcase/assets/scripts/assets/MERCURY_ASSETS.js b/packages/mercury/showcase/assets/scripts/assets/MERCURY_ASSETS.js deleted file mode 100644 index 88bf2d56e..000000000 --- a/packages/mercury/showcase/assets/scripts/assets/MERCURY_ASSETS.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";const e=a=>Object.freeze(a);export const MERCURY_ASSETS=e({config:e({defaultColorType:"on-surface"}),icons:e({"window-tools":e({workflow:e({"on-surface":e({enabled:e({name:"window-tools_workflow_on-surface--enabled"}),hover:e({name:"window-tools_workflow_on-surface--hover"}),active:e({name:"window-tools_workflow_on-surface--active"}),disabled:e({name:"window-tools_workflow_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_workflow_on-primary--enabled"}),hover:e({name:"window-tools_workflow_on-primary--hover"}),active:e({name:"window-tools_workflow_on-primary--active"}),disabled:e({name:"window-tools_workflow_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_workflow_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_workflow_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_workflow_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_workflow_primary--enabled"}),hover:e({name:"window-tools_workflow_primary--hover"}),active:e({name:"window-tools_workflow_primary--active"}),disabled:e({name:"window-tools_workflow_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_workflow_neutral--enabled"}),hover:e({name:"window-tools_workflow_neutral--hover"}),active:e({name:"window-tools_workflow_neutral--active"}),disabled:e({name:"window-tools_workflow_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_workflow_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_workflow_bright--enabled"})})}),"workflow-settings":e({"on-surface":e({enabled:e({name:"window-tools_workflow-settings_on-surface--enabled"}),hover:e({name:"window-tools_workflow-settings_on-surface--hover"}),active:e({name:"window-tools_workflow-settings_on-surface--active"}),disabled:e({name:"window-tools_workflow-settings_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_workflow-settings_on-primary--enabled"}),hover:e({name:"window-tools_workflow-settings_on-primary--hover"}),active:e({name:"window-tools_workflow-settings_on-primary--active"}),disabled:e({name:"window-tools_workflow-settings_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_workflow-settings_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_workflow-settings_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_workflow-settings_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_workflow-settings_primary--enabled"}),hover:e({name:"window-tools_workflow-settings_primary--hover"}),active:e({name:"window-tools_workflow-settings_primary--active"}),disabled:e({name:"window-tools_workflow-settings_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_workflow-settings_neutral--enabled"}),hover:e({name:"window-tools_workflow-settings_neutral--hover"}),active:e({name:"window-tools_workflow-settings_neutral--active"}),disabled:e({name:"window-tools_workflow-settings_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_workflow-settings_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_workflow-settings_bright--enabled"})})}),"work-with-attributes":e({"on-surface":e({enabled:e({name:"window-tools_work-with-attributes_on-surface--enabled"}),hover:e({name:"window-tools_work-with-attributes_on-surface--hover"}),active:e({name:"window-tools_work-with-attributes_on-surface--active"}),disabled:e({name:"window-tools_work-with-attributes_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_work-with-attributes_on-primary--enabled"}),hover:e({name:"window-tools_work-with-attributes_on-primary--hover"}),active:e({name:"window-tools_work-with-attributes_on-primary--active"}),disabled:e({name:"window-tools_work-with-attributes_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_work-with-attributes_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_work-with-attributes_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_work-with-attributes_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_work-with-attributes_primary--enabled"}),hover:e({name:"window-tools_work-with-attributes_primary--hover"}),active:e({name:"window-tools_work-with-attributes_primary--active"}),disabled:e({name:"window-tools_work-with-attributes_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_work-with-attributes_neutral--enabled"}),hover:e({name:"window-tools_work-with-attributes_neutral--hover"}),active:e({name:"window-tools_work-with-attributes_neutral--active"}),disabled:e({name:"window-tools_work-with-attributes_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_work-with-attributes_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_work-with-attributes_bright--enabled"})})}),watch:e({"on-surface":e({enabled:e({name:"window-tools_watch_on-surface--enabled"}),hover:e({name:"window-tools_watch_on-surface--hover"}),active:e({name:"window-tools_watch_on-surface--active"}),disabled:e({name:"window-tools_watch_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_watch_on-primary--enabled"}),hover:e({name:"window-tools_watch_on-primary--hover"}),active:e({name:"window-tools_watch_on-primary--active"}),disabled:e({name:"window-tools_watch_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_watch_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_watch_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_watch_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_watch_primary--enabled"}),hover:e({name:"window-tools_watch_primary--hover"}),active:e({name:"window-tools_watch_primary--active"}),disabled:e({name:"window-tools_watch_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_watch_neutral--enabled"}),hover:e({name:"window-tools_watch_neutral--hover"}),active:e({name:"window-tools_watch_neutral--active"}),disabled:e({name:"window-tools_watch_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_watch_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_watch_bright--enabled"})})}),toolbox:e({"on-surface":e({enabled:e({name:"window-tools_toolbox_on-surface--enabled"}),hover:e({name:"window-tools_toolbox_on-surface--hover"}),active:e({name:"window-tools_toolbox_on-surface--active"}),disabled:e({name:"window-tools_toolbox_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_toolbox_on-primary--enabled"}),hover:e({name:"window-tools_toolbox_on-primary--hover"}),active:e({name:"window-tools_toolbox_on-primary--active"}),disabled:e({name:"window-tools_toolbox_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_toolbox_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_toolbox_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_toolbox_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_toolbox_primary--enabled"}),hover:e({name:"window-tools_toolbox_primary--hover"}),active:e({name:"window-tools_toolbox_primary--active"}),disabled:e({name:"window-tools_toolbox_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_toolbox_neutral--enabled"}),hover:e({name:"window-tools_toolbox_neutral--hover"}),active:e({name:"window-tools_toolbox_neutral--active"}),disabled:e({name:"window-tools_toolbox_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_toolbox_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_toolbox_bright--enabled"})})}),teamdev:e({"on-surface":e({enabled:e({name:"window-tools_teamdev_on-surface--enabled"}),hover:e({name:"window-tools_teamdev_on-surface--hover"}),active:e({name:"window-tools_teamdev_on-surface--active"}),disabled:e({name:"window-tools_teamdev_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_teamdev_on-primary--enabled"}),hover:e({name:"window-tools_teamdev_on-primary--hover"}),active:e({name:"window-tools_teamdev_on-primary--active"}),disabled:e({name:"window-tools_teamdev_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_teamdev_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_teamdev_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_teamdev_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_teamdev_primary--enabled"}),hover:e({name:"window-tools_teamdev_primary--hover"}),active:e({name:"window-tools_teamdev_primary--active"}),disabled:e({name:"window-tools_teamdev_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_teamdev_neutral--enabled"}),hover:e({name:"window-tools_teamdev_neutral--hover"}),active:e({name:"window-tools_teamdev_neutral--active"}),disabled:e({name:"window-tools_teamdev_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_teamdev_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_teamdev_bright--enabled"})})}),services:e({"on-surface":e({enabled:e({name:"window-tools_services_on-surface--enabled"}),hover:e({name:"window-tools_services_on-surface--hover"}),active:e({name:"window-tools_services_on-surface--active"}),disabled:e({name:"window-tools_services_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_services_on-primary--enabled"}),hover:e({name:"window-tools_services_on-primary--hover"}),active:e({name:"window-tools_services_on-primary--active"}),disabled:e({name:"window-tools_services_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_services_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_services_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_services_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_services_primary--enabled"}),hover:e({name:"window-tools_services_primary--hover"}),active:e({name:"window-tools_services_primary--active"}),disabled:e({name:"window-tools_services_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_services_neutral--enabled"}),hover:e({name:"window-tools_services_neutral--hover"}),active:e({name:"window-tools_services_neutral--active"}),disabled:e({name:"window-tools_services_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_services_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_services_bright--enabled"})})}),roles:e({"on-surface":e({enabled:e({name:"window-tools_roles_on-surface--enabled"}),hover:e({name:"window-tools_roles_on-surface--hover"}),active:e({name:"window-tools_roles_on-surface--active"}),disabled:e({name:"window-tools_roles_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_roles_on-primary--enabled"}),hover:e({name:"window-tools_roles_on-primary--hover"}),active:e({name:"window-tools_roles_on-primary--active"}),disabled:e({name:"window-tools_roles_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_roles_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_roles_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_roles_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_roles_primary--enabled"}),hover:e({name:"window-tools_roles_primary--hover"}),active:e({name:"window-tools_roles_primary--active"}),disabled:e({name:"window-tools_roles_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_roles_neutral--enabled"}),hover:e({name:"window-tools_roles_neutral--hover"}),active:e({name:"window-tools_roles_neutral--active"}),disabled:e({name:"window-tools_roles_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_roles_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_roles_bright--enabled"})})}),rol:e({"on-surface":e({enabled:e({name:"window-tools_rol_on-surface--enabled"}),hover:e({name:"window-tools_rol_on-surface--hover"}),active:e({name:"window-tools_rol_on-surface--active"}),disabled:e({name:"window-tools_rol_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_rol_on-primary--enabled"}),hover:e({name:"window-tools_rol_on-primary--hover"}),active:e({name:"window-tools_rol_on-primary--active"}),disabled:e({name:"window-tools_rol_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_rol_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_rol_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_rol_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_rol_primary--enabled"}),hover:e({name:"window-tools_rol_primary--hover"}),active:e({name:"window-tools_rol_primary--active"}),disabled:e({name:"window-tools_rol_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_rol_neutral--enabled"}),hover:e({name:"window-tools_rol_neutral--hover"}),active:e({name:"window-tools_rol_neutral--active"}),disabled:e({name:"window-tools_rol_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_rol_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_rol_bright--enabled"})})}),"responsive-sizes":e({"on-surface":e({enabled:e({name:"window-tools_responsive-sizes_on-surface--enabled"}),hover:e({name:"window-tools_responsive-sizes_on-surface--hover"}),active:e({name:"window-tools_responsive-sizes_on-surface--active"}),disabled:e({name:"window-tools_responsive-sizes_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_responsive-sizes_on-primary--enabled"}),hover:e({name:"window-tools_responsive-sizes_on-primary--hover"}),active:e({name:"window-tools_responsive-sizes_on-primary--active"}),disabled:e({name:"window-tools_responsive-sizes_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_responsive-sizes_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_responsive-sizes_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_responsive-sizes_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_responsive-sizes_primary--enabled"}),hover:e({name:"window-tools_responsive-sizes_primary--hover"}),active:e({name:"window-tools_responsive-sizes_primary--active"}),disabled:e({name:"window-tools_responsive-sizes_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_responsive-sizes_neutral--enabled"}),hover:e({name:"window-tools_responsive-sizes_neutral--hover"}),active:e({name:"window-tools_responsive-sizes_neutral--active"}),disabled:e({name:"window-tools_responsive-sizes_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_responsive-sizes_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_responsive-sizes_bright--enabled"})})}),references:e({"on-surface":e({enabled:e({name:"window-tools_references_on-surface--enabled"}),hover:e({name:"window-tools_references_on-surface--hover"}),active:e({name:"window-tools_references_on-surface--active"}),disabled:e({name:"window-tools_references_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_references_on-primary--enabled"}),hover:e({name:"window-tools_references_on-primary--hover"}),active:e({name:"window-tools_references_on-primary--active"}),disabled:e({name:"window-tools_references_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_references_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_references_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_references_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_references_primary--enabled"}),hover:e({name:"window-tools_references_primary--hover"}),active:e({name:"window-tools_references_primary--active"}),disabled:e({name:"window-tools_references_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_references_neutral--enabled"}),hover:e({name:"window-tools_references_neutral--hover"}),active:e({name:"window-tools_references_neutral--active"}),disabled:e({name:"window-tools_references_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_references_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_references_bright--enabled"})})}),properties:e({"on-surface":e({enabled:e({name:"window-tools_properties_on-surface--enabled"}),hover:e({name:"window-tools_properties_on-surface--hover"}),active:e({name:"window-tools_properties_on-surface--active"}),disabled:e({name:"window-tools_properties_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_properties_on-primary--enabled"}),hover:e({name:"window-tools_properties_on-primary--hover"}),active:e({name:"window-tools_properties_on-primary--active"}),disabled:e({name:"window-tools_properties_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_properties_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_properties_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_properties_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_properties_primary--enabled"}),hover:e({name:"window-tools_properties_primary--hover"}),active:e({name:"window-tools_properties_primary--active"}),disabled:e({name:"window-tools_properties_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_properties_neutral--enabled"}),hover:e({name:"window-tools_properties_neutral--hover"}),active:e({name:"window-tools_properties_neutral--active"}),disabled:e({name:"window-tools_properties_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_properties_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_properties_bright--enabled"})})}),preferences:e({"on-surface":e({enabled:e({name:"window-tools_preferences_on-surface--enabled"}),hover:e({name:"window-tools_preferences_on-surface--hover"}),active:e({name:"window-tools_preferences_on-surface--active"}),disabled:e({name:"window-tools_preferences_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_preferences_on-primary--enabled"}),hover:e({name:"window-tools_preferences_on-primary--hover"}),active:e({name:"window-tools_preferences_on-primary--active"}),disabled:e({name:"window-tools_preferences_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_preferences_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_preferences_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_preferences_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_preferences_primary--enabled"}),hover:e({name:"window-tools_preferences_primary--hover"}),active:e({name:"window-tools_preferences_primary--active"}),disabled:e({name:"window-tools_preferences_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_preferences_neutral--enabled"}),hover:e({name:"window-tools_preferences_neutral--hover"}),active:e({name:"window-tools_preferences_neutral--active"}),disabled:e({name:"window-tools_preferences_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_preferences_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_preferences_bright--enabled"})})}),"performance-test-objects":e({"on-surface":e({enabled:e({name:"window-tools_performance-test-objects_on-surface--enabled"}),hover:e({name:"window-tools_performance-test-objects_on-surface--hover"}),active:e({name:"window-tools_performance-test-objects_on-surface--active"}),disabled:e({name:"window-tools_performance-test-objects_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_performance-test-objects_on-primary--enabled"}),hover:e({name:"window-tools_performance-test-objects_on-primary--hover"}),active:e({name:"window-tools_performance-test-objects_on-primary--active"}),disabled:e({name:"window-tools_performance-test-objects_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_performance-test-objects_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_performance-test-objects_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_performance-test-objects_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_performance-test-objects_primary--enabled"}),hover:e({name:"window-tools_performance-test-objects_primary--hover"}),active:e({name:"window-tools_performance-test-objects_primary--active"}),disabled:e({name:"window-tools_performance-test-objects_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_performance-test-objects_neutral--enabled"}),hover:e({name:"window-tools_performance-test-objects_neutral--hover"}),active:e({name:"window-tools_performance-test-objects_neutral--active"}),disabled:e({name:"window-tools_performance-test-objects_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_performance-test-objects_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_performance-test-objects_bright--enabled"})})}),output:e({"on-surface":e({enabled:e({name:"window-tools_output_on-surface--enabled"}),hover:e({name:"window-tools_output_on-surface--hover"}),active:e({name:"window-tools_output_on-surface--active"}),disabled:e({name:"window-tools_output_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_output_on-primary--enabled"}),hover:e({name:"window-tools_output_on-primary--hover"}),active:e({name:"window-tools_output_on-primary--active"}),disabled:e({name:"window-tools_output_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_output_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_output_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_output_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_output_primary--enabled"}),hover:e({name:"window-tools_output_primary--hover"}),active:e({name:"window-tools_output_primary--active"}),disabled:e({name:"window-tools_output_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_output_neutral--enabled"}),hover:e({name:"window-tools_output_neutral--hover"}),active:e({name:"window-tools_output_neutral--active"}),disabled:e({name:"window-tools_output_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_output_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_output_bright--enabled"})})}),logout:e({"on-surface":e({enabled:e({name:"window-tools_logout_on-surface--enabled"}),hover:e({name:"window-tools_logout_on-surface--hover"}),active:e({name:"window-tools_logout_on-surface--active"}),disabled:e({name:"window-tools_logout_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_logout_on-primary--enabled"}),hover:e({name:"window-tools_logout_on-primary--hover"}),active:e({name:"window-tools_logout_on-primary--active"}),disabled:e({name:"window-tools_logout_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_logout_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_logout_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_logout_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_logout_primary--enabled"}),hover:e({name:"window-tools_logout_primary--hover"}),active:e({name:"window-tools_logout_primary--active"}),disabled:e({name:"window-tools_logout_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_logout_neutral--enabled"}),hover:e({name:"window-tools_logout_neutral--hover"}),active:e({name:"window-tools_logout_neutral--active"}),disabled:e({name:"window-tools_logout_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_logout_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_logout_bright--enabled"})})}),"last-changes-view":e({"on-surface":e({enabled:e({name:"window-tools_last-changes-view_on-surface--enabled"}),hover:e({name:"window-tools_last-changes-view_on-surface--hover"}),active:e({name:"window-tools_last-changes-view_on-surface--active"}),disabled:e({name:"window-tools_last-changes-view_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_last-changes-view_on-primary--enabled"}),hover:e({name:"window-tools_last-changes-view_on-primary--hover"}),active:e({name:"window-tools_last-changes-view_on-primary--active"}),disabled:e({name:"window-tools_last-changes-view_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_last-changes-view_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_last-changes-view_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_last-changes-view_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_last-changes-view_primary--enabled"}),hover:e({name:"window-tools_last-changes-view_primary--hover"}),active:e({name:"window-tools_last-changes-view_primary--active"}),disabled:e({name:"window-tools_last-changes-view_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_last-changes-view_neutral--enabled"}),hover:e({name:"window-tools_last-changes-view_neutral--hover"}),active:e({name:"window-tools_last-changes-view_neutral--active"}),disabled:e({name:"window-tools_last-changes-view_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_last-changes-view_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_last-changes-view_bright--enabled"})})}),"kb-explorer":e({"on-surface":e({enabled:e({name:"window-tools_kb-explorer_on-surface--enabled"}),hover:e({name:"window-tools_kb-explorer_on-surface--hover"}),active:e({name:"window-tools_kb-explorer_on-surface--active"}),disabled:e({name:"window-tools_kb-explorer_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_kb-explorer_on-primary--enabled"}),hover:e({name:"window-tools_kb-explorer_on-primary--hover"}),active:e({name:"window-tools_kb-explorer_on-primary--active"}),disabled:e({name:"window-tools_kb-explorer_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_kb-explorer_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_kb-explorer_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_kb-explorer_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_kb-explorer_primary--enabled"}),hover:e({name:"window-tools_kb-explorer_primary--hover"}),active:e({name:"window-tools_kb-explorer_primary--active"}),disabled:e({name:"window-tools_kb-explorer_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_kb-explorer_neutral--enabled"}),hover:e({name:"window-tools_kb-explorer_neutral--hover"}),active:e({name:"window-tools_kb-explorer_neutral--active"}),disabled:e({name:"window-tools_kb-explorer_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_kb-explorer_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_kb-explorer_bright--enabled"})})}),"indexer-monitor":e({"on-surface":e({enabled:e({name:"window-tools_indexer-monitor_on-surface--enabled"}),hover:e({name:"window-tools_indexer-monitor_on-surface--hover"}),active:e({name:"window-tools_indexer-monitor_on-surface--active"}),disabled:e({name:"window-tools_indexer-monitor_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_indexer-monitor_on-primary--enabled"}),hover:e({name:"window-tools_indexer-monitor_on-primary--hover"}),active:e({name:"window-tools_indexer-monitor_on-primary--active"}),disabled:e({name:"window-tools_indexer-monitor_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_indexer-monitor_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_indexer-monitor_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_indexer-monitor_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_indexer-monitor_primary--enabled"}),hover:e({name:"window-tools_indexer-monitor_primary--hover"}),active:e({name:"window-tools_indexer-monitor_primary--active"}),disabled:e({name:"window-tools_indexer-monitor_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_indexer-monitor_neutral--enabled"}),hover:e({name:"window-tools_indexer-monitor_neutral--hover"}),active:e({name:"window-tools_indexer-monitor_neutral--active"}),disabled:e({name:"window-tools_indexer-monitor_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_indexer-monitor_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_indexer-monitor_bright--enabled"})})}),history:e({"on-surface":e({enabled:e({name:"window-tools_history_on-surface--enabled"}),hover:e({name:"window-tools_history_on-surface--hover"}),active:e({name:"window-tools_history_on-surface--active"}),disabled:e({name:"window-tools_history_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_history_on-primary--enabled"}),hover:e({name:"window-tools_history_on-primary--hover"}),active:e({name:"window-tools_history_on-primary--active"}),disabled:e({name:"window-tools_history_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_history_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_history_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_history_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_history_primary--enabled"}),hover:e({name:"window-tools_history_primary--hover"}),active:e({name:"window-tools_history_primary--active"}),disabled:e({name:"window-tools_history_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_history_neutral--enabled"}),hover:e({name:"window-tools_history_neutral--hover"}),active:e({name:"window-tools_history_neutral--active"}),disabled:e({name:"window-tools_history_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_history_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_history_bright--enabled"})})}),"genexus-cloud":e({"on-surface":e({enabled:e({name:"window-tools_genexus-cloud_on-surface--enabled"}),hover:e({name:"window-tools_genexus-cloud_on-surface--hover"}),active:e({name:"window-tools_genexus-cloud_on-surface--active"}),disabled:e({name:"window-tools_genexus-cloud_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_genexus-cloud_on-primary--enabled"}),hover:e({name:"window-tools_genexus-cloud_on-primary--hover"}),active:e({name:"window-tools_genexus-cloud_on-primary--active"}),disabled:e({name:"window-tools_genexus-cloud_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_genexus-cloud_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_genexus-cloud_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_genexus-cloud_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_genexus-cloud_primary--enabled"}),hover:e({name:"window-tools_genexus-cloud_primary--hover"}),active:e({name:"window-tools_genexus-cloud_primary--active"}),disabled:e({name:"window-tools_genexus-cloud_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_genexus-cloud_neutral--enabled"}),hover:e({name:"window-tools_genexus-cloud_neutral--hover"}),active:e({name:"window-tools_genexus-cloud_neutral--active"}),disabled:e({name:"window-tools_genexus-cloud_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_genexus-cloud_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_genexus-cloud_bright--enabled"})})}),frontend:e({"on-surface":e({enabled:e({name:"window-tools_frontend_on-surface--enabled"}),hover:e({name:"window-tools_frontend_on-surface--hover"}),active:e({name:"window-tools_frontend_on-surface--active"}),disabled:e({name:"window-tools_frontend_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_frontend_on-primary--enabled"}),hover:e({name:"window-tools_frontend_on-primary--hover"}),active:e({name:"window-tools_frontend_on-primary--active"}),disabled:e({name:"window-tools_frontend_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_frontend_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_frontend_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_frontend_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_frontend_primary--enabled"}),hover:e({name:"window-tools_frontend_primary--hover"}),active:e({name:"window-tools_frontend_primary--active"}),disabled:e({name:"window-tools_frontend_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_frontend_neutral--enabled"}),hover:e({name:"window-tools_frontend_neutral--hover"}),active:e({name:"window-tools_frontend_neutral--active"}),disabled:e({name:"window-tools_frontend_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_frontend_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_frontend_bright--enabled"})})}),filter:e({"on-surface":e({enabled:e({name:"window-tools_filter_on-surface--enabled"}),hover:e({name:"window-tools_filter_on-surface--hover"}),active:e({name:"window-tools_filter_on-surface--active"}),disabled:e({name:"window-tools_filter_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_filter_on-primary--enabled"}),hover:e({name:"window-tools_filter_on-primary--hover"}),active:e({name:"window-tools_filter_on-primary--active"}),disabled:e({name:"window-tools_filter_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_filter_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_filter_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_filter_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_filter_primary--enabled"}),hover:e({name:"window-tools_filter_primary--hover"}),active:e({name:"window-tools_filter_primary--active"}),disabled:e({name:"window-tools_filter_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_filter_neutral--enabled"}),hover:e({name:"window-tools_filter_neutral--hover"}),active:e({name:"window-tools_filter_neutral--active"}),disabled:e({name:"window-tools_filter_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_filter_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_filter_bright--enabled"})})}),"filter-conditions":e({"on-surface":e({enabled:e({name:"window-tools_filter-conditions_on-surface--enabled"}),hover:e({name:"window-tools_filter-conditions_on-surface--hover"}),active:e({name:"window-tools_filter-conditions_on-surface--active"}),disabled:e({name:"window-tools_filter-conditions_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_filter-conditions_on-primary--enabled"}),hover:e({name:"window-tools_filter-conditions_on-primary--hover"}),active:e({name:"window-tools_filter-conditions_on-primary--active"}),disabled:e({name:"window-tools_filter-conditions_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_filter-conditions_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_filter-conditions_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_filter-conditions_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_filter-conditions_primary--enabled"}),hover:e({name:"window-tools_filter-conditions_primary--hover"}),active:e({name:"window-tools_filter-conditions_primary--active"}),disabled:e({name:"window-tools_filter-conditions_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_filter-conditions_neutral--enabled"}),hover:e({name:"window-tools_filter-conditions_neutral--hover"}),active:e({name:"window-tools_filter-conditions_neutral--active"}),disabled:e({name:"window-tools_filter-conditions_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_filter-conditions_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_filter-conditions_bright--enabled"})})}),"error-list":e({"on-surface":e({enabled:e({name:"window-tools_error-list_on-surface--enabled"}),hover:e({name:"window-tools_error-list_on-surface--hover"}),active:e({name:"window-tools_error-list_on-surface--active"}),disabled:e({name:"window-tools_error-list_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_error-list_on-primary--enabled"}),hover:e({name:"window-tools_error-list_on-primary--hover"}),active:e({name:"window-tools_error-list_on-primary--active"}),disabled:e({name:"window-tools_error-list_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_error-list_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_error-list_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_error-list_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_error-list_primary--enabled"}),hover:e({name:"window-tools_error-list_primary--hover"}),active:e({name:"window-tools_error-list_primary--active"}),disabled:e({name:"window-tools_error-list_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_error-list_neutral--enabled"}),hover:e({name:"window-tools_error-list_neutral--hover"}),active:e({name:"window-tools_error-list_neutral--active"}),disabled:e({name:"window-tools_error-list_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_error-list_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_error-list_bright--enabled"})})}),debugx:e({"on-surface":e({enabled:e({name:"window-tools_debugx_on-surface--enabled"}),hover:e({name:"window-tools_debugx_on-surface--hover"}),active:e({name:"window-tools_debugx_on-surface--active"}),disabled:e({name:"window-tools_debugx_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_debugx_on-primary--enabled"}),hover:e({name:"window-tools_debugx_on-primary--hover"}),active:e({name:"window-tools_debugx_on-primary--active"}),disabled:e({name:"window-tools_debugx_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_debugx_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_debugx_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_debugx_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_debugx_primary--enabled"}),hover:e({name:"window-tools_debugx_primary--hover"}),active:e({name:"window-tools_debugx_primary--active"}),disabled:e({name:"window-tools_debugx_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_debugx_neutral--enabled"}),hover:e({name:"window-tools_debugx_neutral--hover"}),active:e({name:"window-tools_debugx_neutral--active"}),disabled:e({name:"window-tools_debugx_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_debugx_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_debugx_bright--enabled"})})}),datastores:e({"on-surface":e({enabled:e({name:"window-tools_datastores_on-surface--enabled"}),hover:e({name:"window-tools_datastores_on-surface--hover"}),active:e({name:"window-tools_datastores_on-surface--active"}),disabled:e({name:"window-tools_datastores_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_datastores_on-primary--enabled"}),hover:e({name:"window-tools_datastores_on-primary--hover"}),active:e({name:"window-tools_datastores_on-primary--active"}),disabled:e({name:"window-tools_datastores_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_datastores_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_datastores_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_datastores_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_datastores_primary--enabled"}),hover:e({name:"window-tools_datastores_primary--hover"}),active:e({name:"window-tools_datastores_primary--active"}),disabled:e({name:"window-tools_datastores_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_datastores_neutral--enabled"}),hover:e({name:"window-tools_datastores_neutral--hover"}),active:e({name:"window-tools_datastores_neutral--active"}),disabled:e({name:"window-tools_datastores_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_datastores_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_datastores_bright--enabled"})})}),"category-groups":e({"on-surface":e({enabled:e({name:"window-tools_category-groups_on-surface--enabled"}),hover:e({name:"window-tools_category-groups_on-surface--hover"}),active:e({name:"window-tools_category-groups_on-surface--active"}),disabled:e({name:"window-tools_category-groups_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_category-groups_on-primary--enabled"}),hover:e({name:"window-tools_category-groups_on-primary--hover"}),active:e({name:"window-tools_category-groups_on-primary--active"}),disabled:e({name:"window-tools_category-groups_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_category-groups_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_category-groups_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_category-groups_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_category-groups_primary--enabled"}),hover:e({name:"window-tools_category-groups_primary--hover"}),active:e({name:"window-tools_category-groups_primary--active"}),disabled:e({name:"window-tools_category-groups_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_category-groups_neutral--enabled"}),hover:e({name:"window-tools_category-groups_neutral--hover"}),active:e({name:"window-tools_category-groups_neutral--active"}),disabled:e({name:"window-tools_category-groups_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_category-groups_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_category-groups_bright--enabled"})})}),breakpoints:e({"on-surface":e({enabled:e({name:"window-tools_breakpoints_on-surface--enabled"}),hover:e({name:"window-tools_breakpoints_on-surface--hover"}),active:e({name:"window-tools_breakpoints_on-surface--active"}),disabled:e({name:"window-tools_breakpoints_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_breakpoints_on-primary--enabled"}),hover:e({name:"window-tools_breakpoints_on-primary--hover"}),active:e({name:"window-tools_breakpoints_on-primary--active"}),disabled:e({name:"window-tools_breakpoints_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_breakpoints_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_breakpoints_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_breakpoints_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_breakpoints_primary--enabled"}),hover:e({name:"window-tools_breakpoints_primary--hover"}),active:e({name:"window-tools_breakpoints_primary--active"}),disabled:e({name:"window-tools_breakpoints_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_breakpoints_neutral--enabled"}),hover:e({name:"window-tools_breakpoints_neutral--hover"}),active:e({name:"window-tools_breakpoints_neutral--active"}),disabled:e({name:"window-tools_breakpoints_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_breakpoints_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_breakpoints_bright--enabled"})})}),backend:e({"on-surface":e({enabled:e({name:"window-tools_backend_on-surface--enabled"}),hover:e({name:"window-tools_backend_on-surface--hover"}),active:e({name:"window-tools_backend_on-surface--active"}),disabled:e({name:"window-tools_backend_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_backend_on-primary--enabled"}),hover:e({name:"window-tools_backend_on-primary--hover"}),active:e({name:"window-tools_backend_on-primary--active"}),disabled:e({name:"window-tools_backend_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_backend_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_backend_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_backend_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_backend_primary--enabled"}),hover:e({name:"window-tools_backend_primary--hover"}),active:e({name:"window-tools_backend_primary--active"}),disabled:e({name:"window-tools_backend_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_backend_neutral--enabled"}),hover:e({name:"window-tools_backend_neutral--hover"}),active:e({name:"window-tools_backend_neutral--active"}),disabled:e({name:"window-tools_backend_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_backend_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_backend_bright--enabled"})})}),"alphabetical-order":e({"on-surface":e({enabled:e({name:"window-tools_alphabetical-order_on-surface--enabled"}),hover:e({name:"window-tools_alphabetical-order_on-surface--hover"}),active:e({name:"window-tools_alphabetical-order_on-surface--active"}),disabled:e({name:"window-tools_alphabetical-order_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"window-tools_alphabetical-order_on-primary--enabled"}),hover:e({name:"window-tools_alphabetical-order_on-primary--hover"}),active:e({name:"window-tools_alphabetical-order_on-primary--active"}),disabled:e({name:"window-tools_alphabetical-order_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"window-tools_alphabetical-order_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"window-tools_alphabetical-order_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"window-tools_alphabetical-order_on-elevation--enabled"})}),primary:e({enabled:e({name:"window-tools_alphabetical-order_primary--enabled"}),hover:e({name:"window-tools_alphabetical-order_primary--hover"}),active:e({name:"window-tools_alphabetical-order_primary--active"}),disabled:e({name:"window-tools_alphabetical-order_primary--disabled"})}),neutral:e({enabled:e({name:"window-tools_alphabetical-order_neutral--enabled"}),hover:e({name:"window-tools_alphabetical-order_neutral--hover"}),active:e({name:"window-tools_alphabetical-order_neutral--active"}),disabled:e({name:"window-tools_alphabetical-order_neutral--disabled"})}),highlighted:e({enabled:e({name:"window-tools_alphabetical-order_highlighted--enabled"})}),bright:e({enabled:e({name:"window-tools_alphabetical-order_bright--enabled"})})})}),system:e({"zoom-out":e({"on-surface":e({enabled:e({name:"system_zoom-out_on-surface--enabled"}),hover:e({name:"system_zoom-out_on-surface--hover"}),active:e({name:"system_zoom-out_on-surface--active"}),disabled:e({name:"system_zoom-out_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_zoom-out_on-primary--enabled"}),hover:e({name:"system_zoom-out_on-primary--hover"}),active:e({name:"system_zoom-out_on-primary--active"}),disabled:e({name:"system_zoom-out_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_zoom-out_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_zoom-out_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_zoom-out_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_zoom-out_primary--enabled"}),hover:e({name:"system_zoom-out_primary--hover"}),active:e({name:"system_zoom-out_primary--active"}),disabled:e({name:"system_zoom-out_primary--disabled"})}),error:e({enabled:e({name:"system_zoom-out_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_zoom-out_error-actionable--enabled"}),hover:e({name:"system_zoom-out_error-actionable--hover"}),active:e({name:"system_zoom-out_error-actionable--active"}),disabled:e({name:"system_zoom-out_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_zoom-out_warning--enabled"})}),success:e({enabled:e({name:"system_zoom-out_success--enabled"})}),neutral:e({enabled:e({name:"system_zoom-out_neutral--enabled"}),hover:e({name:"system_zoom-out_neutral--hover"}),active:e({name:"system_zoom-out_neutral--active"}),disabled:e({name:"system_zoom-out_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_zoom-out_highlighted--enabled"})}),bright:e({enabled:e({name:"system_zoom-out_bright--enabled"})})}),"zoom-in":e({"on-surface":e({enabled:e({name:"system_zoom-in_on-surface--enabled"}),hover:e({name:"system_zoom-in_on-surface--hover"}),active:e({name:"system_zoom-in_on-surface--active"}),disabled:e({name:"system_zoom-in_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_zoom-in_on-primary--enabled"}),hover:e({name:"system_zoom-in_on-primary--hover"}),active:e({name:"system_zoom-in_on-primary--active"}),disabled:e({name:"system_zoom-in_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_zoom-in_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_zoom-in_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_zoom-in_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_zoom-in_primary--enabled"}),hover:e({name:"system_zoom-in_primary--hover"}),active:e({name:"system_zoom-in_primary--active"}),disabled:e({name:"system_zoom-in_primary--disabled"})}),error:e({enabled:e({name:"system_zoom-in_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_zoom-in_error-actionable--enabled"}),hover:e({name:"system_zoom-in_error-actionable--hover"}),active:e({name:"system_zoom-in_error-actionable--active"}),disabled:e({name:"system_zoom-in_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_zoom-in_warning--enabled"})}),success:e({enabled:e({name:"system_zoom-in_success--enabled"})}),neutral:e({enabled:e({name:"system_zoom-in_neutral--enabled"}),hover:e({name:"system_zoom-in_neutral--hover"}),active:e({name:"system_zoom-in_neutral--active"}),disabled:e({name:"system_zoom-in_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_zoom-in_highlighted--enabled"})}),bright:e({enabled:e({name:"system_zoom-in_bright--enabled"})})}),warning:e({"on-surface":e({enabled:e({name:"system_warning_on-surface--enabled"}),hover:e({name:"system_warning_on-surface--hover"}),active:e({name:"system_warning_on-surface--active"}),disabled:e({name:"system_warning_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_warning_on-primary--enabled"}),hover:e({name:"system_warning_on-primary--hover"}),active:e({name:"system_warning_on-primary--active"}),disabled:e({name:"system_warning_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_warning_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_warning_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_warning_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_warning_primary--enabled"}),hover:e({name:"system_warning_primary--hover"}),active:e({name:"system_warning_primary--active"}),disabled:e({name:"system_warning_primary--disabled"})}),error:e({enabled:e({name:"system_warning_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_warning_error-actionable--enabled"}),hover:e({name:"system_warning_error-actionable--hover"}),active:e({name:"system_warning_error-actionable--active"}),disabled:e({name:"system_warning_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_warning_warning--enabled"})}),success:e({enabled:e({name:"system_warning_success--enabled"})}),neutral:e({enabled:e({name:"system_warning_neutral--enabled"}),hover:e({name:"system_warning_neutral--hover"}),active:e({name:"system_warning_neutral--active"}),disabled:e({name:"system_warning_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_warning_highlighted--enabled"})}),bright:e({enabled:e({name:"system_warning_bright--enabled"})})}),version:e({"on-surface":e({enabled:e({name:"system_version_on-surface--enabled"}),hover:e({name:"system_version_on-surface--hover"}),active:e({name:"system_version_on-surface--active"}),disabled:e({name:"system_version_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_version_on-primary--enabled"}),hover:e({name:"system_version_on-primary--hover"}),active:e({name:"system_version_on-primary--active"}),disabled:e({name:"system_version_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_version_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_version_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_version_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_version_primary--enabled"}),hover:e({name:"system_version_primary--hover"}),active:e({name:"system_version_primary--active"}),disabled:e({name:"system_version_primary--disabled"})}),error:e({enabled:e({name:"system_version_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_version_error-actionable--enabled"}),hover:e({name:"system_version_error-actionable--hover"}),active:e({name:"system_version_error-actionable--active"}),disabled:e({name:"system_version_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_version_warning--enabled"})}),success:e({enabled:e({name:"system_version_success--enabled"})}),neutral:e({enabled:e({name:"system_version_neutral--enabled"}),hover:e({name:"system_version_neutral--hover"}),active:e({name:"system_version_neutral--active"}),disabled:e({name:"system_version_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_version_highlighted--enabled"})}),bright:e({enabled:e({name:"system_version_bright--enabled"})})}),user:e({"on-surface":e({enabled:e({name:"system_user_on-surface--enabled"}),hover:e({name:"system_user_on-surface--hover"}),active:e({name:"system_user_on-surface--active"}),disabled:e({name:"system_user_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_user_on-primary--enabled"}),hover:e({name:"system_user_on-primary--hover"}),active:e({name:"system_user_on-primary--active"}),disabled:e({name:"system_user_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_user_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_user_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_user_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_user_primary--enabled"}),hover:e({name:"system_user_primary--hover"}),active:e({name:"system_user_primary--active"}),disabled:e({name:"system_user_primary--disabled"})}),error:e({enabled:e({name:"system_user_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_user_error-actionable--enabled"}),hover:e({name:"system_user_error-actionable--hover"}),active:e({name:"system_user_error-actionable--active"}),disabled:e({name:"system_user_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_user_warning--enabled"})}),success:e({enabled:e({name:"system_user_success--enabled"})}),neutral:e({enabled:e({name:"system_user_neutral--enabled"}),hover:e({name:"system_user_neutral--hover"}),active:e({name:"system_user_neutral--active"}),disabled:e({name:"system_user_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_user_highlighted--enabled"})}),bright:e({enabled:e({name:"system_user_bright--enabled"})})}),upload:e({"on-surface":e({enabled:e({name:"system_upload_on-surface--enabled"}),hover:e({name:"system_upload_on-surface--hover"}),active:e({name:"system_upload_on-surface--active"}),disabled:e({name:"system_upload_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_upload_on-primary--enabled"}),hover:e({name:"system_upload_on-primary--hover"}),active:e({name:"system_upload_on-primary--active"}),disabled:e({name:"system_upload_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_upload_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_upload_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_upload_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_upload_primary--enabled"}),hover:e({name:"system_upload_primary--hover"}),active:e({name:"system_upload_primary--active"}),disabled:e({name:"system_upload_primary--disabled"})}),error:e({enabled:e({name:"system_upload_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_upload_error-actionable--enabled"}),hover:e({name:"system_upload_error-actionable--hover"}),active:e({name:"system_upload_error-actionable--active"}),disabled:e({name:"system_upload_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_upload_warning--enabled"})}),success:e({enabled:e({name:"system_upload_success--enabled"})}),neutral:e({enabled:e({name:"system_upload_neutral--enabled"}),hover:e({name:"system_upload_neutral--hover"}),active:e({name:"system_upload_neutral--active"}),disabled:e({name:"system_upload_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_upload_highlighted--enabled"})}),bright:e({enabled:e({name:"system_upload_bright--enabled"})})}),undo:e({"on-surface":e({enabled:e({name:"system_undo_on-surface--enabled"}),hover:e({name:"system_undo_on-surface--hover"}),active:e({name:"system_undo_on-surface--active"}),disabled:e({name:"system_undo_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_undo_on-primary--enabled"}),hover:e({name:"system_undo_on-primary--hover"}),active:e({name:"system_undo_on-primary--active"}),disabled:e({name:"system_undo_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_undo_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_undo_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_undo_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_undo_primary--enabled"}),hover:e({name:"system_undo_primary--hover"}),active:e({name:"system_undo_primary--active"}),disabled:e({name:"system_undo_primary--disabled"})}),error:e({enabled:e({name:"system_undo_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_undo_error-actionable--enabled"}),hover:e({name:"system_undo_error-actionable--hover"}),active:e({name:"system_undo_error-actionable--active"}),disabled:e({name:"system_undo_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_undo_warning--enabled"})}),success:e({enabled:e({name:"system_undo_success--enabled"})}),neutral:e({enabled:e({name:"system_undo_neutral--enabled"}),hover:e({name:"system_undo_neutral--hover"}),active:e({name:"system_undo_neutral--active"}),disabled:e({name:"system_undo_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_undo_highlighted--enabled"})}),bright:e({enabled:e({name:"system_undo_bright--enabled"})})}),tools:e({"on-surface":e({enabled:e({name:"system_tools_on-surface--enabled"}),hover:e({name:"system_tools_on-surface--hover"}),active:e({name:"system_tools_on-surface--active"}),disabled:e({name:"system_tools_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_tools_on-primary--enabled"}),hover:e({name:"system_tools_on-primary--hover"}),active:e({name:"system_tools_on-primary--active"}),disabled:e({name:"system_tools_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_tools_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_tools_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_tools_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_tools_primary--enabled"}),hover:e({name:"system_tools_primary--hover"}),active:e({name:"system_tools_primary--active"}),disabled:e({name:"system_tools_primary--disabled"})}),error:e({enabled:e({name:"system_tools_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_tools_error-actionable--enabled"}),hover:e({name:"system_tools_error-actionable--hover"}),active:e({name:"system_tools_error-actionable--active"}),disabled:e({name:"system_tools_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_tools_warning--enabled"})}),success:e({enabled:e({name:"system_tools_success--enabled"})}),neutral:e({enabled:e({name:"system_tools_neutral--enabled"}),hover:e({name:"system_tools_neutral--hover"}),active:e({name:"system_tools_neutral--active"}),disabled:e({name:"system_tools_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_tools_highlighted--enabled"})}),bright:e({enabled:e({name:"system_tools_bright--enabled"})})}),"toggle-theme":e({"on-surface":e({enabled:e({name:"system_toggle-theme_on-surface--enabled"}),hover:e({name:"system_toggle-theme_on-surface--hover"}),active:e({name:"system_toggle-theme_on-surface--active"}),disabled:e({name:"system_toggle-theme_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_toggle-theme_on-primary--enabled"}),hover:e({name:"system_toggle-theme_on-primary--hover"}),active:e({name:"system_toggle-theme_on-primary--active"}),disabled:e({name:"system_toggle-theme_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_toggle-theme_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_toggle-theme_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_toggle-theme_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_toggle-theme_primary--enabled"}),hover:e({name:"system_toggle-theme_primary--hover"}),active:e({name:"system_toggle-theme_primary--active"}),disabled:e({name:"system_toggle-theme_primary--disabled"})}),error:e({enabled:e({name:"system_toggle-theme_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_toggle-theme_error-actionable--enabled"}),hover:e({name:"system_toggle-theme_error-actionable--hover"}),active:e({name:"system_toggle-theme_error-actionable--active"}),disabled:e({name:"system_toggle-theme_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_toggle-theme_warning--enabled"})}),success:e({enabled:e({name:"system_toggle-theme_success--enabled"})}),neutral:e({enabled:e({name:"system_toggle-theme_neutral--enabled"}),hover:e({name:"system_toggle-theme_neutral--hover"}),active:e({name:"system_toggle-theme_neutral--active"}),disabled:e({name:"system_toggle-theme_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_toggle-theme_highlighted--enabled"})}),bright:e({enabled:e({name:"system_toggle-theme_bright--enabled"})})}),time:e({"on-surface":e({enabled:e({name:"system_time_on-surface--enabled"}),hover:e({name:"system_time_on-surface--hover"}),active:e({name:"system_time_on-surface--active"}),disabled:e({name:"system_time_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_time_on-primary--enabled"}),hover:e({name:"system_time_on-primary--hover"}),active:e({name:"system_time_on-primary--active"}),disabled:e({name:"system_time_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_time_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_time_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_time_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_time_primary--enabled"}),hover:e({name:"system_time_primary--hover"}),active:e({name:"system_time_primary--active"}),disabled:e({name:"system_time_primary--disabled"})}),error:e({enabled:e({name:"system_time_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_time_error-actionable--enabled"}),hover:e({name:"system_time_error-actionable--hover"}),active:e({name:"system_time_error-actionable--active"}),disabled:e({name:"system_time_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_time_warning--enabled"})}),success:e({enabled:e({name:"system_time_success--enabled"})}),neutral:e({enabled:e({name:"system_time_neutral--enabled"}),hover:e({name:"system_time_neutral--hover"}),active:e({name:"system_time_neutral--active"}),disabled:e({name:"system_time_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_time_highlighted--enabled"})}),bright:e({enabled:e({name:"system_time_bright--enabled"})})}),thunder:e({"on-surface":e({enabled:e({name:"system_thunder_on-surface--enabled"}),hover:e({name:"system_thunder_on-surface--hover"}),active:e({name:"system_thunder_on-surface--active"}),disabled:e({name:"system_thunder_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_thunder_on-primary--enabled"}),hover:e({name:"system_thunder_on-primary--hover"}),active:e({name:"system_thunder_on-primary--active"}),disabled:e({name:"system_thunder_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_thunder_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_thunder_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_thunder_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_thunder_primary--enabled"}),hover:e({name:"system_thunder_primary--hover"}),active:e({name:"system_thunder_primary--active"}),disabled:e({name:"system_thunder_primary--disabled"})}),error:e({enabled:e({name:"system_thunder_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_thunder_error-actionable--enabled"}),hover:e({name:"system_thunder_error-actionable--hover"}),active:e({name:"system_thunder_error-actionable--active"}),disabled:e({name:"system_thunder_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_thunder_warning--enabled"})}),success:e({enabled:e({name:"system_thunder_success--enabled"})}),neutral:e({enabled:e({name:"system_thunder_neutral--enabled"}),hover:e({name:"system_thunder_neutral--hover"}),active:e({name:"system_thunder_neutral--active"}),disabled:e({name:"system_thunder_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_thunder_highlighted--enabled"})}),bright:e({enabled:e({name:"system_thunder_bright--enabled"})})}),"thumb-up":e({"on-surface":e({enabled:e({name:"system_thumb-up_on-surface--enabled"}),hover:e({name:"system_thumb-up_on-surface--hover"}),active:e({name:"system_thumb-up_on-surface--active"}),disabled:e({name:"system_thumb-up_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_thumb-up_on-primary--enabled"}),hover:e({name:"system_thumb-up_on-primary--hover"}),active:e({name:"system_thumb-up_on-primary--active"}),disabled:e({name:"system_thumb-up_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_thumb-up_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_thumb-up_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_thumb-up_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_thumb-up_primary--enabled"}),hover:e({name:"system_thumb-up_primary--hover"}),active:e({name:"system_thumb-up_primary--active"}),disabled:e({name:"system_thumb-up_primary--disabled"})}),error:e({enabled:e({name:"system_thumb-up_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_thumb-up_error-actionable--enabled"}),hover:e({name:"system_thumb-up_error-actionable--hover"}),active:e({name:"system_thumb-up_error-actionable--active"}),disabled:e({name:"system_thumb-up_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_thumb-up_warning--enabled"})}),success:e({enabled:e({name:"system_thumb-up_success--enabled"})}),neutral:e({enabled:e({name:"system_thumb-up_neutral--enabled"}),hover:e({name:"system_thumb-up_neutral--hover"}),active:e({name:"system_thumb-up_neutral--active"}),disabled:e({name:"system_thumb-up_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_thumb-up_highlighted--enabled"})}),bright:e({enabled:e({name:"system_thumb-up_bright--enabled"})})}),"thumb-down":e({"on-surface":e({enabled:e({name:"system_thumb-down_on-surface--enabled"}),hover:e({name:"system_thumb-down_on-surface--hover"}),active:e({name:"system_thumb-down_on-surface--active"}),disabled:e({name:"system_thumb-down_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_thumb-down_on-primary--enabled"}),hover:e({name:"system_thumb-down_on-primary--hover"}),active:e({name:"system_thumb-down_on-primary--active"}),disabled:e({name:"system_thumb-down_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_thumb-down_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_thumb-down_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_thumb-down_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_thumb-down_primary--enabled"}),hover:e({name:"system_thumb-down_primary--hover"}),active:e({name:"system_thumb-down_primary--active"}),disabled:e({name:"system_thumb-down_primary--disabled"})}),error:e({enabled:e({name:"system_thumb-down_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_thumb-down_error-actionable--enabled"}),hover:e({name:"system_thumb-down_error-actionable--hover"}),active:e({name:"system_thumb-down_error-actionable--active"}),disabled:e({name:"system_thumb-down_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_thumb-down_warning--enabled"})}),success:e({enabled:e({name:"system_thumb-down_success--enabled"})}),neutral:e({enabled:e({name:"system_thumb-down_neutral--enabled"}),hover:e({name:"system_thumb-down_neutral--hover"}),active:e({name:"system_thumb-down_neutral--active"}),disabled:e({name:"system_thumb-down_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_thumb-down_highlighted--enabled"})}),bright:e({enabled:e({name:"system_thumb-down_bright--enabled"})})}),"text-compare":e({"on-surface":e({enabled:e({name:"system_text-compare_on-surface--enabled"}),hover:e({name:"system_text-compare_on-surface--hover"}),active:e({name:"system_text-compare_on-surface--active"}),disabled:e({name:"system_text-compare_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_text-compare_on-primary--enabled"}),hover:e({name:"system_text-compare_on-primary--hover"}),active:e({name:"system_text-compare_on-primary--active"}),disabled:e({name:"system_text-compare_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_text-compare_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_text-compare_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_text-compare_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_text-compare_primary--enabled"}),hover:e({name:"system_text-compare_primary--hover"}),active:e({name:"system_text-compare_primary--active"}),disabled:e({name:"system_text-compare_primary--disabled"})}),error:e({enabled:e({name:"system_text-compare_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_text-compare_error-actionable--enabled"}),hover:e({name:"system_text-compare_error-actionable--hover"}),active:e({name:"system_text-compare_error-actionable--active"}),disabled:e({name:"system_text-compare_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_text-compare_warning--enabled"})}),success:e({enabled:e({name:"system_text-compare_success--enabled"})}),neutral:e({enabled:e({name:"system_text-compare_neutral--enabled"}),hover:e({name:"system_text-compare_neutral--hover"}),active:e({name:"system_text-compare_neutral--active"}),disabled:e({name:"system_text-compare_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_text-compare_highlighted--enabled"})}),bright:e({enabled:e({name:"system_text-compare_bright--enabled"})})}),table:e({"on-surface":e({enabled:e({name:"system_table_on-surface--enabled"}),hover:e({name:"system_table_on-surface--hover"}),active:e({name:"system_table_on-surface--active"}),disabled:e({name:"system_table_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_table_on-primary--enabled"}),hover:e({name:"system_table_on-primary--hover"}),active:e({name:"system_table_on-primary--active"}),disabled:e({name:"system_table_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_table_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_table_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_table_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_table_primary--enabled"}),hover:e({name:"system_table_primary--hover"}),active:e({name:"system_table_primary--active"}),disabled:e({name:"system_table_primary--disabled"})}),error:e({enabled:e({name:"system_table_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_table_error-actionable--enabled"}),hover:e({name:"system_table_error-actionable--hover"}),active:e({name:"system_table_error-actionable--active"}),disabled:e({name:"system_table_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_table_warning--enabled"})}),success:e({enabled:e({name:"system_table_success--enabled"})}),neutral:e({enabled:e({name:"system_table_neutral--enabled"}),hover:e({name:"system_table_neutral--hover"}),active:e({name:"system_table_neutral--active"}),disabled:e({name:"system_table_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_table_highlighted--enabled"})}),bright:e({enabled:e({name:"system_table_bright--enabled"})})}),substract:e({"on-surface":e({enabled:e({name:"system_substract_on-surface--enabled"}),hover:e({name:"system_substract_on-surface--hover"}),active:e({name:"system_substract_on-surface--active"}),disabled:e({name:"system_substract_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_substract_on-primary--enabled"}),hover:e({name:"system_substract_on-primary--hover"}),active:e({name:"system_substract_on-primary--active"}),disabled:e({name:"system_substract_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_substract_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_substract_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_substract_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_substract_primary--enabled"}),hover:e({name:"system_substract_primary--hover"}),active:e({name:"system_substract_primary--active"}),disabled:e({name:"system_substract_primary--disabled"})}),error:e({enabled:e({name:"system_substract_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_substract_error-actionable--enabled"}),hover:e({name:"system_substract_error-actionable--hover"}),active:e({name:"system_substract_error-actionable--active"}),disabled:e({name:"system_substract_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_substract_warning--enabled"})}),success:e({enabled:e({name:"system_substract_success--enabled"})}),neutral:e({enabled:e({name:"system_substract_neutral--enabled"}),hover:e({name:"system_substract_neutral--hover"}),active:e({name:"system_substract_neutral--active"}),disabled:e({name:"system_substract_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_substract_highlighted--enabled"})}),bright:e({enabled:e({name:"system_substract_bright--enabled"})})}),star:e({"on-surface":e({enabled:e({name:"system_star_on-surface--enabled"}),hover:e({name:"system_star_on-surface--hover"}),active:e({name:"system_star_on-surface--active"}),disabled:e({name:"system_star_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_star_on-primary--enabled"}),hover:e({name:"system_star_on-primary--hover"}),active:e({name:"system_star_on-primary--active"}),disabled:e({name:"system_star_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_star_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_star_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_star_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_star_primary--enabled"}),hover:e({name:"system_star_primary--hover"}),active:e({name:"system_star_primary--active"}),disabled:e({name:"system_star_primary--disabled"})}),error:e({enabled:e({name:"system_star_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_star_error-actionable--enabled"}),hover:e({name:"system_star_error-actionable--hover"}),active:e({name:"system_star_error-actionable--active"}),disabled:e({name:"system_star_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_star_warning--enabled"})}),success:e({enabled:e({name:"system_star_success--enabled"})}),neutral:e({enabled:e({name:"system_star_neutral--enabled"}),hover:e({name:"system_star_neutral--hover"}),active:e({name:"system_star_neutral--active"}),disabled:e({name:"system_star_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_star_highlighted--enabled"})}),bright:e({enabled:e({name:"system_star_bright--enabled"})})}),"star-unselected":e({"on-surface":e({enabled:e({name:"system_star-unselected_on-surface--enabled"}),hover:e({name:"system_star-unselected_on-surface--hover"}),active:e({name:"system_star-unselected_on-surface--active"}),disabled:e({name:"system_star-unselected_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_star-unselected_on-primary--enabled"}),hover:e({name:"system_star-unselected_on-primary--hover"}),active:e({name:"system_star-unselected_on-primary--active"}),disabled:e({name:"system_star-unselected_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_star-unselected_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_star-unselected_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_star-unselected_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_star-unselected_primary--enabled"}),hover:e({name:"system_star-unselected_primary--hover"}),active:e({name:"system_star-unselected_primary--active"}),disabled:e({name:"system_star-unselected_primary--disabled"})}),error:e({enabled:e({name:"system_star-unselected_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_star-unselected_error-actionable--enabled"}),hover:e({name:"system_star-unselected_error-actionable--hover"}),active:e({name:"system_star-unselected_error-actionable--active"}),disabled:e({name:"system_star-unselected_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_star-unselected_warning--enabled"})}),success:e({enabled:e({name:"system_star-unselected_success--enabled"})}),neutral:e({enabled:e({name:"system_star-unselected_neutral--enabled"}),hover:e({name:"system_star-unselected_neutral--hover"}),active:e({name:"system_star-unselected_neutral--active"}),disabled:e({name:"system_star-unselected_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_star-unselected_highlighted--enabled"})}),bright:e({enabled:e({name:"system_star-unselected_bright--enabled"})})}),show:e({"on-surface":e({enabled:e({name:"system_show_on-surface--enabled"}),hover:e({name:"system_show_on-surface--hover"}),active:e({name:"system_show_on-surface--active"}),disabled:e({name:"system_show_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_show_on-primary--enabled"}),hover:e({name:"system_show_on-primary--hover"}),active:e({name:"system_show_on-primary--active"}),disabled:e({name:"system_show_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_show_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_show_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_show_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_show_primary--enabled"}),hover:e({name:"system_show_primary--hover"}),active:e({name:"system_show_primary--active"}),disabled:e({name:"system_show_primary--disabled"})}),error:e({enabled:e({name:"system_show_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_show_error-actionable--enabled"}),hover:e({name:"system_show_error-actionable--hover"}),active:e({name:"system_show_error-actionable--active"}),disabled:e({name:"system_show_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_show_warning--enabled"})}),success:e({enabled:e({name:"system_show_success--enabled"})}),neutral:e({enabled:e({name:"system_show_neutral--enabled"}),hover:e({name:"system_show_neutral--hover"}),active:e({name:"system_show_neutral--active"}),disabled:e({name:"system_show_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_show_highlighted--enabled"})}),bright:e({enabled:e({name:"system_show_bright--enabled"})})}),share:e({"on-surface":e({enabled:e({name:"system_share_on-surface--enabled"}),hover:e({name:"system_share_on-surface--hover"}),active:e({name:"system_share_on-surface--active"}),disabled:e({name:"system_share_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_share_on-primary--enabled"}),hover:e({name:"system_share_on-primary--hover"}),active:e({name:"system_share_on-primary--active"}),disabled:e({name:"system_share_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_share_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_share_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_share_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_share_primary--enabled"}),hover:e({name:"system_share_primary--hover"}),active:e({name:"system_share_primary--active"}),disabled:e({name:"system_share_primary--disabled"})}),error:e({enabled:e({name:"system_share_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_share_error-actionable--enabled"}),hover:e({name:"system_share_error-actionable--hover"}),active:e({name:"system_share_error-actionable--active"}),disabled:e({name:"system_share_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_share_warning--enabled"})}),success:e({enabled:e({name:"system_share_success--enabled"})}),neutral:e({enabled:e({name:"system_share_neutral--enabled"}),hover:e({name:"system_share_neutral--hover"}),active:e({name:"system_share_neutral--active"}),disabled:e({name:"system_share_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_share_highlighted--enabled"})}),bright:e({enabled:e({name:"system_share_bright--enabled"})})}),settings:e({"on-surface":e({enabled:e({name:"system_settings_on-surface--enabled"}),hover:e({name:"system_settings_on-surface--hover"}),active:e({name:"system_settings_on-surface--active"}),disabled:e({name:"system_settings_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_settings_on-primary--enabled"}),hover:e({name:"system_settings_on-primary--hover"}),active:e({name:"system_settings_on-primary--active"}),disabled:e({name:"system_settings_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_settings_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_settings_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_settings_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_settings_primary--enabled"}),hover:e({name:"system_settings_primary--hover"}),active:e({name:"system_settings_primary--active"}),disabled:e({name:"system_settings_primary--disabled"})}),error:e({enabled:e({name:"system_settings_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_settings_error-actionable--enabled"}),hover:e({name:"system_settings_error-actionable--hover"}),active:e({name:"system_settings_error-actionable--active"}),disabled:e({name:"system_settings_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_settings_warning--enabled"})}),success:e({enabled:e({name:"system_settings_success--enabled"})}),neutral:e({enabled:e({name:"system_settings_neutral--enabled"}),hover:e({name:"system_settings_neutral--hover"}),active:e({name:"system_settings_neutral--active"}),disabled:e({name:"system_settings_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_settings_highlighted--enabled"})}),bright:e({enabled:e({name:"system_settings_bright--enabled"})})}),send:e({"on-surface":e({enabled:e({name:"system_send_on-surface--enabled"}),hover:e({name:"system_send_on-surface--hover"}),active:e({name:"system_send_on-surface--active"}),disabled:e({name:"system_send_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_send_on-primary--enabled"}),hover:e({name:"system_send_on-primary--hover"}),active:e({name:"system_send_on-primary--active"}),disabled:e({name:"system_send_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_send_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_send_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_send_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_send_primary--enabled"}),hover:e({name:"system_send_primary--hover"}),active:e({name:"system_send_primary--active"}),disabled:e({name:"system_send_primary--disabled"})}),error:e({enabled:e({name:"system_send_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_send_error-actionable--enabled"}),hover:e({name:"system_send_error-actionable--hover"}),active:e({name:"system_send_error-actionable--active"}),disabled:e({name:"system_send_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_send_warning--enabled"})}),success:e({enabled:e({name:"system_send_success--enabled"})}),neutral:e({enabled:e({name:"system_send_neutral--enabled"}),hover:e({name:"system_send_neutral--hover"}),active:e({name:"system_send_neutral--active"}),disabled:e({name:"system_send_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_send_highlighted--enabled"})}),bright:e({enabled:e({name:"system_send_bright--enabled"})})}),search:e({"on-surface":e({enabled:e({name:"system_search_on-surface--enabled"}),hover:e({name:"system_search_on-surface--hover"}),active:e({name:"system_search_on-surface--active"}),disabled:e({name:"system_search_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_search_on-primary--enabled"}),hover:e({name:"system_search_on-primary--hover"}),active:e({name:"system_search_on-primary--active"}),disabled:e({name:"system_search_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_search_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_search_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_search_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_search_primary--enabled"}),hover:e({name:"system_search_primary--hover"}),active:e({name:"system_search_primary--active"}),disabled:e({name:"system_search_primary--disabled"})}),error:e({enabled:e({name:"system_search_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_search_error-actionable--enabled"}),hover:e({name:"system_search_error-actionable--hover"}),active:e({name:"system_search_error-actionable--active"}),disabled:e({name:"system_search_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_search_warning--enabled"})}),success:e({enabled:e({name:"system_search_success--enabled"})}),neutral:e({enabled:e({name:"system_search_neutral--enabled"}),hover:e({name:"system_search_neutral--hover"}),active:e({name:"system_search_neutral--active"}),disabled:e({name:"system_search_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_search_highlighted--enabled"})}),bright:e({enabled:e({name:"system_search_bright--enabled"})})}),save:e({"on-surface":e({enabled:e({name:"system_save_on-surface--enabled"}),hover:e({name:"system_save_on-surface--hover"}),active:e({name:"system_save_on-surface--active"}),disabled:e({name:"system_save_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_save_on-primary--enabled"}),hover:e({name:"system_save_on-primary--hover"}),active:e({name:"system_save_on-primary--active"}),disabled:e({name:"system_save_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_save_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_save_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_save_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_save_primary--enabled"}),hover:e({name:"system_save_primary--hover"}),active:e({name:"system_save_primary--active"}),disabled:e({name:"system_save_primary--disabled"})}),error:e({enabled:e({name:"system_save_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_save_error-actionable--enabled"}),hover:e({name:"system_save_error-actionable--hover"}),active:e({name:"system_save_error-actionable--active"}),disabled:e({name:"system_save_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_save_warning--enabled"})}),success:e({enabled:e({name:"system_save_success--enabled"})}),neutral:e({enabled:e({name:"system_save_neutral--enabled"}),hover:e({name:"system_save_neutral--hover"}),active:e({name:"system_save_neutral--active"}),disabled:e({name:"system_save_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_save_highlighted--enabled"})}),bright:e({enabled:e({name:"system_save_bright--enabled"})})}),run:e({"on-surface":e({enabled:e({name:"system_run_on-surface--enabled"}),hover:e({name:"system_run_on-surface--hover"}),active:e({name:"system_run_on-surface--active"}),disabled:e({name:"system_run_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_run_on-primary--enabled"}),hover:e({name:"system_run_on-primary--hover"}),active:e({name:"system_run_on-primary--active"}),disabled:e({name:"system_run_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_run_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_run_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_run_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_run_primary--enabled"}),hover:e({name:"system_run_primary--hover"}),active:e({name:"system_run_primary--active"}),disabled:e({name:"system_run_primary--disabled"})}),error:e({enabled:e({name:"system_run_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_run_error-actionable--enabled"}),hover:e({name:"system_run_error-actionable--hover"}),active:e({name:"system_run_error-actionable--active"}),disabled:e({name:"system_run_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_run_warning--enabled"})}),success:e({enabled:e({name:"system_run_success--enabled"})}),neutral:e({enabled:e({name:"system_run_neutral--enabled"}),hover:e({name:"system_run_neutral--hover"}),active:e({name:"system_run_neutral--active"}),disabled:e({name:"system_run_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_run_highlighted--enabled"})}),bright:e({enabled:e({name:"system_run_bright--enabled"})})}),"right-panel-open":e({"on-surface":e({enabled:e({name:"system_right-panel-open_on-surface--enabled"}),hover:e({name:"system_right-panel-open_on-surface--hover"}),active:e({name:"system_right-panel-open_on-surface--active"}),disabled:e({name:"system_right-panel-open_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_right-panel-open_on-primary--enabled"}),hover:e({name:"system_right-panel-open_on-primary--hover"}),active:e({name:"system_right-panel-open_on-primary--active"}),disabled:e({name:"system_right-panel-open_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_right-panel-open_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_right-panel-open_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_right-panel-open_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_right-panel-open_primary--enabled"}),hover:e({name:"system_right-panel-open_primary--hover"}),active:e({name:"system_right-panel-open_primary--active"}),disabled:e({name:"system_right-panel-open_primary--disabled"})}),error:e({enabled:e({name:"system_right-panel-open_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_right-panel-open_error-actionable--enabled"}),hover:e({name:"system_right-panel-open_error-actionable--hover"}),active:e({name:"system_right-panel-open_error-actionable--active"}),disabled:e({name:"system_right-panel-open_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_right-panel-open_warning--enabled"})}),success:e({enabled:e({name:"system_right-panel-open_success--enabled"})}),neutral:e({enabled:e({name:"system_right-panel-open_neutral--enabled"}),hover:e({name:"system_right-panel-open_neutral--hover"}),active:e({name:"system_right-panel-open_neutral--active"}),disabled:e({name:"system_right-panel-open_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_right-panel-open_highlighted--enabled"})}),bright:e({enabled:e({name:"system_right-panel-open_bright--enabled"})})}),retry:e({"on-surface":e({enabled:e({name:"system_retry_on-surface--enabled"}),hover:e({name:"system_retry_on-surface--hover"}),active:e({name:"system_retry_on-surface--active"}),disabled:e({name:"system_retry_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_retry_on-primary--enabled"}),hover:e({name:"system_retry_on-primary--hover"}),active:e({name:"system_retry_on-primary--active"}),disabled:e({name:"system_retry_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_retry_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_retry_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_retry_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_retry_primary--enabled"}),hover:e({name:"system_retry_primary--hover"}),active:e({name:"system_retry_primary--active"}),disabled:e({name:"system_retry_primary--disabled"})}),error:e({enabled:e({name:"system_retry_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_retry_error-actionable--enabled"}),hover:e({name:"system_retry_error-actionable--hover"}),active:e({name:"system_retry_error-actionable--active"}),disabled:e({name:"system_retry_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_retry_warning--enabled"})}),success:e({enabled:e({name:"system_retry_success--enabled"})}),neutral:e({enabled:e({name:"system_retry_neutral--enabled"}),hover:e({name:"system_retry_neutral--hover"}),active:e({name:"system_retry_neutral--active"}),disabled:e({name:"system_retry_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_retry_highlighted--enabled"})}),bright:e({enabled:e({name:"system_retry_bright--enabled"})})}),refresh:e({"on-surface":e({enabled:e({name:"system_refresh_on-surface--enabled"}),hover:e({name:"system_refresh_on-surface--hover"}),active:e({name:"system_refresh_on-surface--active"}),disabled:e({name:"system_refresh_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_refresh_on-primary--enabled"}),hover:e({name:"system_refresh_on-primary--hover"}),active:e({name:"system_refresh_on-primary--active"}),disabled:e({name:"system_refresh_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_refresh_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_refresh_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_refresh_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_refresh_primary--enabled"}),hover:e({name:"system_refresh_primary--hover"}),active:e({name:"system_refresh_primary--active"}),disabled:e({name:"system_refresh_primary--disabled"})}),error:e({enabled:e({name:"system_refresh_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_refresh_error-actionable--enabled"}),hover:e({name:"system_refresh_error-actionable--hover"}),active:e({name:"system_refresh_error-actionable--active"}),disabled:e({name:"system_refresh_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_refresh_warning--enabled"})}),success:e({enabled:e({name:"system_refresh_success--enabled"})}),neutral:e({enabled:e({name:"system_refresh_neutral--enabled"}),hover:e({name:"system_refresh_neutral--hover"}),active:e({name:"system_refresh_neutral--active"}),disabled:e({name:"system_refresh_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_refresh_highlighted--enabled"})}),bright:e({enabled:e({name:"system_refresh_bright--enabled"})})}),query:e({"on-surface":e({enabled:e({name:"system_query_on-surface--enabled"}),hover:e({name:"system_query_on-surface--hover"}),active:e({name:"system_query_on-surface--active"}),disabled:e({name:"system_query_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_query_on-primary--enabled"}),hover:e({name:"system_query_on-primary--hover"}),active:e({name:"system_query_on-primary--active"}),disabled:e({name:"system_query_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_query_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_query_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_query_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_query_primary--enabled"}),hover:e({name:"system_query_primary--hover"}),active:e({name:"system_query_primary--active"}),disabled:e({name:"system_query_primary--disabled"})}),error:e({enabled:e({name:"system_query_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_query_error-actionable--enabled"}),hover:e({name:"system_query_error-actionable--hover"}),active:e({name:"system_query_error-actionable--active"}),disabled:e({name:"system_query_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_query_warning--enabled"})}),success:e({enabled:e({name:"system_query_success--enabled"})}),neutral:e({enabled:e({name:"system_query_neutral--enabled"}),hover:e({name:"system_query_neutral--hover"}),active:e({name:"system_query_neutral--active"}),disabled:e({name:"system_query_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_query_highlighted--enabled"})}),bright:e({enabled:e({name:"system_query_bright--enabled"})})}),"qr-code":e({"on-surface":e({enabled:e({name:"system_qr-code_on-surface--enabled"}),hover:e({name:"system_qr-code_on-surface--hover"}),active:e({name:"system_qr-code_on-surface--active"}),disabled:e({name:"system_qr-code_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_qr-code_on-primary--enabled"}),hover:e({name:"system_qr-code_on-primary--hover"}),active:e({name:"system_qr-code_on-primary--active"}),disabled:e({name:"system_qr-code_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_qr-code_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_qr-code_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_qr-code_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_qr-code_primary--enabled"}),hover:e({name:"system_qr-code_primary--hover"}),active:e({name:"system_qr-code_primary--active"}),disabled:e({name:"system_qr-code_primary--disabled"})}),error:e({enabled:e({name:"system_qr-code_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_qr-code_error-actionable--enabled"}),hover:e({name:"system_qr-code_error-actionable--hover"}),active:e({name:"system_qr-code_error-actionable--active"}),disabled:e({name:"system_qr-code_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_qr-code_warning--enabled"})}),success:e({enabled:e({name:"system_qr-code_success--enabled"})}),neutral:e({enabled:e({name:"system_qr-code_neutral--enabled"}),hover:e({name:"system_qr-code_neutral--hover"}),active:e({name:"system_qr-code_neutral--active"}),disabled:e({name:"system_qr-code_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_qr-code_highlighted--enabled"})}),bright:e({enabled:e({name:"system_qr-code_bright--enabled"})})}),publish:e({"on-surface":e({enabled:e({name:"system_publish_on-surface--enabled"}),hover:e({name:"system_publish_on-surface--hover"}),active:e({name:"system_publish_on-surface--active"}),disabled:e({name:"system_publish_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_publish_on-primary--enabled"}),hover:e({name:"system_publish_on-primary--hover"}),active:e({name:"system_publish_on-primary--active"}),disabled:e({name:"system_publish_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_publish_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_publish_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_publish_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_publish_primary--enabled"}),hover:e({name:"system_publish_primary--hover"}),active:e({name:"system_publish_primary--active"}),disabled:e({name:"system_publish_primary--disabled"})}),error:e({enabled:e({name:"system_publish_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_publish_error-actionable--enabled"}),hover:e({name:"system_publish_error-actionable--hover"}),active:e({name:"system_publish_error-actionable--active"}),disabled:e({name:"system_publish_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_publish_warning--enabled"})}),success:e({enabled:e({name:"system_publish_success--enabled"})}),neutral:e({enabled:e({name:"system_publish_neutral--enabled"}),hover:e({name:"system_publish_neutral--hover"}),active:e({name:"system_publish_neutral--active"}),disabled:e({name:"system_publish_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_publish_highlighted--enabled"})}),bright:e({enabled:e({name:"system_publish_bright--enabled"})})}),property:e({"on-surface":e({enabled:e({name:"system_property_on-surface--enabled"}),hover:e({name:"system_property_on-surface--hover"}),active:e({name:"system_property_on-surface--active"}),disabled:e({name:"system_property_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_property_on-primary--enabled"}),hover:e({name:"system_property_on-primary--hover"}),active:e({name:"system_property_on-primary--active"}),disabled:e({name:"system_property_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_property_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_property_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_property_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_property_primary--enabled"}),hover:e({name:"system_property_primary--hover"}),active:e({name:"system_property_primary--active"}),disabled:e({name:"system_property_primary--disabled"})}),error:e({enabled:e({name:"system_property_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_property_error-actionable--enabled"}),hover:e({name:"system_property_error-actionable--hover"}),active:e({name:"system_property_error-actionable--active"}),disabled:e({name:"system_property_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_property_warning--enabled"})}),success:e({enabled:e({name:"system_property_success--enabled"})}),neutral:e({enabled:e({name:"system_property_neutral--enabled"}),hover:e({name:"system_property_neutral--hover"}),active:e({name:"system_property_neutral--active"}),disabled:e({name:"system_property_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_property_highlighted--enabled"})}),bright:e({enabled:e({name:"system_property_bright--enabled"})})}),photo:e({"on-surface":e({enabled:e({name:"system_photo_on-surface--enabled"}),hover:e({name:"system_photo_on-surface--hover"}),active:e({name:"system_photo_on-surface--active"}),disabled:e({name:"system_photo_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_photo_on-primary--enabled"}),hover:e({name:"system_photo_on-primary--hover"}),active:e({name:"system_photo_on-primary--active"}),disabled:e({name:"system_photo_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_photo_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_photo_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_photo_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_photo_primary--enabled"}),hover:e({name:"system_photo_primary--hover"}),active:e({name:"system_photo_primary--active"}),disabled:e({name:"system_photo_primary--disabled"})}),error:e({enabled:e({name:"system_photo_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_photo_error-actionable--enabled"}),hover:e({name:"system_photo_error-actionable--hover"}),active:e({name:"system_photo_error-actionable--active"}),disabled:e({name:"system_photo_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_photo_warning--enabled"})}),success:e({enabled:e({name:"system_photo_success--enabled"})}),neutral:e({enabled:e({name:"system_photo_neutral--enabled"}),hover:e({name:"system_photo_neutral--hover"}),active:e({name:"system_photo_neutral--active"}),disabled:e({name:"system_photo_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_photo_highlighted--enabled"})}),bright:e({enabled:e({name:"system_photo_bright--enabled"})})}),pause:e({"on-surface":e({enabled:e({name:"system_pause_on-surface--enabled"}),hover:e({name:"system_pause_on-surface--hover"}),active:e({name:"system_pause_on-surface--active"}),disabled:e({name:"system_pause_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_pause_on-primary--enabled"}),hover:e({name:"system_pause_on-primary--hover"}),active:e({name:"system_pause_on-primary--active"}),disabled:e({name:"system_pause_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_pause_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_pause_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_pause_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_pause_primary--enabled"}),hover:e({name:"system_pause_primary--hover"}),active:e({name:"system_pause_primary--active"}),disabled:e({name:"system_pause_primary--disabled"})}),error:e({enabled:e({name:"system_pause_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_pause_error-actionable--enabled"}),hover:e({name:"system_pause_error-actionable--hover"}),active:e({name:"system_pause_error-actionable--active"}),disabled:e({name:"system_pause_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_pause_warning--enabled"})}),success:e({enabled:e({name:"system_pause_success--enabled"})}),neutral:e({enabled:e({name:"system_pause_neutral--enabled"}),hover:e({name:"system_pause_neutral--hover"}),active:e({name:"system_pause_neutral--active"}),disabled:e({name:"system_pause_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_pause_highlighted--enabled"})}),bright:e({enabled:e({name:"system_pause_bright--enabled"})})}),"order-numberically":e({"on-surface":e({enabled:e({name:"system_order-numberically_on-surface--enabled"}),hover:e({name:"system_order-numberically_on-surface--hover"}),active:e({name:"system_order-numberically_on-surface--active"}),disabled:e({name:"system_order-numberically_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_order-numberically_on-primary--enabled"}),hover:e({name:"system_order-numberically_on-primary--hover"}),active:e({name:"system_order-numberically_on-primary--active"}),disabled:e({name:"system_order-numberically_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_order-numberically_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_order-numberically_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_order-numberically_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_order-numberically_primary--enabled"}),hover:e({name:"system_order-numberically_primary--hover"}),active:e({name:"system_order-numberically_primary--active"}),disabled:e({name:"system_order-numberically_primary--disabled"})}),error:e({enabled:e({name:"system_order-numberically_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_order-numberically_error-actionable--enabled"}),hover:e({name:"system_order-numberically_error-actionable--hover"}),active:e({name:"system_order-numberically_error-actionable--active"}),disabled:e({name:"system_order-numberically_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_order-numberically_warning--enabled"})}),success:e({enabled:e({name:"system_order-numberically_success--enabled"})}),neutral:e({enabled:e({name:"system_order-numberically_neutral--enabled"}),hover:e({name:"system_order-numberically_neutral--hover"}),active:e({name:"system_order-numberically_neutral--active"}),disabled:e({name:"system_order-numberically_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_order-numberically_highlighted--enabled"})}),bright:e({enabled:e({name:"system_order-numberically_bright--enabled"})})}),"order-alphabetically":e({"on-surface":e({enabled:e({name:"system_order-alphabetically_on-surface--enabled"}),hover:e({name:"system_order-alphabetically_on-surface--hover"}),active:e({name:"system_order-alphabetically_on-surface--active"}),disabled:e({name:"system_order-alphabetically_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_order-alphabetically_on-primary--enabled"}),hover:e({name:"system_order-alphabetically_on-primary--hover"}),active:e({name:"system_order-alphabetically_on-primary--active"}),disabled:e({name:"system_order-alphabetically_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_order-alphabetically_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_order-alphabetically_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_order-alphabetically_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_order-alphabetically_primary--enabled"}),hover:e({name:"system_order-alphabetically_primary--hover"}),active:e({name:"system_order-alphabetically_primary--active"}),disabled:e({name:"system_order-alphabetically_primary--disabled"})}),error:e({enabled:e({name:"system_order-alphabetically_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_order-alphabetically_error-actionable--enabled"}),hover:e({name:"system_order-alphabetically_error-actionable--hover"}),active:e({name:"system_order-alphabetically_error-actionable--active"}),disabled:e({name:"system_order-alphabetically_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_order-alphabetically_warning--enabled"})}),success:e({enabled:e({name:"system_order-alphabetically_success--enabled"})}),neutral:e({enabled:e({name:"system_order-alphabetically_neutral--enabled"}),hover:e({name:"system_order-alphabetically_neutral--hover"}),active:e({name:"system_order-alphabetically_neutral--active"}),disabled:e({name:"system_order-alphabetically_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_order-alphabetically_highlighted--enabled"})}),bright:e({enabled:e({name:"system_order-alphabetically_bright--enabled"})})}),notification:e({"on-surface":e({enabled:e({name:"system_notification_on-surface--enabled"}),hover:e({name:"system_notification_on-surface--hover"}),active:e({name:"system_notification_on-surface--active"}),disabled:e({name:"system_notification_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_notification_on-primary--enabled"}),hover:e({name:"system_notification_on-primary--hover"}),active:e({name:"system_notification_on-primary--active"}),disabled:e({name:"system_notification_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_notification_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_notification_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_notification_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_notification_primary--enabled"}),hover:e({name:"system_notification_primary--hover"}),active:e({name:"system_notification_primary--active"}),disabled:e({name:"system_notification_primary--disabled"})}),error:e({enabled:e({name:"system_notification_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_notification_error-actionable--enabled"}),hover:e({name:"system_notification_error-actionable--hover"}),active:e({name:"system_notification_error-actionable--active"}),disabled:e({name:"system_notification_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_notification_warning--enabled"})}),success:e({enabled:e({name:"system_notification_success--enabled"})}),neutral:e({enabled:e({name:"system_notification_neutral--enabled"}),hover:e({name:"system_notification_neutral--hover"}),active:e({name:"system_notification_neutral--active"}),disabled:e({name:"system_notification_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_notification_highlighted--enabled"})}),bright:e({enabled:e({name:"system_notification_bright--enabled"})})}),news:e({"on-surface":e({enabled:e({name:"system_news_on-surface--enabled"}),hover:e({name:"system_news_on-surface--hover"}),active:e({name:"system_news_on-surface--active"}),disabled:e({name:"system_news_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_news_on-primary--enabled"}),hover:e({name:"system_news_on-primary--hover"}),active:e({name:"system_news_on-primary--active"}),disabled:e({name:"system_news_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_news_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_news_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_news_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_news_primary--enabled"}),hover:e({name:"system_news_primary--hover"}),active:e({name:"system_news_primary--active"}),disabled:e({name:"system_news_primary--disabled"})}),error:e({enabled:e({name:"system_news_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_news_error-actionable--enabled"}),hover:e({name:"system_news_error-actionable--hover"}),active:e({name:"system_news_error-actionable--active"}),disabled:e({name:"system_news_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_news_warning--enabled"})}),success:e({enabled:e({name:"system_news_success--enabled"})}),neutral:e({enabled:e({name:"system_news_neutral--enabled"}),hover:e({name:"system_news_neutral--hover"}),active:e({name:"system_news_neutral--active"}),disabled:e({name:"system_news_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_news_highlighted--enabled"})}),bright:e({enabled:e({name:"system_news_bright--enabled"})})}),"more-vertical":e({"on-surface":e({enabled:e({name:"system_more-vertical_on-surface--enabled"}),hover:e({name:"system_more-vertical_on-surface--hover"}),active:e({name:"system_more-vertical_on-surface--active"}),disabled:e({name:"system_more-vertical_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_more-vertical_on-primary--enabled"}),hover:e({name:"system_more-vertical_on-primary--hover"}),active:e({name:"system_more-vertical_on-primary--active"}),disabled:e({name:"system_more-vertical_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_more-vertical_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_more-vertical_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_more-vertical_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_more-vertical_primary--enabled"}),hover:e({name:"system_more-vertical_primary--hover"}),active:e({name:"system_more-vertical_primary--active"}),disabled:e({name:"system_more-vertical_primary--disabled"})}),error:e({enabled:e({name:"system_more-vertical_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_more-vertical_error-actionable--enabled"}),hover:e({name:"system_more-vertical_error-actionable--hover"}),active:e({name:"system_more-vertical_error-actionable--active"}),disabled:e({name:"system_more-vertical_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_more-vertical_warning--enabled"})}),success:e({enabled:e({name:"system_more-vertical_success--enabled"})}),neutral:e({enabled:e({name:"system_more-vertical_neutral--enabled"}),hover:e({name:"system_more-vertical_neutral--hover"}),active:e({name:"system_more-vertical_neutral--active"}),disabled:e({name:"system_more-vertical_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_more-vertical_highlighted--enabled"})}),bright:e({enabled:e({name:"system_more-vertical_bright--enabled"})})}),"more-horizontal":e({"on-surface":e({enabled:e({name:"system_more-horizontal_on-surface--enabled"}),hover:e({name:"system_more-horizontal_on-surface--hover"}),active:e({name:"system_more-horizontal_on-surface--active"}),disabled:e({name:"system_more-horizontal_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_more-horizontal_on-primary--enabled"}),hover:e({name:"system_more-horizontal_on-primary--hover"}),active:e({name:"system_more-horizontal_on-primary--active"}),disabled:e({name:"system_more-horizontal_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_more-horizontal_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_more-horizontal_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_more-horizontal_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_more-horizontal_primary--enabled"}),hover:e({name:"system_more-horizontal_primary--hover"}),active:e({name:"system_more-horizontal_primary--active"}),disabled:e({name:"system_more-horizontal_primary--disabled"})}),error:e({enabled:e({name:"system_more-horizontal_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_more-horizontal_error-actionable--enabled"}),hover:e({name:"system_more-horizontal_error-actionable--hover"}),active:e({name:"system_more-horizontal_error-actionable--active"}),disabled:e({name:"system_more-horizontal_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_more-horizontal_warning--enabled"})}),success:e({enabled:e({name:"system_more-horizontal_success--enabled"})}),neutral:e({enabled:e({name:"system_more-horizontal_neutral--enabled"}),hover:e({name:"system_more-horizontal_neutral--hover"}),active:e({name:"system_more-horizontal_neutral--active"}),disabled:e({name:"system_more-horizontal_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_more-horizontal_highlighted--enabled"})}),bright:e({enabled:e({name:"system_more-horizontal_bright--enabled"})})}),mobile:e({"on-surface":e({enabled:e({name:"system_mobile_on-surface--enabled"}),hover:e({name:"system_mobile_on-surface--hover"}),active:e({name:"system_mobile_on-surface--active"}),disabled:e({name:"system_mobile_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_mobile_on-primary--enabled"}),hover:e({name:"system_mobile_on-primary--hover"}),active:e({name:"system_mobile_on-primary--active"}),disabled:e({name:"system_mobile_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_mobile_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_mobile_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_mobile_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_mobile_primary--enabled"}),hover:e({name:"system_mobile_primary--hover"}),active:e({name:"system_mobile_primary--active"}),disabled:e({name:"system_mobile_primary--disabled"})}),error:e({enabled:e({name:"system_mobile_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_mobile_error-actionable--enabled"}),hover:e({name:"system_mobile_error-actionable--hover"}),active:e({name:"system_mobile_error-actionable--active"}),disabled:e({name:"system_mobile_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_mobile_warning--enabled"})}),success:e({enabled:e({name:"system_mobile_success--enabled"})}),neutral:e({enabled:e({name:"system_mobile_neutral--enabled"}),hover:e({name:"system_mobile_neutral--hover"}),active:e({name:"system_mobile_neutral--active"}),disabled:e({name:"system_mobile_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_mobile_highlighted--enabled"})}),bright:e({enabled:e({name:"system_mobile_bright--enabled"})})}),mic:e({"on-surface":e({enabled:e({name:"system_mic_on-surface--enabled"}),hover:e({name:"system_mic_on-surface--hover"}),active:e({name:"system_mic_on-surface--active"}),disabled:e({name:"system_mic_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_mic_on-primary--enabled"}),hover:e({name:"system_mic_on-primary--hover"}),active:e({name:"system_mic_on-primary--active"}),disabled:e({name:"system_mic_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_mic_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_mic_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_mic_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_mic_primary--enabled"}),hover:e({name:"system_mic_primary--hover"}),active:e({name:"system_mic_primary--active"}),disabled:e({name:"system_mic_primary--disabled"})}),error:e({enabled:e({name:"system_mic_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_mic_error-actionable--enabled"}),hover:e({name:"system_mic_error-actionable--hover"}),active:e({name:"system_mic_error-actionable--active"}),disabled:e({name:"system_mic_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_mic_warning--enabled"})}),success:e({enabled:e({name:"system_mic_success--enabled"})}),neutral:e({enabled:e({name:"system_mic_neutral--enabled"}),hover:e({name:"system_mic_neutral--hover"}),active:e({name:"system_mic_neutral--active"}),disabled:e({name:"system_mic_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_mic_highlighted--enabled"})}),bright:e({enabled:e({name:"system_mic_bright--enabled"})})}),"mic-off":e({"on-surface":e({enabled:e({name:"system_mic-off_on-surface--enabled"}),hover:e({name:"system_mic-off_on-surface--hover"}),active:e({name:"system_mic-off_on-surface--active"}),disabled:e({name:"system_mic-off_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_mic-off_on-primary--enabled"}),hover:e({name:"system_mic-off_on-primary--hover"}),active:e({name:"system_mic-off_on-primary--active"}),disabled:e({name:"system_mic-off_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_mic-off_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_mic-off_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_mic-off_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_mic-off_primary--enabled"}),hover:e({name:"system_mic-off_primary--hover"}),active:e({name:"system_mic-off_primary--active"}),disabled:e({name:"system_mic-off_primary--disabled"})}),error:e({enabled:e({name:"system_mic-off_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_mic-off_error-actionable--enabled"}),hover:e({name:"system_mic-off_error-actionable--hover"}),active:e({name:"system_mic-off_error-actionable--active"}),disabled:e({name:"system_mic-off_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_mic-off_warning--enabled"})}),success:e({enabled:e({name:"system_mic-off_success--enabled"})}),neutral:e({enabled:e({name:"system_mic-off_neutral--enabled"}),hover:e({name:"system_mic-off_neutral--hover"}),active:e({name:"system_mic-off_neutral--active"}),disabled:e({name:"system_mic-off_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_mic-off_highlighted--enabled"})}),bright:e({enabled:e({name:"system_mic-off_bright--enabled"})})}),message:e({"on-surface":e({enabled:e({name:"system_message_on-surface--enabled"}),hover:e({name:"system_message_on-surface--hover"}),active:e({name:"system_message_on-surface--active"}),disabled:e({name:"system_message_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_message_on-primary--enabled"}),hover:e({name:"system_message_on-primary--hover"}),active:e({name:"system_message_on-primary--active"}),disabled:e({name:"system_message_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_message_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_message_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_message_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_message_primary--enabled"}),hover:e({name:"system_message_primary--hover"}),active:e({name:"system_message_primary--active"}),disabled:e({name:"system_message_primary--disabled"})}),error:e({enabled:e({name:"system_message_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_message_error-actionable--enabled"}),hover:e({name:"system_message_error-actionable--hover"}),active:e({name:"system_message_error-actionable--active"}),disabled:e({name:"system_message_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_message_warning--enabled"})}),success:e({enabled:e({name:"system_message_success--enabled"})}),neutral:e({enabled:e({name:"system_message_neutral--enabled"}),hover:e({name:"system_message_neutral--hover"}),active:e({name:"system_message_neutral--active"}),disabled:e({name:"system_message_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_message_highlighted--enabled"})}),bright:e({enabled:e({name:"system_message_bright--enabled"})})}),menu:e({"on-surface":e({enabled:e({name:"system_menu_on-surface--enabled"}),hover:e({name:"system_menu_on-surface--hover"}),active:e({name:"system_menu_on-surface--active"}),disabled:e({name:"system_menu_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_menu_on-primary--enabled"}),hover:e({name:"system_menu_on-primary--hover"}),active:e({name:"system_menu_on-primary--active"}),disabled:e({name:"system_menu_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_menu_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_menu_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_menu_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_menu_primary--enabled"}),hover:e({name:"system_menu_primary--hover"}),active:e({name:"system_menu_primary--active"}),disabled:e({name:"system_menu_primary--disabled"})}),error:e({enabled:e({name:"system_menu_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_menu_error-actionable--enabled"}),hover:e({name:"system_menu_error-actionable--hover"}),active:e({name:"system_menu_error-actionable--active"}),disabled:e({name:"system_menu_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_menu_warning--enabled"})}),success:e({enabled:e({name:"system_menu_success--enabled"})}),neutral:e({enabled:e({name:"system_menu_neutral--enabled"}),hover:e({name:"system_menu_neutral--hover"}),active:e({name:"system_menu_neutral--active"}),disabled:e({name:"system_menu_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_menu_highlighted--enabled"})}),bright:e({enabled:e({name:"system_menu_bright--enabled"})})}),mail:e({"on-surface":e({enabled:e({name:"system_mail_on-surface--enabled"}),hover:e({name:"system_mail_on-surface--hover"}),active:e({name:"system_mail_on-surface--active"}),disabled:e({name:"system_mail_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_mail_on-primary--enabled"}),hover:e({name:"system_mail_on-primary--hover"}),active:e({name:"system_mail_on-primary--active"}),disabled:e({name:"system_mail_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_mail_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_mail_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_mail_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_mail_primary--enabled"}),hover:e({name:"system_mail_primary--hover"}),active:e({name:"system_mail_primary--active"}),disabled:e({name:"system_mail_primary--disabled"})}),error:e({enabled:e({name:"system_mail_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_mail_error-actionable--enabled"}),hover:e({name:"system_mail_error-actionable--hover"}),active:e({name:"system_mail_error-actionable--active"}),disabled:e({name:"system_mail_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_mail_warning--enabled"})}),success:e({enabled:e({name:"system_mail_success--enabled"})}),neutral:e({enabled:e({name:"system_mail_neutral--enabled"}),hover:e({name:"system_mail_neutral--hover"}),active:e({name:"system_mail_neutral--active"}),disabled:e({name:"system_mail_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_mail_highlighted--enabled"})}),bright:e({enabled:e({name:"system_mail_bright--enabled"})})}),logout:e({"on-surface":e({enabled:e({name:"system_logout_on-surface--enabled"}),hover:e({name:"system_logout_on-surface--hover"}),active:e({name:"system_logout_on-surface--active"}),disabled:e({name:"system_logout_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_logout_on-primary--enabled"}),hover:e({name:"system_logout_on-primary--hover"}),active:e({name:"system_logout_on-primary--active"}),disabled:e({name:"system_logout_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_logout_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_logout_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_logout_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_logout_primary--enabled"}),hover:e({name:"system_logout_primary--hover"}),active:e({name:"system_logout_primary--active"}),disabled:e({name:"system_logout_primary--disabled"})}),error:e({enabled:e({name:"system_logout_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_logout_error-actionable--enabled"}),hover:e({name:"system_logout_error-actionable--hover"}),active:e({name:"system_logout_error-actionable--active"}),disabled:e({name:"system_logout_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_logout_warning--enabled"})}),success:e({enabled:e({name:"system_logout_success--enabled"})}),neutral:e({enabled:e({name:"system_logout_neutral--enabled"}),hover:e({name:"system_logout_neutral--hover"}),active:e({name:"system_logout_neutral--active"}),disabled:e({name:"system_logout_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_logout_highlighted--enabled"})}),bright:e({enabled:e({name:"system_logout_bright--enabled"})})}),"log-out":e({"on-surface":e({enabled:e({name:"system_log-out_on-surface--enabled"}),hover:e({name:"system_log-out_on-surface--hover"}),active:e({name:"system_log-out_on-surface--active"}),disabled:e({name:"system_log-out_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_log-out_on-primary--enabled"}),hover:e({name:"system_log-out_on-primary--hover"}),active:e({name:"system_log-out_on-primary--active"}),disabled:e({name:"system_log-out_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_log-out_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_log-out_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_log-out_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_log-out_primary--enabled"}),hover:e({name:"system_log-out_primary--hover"}),active:e({name:"system_log-out_primary--active"}),disabled:e({name:"system_log-out_primary--disabled"})}),error:e({enabled:e({name:"system_log-out_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_log-out_error-actionable--enabled"}),hover:e({name:"system_log-out_error-actionable--hover"}),active:e({name:"system_log-out_error-actionable--active"}),disabled:e({name:"system_log-out_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_log-out_warning--enabled"})}),success:e({enabled:e({name:"system_log-out_success--enabled"})}),neutral:e({enabled:e({name:"system_log-out_neutral--enabled"}),hover:e({name:"system_log-out_neutral--hover"}),active:e({name:"system_log-out_neutral--active"}),disabled:e({name:"system_log-out_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_log-out_highlighted--enabled"})}),bright:e({enabled:e({name:"system_log-out_bright--enabled"})})}),lock:e({"on-surface":e({enabled:e({name:"system_lock_on-surface--enabled"}),hover:e({name:"system_lock_on-surface--hover"}),active:e({name:"system_lock_on-surface--active"}),disabled:e({name:"system_lock_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_lock_on-primary--enabled"}),hover:e({name:"system_lock_on-primary--hover"}),active:e({name:"system_lock_on-primary--active"}),disabled:e({name:"system_lock_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_lock_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_lock_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_lock_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_lock_primary--enabled"}),hover:e({name:"system_lock_primary--hover"}),active:e({name:"system_lock_primary--active"}),disabled:e({name:"system_lock_primary--disabled"})}),error:e({enabled:e({name:"system_lock_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_lock_error-actionable--enabled"}),hover:e({name:"system_lock_error-actionable--hover"}),active:e({name:"system_lock_error-actionable--active"}),disabled:e({name:"system_lock_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_lock_warning--enabled"})}),success:e({enabled:e({name:"system_lock_success--enabled"})}),neutral:e({enabled:e({name:"system_lock_neutral--enabled"}),hover:e({name:"system_lock_neutral--hover"}),active:e({name:"system_lock_neutral--active"}),disabled:e({name:"system_lock_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_lock_highlighted--enabled"})}),bright:e({enabled:e({name:"system_lock_bright--enabled"})})}),loading:e({"on-surface":e({enabled:e({name:"system_loading_on-surface--enabled"}),hover:e({name:"system_loading_on-surface--hover"}),active:e({name:"system_loading_on-surface--active"}),disabled:e({name:"system_loading_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_loading_on-primary--enabled"}),hover:e({name:"system_loading_on-primary--hover"}),active:e({name:"system_loading_on-primary--active"}),disabled:e({name:"system_loading_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_loading_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_loading_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_loading_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_loading_primary--enabled"}),hover:e({name:"system_loading_primary--hover"}),active:e({name:"system_loading_primary--active"}),disabled:e({name:"system_loading_primary--disabled"})}),error:e({enabled:e({name:"system_loading_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_loading_error-actionable--enabled"}),hover:e({name:"system_loading_error-actionable--hover"}),active:e({name:"system_loading_error-actionable--active"}),disabled:e({name:"system_loading_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_loading_warning--enabled"})}),success:e({enabled:e({name:"system_loading_success--enabled"})}),neutral:e({enabled:e({name:"system_loading_neutral--enabled"}),hover:e({name:"system_loading_neutral--hover"}),active:e({name:"system_loading_neutral--active"}),disabled:e({name:"system_loading_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_loading_highlighted--enabled"})}),bright:e({enabled:e({name:"system_loading_bright--enabled"})})}),list:e({"on-surface":e({enabled:e({name:"system_list_on-surface--enabled"}),hover:e({name:"system_list_on-surface--hover"}),active:e({name:"system_list_on-surface--active"}),disabled:e({name:"system_list_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_list_on-primary--enabled"}),hover:e({name:"system_list_on-primary--hover"}),active:e({name:"system_list_on-primary--active"}),disabled:e({name:"system_list_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_list_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_list_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_list_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_list_primary--enabled"}),hover:e({name:"system_list_primary--hover"}),active:e({name:"system_list_primary--active"}),disabled:e({name:"system_list_primary--disabled"})}),error:e({enabled:e({name:"system_list_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_list_error-actionable--enabled"}),hover:e({name:"system_list_error-actionable--hover"}),active:e({name:"system_list_error-actionable--active"}),disabled:e({name:"system_list_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_list_warning--enabled"})}),success:e({enabled:e({name:"system_list_success--enabled"})}),neutral:e({enabled:e({name:"system_list_neutral--enabled"}),hover:e({name:"system_list_neutral--hover"}),active:e({name:"system_list_neutral--active"}),disabled:e({name:"system_list_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_list_highlighted--enabled"})}),bright:e({enabled:e({name:"system_list_bright--enabled"})})}),link:e({"on-surface":e({enabled:e({name:"system_link_on-surface--enabled"}),hover:e({name:"system_link_on-surface--hover"}),active:e({name:"system_link_on-surface--active"}),disabled:e({name:"system_link_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_link_on-primary--enabled"}),hover:e({name:"system_link_on-primary--hover"}),active:e({name:"system_link_on-primary--active"}),disabled:e({name:"system_link_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_link_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_link_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_link_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_link_primary--enabled"}),hover:e({name:"system_link_primary--hover"}),active:e({name:"system_link_primary--active"}),disabled:e({name:"system_link_primary--disabled"})}),error:e({enabled:e({name:"system_link_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_link_error-actionable--enabled"}),hover:e({name:"system_link_error-actionable--hover"}),active:e({name:"system_link_error-actionable--active"}),disabled:e({name:"system_link_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_link_warning--enabled"})}),success:e({enabled:e({name:"system_link_success--enabled"})}),neutral:e({enabled:e({name:"system_link_neutral--enabled"}),hover:e({name:"system_link_neutral--hover"}),active:e({name:"system_link_neutral--active"}),disabled:e({name:"system_link_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_link_highlighted--enabled"})}),bright:e({enabled:e({name:"system_link_bright--enabled"})})}),"link-off":e({"on-surface":e({enabled:e({name:"system_link-off_on-surface--enabled"}),hover:e({name:"system_link-off_on-surface--hover"}),active:e({name:"system_link-off_on-surface--active"}),disabled:e({name:"system_link-off_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_link-off_on-primary--enabled"}),hover:e({name:"system_link-off_on-primary--hover"}),active:e({name:"system_link-off_on-primary--active"}),disabled:e({name:"system_link-off_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_link-off_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_link-off_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_link-off_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_link-off_primary--enabled"}),hover:e({name:"system_link-off_primary--hover"}),active:e({name:"system_link-off_primary--active"}),disabled:e({name:"system_link-off_primary--disabled"})}),error:e({enabled:e({name:"system_link-off_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_link-off_error-actionable--enabled"}),hover:e({name:"system_link-off_error-actionable--hover"}),active:e({name:"system_link-off_error-actionable--active"}),disabled:e({name:"system_link-off_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_link-off_warning--enabled"})}),success:e({enabled:e({name:"system_link-off_success--enabled"})}),neutral:e({enabled:e({name:"system_link-off_neutral--enabled"}),hover:e({name:"system_link-off_neutral--hover"}),active:e({name:"system_link-off_neutral--active"}),disabled:e({name:"system_link-off_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_link-off_highlighted--enabled"})}),bright:e({enabled:e({name:"system_link-off_bright--enabled"})})}),"left-panel-open":e({"on-surface":e({enabled:e({name:"system_left-panel-open_on-surface--enabled"}),hover:e({name:"system_left-panel-open_on-surface--hover"}),active:e({name:"system_left-panel-open_on-surface--active"}),disabled:e({name:"system_left-panel-open_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_left-panel-open_on-primary--enabled"}),hover:e({name:"system_left-panel-open_on-primary--hover"}),active:e({name:"system_left-panel-open_on-primary--active"}),disabled:e({name:"system_left-panel-open_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_left-panel-open_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_left-panel-open_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_left-panel-open_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_left-panel-open_primary--enabled"}),hover:e({name:"system_left-panel-open_primary--hover"}),active:e({name:"system_left-panel-open_primary--active"}),disabled:e({name:"system_left-panel-open_primary--disabled"})}),error:e({enabled:e({name:"system_left-panel-open_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_left-panel-open_error-actionable--enabled"}),hover:e({name:"system_left-panel-open_error-actionable--hover"}),active:e({name:"system_left-panel-open_error-actionable--active"}),disabled:e({name:"system_left-panel-open_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_left-panel-open_warning--enabled"})}),success:e({enabled:e({name:"system_left-panel-open_success--enabled"})}),neutral:e({enabled:e({name:"system_left-panel-open_neutral--enabled"}),hover:e({name:"system_left-panel-open_neutral--hover"}),active:e({name:"system_left-panel-open_neutral--active"}),disabled:e({name:"system_left-panel-open_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_left-panel-open_highlighted--enabled"})}),bright:e({enabled:e({name:"system_left-panel-open_bright--enabled"})})}),launch:e({"on-surface":e({enabled:e({name:"system_launch_on-surface--enabled"}),hover:e({name:"system_launch_on-surface--hover"}),active:e({name:"system_launch_on-surface--active"}),disabled:e({name:"system_launch_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_launch_on-primary--enabled"}),hover:e({name:"system_launch_on-primary--hover"}),active:e({name:"system_launch_on-primary--active"}),disabled:e({name:"system_launch_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_launch_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_launch_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_launch_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_launch_primary--enabled"}),hover:e({name:"system_launch_primary--hover"}),active:e({name:"system_launch_primary--active"}),disabled:e({name:"system_launch_primary--disabled"})}),error:e({enabled:e({name:"system_launch_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_launch_error-actionable--enabled"}),hover:e({name:"system_launch_error-actionable--hover"}),active:e({name:"system_launch_error-actionable--active"}),disabled:e({name:"system_launch_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_launch_warning--enabled"})}),success:e({enabled:e({name:"system_launch_success--enabled"})}),neutral:e({enabled:e({name:"system_launch_neutral--enabled"}),hover:e({name:"system_launch_neutral--hover"}),active:e({name:"system_launch_neutral--active"}),disabled:e({name:"system_launch_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_launch_highlighted--enabled"})}),bright:e({enabled:e({name:"system_launch_bright--enabled"})})}),language:e({"on-surface":e({enabled:e({name:"system_language_on-surface--enabled"}),hover:e({name:"system_language_on-surface--hover"}),active:e({name:"system_language_on-surface--active"}),disabled:e({name:"system_language_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_language_on-primary--enabled"}),hover:e({name:"system_language_on-primary--hover"}),active:e({name:"system_language_on-primary--active"}),disabled:e({name:"system_language_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_language_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_language_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_language_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_language_primary--enabled"}),hover:e({name:"system_language_primary--hover"}),active:e({name:"system_language_primary--active"}),disabled:e({name:"system_language_primary--disabled"})}),error:e({enabled:e({name:"system_language_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_language_error-actionable--enabled"}),hover:e({name:"system_language_error-actionable--hover"}),active:e({name:"system_language_error-actionable--active"}),disabled:e({name:"system_language_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_language_warning--enabled"})}),success:e({enabled:e({name:"system_language_success--enabled"})}),neutral:e({enabled:e({name:"system_language_neutral--enabled"}),hover:e({name:"system_language_neutral--hover"}),active:e({name:"system_language_neutral--active"}),disabled:e({name:"system_language_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_language_highlighted--enabled"})}),bright:e({enabled:e({name:"system_language_bright--enabled"})})}),key:e({"on-surface":e({enabled:e({name:"system_key_on-surface--enabled"}),hover:e({name:"system_key_on-surface--hover"}),active:e({name:"system_key_on-surface--active"}),disabled:e({name:"system_key_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_key_on-primary--enabled"}),hover:e({name:"system_key_on-primary--hover"}),active:e({name:"system_key_on-primary--active"}),disabled:e({name:"system_key_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_key_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_key_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_key_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_key_primary--enabled"}),hover:e({name:"system_key_primary--hover"}),active:e({name:"system_key_primary--active"}),disabled:e({name:"system_key_primary--disabled"})}),error:e({enabled:e({name:"system_key_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_key_error-actionable--enabled"}),hover:e({name:"system_key_error-actionable--hover"}),active:e({name:"system_key_error-actionable--active"}),disabled:e({name:"system_key_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_key_warning--enabled"})}),success:e({enabled:e({name:"system_key_success--enabled"})}),neutral:e({enabled:e({name:"system_key_neutral--enabled"}),hover:e({name:"system_key_neutral--hover"}),active:e({name:"system_key_neutral--active"}),disabled:e({name:"system_key_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_key_highlighted--enabled"})}),bright:e({enabled:e({name:"system_key_bright--enabled"})})}),information:e({"on-surface":e({enabled:e({name:"system_information_on-surface--enabled"}),hover:e({name:"system_information_on-surface--hover"}),active:e({name:"system_information_on-surface--active"}),disabled:e({name:"system_information_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_information_on-primary--enabled"}),hover:e({name:"system_information_on-primary--hover"}),active:e({name:"system_information_on-primary--active"}),disabled:e({name:"system_information_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_information_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_information_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_information_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_information_primary--enabled"}),hover:e({name:"system_information_primary--hover"}),active:e({name:"system_information_primary--active"}),disabled:e({name:"system_information_primary--disabled"})}),error:e({enabled:e({name:"system_information_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_information_error-actionable--enabled"}),hover:e({name:"system_information_error-actionable--hover"}),active:e({name:"system_information_error-actionable--active"}),disabled:e({name:"system_information_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_information_warning--enabled"})}),success:e({enabled:e({name:"system_information_success--enabled"})}),neutral:e({enabled:e({name:"system_information_neutral--enabled"}),hover:e({name:"system_information_neutral--hover"}),active:e({name:"system_information_neutral--active"}),disabled:e({name:"system_information_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_information_highlighted--enabled"})}),bright:e({enabled:e({name:"system_information_bright--enabled"})})}),home:e({"on-surface":e({enabled:e({name:"system_home_on-surface--enabled"}),hover:e({name:"system_home_on-surface--hover"}),active:e({name:"system_home_on-surface--active"}),disabled:e({name:"system_home_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_home_on-primary--enabled"}),hover:e({name:"system_home_on-primary--hover"}),active:e({name:"system_home_on-primary--active"}),disabled:e({name:"system_home_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_home_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_home_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_home_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_home_primary--enabled"}),hover:e({name:"system_home_primary--hover"}),active:e({name:"system_home_primary--active"}),disabled:e({name:"system_home_primary--disabled"})}),error:e({enabled:e({name:"system_home_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_home_error-actionable--enabled"}),hover:e({name:"system_home_error-actionable--hover"}),active:e({name:"system_home_error-actionable--active"}),disabled:e({name:"system_home_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_home_warning--enabled"})}),success:e({enabled:e({name:"system_home_success--enabled"})}),neutral:e({enabled:e({name:"system_home_neutral--enabled"}),hover:e({name:"system_home_neutral--hover"}),active:e({name:"system_home_neutral--active"}),disabled:e({name:"system_home_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_home_highlighted--enabled"})}),bright:e({enabled:e({name:"system_home_bright--enabled"})})}),hide:e({"on-surface":e({enabled:e({name:"system_hide_on-surface--enabled"}),hover:e({name:"system_hide_on-surface--hover"}),active:e({name:"system_hide_on-surface--active"}),disabled:e({name:"system_hide_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_hide_on-primary--enabled"}),hover:e({name:"system_hide_on-primary--hover"}),active:e({name:"system_hide_on-primary--active"}),disabled:e({name:"system_hide_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_hide_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_hide_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_hide_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_hide_primary--enabled"}),hover:e({name:"system_hide_primary--hover"}),active:e({name:"system_hide_primary--active"}),disabled:e({name:"system_hide_primary--disabled"})}),error:e({enabled:e({name:"system_hide_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_hide_error-actionable--enabled"}),hover:e({name:"system_hide_error-actionable--hover"}),active:e({name:"system_hide_error-actionable--active"}),disabled:e({name:"system_hide_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_hide_warning--enabled"})}),success:e({enabled:e({name:"system_hide_success--enabled"})}),neutral:e({enabled:e({name:"system_hide_neutral--enabled"}),hover:e({name:"system_hide_neutral--hover"}),active:e({name:"system_hide_neutral--active"}),disabled:e({name:"system_hide_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_hide_highlighted--enabled"})}),bright:e({enabled:e({name:"system_hide_bright--enabled"})})}),help:e({"on-surface":e({enabled:e({name:"system_help_on-surface--enabled"}),hover:e({name:"system_help_on-surface--hover"}),active:e({name:"system_help_on-surface--active"}),disabled:e({name:"system_help_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_help_on-primary--enabled"}),hover:e({name:"system_help_on-primary--hover"}),active:e({name:"system_help_on-primary--active"}),disabled:e({name:"system_help_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_help_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_help_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_help_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_help_primary--enabled"}),hover:e({name:"system_help_primary--hover"}),active:e({name:"system_help_primary--active"}),disabled:e({name:"system_help_primary--disabled"})}),error:e({enabled:e({name:"system_help_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_help_error-actionable--enabled"}),hover:e({name:"system_help_error-actionable--hover"}),active:e({name:"system_help_error-actionable--active"}),disabled:e({name:"system_help_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_help_warning--enabled"})}),success:e({enabled:e({name:"system_help_success--enabled"})}),neutral:e({enabled:e({name:"system_help_neutral--enabled"}),hover:e({name:"system_help_neutral--hover"}),active:e({name:"system_help_neutral--active"}),disabled:e({name:"system_help_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_help_highlighted--enabled"})}),bright:e({enabled:e({name:"system_help_bright--enabled"})})}),"help-variant":e({"on-surface":e({enabled:e({name:"system_help-variant_on-surface--enabled"}),hover:e({name:"system_help-variant_on-surface--hover"}),active:e({name:"system_help-variant_on-surface--active"}),disabled:e({name:"system_help-variant_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_help-variant_on-primary--enabled"}),hover:e({name:"system_help-variant_on-primary--hover"}),active:e({name:"system_help-variant_on-primary--active"}),disabled:e({name:"system_help-variant_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_help-variant_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_help-variant_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_help-variant_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_help-variant_primary--enabled"}),hover:e({name:"system_help-variant_primary--hover"}),active:e({name:"system_help-variant_primary--active"}),disabled:e({name:"system_help-variant_primary--disabled"})}),error:e({enabled:e({name:"system_help-variant_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_help-variant_error-actionable--enabled"}),hover:e({name:"system_help-variant_error-actionable--hover"}),active:e({name:"system_help-variant_error-actionable--active"}),disabled:e({name:"system_help-variant_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_help-variant_warning--enabled"})}),success:e({enabled:e({name:"system_help-variant_success--enabled"})}),neutral:e({enabled:e({name:"system_help-variant_neutral--enabled"}),hover:e({name:"system_help-variant_neutral--hover"}),active:e({name:"system_help-variant_neutral--active"}),disabled:e({name:"system_help-variant_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_help-variant_highlighted--enabled"})}),bright:e({enabled:e({name:"system_help-variant_bright--enabled"})})}),folder:e({"on-surface":e({enabled:e({name:"system_folder_on-surface--enabled"}),hover:e({name:"system_folder_on-surface--hover"}),active:e({name:"system_folder_on-surface--active"}),disabled:e({name:"system_folder_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_folder_on-primary--enabled"}),hover:e({name:"system_folder_on-primary--hover"}),active:e({name:"system_folder_on-primary--active"}),disabled:e({name:"system_folder_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_folder_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_folder_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_folder_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_folder_primary--enabled"}),hover:e({name:"system_folder_primary--hover"}),active:e({name:"system_folder_primary--active"}),disabled:e({name:"system_folder_primary--disabled"})}),error:e({enabled:e({name:"system_folder_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_folder_error-actionable--enabled"}),hover:e({name:"system_folder_error-actionable--hover"}),active:e({name:"system_folder_error-actionable--active"}),disabled:e({name:"system_folder_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_folder_warning--enabled"})}),success:e({enabled:e({name:"system_folder_success--enabled"})}),neutral:e({enabled:e({name:"system_folder_neutral--enabled"}),hover:e({name:"system_folder_neutral--hover"}),active:e({name:"system_folder_neutral--active"}),disabled:e({name:"system_folder_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_folder_highlighted--enabled"})}),bright:e({enabled:e({name:"system_folder_bright--enabled"})})}),filters:e({"on-surface":e({enabled:e({name:"system_filters_on-surface--enabled"}),hover:e({name:"system_filters_on-surface--hover"}),active:e({name:"system_filters_on-surface--active"}),disabled:e({name:"system_filters_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_filters_on-primary--enabled"}),hover:e({name:"system_filters_on-primary--hover"}),active:e({name:"system_filters_on-primary--active"}),disabled:e({name:"system_filters_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_filters_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_filters_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_filters_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_filters_primary--enabled"}),hover:e({name:"system_filters_primary--hover"}),active:e({name:"system_filters_primary--active"}),disabled:e({name:"system_filters_primary--disabled"})}),error:e({enabled:e({name:"system_filters_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_filters_error-actionable--enabled"}),hover:e({name:"system_filters_error-actionable--hover"}),active:e({name:"system_filters_error-actionable--active"}),disabled:e({name:"system_filters_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_filters_warning--enabled"})}),success:e({enabled:e({name:"system_filters_success--enabled"})}),neutral:e({enabled:e({name:"system_filters_neutral--enabled"}),hover:e({name:"system_filters_neutral--hover"}),active:e({name:"system_filters_neutral--active"}),disabled:e({name:"system_filters_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_filters_highlighted--enabled"})}),bright:e({enabled:e({name:"system_filters_bright--enabled"})})}),eyedropper:e({"on-surface":e({enabled:e({name:"system_eyedropper_on-surface--enabled"}),hover:e({name:"system_eyedropper_on-surface--hover"}),active:e({name:"system_eyedropper_on-surface--active"}),disabled:e({name:"system_eyedropper_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_eyedropper_on-primary--enabled"}),hover:e({name:"system_eyedropper_on-primary--hover"}),active:e({name:"system_eyedropper_on-primary--active"}),disabled:e({name:"system_eyedropper_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_eyedropper_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_eyedropper_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_eyedropper_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_eyedropper_primary--enabled"}),hover:e({name:"system_eyedropper_primary--hover"}),active:e({name:"system_eyedropper_primary--active"}),disabled:e({name:"system_eyedropper_primary--disabled"})}),error:e({enabled:e({name:"system_eyedropper_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_eyedropper_error-actionable--enabled"}),hover:e({name:"system_eyedropper_error-actionable--hover"}),active:e({name:"system_eyedropper_error-actionable--active"}),disabled:e({name:"system_eyedropper_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_eyedropper_warning--enabled"})}),success:e({enabled:e({name:"system_eyedropper_success--enabled"})}),neutral:e({enabled:e({name:"system_eyedropper_neutral--enabled"}),hover:e({name:"system_eyedropper_neutral--hover"}),active:e({name:"system_eyedropper_neutral--active"}),disabled:e({name:"system_eyedropper_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_eyedropper_highlighted--enabled"})}),bright:e({enabled:e({name:"system_eyedropper_bright--enabled"})})}),expand:e({"on-surface":e({enabled:e({name:"system_expand_on-surface--enabled"}),hover:e({name:"system_expand_on-surface--hover"}),active:e({name:"system_expand_on-surface--active"}),disabled:e({name:"system_expand_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_expand_on-primary--enabled"}),hover:e({name:"system_expand_on-primary--hover"}),active:e({name:"system_expand_on-primary--active"}),disabled:e({name:"system_expand_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_expand_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_expand_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_expand_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_expand_primary--enabled"}),hover:e({name:"system_expand_primary--hover"}),active:e({name:"system_expand_primary--active"}),disabled:e({name:"system_expand_primary--disabled"})}),error:e({enabled:e({name:"system_expand_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_expand_error-actionable--enabled"}),hover:e({name:"system_expand_error-actionable--hover"}),active:e({name:"system_expand_error-actionable--active"}),disabled:e({name:"system_expand_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_expand_warning--enabled"})}),success:e({enabled:e({name:"system_expand_success--enabled"})}),neutral:e({enabled:e({name:"system_expand_neutral--enabled"}),hover:e({name:"system_expand_neutral--hover"}),active:e({name:"system_expand_neutral--active"}),disabled:e({name:"system_expand_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_expand_highlighted--enabled"})}),bright:e({enabled:e({name:"system_expand_bright--enabled"})})}),"expand-content":e({"on-surface":e({enabled:e({name:"system_expand-content_on-surface--enabled"}),hover:e({name:"system_expand-content_on-surface--hover"}),active:e({name:"system_expand-content_on-surface--active"}),disabled:e({name:"system_expand-content_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_expand-content_on-primary--enabled"}),hover:e({name:"system_expand-content_on-primary--hover"}),active:e({name:"system_expand-content_on-primary--active"}),disabled:e({name:"system_expand-content_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_expand-content_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_expand-content_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_expand-content_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_expand-content_primary--enabled"}),hover:e({name:"system_expand-content_primary--hover"}),active:e({name:"system_expand-content_primary--active"}),disabled:e({name:"system_expand-content_primary--disabled"})}),error:e({enabled:e({name:"system_expand-content_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_expand-content_error-actionable--enabled"}),hover:e({name:"system_expand-content_error-actionable--hover"}),active:e({name:"system_expand-content_error-actionable--active"}),disabled:e({name:"system_expand-content_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_expand-content_warning--enabled"})}),success:e({enabled:e({name:"system_expand-content_success--enabled"})}),neutral:e({enabled:e({name:"system_expand-content_neutral--enabled"}),hover:e({name:"system_expand-content_neutral--hover"}),active:e({name:"system_expand-content_neutral--active"}),disabled:e({name:"system_expand-content_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_expand-content_highlighted--enabled"})}),bright:e({enabled:e({name:"system_expand-content_bright--enabled"})})}),error:e({"on-surface":e({enabled:e({name:"system_error_on-surface--enabled"}),hover:e({name:"system_error_on-surface--hover"}),active:e({name:"system_error_on-surface--active"}),disabled:e({name:"system_error_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_error_on-primary--enabled"}),hover:e({name:"system_error_on-primary--hover"}),active:e({name:"system_error_on-primary--active"}),disabled:e({name:"system_error_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_error_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_error_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_error_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_error_primary--enabled"}),hover:e({name:"system_error_primary--hover"}),active:e({name:"system_error_primary--active"}),disabled:e({name:"system_error_primary--disabled"})}),error:e({enabled:e({name:"system_error_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_error_error-actionable--enabled"}),hover:e({name:"system_error_error-actionable--hover"}),active:e({name:"system_error_error-actionable--active"}),disabled:e({name:"system_error_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_error_warning--enabled"})}),success:e({enabled:e({name:"system_error_success--enabled"})}),neutral:e({enabled:e({name:"system_error_neutral--enabled"}),hover:e({name:"system_error_neutral--hover"}),active:e({name:"system_error_neutral--active"}),disabled:e({name:"system_error_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_error_highlighted--enabled"})}),bright:e({enabled:e({name:"system_error_bright--enabled"})})}),edit:e({"on-surface":e({enabled:e({name:"system_edit_on-surface--enabled"}),hover:e({name:"system_edit_on-surface--hover"}),active:e({name:"system_edit_on-surface--active"}),disabled:e({name:"system_edit_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_edit_on-primary--enabled"}),hover:e({name:"system_edit_on-primary--hover"}),active:e({name:"system_edit_on-primary--active"}),disabled:e({name:"system_edit_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_edit_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_edit_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_edit_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_edit_primary--enabled"}),hover:e({name:"system_edit_primary--hover"}),active:e({name:"system_edit_primary--active"}),disabled:e({name:"system_edit_primary--disabled"})}),error:e({enabled:e({name:"system_edit_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_edit_error-actionable--enabled"}),hover:e({name:"system_edit_error-actionable--hover"}),active:e({name:"system_edit_error-actionable--active"}),disabled:e({name:"system_edit_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_edit_warning--enabled"})}),success:e({enabled:e({name:"system_edit_success--enabled"})}),neutral:e({enabled:e({name:"system_edit_neutral--enabled"}),hover:e({name:"system_edit_neutral--hover"}),active:e({name:"system_edit_neutral--active"}),disabled:e({name:"system_edit_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_edit_highlighted--enabled"})}),bright:e({enabled:e({name:"system_edit_bright--enabled"})})}),drag:e({"on-surface":e({enabled:e({name:"system_drag_on-surface--enabled"}),hover:e({name:"system_drag_on-surface--hover"}),active:e({name:"system_drag_on-surface--active"}),disabled:e({name:"system_drag_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_drag_on-primary--enabled"}),hover:e({name:"system_drag_on-primary--hover"}),active:e({name:"system_drag_on-primary--active"}),disabled:e({name:"system_drag_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_drag_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_drag_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_drag_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_drag_primary--enabled"}),hover:e({name:"system_drag_primary--hover"}),active:e({name:"system_drag_primary--active"}),disabled:e({name:"system_drag_primary--disabled"})}),error:e({enabled:e({name:"system_drag_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_drag_error-actionable--enabled"}),hover:e({name:"system_drag_error-actionable--hover"}),active:e({name:"system_drag_error-actionable--active"}),disabled:e({name:"system_drag_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_drag_warning--enabled"})}),success:e({enabled:e({name:"system_drag_success--enabled"})}),neutral:e({enabled:e({name:"system_drag_neutral--enabled"}),hover:e({name:"system_drag_neutral--hover"}),active:e({name:"system_drag_neutral--active"}),disabled:e({name:"system_drag_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_drag_highlighted--enabled"})}),bright:e({enabled:e({name:"system_drag_bright--enabled"})})}),download:e({"on-surface":e({enabled:e({name:"system_download_on-surface--enabled"}),hover:e({name:"system_download_on-surface--hover"}),active:e({name:"system_download_on-surface--active"}),disabled:e({name:"system_download_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_download_on-primary--enabled"}),hover:e({name:"system_download_on-primary--hover"}),active:e({name:"system_download_on-primary--active"}),disabled:e({name:"system_download_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_download_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_download_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_download_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_download_primary--enabled"}),hover:e({name:"system_download_primary--hover"}),active:e({name:"system_download_primary--active"}),disabled:e({name:"system_download_primary--disabled"})}),error:e({enabled:e({name:"system_download_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_download_error-actionable--enabled"}),hover:e({name:"system_download_error-actionable--hover"}),active:e({name:"system_download_error-actionable--active"}),disabled:e({name:"system_download_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_download_warning--enabled"})}),success:e({enabled:e({name:"system_download_success--enabled"})}),neutral:e({enabled:e({name:"system_download_neutral--enabled"}),hover:e({name:"system_download_neutral--hover"}),active:e({name:"system_download_neutral--active"}),disabled:e({name:"system_download_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_download_highlighted--enabled"})}),bright:e({enabled:e({name:"system_download_bright--enabled"})})}),"double-chevron-right":e({"on-surface":e({enabled:e({name:"system_double-chevron-right_on-surface--enabled"}),hover:e({name:"system_double-chevron-right_on-surface--hover"}),active:e({name:"system_double-chevron-right_on-surface--active"}),disabled:e({name:"system_double-chevron-right_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_double-chevron-right_on-primary--enabled"}),hover:e({name:"system_double-chevron-right_on-primary--hover"}),active:e({name:"system_double-chevron-right_on-primary--active"}),disabled:e({name:"system_double-chevron-right_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_double-chevron-right_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_double-chevron-right_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_double-chevron-right_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_double-chevron-right_primary--enabled"}),hover:e({name:"system_double-chevron-right_primary--hover"}),active:e({name:"system_double-chevron-right_primary--active"}),disabled:e({name:"system_double-chevron-right_primary--disabled"})}),error:e({enabled:e({name:"system_double-chevron-right_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_double-chevron-right_error-actionable--enabled"}),hover:e({name:"system_double-chevron-right_error-actionable--hover"}),active:e({name:"system_double-chevron-right_error-actionable--active"}),disabled:e({name:"system_double-chevron-right_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_double-chevron-right_warning--enabled"})}),success:e({enabled:e({name:"system_double-chevron-right_success--enabled"})}),neutral:e({enabled:e({name:"system_double-chevron-right_neutral--enabled"}),hover:e({name:"system_double-chevron-right_neutral--hover"}),active:e({name:"system_double-chevron-right_neutral--active"}),disabled:e({name:"system_double-chevron-right_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_double-chevron-right_highlighted--enabled"})}),bright:e({enabled:e({name:"system_double-chevron-right_bright--enabled"})})}),"double-chevron-left":e({"on-surface":e({enabled:e({name:"system_double-chevron-left_on-surface--enabled"}),hover:e({name:"system_double-chevron-left_on-surface--hover"}),active:e({name:"system_double-chevron-left_on-surface--active"}),disabled:e({name:"system_double-chevron-left_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_double-chevron-left_on-primary--enabled"}),hover:e({name:"system_double-chevron-left_on-primary--hover"}),active:e({name:"system_double-chevron-left_on-primary--active"}),disabled:e({name:"system_double-chevron-left_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_double-chevron-left_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_double-chevron-left_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_double-chevron-left_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_double-chevron-left_primary--enabled"}),hover:e({name:"system_double-chevron-left_primary--hover"}),active:e({name:"system_double-chevron-left_primary--active"}),disabled:e({name:"system_double-chevron-left_primary--disabled"})}),error:e({enabled:e({name:"system_double-chevron-left_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_double-chevron-left_error-actionable--enabled"}),hover:e({name:"system_double-chevron-left_error-actionable--hover"}),active:e({name:"system_double-chevron-left_error-actionable--active"}),disabled:e({name:"system_double-chevron-left_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_double-chevron-left_warning--enabled"})}),success:e({enabled:e({name:"system_double-chevron-left_success--enabled"})}),neutral:e({enabled:e({name:"system_double-chevron-left_neutral--enabled"}),hover:e({name:"system_double-chevron-left_neutral--hover"}),active:e({name:"system_double-chevron-left_neutral--active"}),disabled:e({name:"system_double-chevron-left_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_double-chevron-left_highlighted--enabled"})}),bright:e({enabled:e({name:"system_double-chevron-left_bright--enabled"})})}),detail:e({"on-surface":e({enabled:e({name:"system_detail_on-surface--enabled"}),hover:e({name:"system_detail_on-surface--hover"}),active:e({name:"system_detail_on-surface--active"}),disabled:e({name:"system_detail_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_detail_on-primary--enabled"}),hover:e({name:"system_detail_on-primary--hover"}),active:e({name:"system_detail_on-primary--active"}),disabled:e({name:"system_detail_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_detail_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_detail_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_detail_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_detail_primary--enabled"}),hover:e({name:"system_detail_primary--hover"}),active:e({name:"system_detail_primary--active"}),disabled:e({name:"system_detail_primary--disabled"})}),error:e({enabled:e({name:"system_detail_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_detail_error-actionable--enabled"}),hover:e({name:"system_detail_error-actionable--hover"}),active:e({name:"system_detail_error-actionable--active"}),disabled:e({name:"system_detail_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_detail_warning--enabled"})}),success:e({enabled:e({name:"system_detail_success--enabled"})}),neutral:e({enabled:e({name:"system_detail_neutral--enabled"}),hover:e({name:"system_detail_neutral--hover"}),active:e({name:"system_detail_neutral--active"}),disabled:e({name:"system_detail_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_detail_highlighted--enabled"})}),bright:e({enabled:e({name:"system_detail_bright--enabled"})})}),"delete-outlined":e({"on-surface":e({enabled:e({name:"system_delete-outlined_on-surface--enabled"}),hover:e({name:"system_delete-outlined_on-surface--hover"}),active:e({name:"system_delete-outlined_on-surface--active"}),disabled:e({name:"system_delete-outlined_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_delete-outlined_on-primary--enabled"}),hover:e({name:"system_delete-outlined_on-primary--hover"}),active:e({name:"system_delete-outlined_on-primary--active"}),disabled:e({name:"system_delete-outlined_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_delete-outlined_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_delete-outlined_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_delete-outlined_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_delete-outlined_primary--enabled"}),hover:e({name:"system_delete-outlined_primary--hover"}),active:e({name:"system_delete-outlined_primary--active"}),disabled:e({name:"system_delete-outlined_primary--disabled"})}),error:e({enabled:e({name:"system_delete-outlined_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_delete-outlined_error-actionable--enabled"}),hover:e({name:"system_delete-outlined_error-actionable--hover"}),active:e({name:"system_delete-outlined_error-actionable--active"}),disabled:e({name:"system_delete-outlined_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_delete-outlined_warning--enabled"})}),success:e({enabled:e({name:"system_delete-outlined_success--enabled"})}),neutral:e({enabled:e({name:"system_delete-outlined_neutral--enabled"}),hover:e({name:"system_delete-outlined_neutral--hover"}),active:e({name:"system_delete-outlined_neutral--active"}),disabled:e({name:"system_delete-outlined_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_delete-outlined_highlighted--enabled"})}),bright:e({enabled:e({name:"system_delete-outlined_bright--enabled"})})}),database:e({"on-surface":e({enabled:e({name:"system_database_on-surface--enabled"}),hover:e({name:"system_database_on-surface--hover"}),active:e({name:"system_database_on-surface--active"}),disabled:e({name:"system_database_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_database_on-primary--enabled"}),hover:e({name:"system_database_on-primary--hover"}),active:e({name:"system_database_on-primary--active"}),disabled:e({name:"system_database_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_database_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_database_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_database_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_database_primary--enabled"}),hover:e({name:"system_database_primary--hover"}),active:e({name:"system_database_primary--active"}),disabled:e({name:"system_database_primary--disabled"})}),error:e({enabled:e({name:"system_database_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_database_error-actionable--enabled"}),hover:e({name:"system_database_error-actionable--hover"}),active:e({name:"system_database_error-actionable--active"}),disabled:e({name:"system_database_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_database_warning--enabled"})}),success:e({enabled:e({name:"system_database_success--enabled"})}),neutral:e({enabled:e({name:"system_database_neutral--enabled"}),hover:e({name:"system_database_neutral--hover"}),active:e({name:"system_database_neutral--active"}),disabled:e({name:"system_database_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_database_highlighted--enabled"})}),bright:e({enabled:e({name:"system_database_bright--enabled"})})}),"data-modeling":e({"on-surface":e({enabled:e({name:"system_data-modeling_on-surface--enabled"}),hover:e({name:"system_data-modeling_on-surface--hover"}),active:e({name:"system_data-modeling_on-surface--active"}),disabled:e({name:"system_data-modeling_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_data-modeling_on-primary--enabled"}),hover:e({name:"system_data-modeling_on-primary--hover"}),active:e({name:"system_data-modeling_on-primary--active"}),disabled:e({name:"system_data-modeling_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_data-modeling_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_data-modeling_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_data-modeling_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_data-modeling_primary--enabled"}),hover:e({name:"system_data-modeling_primary--hover"}),active:e({name:"system_data-modeling_primary--active"}),disabled:e({name:"system_data-modeling_primary--disabled"})}),error:e({enabled:e({name:"system_data-modeling_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_data-modeling_error-actionable--enabled"}),hover:e({name:"system_data-modeling_error-actionable--hover"}),active:e({name:"system_data-modeling_error-actionable--active"}),disabled:e({name:"system_data-modeling_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_data-modeling_warning--enabled"})}),success:e({enabled:e({name:"system_data-modeling_success--enabled"})}),neutral:e({enabled:e({name:"system_data-modeling_neutral--enabled"}),hover:e({name:"system_data-modeling_neutral--hover"}),active:e({name:"system_data-modeling_neutral--active"}),disabled:e({name:"system_data-modeling_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_data-modeling_highlighted--enabled"})}),bright:e({enabled:e({name:"system_data-modeling_bright--enabled"})})}),dashboard:e({"on-surface":e({enabled:e({name:"system_dashboard_on-surface--enabled"}),hover:e({name:"system_dashboard_on-surface--hover"}),active:e({name:"system_dashboard_on-surface--active"}),disabled:e({name:"system_dashboard_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_dashboard_on-primary--enabled"}),hover:e({name:"system_dashboard_on-primary--hover"}),active:e({name:"system_dashboard_on-primary--active"}),disabled:e({name:"system_dashboard_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_dashboard_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_dashboard_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_dashboard_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_dashboard_primary--enabled"}),hover:e({name:"system_dashboard_primary--hover"}),active:e({name:"system_dashboard_primary--active"}),disabled:e({name:"system_dashboard_primary--disabled"})}),error:e({enabled:e({name:"system_dashboard_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_dashboard_error-actionable--enabled"}),hover:e({name:"system_dashboard_error-actionable--hover"}),active:e({name:"system_dashboard_error-actionable--active"}),disabled:e({name:"system_dashboard_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_dashboard_warning--enabled"})}),success:e({enabled:e({name:"system_dashboard_success--enabled"})}),neutral:e({enabled:e({name:"system_dashboard_neutral--enabled"}),hover:e({name:"system_dashboard_neutral--hover"}),active:e({name:"system_dashboard_neutral--active"}),disabled:e({name:"system_dashboard_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_dashboard_highlighted--enabled"})}),bright:e({enabled:e({name:"system_dashboard_bright--enabled"})})}),cut:e({"on-surface":e({enabled:e({name:"system_cut_on-surface--enabled"}),hover:e({name:"system_cut_on-surface--hover"}),active:e({name:"system_cut_on-surface--active"}),disabled:e({name:"system_cut_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_cut_on-primary--enabled"}),hover:e({name:"system_cut_on-primary--hover"}),active:e({name:"system_cut_on-primary--active"}),disabled:e({name:"system_cut_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_cut_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_cut_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_cut_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_cut_primary--enabled"}),hover:e({name:"system_cut_primary--hover"}),active:e({name:"system_cut_primary--active"}),disabled:e({name:"system_cut_primary--disabled"})}),error:e({enabled:e({name:"system_cut_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_cut_error-actionable--enabled"}),hover:e({name:"system_cut_error-actionable--hover"}),active:e({name:"system_cut_error-actionable--active"}),disabled:e({name:"system_cut_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_cut_warning--enabled"})}),success:e({enabled:e({name:"system_cut_success--enabled"})}),neutral:e({enabled:e({name:"system_cut_neutral--enabled"}),hover:e({name:"system_cut_neutral--hover"}),active:e({name:"system_cut_neutral--active"}),disabled:e({name:"system_cut_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_cut_highlighted--enabled"})}),bright:e({enabled:e({name:"system_cut_bright--enabled"})})}),copy:e({"on-surface":e({enabled:e({name:"system_copy_on-surface--enabled"}),hover:e({name:"system_copy_on-surface--hover"}),active:e({name:"system_copy_on-surface--active"}),disabled:e({name:"system_copy_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_copy_on-primary--enabled"}),hover:e({name:"system_copy_on-primary--hover"}),active:e({name:"system_copy_on-primary--active"}),disabled:e({name:"system_copy_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_copy_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_copy_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_copy_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_copy_primary--enabled"}),hover:e({name:"system_copy_primary--hover"}),active:e({name:"system_copy_primary--active"}),disabled:e({name:"system_copy_primary--disabled"})}),error:e({enabled:e({name:"system_copy_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_copy_error-actionable--enabled"}),hover:e({name:"system_copy_error-actionable--hover"}),active:e({name:"system_copy_error-actionable--active"}),disabled:e({name:"system_copy_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_copy_warning--enabled"})}),success:e({enabled:e({name:"system_copy_success--enabled"})}),neutral:e({enabled:e({name:"system_copy_neutral--enabled"}),hover:e({name:"system_copy_neutral--hover"}),active:e({name:"system_copy_neutral--active"}),disabled:e({name:"system_copy_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_copy_highlighted--enabled"})}),bright:e({enabled:e({name:"system_copy_bright--enabled"})})}),contact:e({"on-surface":e({enabled:e({name:"system_contact_on-surface--enabled"}),hover:e({name:"system_contact_on-surface--hover"}),active:e({name:"system_contact_on-surface--active"}),disabled:e({name:"system_contact_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_contact_on-primary--enabled"}),hover:e({name:"system_contact_on-primary--hover"}),active:e({name:"system_contact_on-primary--active"}),disabled:e({name:"system_contact_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_contact_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_contact_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_contact_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_contact_primary--enabled"}),hover:e({name:"system_contact_primary--hover"}),active:e({name:"system_contact_primary--active"}),disabled:e({name:"system_contact_primary--disabled"})}),error:e({enabled:e({name:"system_contact_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_contact_error-actionable--enabled"}),hover:e({name:"system_contact_error-actionable--hover"}),active:e({name:"system_contact_error-actionable--active"}),disabled:e({name:"system_contact_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_contact_warning--enabled"})}),success:e({enabled:e({name:"system_contact_success--enabled"})}),neutral:e({enabled:e({name:"system_contact_neutral--enabled"}),hover:e({name:"system_contact_neutral--hover"}),active:e({name:"system_contact_neutral--active"}),disabled:e({name:"system_contact_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_contact_highlighted--enabled"})}),bright:e({enabled:e({name:"system_contact_bright--enabled"})})}),computer:e({"on-surface":e({enabled:e({name:"system_computer_on-surface--enabled"}),hover:e({name:"system_computer_on-surface--hover"}),active:e({name:"system_computer_on-surface--active"}),disabled:e({name:"system_computer_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_computer_on-primary--enabled"}),hover:e({name:"system_computer_on-primary--hover"}),active:e({name:"system_computer_on-primary--active"}),disabled:e({name:"system_computer_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_computer_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_computer_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_computer_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_computer_primary--enabled"}),hover:e({name:"system_computer_primary--hover"}),active:e({name:"system_computer_primary--active"}),disabled:e({name:"system_computer_primary--disabled"})}),error:e({enabled:e({name:"system_computer_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_computer_error-actionable--enabled"}),hover:e({name:"system_computer_error-actionable--hover"}),active:e({name:"system_computer_error-actionable--active"}),disabled:e({name:"system_computer_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_computer_warning--enabled"})}),success:e({enabled:e({name:"system_computer_success--enabled"})}),neutral:e({enabled:e({name:"system_computer_neutral--enabled"}),hover:e({name:"system_computer_neutral--hover"}),active:e({name:"system_computer_neutral--active"}),disabled:e({name:"system_computer_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_computer_highlighted--enabled"})}),bright:e({enabled:e({name:"system_computer_bright--enabled"})})}),company:e({"on-surface":e({enabled:e({name:"system_company_on-surface--enabled"}),hover:e({name:"system_company_on-surface--hover"}),active:e({name:"system_company_on-surface--active"}),disabled:e({name:"system_company_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_company_on-primary--enabled"}),hover:e({name:"system_company_on-primary--hover"}),active:e({name:"system_company_on-primary--active"}),disabled:e({name:"system_company_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_company_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_company_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_company_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_company_primary--enabled"}),hover:e({name:"system_company_primary--hover"}),active:e({name:"system_company_primary--active"}),disabled:e({name:"system_company_primary--disabled"})}),error:e({enabled:e({name:"system_company_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_company_error-actionable--enabled"}),hover:e({name:"system_company_error-actionable--hover"}),active:e({name:"system_company_error-actionable--active"}),disabled:e({name:"system_company_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_company_warning--enabled"})}),success:e({enabled:e({name:"system_company_success--enabled"})}),neutral:e({enabled:e({name:"system_company_neutral--enabled"}),hover:e({name:"system_company_neutral--hover"}),active:e({name:"system_company_neutral--active"}),disabled:e({name:"system_company_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_company_highlighted--enabled"})}),bright:e({enabled:e({name:"system_company_bright--enabled"})})}),"collapse-content":e({"on-surface":e({enabled:e({name:"system_collapse-content_on-surface--enabled"}),hover:e({name:"system_collapse-content_on-surface--hover"}),active:e({name:"system_collapse-content_on-surface--active"}),disabled:e({name:"system_collapse-content_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_collapse-content_on-primary--enabled"}),hover:e({name:"system_collapse-content_on-primary--hover"}),active:e({name:"system_collapse-content_on-primary--active"}),disabled:e({name:"system_collapse-content_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_collapse-content_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_collapse-content_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_collapse-content_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_collapse-content_primary--enabled"}),hover:e({name:"system_collapse-content_primary--hover"}),active:e({name:"system_collapse-content_primary--active"}),disabled:e({name:"system_collapse-content_primary--disabled"})}),error:e({enabled:e({name:"system_collapse-content_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_collapse-content_error-actionable--enabled"}),hover:e({name:"system_collapse-content_error-actionable--hover"}),active:e({name:"system_collapse-content_error-actionable--active"}),disabled:e({name:"system_collapse-content_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_collapse-content_warning--enabled"})}),success:e({enabled:e({name:"system_collapse-content_success--enabled"})}),neutral:e({enabled:e({name:"system_collapse-content_neutral--enabled"}),hover:e({name:"system_collapse-content_neutral--hover"}),active:e({name:"system_collapse-content_neutral--active"}),disabled:e({name:"system_collapse-content_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_collapse-content_highlighted--enabled"})}),bright:e({enabled:e({name:"system_collapse-content_bright--enabled"})})}),close:e({"on-surface":e({enabled:e({name:"system_close_on-surface--enabled"}),hover:e({name:"system_close_on-surface--hover"}),active:e({name:"system_close_on-surface--active"}),disabled:e({name:"system_close_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_close_on-primary--enabled"}),hover:e({name:"system_close_on-primary--hover"}),active:e({name:"system_close_on-primary--active"}),disabled:e({name:"system_close_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_close_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_close_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_close_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_close_primary--enabled"}),hover:e({name:"system_close_primary--hover"}),active:e({name:"system_close_primary--active"}),disabled:e({name:"system_close_primary--disabled"})}),error:e({enabled:e({name:"system_close_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_close_error-actionable--enabled"}),hover:e({name:"system_close_error-actionable--hover"}),active:e({name:"system_close_error-actionable--active"}),disabled:e({name:"system_close_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_close_warning--enabled"})}),success:e({enabled:e({name:"system_close_success--enabled"})}),neutral:e({enabled:e({name:"system_close_neutral--enabled"}),hover:e({name:"system_close_neutral--hover"}),active:e({name:"system_close_neutral--active"}),disabled:e({name:"system_close_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_close_highlighted--enabled"})}),bright:e({enabled:e({name:"system_close_bright--enabled"})})}),"close-small":e({"on-surface":e({enabled:e({name:"system_close-small_on-surface--enabled"}),hover:e({name:"system_close-small_on-surface--hover"}),active:e({name:"system_close-small_on-surface--active"}),disabled:e({name:"system_close-small_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_close-small_on-primary--enabled"}),hover:e({name:"system_close-small_on-primary--hover"}),active:e({name:"system_close-small_on-primary--active"}),disabled:e({name:"system_close-small_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_close-small_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_close-small_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_close-small_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_close-small_primary--enabled"}),hover:e({name:"system_close-small_primary--hover"}),active:e({name:"system_close-small_primary--active"}),disabled:e({name:"system_close-small_primary--disabled"})}),error:e({enabled:e({name:"system_close-small_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_close-small_error-actionable--enabled"}),hover:e({name:"system_close-small_error-actionable--hover"}),active:e({name:"system_close-small_error-actionable--active"}),disabled:e({name:"system_close-small_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_close-small_warning--enabled"})}),success:e({enabled:e({name:"system_close-small_success--enabled"})}),neutral:e({enabled:e({name:"system_close-small_neutral--enabled"}),hover:e({name:"system_close-small_neutral--hover"}),active:e({name:"system_close-small_neutral--active"}),disabled:e({name:"system_close-small_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_close-small_highlighted--enabled"})}),bright:e({enabled:e({name:"system_close-small_bright--enabled"})})}),"close-sidebar":e({"on-surface":e({enabled:e({name:"system_close-sidebar_on-surface--enabled"}),hover:e({name:"system_close-sidebar_on-surface--hover"}),active:e({name:"system_close-sidebar_on-surface--active"}),disabled:e({name:"system_close-sidebar_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_close-sidebar_on-primary--enabled"}),hover:e({name:"system_close-sidebar_on-primary--hover"}),active:e({name:"system_close-sidebar_on-primary--active"}),disabled:e({name:"system_close-sidebar_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_close-sidebar_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_close-sidebar_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_close-sidebar_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_close-sidebar_primary--enabled"}),hover:e({name:"system_close-sidebar_primary--hover"}),active:e({name:"system_close-sidebar_primary--active"}),disabled:e({name:"system_close-sidebar_primary--disabled"})}),error:e({enabled:e({name:"system_close-sidebar_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_close-sidebar_error-actionable--enabled"}),hover:e({name:"system_close-sidebar_error-actionable--hover"}),active:e({name:"system_close-sidebar_error-actionable--active"}),disabled:e({name:"system_close-sidebar_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_close-sidebar_warning--enabled"})}),success:e({enabled:e({name:"system_close-sidebar_success--enabled"})}),neutral:e({enabled:e({name:"system_close-sidebar_neutral--enabled"}),hover:e({name:"system_close-sidebar_neutral--hover"}),active:e({name:"system_close-sidebar_neutral--active"}),disabled:e({name:"system_close-sidebar_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_close-sidebar_highlighted--enabled"})}),bright:e({enabled:e({name:"system_close-sidebar_bright--enabled"})})}),"chevron-up":e({"on-surface":e({enabled:e({name:"system_chevron-up_on-surface--enabled"}),hover:e({name:"system_chevron-up_on-surface--hover"}),active:e({name:"system_chevron-up_on-surface--active"}),disabled:e({name:"system_chevron-up_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_chevron-up_on-primary--enabled"}),hover:e({name:"system_chevron-up_on-primary--hover"}),active:e({name:"system_chevron-up_on-primary--active"}),disabled:e({name:"system_chevron-up_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_chevron-up_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_chevron-up_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_chevron-up_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_chevron-up_primary--enabled"}),hover:e({name:"system_chevron-up_primary--hover"}),active:e({name:"system_chevron-up_primary--active"}),disabled:e({name:"system_chevron-up_primary--disabled"})}),error:e({enabled:e({name:"system_chevron-up_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_chevron-up_error-actionable--enabled"}),hover:e({name:"system_chevron-up_error-actionable--hover"}),active:e({name:"system_chevron-up_error-actionable--active"}),disabled:e({name:"system_chevron-up_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_chevron-up_warning--enabled"})}),success:e({enabled:e({name:"system_chevron-up_success--enabled"})}),neutral:e({enabled:e({name:"system_chevron-up_neutral--enabled"}),hover:e({name:"system_chevron-up_neutral--hover"}),active:e({name:"system_chevron-up_neutral--active"}),disabled:e({name:"system_chevron-up_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_chevron-up_highlighted--enabled"})}),bright:e({enabled:e({name:"system_chevron-up_bright--enabled"})})}),"chevron-small-up":e({"on-surface":e({enabled:e({name:"system_chevron-small-up_on-surface--enabled"}),hover:e({name:"system_chevron-small-up_on-surface--hover"}),active:e({name:"system_chevron-small-up_on-surface--active"}),disabled:e({name:"system_chevron-small-up_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_chevron-small-up_on-primary--enabled"}),hover:e({name:"system_chevron-small-up_on-primary--hover"}),active:e({name:"system_chevron-small-up_on-primary--active"}),disabled:e({name:"system_chevron-small-up_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_chevron-small-up_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_chevron-small-up_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_chevron-small-up_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_chevron-small-up_primary--enabled"}),hover:e({name:"system_chevron-small-up_primary--hover"}),active:e({name:"system_chevron-small-up_primary--active"}),disabled:e({name:"system_chevron-small-up_primary--disabled"})}),error:e({enabled:e({name:"system_chevron-small-up_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_chevron-small-up_error-actionable--enabled"}),hover:e({name:"system_chevron-small-up_error-actionable--hover"}),active:e({name:"system_chevron-small-up_error-actionable--active"}),disabled:e({name:"system_chevron-small-up_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_chevron-small-up_warning--enabled"})}),success:e({enabled:e({name:"system_chevron-small-up_success--enabled"})}),neutral:e({enabled:e({name:"system_chevron-small-up_neutral--enabled"}),hover:e({name:"system_chevron-small-up_neutral--hover"}),active:e({name:"system_chevron-small-up_neutral--active"}),disabled:e({name:"system_chevron-small-up_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_chevron-small-up_highlighted--enabled"})}),bright:e({enabled:e({name:"system_chevron-small-up_bright--enabled"})})}),"chevron-small-right":e({"on-surface":e({enabled:e({name:"system_chevron-small-right_on-surface--enabled"}),hover:e({name:"system_chevron-small-right_on-surface--hover"}),active:e({name:"system_chevron-small-right_on-surface--active"}),disabled:e({name:"system_chevron-small-right_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_chevron-small-right_on-primary--enabled"}),hover:e({name:"system_chevron-small-right_on-primary--hover"}),active:e({name:"system_chevron-small-right_on-primary--active"}),disabled:e({name:"system_chevron-small-right_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_chevron-small-right_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_chevron-small-right_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_chevron-small-right_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_chevron-small-right_primary--enabled"}),hover:e({name:"system_chevron-small-right_primary--hover"}),active:e({name:"system_chevron-small-right_primary--active"}),disabled:e({name:"system_chevron-small-right_primary--disabled"})}),error:e({enabled:e({name:"system_chevron-small-right_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_chevron-small-right_error-actionable--enabled"}),hover:e({name:"system_chevron-small-right_error-actionable--hover"}),active:e({name:"system_chevron-small-right_error-actionable--active"}),disabled:e({name:"system_chevron-small-right_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_chevron-small-right_warning--enabled"})}),success:e({enabled:e({name:"system_chevron-small-right_success--enabled"})}),neutral:e({enabled:e({name:"system_chevron-small-right_neutral--enabled"}),hover:e({name:"system_chevron-small-right_neutral--hover"}),active:e({name:"system_chevron-small-right_neutral--active"}),disabled:e({name:"system_chevron-small-right_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_chevron-small-right_highlighted--enabled"})}),bright:e({enabled:e({name:"system_chevron-small-right_bright--enabled"})})}),"chevron-small-left":e({"on-surface":e({enabled:e({name:"system_chevron-small-left_on-surface--enabled"}),hover:e({name:"system_chevron-small-left_on-surface--hover"}),active:e({name:"system_chevron-small-left_on-surface--active"}),disabled:e({name:"system_chevron-small-left_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_chevron-small-left_on-primary--enabled"}),hover:e({name:"system_chevron-small-left_on-primary--hover"}),active:e({name:"system_chevron-small-left_on-primary--active"}),disabled:e({name:"system_chevron-small-left_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_chevron-small-left_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_chevron-small-left_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_chevron-small-left_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_chevron-small-left_primary--enabled"}),hover:e({name:"system_chevron-small-left_primary--hover"}),active:e({name:"system_chevron-small-left_primary--active"}),disabled:e({name:"system_chevron-small-left_primary--disabled"})}),error:e({enabled:e({name:"system_chevron-small-left_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_chevron-small-left_error-actionable--enabled"}),hover:e({name:"system_chevron-small-left_error-actionable--hover"}),active:e({name:"system_chevron-small-left_error-actionable--active"}),disabled:e({name:"system_chevron-small-left_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_chevron-small-left_warning--enabled"})}),success:e({enabled:e({name:"system_chevron-small-left_success--enabled"})}),neutral:e({enabled:e({name:"system_chevron-small-left_neutral--enabled"}),hover:e({name:"system_chevron-small-left_neutral--hover"}),active:e({name:"system_chevron-small-left_neutral--active"}),disabled:e({name:"system_chevron-small-left_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_chevron-small-left_highlighted--enabled"})}),bright:e({enabled:e({name:"system_chevron-small-left_bright--enabled"})})}),"chevron-small-down":e({"on-surface":e({enabled:e({name:"system_chevron-small-down_on-surface--enabled"}),hover:e({name:"system_chevron-small-down_on-surface--hover"}),active:e({name:"system_chevron-small-down_on-surface--active"}),disabled:e({name:"system_chevron-small-down_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_chevron-small-down_on-primary--enabled"}),hover:e({name:"system_chevron-small-down_on-primary--hover"}),active:e({name:"system_chevron-small-down_on-primary--active"}),disabled:e({name:"system_chevron-small-down_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_chevron-small-down_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_chevron-small-down_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_chevron-small-down_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_chevron-small-down_primary--enabled"}),hover:e({name:"system_chevron-small-down_primary--hover"}),active:e({name:"system_chevron-small-down_primary--active"}),disabled:e({name:"system_chevron-small-down_primary--disabled"})}),error:e({enabled:e({name:"system_chevron-small-down_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_chevron-small-down_error-actionable--enabled"}),hover:e({name:"system_chevron-small-down_error-actionable--hover"}),active:e({name:"system_chevron-small-down_error-actionable--active"}),disabled:e({name:"system_chevron-small-down_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_chevron-small-down_warning--enabled"})}),success:e({enabled:e({name:"system_chevron-small-down_success--enabled"})}),neutral:e({enabled:e({name:"system_chevron-small-down_neutral--enabled"}),hover:e({name:"system_chevron-small-down_neutral--hover"}),active:e({name:"system_chevron-small-down_neutral--active"}),disabled:e({name:"system_chevron-small-down_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_chevron-small-down_highlighted--enabled"})}),bright:e({enabled:e({name:"system_chevron-small-down_bright--enabled"})})}),"chevron-right":e({"on-surface":e({enabled:e({name:"system_chevron-right_on-surface--enabled"}),hover:e({name:"system_chevron-right_on-surface--hover"}),active:e({name:"system_chevron-right_on-surface--active"}),disabled:e({name:"system_chevron-right_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_chevron-right_on-primary--enabled"}),hover:e({name:"system_chevron-right_on-primary--hover"}),active:e({name:"system_chevron-right_on-primary--active"}),disabled:e({name:"system_chevron-right_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_chevron-right_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_chevron-right_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_chevron-right_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_chevron-right_primary--enabled"}),hover:e({name:"system_chevron-right_primary--hover"}),active:e({name:"system_chevron-right_primary--active"}),disabled:e({name:"system_chevron-right_primary--disabled"})}),error:e({enabled:e({name:"system_chevron-right_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_chevron-right_error-actionable--enabled"}),hover:e({name:"system_chevron-right_error-actionable--hover"}),active:e({name:"system_chevron-right_error-actionable--active"}),disabled:e({name:"system_chevron-right_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_chevron-right_warning--enabled"})}),success:e({enabled:e({name:"system_chevron-right_success--enabled"})}),neutral:e({enabled:e({name:"system_chevron-right_neutral--enabled"}),hover:e({name:"system_chevron-right_neutral--hover"}),active:e({name:"system_chevron-right_neutral--active"}),disabled:e({name:"system_chevron-right_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_chevron-right_highlighted--enabled"})}),bright:e({enabled:e({name:"system_chevron-right_bright--enabled"})})}),"chevron-pag-right":e({"on-surface":e({enabled:e({name:"system_chevron-pag-right_on-surface--enabled"}),hover:e({name:"system_chevron-pag-right_on-surface--hover"}),active:e({name:"system_chevron-pag-right_on-surface--active"}),disabled:e({name:"system_chevron-pag-right_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_chevron-pag-right_on-primary--enabled"}),hover:e({name:"system_chevron-pag-right_on-primary--hover"}),active:e({name:"system_chevron-pag-right_on-primary--active"}),disabled:e({name:"system_chevron-pag-right_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_chevron-pag-right_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_chevron-pag-right_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_chevron-pag-right_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_chevron-pag-right_primary--enabled"}),hover:e({name:"system_chevron-pag-right_primary--hover"}),active:e({name:"system_chevron-pag-right_primary--active"}),disabled:e({name:"system_chevron-pag-right_primary--disabled"})}),error:e({enabled:e({name:"system_chevron-pag-right_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_chevron-pag-right_error-actionable--enabled"}),hover:e({name:"system_chevron-pag-right_error-actionable--hover"}),active:e({name:"system_chevron-pag-right_error-actionable--active"}),disabled:e({name:"system_chevron-pag-right_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_chevron-pag-right_warning--enabled"})}),success:e({enabled:e({name:"system_chevron-pag-right_success--enabled"})}),neutral:e({enabled:e({name:"system_chevron-pag-right_neutral--enabled"}),hover:e({name:"system_chevron-pag-right_neutral--hover"}),active:e({name:"system_chevron-pag-right_neutral--active"}),disabled:e({name:"system_chevron-pag-right_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_chevron-pag-right_highlighted--enabled"})}),bright:e({enabled:e({name:"system_chevron-pag-right_bright--enabled"})})}),"chevron-pag-left":e({"on-surface":e({enabled:e({name:"system_chevron-pag-left_on-surface--enabled"}),hover:e({name:"system_chevron-pag-left_on-surface--hover"}),active:e({name:"system_chevron-pag-left_on-surface--active"}),disabled:e({name:"system_chevron-pag-left_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_chevron-pag-left_on-primary--enabled"}),hover:e({name:"system_chevron-pag-left_on-primary--hover"}),active:e({name:"system_chevron-pag-left_on-primary--active"}),disabled:e({name:"system_chevron-pag-left_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_chevron-pag-left_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_chevron-pag-left_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_chevron-pag-left_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_chevron-pag-left_primary--enabled"}),hover:e({name:"system_chevron-pag-left_primary--hover"}),active:e({name:"system_chevron-pag-left_primary--active"}),disabled:e({name:"system_chevron-pag-left_primary--disabled"})}),error:e({enabled:e({name:"system_chevron-pag-left_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_chevron-pag-left_error-actionable--enabled"}),hover:e({name:"system_chevron-pag-left_error-actionable--hover"}),active:e({name:"system_chevron-pag-left_error-actionable--active"}),disabled:e({name:"system_chevron-pag-left_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_chevron-pag-left_warning--enabled"})}),success:e({enabled:e({name:"system_chevron-pag-left_success--enabled"})}),neutral:e({enabled:e({name:"system_chevron-pag-left_neutral--enabled"}),hover:e({name:"system_chevron-pag-left_neutral--hover"}),active:e({name:"system_chevron-pag-left_neutral--active"}),disabled:e({name:"system_chevron-pag-left_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_chevron-pag-left_highlighted--enabled"})}),bright:e({enabled:e({name:"system_chevron-pag-left_bright--enabled"})})}),"chevron-left":e({"on-surface":e({enabled:e({name:"system_chevron-left_on-surface--enabled"}),hover:e({name:"system_chevron-left_on-surface--hover"}),active:e({name:"system_chevron-left_on-surface--active"}),disabled:e({name:"system_chevron-left_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_chevron-left_on-primary--enabled"}),hover:e({name:"system_chevron-left_on-primary--hover"}),active:e({name:"system_chevron-left_on-primary--active"}),disabled:e({name:"system_chevron-left_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_chevron-left_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_chevron-left_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_chevron-left_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_chevron-left_primary--enabled"}),hover:e({name:"system_chevron-left_primary--hover"}),active:e({name:"system_chevron-left_primary--active"}),disabled:e({name:"system_chevron-left_primary--disabled"})}),error:e({enabled:e({name:"system_chevron-left_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_chevron-left_error-actionable--enabled"}),hover:e({name:"system_chevron-left_error-actionable--hover"}),active:e({name:"system_chevron-left_error-actionable--active"}),disabled:e({name:"system_chevron-left_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_chevron-left_warning--enabled"})}),success:e({enabled:e({name:"system_chevron-left_success--enabled"})}),neutral:e({enabled:e({name:"system_chevron-left_neutral--enabled"}),hover:e({name:"system_chevron-left_neutral--hover"}),active:e({name:"system_chevron-left_neutral--active"}),disabled:e({name:"system_chevron-left_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_chevron-left_highlighted--enabled"})}),bright:e({enabled:e({name:"system_chevron-left_bright--enabled"})})}),"chevron-down":e({"on-surface":e({enabled:e({name:"system_chevron-down_on-surface--enabled"}),hover:e({name:"system_chevron-down_on-surface--hover"}),active:e({name:"system_chevron-down_on-surface--active"}),disabled:e({name:"system_chevron-down_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_chevron-down_on-primary--enabled"}),hover:e({name:"system_chevron-down_on-primary--hover"}),active:e({name:"system_chevron-down_on-primary--active"}),disabled:e({name:"system_chevron-down_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_chevron-down_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_chevron-down_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_chevron-down_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_chevron-down_primary--enabled"}),hover:e({name:"system_chevron-down_primary--hover"}),active:e({name:"system_chevron-down_primary--active"}),disabled:e({name:"system_chevron-down_primary--disabled"})}),error:e({enabled:e({name:"system_chevron-down_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_chevron-down_error-actionable--enabled"}),hover:e({name:"system_chevron-down_error-actionable--hover"}),active:e({name:"system_chevron-down_error-actionable--active"}),disabled:e({name:"system_chevron-down_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_chevron-down_warning--enabled"})}),success:e({enabled:e({name:"system_chevron-down_success--enabled"})}),neutral:e({enabled:e({name:"system_chevron-down_neutral--enabled"}),hover:e({name:"system_chevron-down_neutral--hover"}),active:e({name:"system_chevron-down_neutral--active"}),disabled:e({name:"system_chevron-down_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_chevron-down_highlighted--enabled"})}),bright:e({enabled:e({name:"system_chevron-down_bright--enabled"})})}),check:e({"on-surface":e({enabled:e({name:"system_check_on-surface--enabled"}),hover:e({name:"system_check_on-surface--hover"}),active:e({name:"system_check_on-surface--active"}),disabled:e({name:"system_check_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_check_on-primary--enabled"}),hover:e({name:"system_check_on-primary--hover"}),active:e({name:"system_check_on-primary--active"}),disabled:e({name:"system_check_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_check_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_check_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_check_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_check_primary--enabled"}),hover:e({name:"system_check_primary--hover"}),active:e({name:"system_check_primary--active"}),disabled:e({name:"system_check_primary--disabled"})}),error:e({enabled:e({name:"system_check_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_check_error-actionable--enabled"}),hover:e({name:"system_check_error-actionable--hover"}),active:e({name:"system_check_error-actionable--active"}),disabled:e({name:"system_check_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_check_warning--enabled"})}),success:e({enabled:e({name:"system_check_success--enabled"})}),neutral:e({enabled:e({name:"system_check_neutral--enabled"}),hover:e({name:"system_check_neutral--hover"}),active:e({name:"system_check_neutral--active"}),disabled:e({name:"system_check_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_check_highlighted--enabled"})}),bright:e({enabled:e({name:"system_check_bright--enabled"})})}),"check-circle":e({"on-surface":e({enabled:e({name:"system_check-circle_on-surface--enabled"}),hover:e({name:"system_check-circle_on-surface--hover"}),active:e({name:"system_check-circle_on-surface--active"}),disabled:e({name:"system_check-circle_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_check-circle_on-primary--enabled"}),hover:e({name:"system_check-circle_on-primary--hover"}),active:e({name:"system_check-circle_on-primary--active"}),disabled:e({name:"system_check-circle_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_check-circle_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_check-circle_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_check-circle_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_check-circle_primary--enabled"}),hover:e({name:"system_check-circle_primary--hover"}),active:e({name:"system_check-circle_primary--active"}),disabled:e({name:"system_check-circle_primary--disabled"})}),error:e({enabled:e({name:"system_check-circle_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_check-circle_error-actionable--enabled"}),hover:e({name:"system_check-circle_error-actionable--hover"}),active:e({name:"system_check-circle_error-actionable--active"}),disabled:e({name:"system_check-circle_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_check-circle_warning--enabled"})}),success:e({enabled:e({name:"system_check-circle_success--enabled"})}),neutral:e({enabled:e({name:"system_check-circle_neutral--enabled"}),hover:e({name:"system_check-circle_neutral--hover"}),active:e({name:"system_check-circle_neutral--active"}),disabled:e({name:"system_check-circle_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_check-circle_highlighted--enabled"})}),bright:e({enabled:e({name:"system_check-circle_bright--enabled"})})}),card:e({"on-surface":e({enabled:e({name:"system_card_on-surface--enabled"}),hover:e({name:"system_card_on-surface--hover"}),active:e({name:"system_card_on-surface--active"}),disabled:e({name:"system_card_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_card_on-primary--enabled"}),hover:e({name:"system_card_on-primary--hover"}),active:e({name:"system_card_on-primary--active"}),disabled:e({name:"system_card_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_card_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_card_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_card_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_card_primary--enabled"}),hover:e({name:"system_card_primary--hover"}),active:e({name:"system_card_primary--active"}),disabled:e({name:"system_card_primary--disabled"})}),error:e({enabled:e({name:"system_card_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_card_error-actionable--enabled"}),hover:e({name:"system_card_error-actionable--hover"}),active:e({name:"system_card_error-actionable--active"}),disabled:e({name:"system_card_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_card_warning--enabled"})}),success:e({enabled:e({name:"system_card_success--enabled"})}),neutral:e({enabled:e({name:"system_card_neutral--enabled"}),hover:e({name:"system_card_neutral--hover"}),active:e({name:"system_card_neutral--active"}),disabled:e({name:"system_card_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_card_highlighted--enabled"})}),bright:e({enabled:e({name:"system_card_bright--enabled"})})}),"cancel-circle":e({"on-surface":e({enabled:e({name:"system_cancel-circle_on-surface--enabled"}),hover:e({name:"system_cancel-circle_on-surface--hover"}),active:e({name:"system_cancel-circle_on-surface--active"}),disabled:e({name:"system_cancel-circle_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_cancel-circle_on-primary--enabled"}),hover:e({name:"system_cancel-circle_on-primary--hover"}),active:e({name:"system_cancel-circle_on-primary--active"}),disabled:e({name:"system_cancel-circle_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_cancel-circle_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_cancel-circle_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_cancel-circle_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_cancel-circle_primary--enabled"}),hover:e({name:"system_cancel-circle_primary--hover"}),active:e({name:"system_cancel-circle_primary--active"}),disabled:e({name:"system_cancel-circle_primary--disabled"})}),error:e({enabled:e({name:"system_cancel-circle_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_cancel-circle_error-actionable--enabled"}),hover:e({name:"system_cancel-circle_error-actionable--hover"}),active:e({name:"system_cancel-circle_error-actionable--active"}),disabled:e({name:"system_cancel-circle_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_cancel-circle_warning--enabled"})}),success:e({enabled:e({name:"system_cancel-circle_success--enabled"})}),neutral:e({enabled:e({name:"system_cancel-circle_neutral--enabled"}),hover:e({name:"system_cancel-circle_neutral--hover"}),active:e({name:"system_cancel-circle_neutral--active"}),disabled:e({name:"system_cancel-circle_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_cancel-circle_highlighted--enabled"})}),bright:e({enabled:e({name:"system_cancel-circle_bright--enabled"})})}),calendar:e({"on-surface":e({enabled:e({name:"system_calendar_on-surface--enabled"}),hover:e({name:"system_calendar_on-surface--hover"}),active:e({name:"system_calendar_on-surface--active"}),disabled:e({name:"system_calendar_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_calendar_on-primary--enabled"}),hover:e({name:"system_calendar_on-primary--hover"}),active:e({name:"system_calendar_on-primary--active"}),disabled:e({name:"system_calendar_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_calendar_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_calendar_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_calendar_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_calendar_primary--enabled"}),hover:e({name:"system_calendar_primary--hover"}),active:e({name:"system_calendar_primary--active"}),disabled:e({name:"system_calendar_primary--disabled"})}),error:e({enabled:e({name:"system_calendar_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_calendar_error-actionable--enabled"}),hover:e({name:"system_calendar_error-actionable--hover"}),active:e({name:"system_calendar_error-actionable--active"}),disabled:e({name:"system_calendar_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_calendar_warning--enabled"})}),success:e({enabled:e({name:"system_calendar_success--enabled"})}),neutral:e({enabled:e({name:"system_calendar_neutral--enabled"}),hover:e({name:"system_calendar_neutral--hover"}),active:e({name:"system_calendar_neutral--active"}),disabled:e({name:"system_calendar_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_calendar_highlighted--enabled"})}),bright:e({enabled:e({name:"system_calendar_bright--enabled"})})}),assistant:e({"on-surface":e({enabled:e({name:"system_assistant_on-surface--enabled"}),hover:e({name:"system_assistant_on-surface--hover"}),active:e({name:"system_assistant_on-surface--active"}),disabled:e({name:"system_assistant_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_assistant_on-primary--enabled"}),hover:e({name:"system_assistant_on-primary--hover"}),active:e({name:"system_assistant_on-primary--active"}),disabled:e({name:"system_assistant_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_assistant_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_assistant_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_assistant_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_assistant_primary--enabled"}),hover:e({name:"system_assistant_primary--hover"}),active:e({name:"system_assistant_primary--active"}),disabled:e({name:"system_assistant_primary--disabled"})}),error:e({enabled:e({name:"system_assistant_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_assistant_error-actionable--enabled"}),hover:e({name:"system_assistant_error-actionable--hover"}),active:e({name:"system_assistant_error-actionable--active"}),disabled:e({name:"system_assistant_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_assistant_warning--enabled"})}),success:e({enabled:e({name:"system_assistant_success--enabled"})}),neutral:e({enabled:e({name:"system_assistant_neutral--enabled"}),hover:e({name:"system_assistant_neutral--hover"}),active:e({name:"system_assistant_neutral--active"}),disabled:e({name:"system_assistant_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_assistant_highlighted--enabled"})}),bright:e({enabled:e({name:"system_assistant_bright--enabled"})})}),"arrow-right":e({"on-surface":e({enabled:e({name:"system_arrow-right_on-surface--enabled"}),hover:e({name:"system_arrow-right_on-surface--hover"}),active:e({name:"system_arrow-right_on-surface--active"}),disabled:e({name:"system_arrow-right_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_arrow-right_on-primary--enabled"}),hover:e({name:"system_arrow-right_on-primary--hover"}),active:e({name:"system_arrow-right_on-primary--active"}),disabled:e({name:"system_arrow-right_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_arrow-right_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_arrow-right_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_arrow-right_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_arrow-right_primary--enabled"}),hover:e({name:"system_arrow-right_primary--hover"}),active:e({name:"system_arrow-right_primary--active"}),disabled:e({name:"system_arrow-right_primary--disabled"})}),error:e({enabled:e({name:"system_arrow-right_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_arrow-right_error-actionable--enabled"}),hover:e({name:"system_arrow-right_error-actionable--hover"}),active:e({name:"system_arrow-right_error-actionable--active"}),disabled:e({name:"system_arrow-right_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_arrow-right_warning--enabled"})}),success:e({enabled:e({name:"system_arrow-right_success--enabled"})}),neutral:e({enabled:e({name:"system_arrow-right_neutral--enabled"}),hover:e({name:"system_arrow-right_neutral--hover"}),active:e({name:"system_arrow-right_neutral--active"}),disabled:e({name:"system_arrow-right_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_arrow-right_highlighted--enabled"})}),bright:e({enabled:e({name:"system_arrow-right_bright--enabled"})})}),"arrow-left":e({"on-surface":e({enabled:e({name:"system_arrow-left_on-surface--enabled"}),hover:e({name:"system_arrow-left_on-surface--hover"}),active:e({name:"system_arrow-left_on-surface--active"}),disabled:e({name:"system_arrow-left_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_arrow-left_on-primary--enabled"}),hover:e({name:"system_arrow-left_on-primary--hover"}),active:e({name:"system_arrow-left_on-primary--active"}),disabled:e({name:"system_arrow-left_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_arrow-left_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_arrow-left_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_arrow-left_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_arrow-left_primary--enabled"}),hover:e({name:"system_arrow-left_primary--hover"}),active:e({name:"system_arrow-left_primary--active"}),disabled:e({name:"system_arrow-left_primary--disabled"})}),error:e({enabled:e({name:"system_arrow-left_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_arrow-left_error-actionable--enabled"}),hover:e({name:"system_arrow-left_error-actionable--hover"}),active:e({name:"system_arrow-left_error-actionable--active"}),disabled:e({name:"system_arrow-left_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_arrow-left_warning--enabled"})}),success:e({enabled:e({name:"system_arrow-left_success--enabled"})}),neutral:e({enabled:e({name:"system_arrow-left_neutral--enabled"}),hover:e({name:"system_arrow-left_neutral--hover"}),active:e({name:"system_arrow-left_neutral--active"}),disabled:e({name:"system_arrow-left_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_arrow-left_highlighted--enabled"})}),bright:e({enabled:e({name:"system_arrow-left_bright--enabled"})})}),"arrow-drop-up":e({"on-surface":e({enabled:e({name:"system_arrow-drop-up_on-surface--enabled"}),hover:e({name:"system_arrow-drop-up_on-surface--hover"}),active:e({name:"system_arrow-drop-up_on-surface--active"}),disabled:e({name:"system_arrow-drop-up_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_arrow-drop-up_on-primary--enabled"}),hover:e({name:"system_arrow-drop-up_on-primary--hover"}),active:e({name:"system_arrow-drop-up_on-primary--active"}),disabled:e({name:"system_arrow-drop-up_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_arrow-drop-up_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_arrow-drop-up_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_arrow-drop-up_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_arrow-drop-up_primary--enabled"}),hover:e({name:"system_arrow-drop-up_primary--hover"}),active:e({name:"system_arrow-drop-up_primary--active"}),disabled:e({name:"system_arrow-drop-up_primary--disabled"})}),error:e({enabled:e({name:"system_arrow-drop-up_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_arrow-drop-up_error-actionable--enabled"}),hover:e({name:"system_arrow-drop-up_error-actionable--hover"}),active:e({name:"system_arrow-drop-up_error-actionable--active"}),disabled:e({name:"system_arrow-drop-up_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_arrow-drop-up_warning--enabled"})}),success:e({enabled:e({name:"system_arrow-drop-up_success--enabled"})}),neutral:e({enabled:e({name:"system_arrow-drop-up_neutral--enabled"}),hover:e({name:"system_arrow-drop-up_neutral--hover"}),active:e({name:"system_arrow-drop-up_neutral--active"}),disabled:e({name:"system_arrow-drop-up_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_arrow-drop-up_highlighted--enabled"})}),bright:e({enabled:e({name:"system_arrow-drop-up_bright--enabled"})})}),"arrow-drop-right":e({"on-surface":e({enabled:e({name:"system_arrow-drop-right_on-surface--enabled"}),hover:e({name:"system_arrow-drop-right_on-surface--hover"}),active:e({name:"system_arrow-drop-right_on-surface--active"}),disabled:e({name:"system_arrow-drop-right_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_arrow-drop-right_on-primary--enabled"}),hover:e({name:"system_arrow-drop-right_on-primary--hover"}),active:e({name:"system_arrow-drop-right_on-primary--active"}),disabled:e({name:"system_arrow-drop-right_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_arrow-drop-right_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_arrow-drop-right_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_arrow-drop-right_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_arrow-drop-right_primary--enabled"}),hover:e({name:"system_arrow-drop-right_primary--hover"}),active:e({name:"system_arrow-drop-right_primary--active"}),disabled:e({name:"system_arrow-drop-right_primary--disabled"})}),error:e({enabled:e({name:"system_arrow-drop-right_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_arrow-drop-right_error-actionable--enabled"}),hover:e({name:"system_arrow-drop-right_error-actionable--hover"}),active:e({name:"system_arrow-drop-right_error-actionable--active"}),disabled:e({name:"system_arrow-drop-right_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_arrow-drop-right_warning--enabled"})}),success:e({enabled:e({name:"system_arrow-drop-right_success--enabled"})}),neutral:e({enabled:e({name:"system_arrow-drop-right_neutral--enabled"}),hover:e({name:"system_arrow-drop-right_neutral--hover"}),active:e({name:"system_arrow-drop-right_neutral--active"}),disabled:e({name:"system_arrow-drop-right_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_arrow-drop-right_highlighted--enabled"})}),bright:e({enabled:e({name:"system_arrow-drop-right_bright--enabled"})})}),"arrow-drop-left":e({"on-surface":e({enabled:e({name:"system_arrow-drop-left_on-surface--enabled"}),hover:e({name:"system_arrow-drop-left_on-surface--hover"}),active:e({name:"system_arrow-drop-left_on-surface--active"}),disabled:e({name:"system_arrow-drop-left_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_arrow-drop-left_on-primary--enabled"}),hover:e({name:"system_arrow-drop-left_on-primary--hover"}),active:e({name:"system_arrow-drop-left_on-primary--active"}),disabled:e({name:"system_arrow-drop-left_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_arrow-drop-left_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_arrow-drop-left_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_arrow-drop-left_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_arrow-drop-left_primary--enabled"}),hover:e({name:"system_arrow-drop-left_primary--hover"}),active:e({name:"system_arrow-drop-left_primary--active"}),disabled:e({name:"system_arrow-drop-left_primary--disabled"})}),error:e({enabled:e({name:"system_arrow-drop-left_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_arrow-drop-left_error-actionable--enabled"}),hover:e({name:"system_arrow-drop-left_error-actionable--hover"}),active:e({name:"system_arrow-drop-left_error-actionable--active"}),disabled:e({name:"system_arrow-drop-left_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_arrow-drop-left_warning--enabled"})}),success:e({enabled:e({name:"system_arrow-drop-left_success--enabled"})}),neutral:e({enabled:e({name:"system_arrow-drop-left_neutral--enabled"}),hover:e({name:"system_arrow-drop-left_neutral--hover"}),active:e({name:"system_arrow-drop-left_neutral--active"}),disabled:e({name:"system_arrow-drop-left_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_arrow-drop-left_highlighted--enabled"})}),bright:e({enabled:e({name:"system_arrow-drop-left_bright--enabled"})})}),"arrow-drop-down":e({"on-surface":e({enabled:e({name:"system_arrow-drop-down_on-surface--enabled"}),hover:e({name:"system_arrow-drop-down_on-surface--hover"}),active:e({name:"system_arrow-drop-down_on-surface--active"}),disabled:e({name:"system_arrow-drop-down_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_arrow-drop-down_on-primary--enabled"}),hover:e({name:"system_arrow-drop-down_on-primary--hover"}),active:e({name:"system_arrow-drop-down_on-primary--active"}),disabled:e({name:"system_arrow-drop-down_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_arrow-drop-down_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_arrow-drop-down_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_arrow-drop-down_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_arrow-drop-down_primary--enabled"}),hover:e({name:"system_arrow-drop-down_primary--hover"}),active:e({name:"system_arrow-drop-down_primary--active"}),disabled:e({name:"system_arrow-drop-down_primary--disabled"})}),error:e({enabled:e({name:"system_arrow-drop-down_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_arrow-drop-down_error-actionable--enabled"}),hover:e({name:"system_arrow-drop-down_error-actionable--hover"}),active:e({name:"system_arrow-drop-down_error-actionable--active"}),disabled:e({name:"system_arrow-drop-down_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_arrow-drop-down_warning--enabled"})}),success:e({enabled:e({name:"system_arrow-drop-down_success--enabled"})}),neutral:e({enabled:e({name:"system_arrow-drop-down_neutral--enabled"}),hover:e({name:"system_arrow-drop-down_neutral--hover"}),active:e({name:"system_arrow-drop-down_neutral--active"}),disabled:e({name:"system_arrow-drop-down_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_arrow-drop-down_highlighted--enabled"})}),bright:e({enabled:e({name:"system_arrow-drop-down_bright--enabled"})})}),applications:e({"on-surface":e({enabled:e({name:"system_applications_on-surface--enabled"}),hover:e({name:"system_applications_on-surface--hover"}),active:e({name:"system_applications_on-surface--active"}),disabled:e({name:"system_applications_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_applications_on-primary--enabled"}),hover:e({name:"system_applications_on-primary--hover"}),active:e({name:"system_applications_on-primary--active"}),disabled:e({name:"system_applications_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_applications_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_applications_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_applications_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_applications_primary--enabled"}),hover:e({name:"system_applications_primary--hover"}),active:e({name:"system_applications_primary--active"}),disabled:e({name:"system_applications_primary--disabled"})}),error:e({enabled:e({name:"system_applications_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_applications_error-actionable--enabled"}),hover:e({name:"system_applications_error-actionable--hover"}),active:e({name:"system_applications_error-actionable--active"}),disabled:e({name:"system_applications_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_applications_warning--enabled"})}),success:e({enabled:e({name:"system_applications_success--enabled"})}),neutral:e({enabled:e({name:"system_applications_neutral--enabled"}),hover:e({name:"system_applications_neutral--hover"}),active:e({name:"system_applications_neutral--active"}),disabled:e({name:"system_applications_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_applications_highlighted--enabled"})}),bright:e({enabled:e({name:"system_applications_bright--enabled"})})}),add:e({"on-surface":e({enabled:e({name:"system_add_on-surface--enabled"}),hover:e({name:"system_add_on-surface--hover"}),active:e({name:"system_add_on-surface--active"}),disabled:e({name:"system_add_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_add_on-primary--enabled"}),hover:e({name:"system_add_on-primary--hover"}),active:e({name:"system_add_on-primary--active"}),disabled:e({name:"system_add_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_add_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_add_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_add_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_add_primary--enabled"}),hover:e({name:"system_add_primary--hover"}),active:e({name:"system_add_primary--active"}),disabled:e({name:"system_add_primary--disabled"})}),error:e({enabled:e({name:"system_add_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_add_error-actionable--enabled"}),hover:e({name:"system_add_error-actionable--hover"}),active:e({name:"system_add_error-actionable--active"}),disabled:e({name:"system_add_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_add_warning--enabled"})}),success:e({enabled:e({name:"system_add_success--enabled"})}),neutral:e({enabled:e({name:"system_add_neutral--enabled"}),hover:e({name:"system_add_neutral--hover"}),active:e({name:"system_add_neutral--active"}),disabled:e({name:"system_add_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_add_highlighted--enabled"})}),bright:e({enabled:e({name:"system_add_bright--enabled"})})}),"add-circle":e({"on-surface":e({enabled:e({name:"system_add-circle_on-surface--enabled"}),hover:e({name:"system_add-circle_on-surface--hover"}),active:e({name:"system_add-circle_on-surface--active"}),disabled:e({name:"system_add-circle_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_add-circle_on-primary--enabled"}),hover:e({name:"system_add-circle_on-primary--hover"}),active:e({name:"system_add-circle_on-primary--active"}),disabled:e({name:"system_add-circle_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_add-circle_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_add-circle_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_add-circle_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_add-circle_primary--enabled"}),hover:e({name:"system_add-circle_primary--hover"}),active:e({name:"system_add-circle_primary--active"}),disabled:e({name:"system_add-circle_primary--disabled"})}),error:e({enabled:e({name:"system_add-circle_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_add-circle_error-actionable--enabled"}),hover:e({name:"system_add-circle_error-actionable--hover"}),active:e({name:"system_add-circle_error-actionable--active"}),disabled:e({name:"system_add-circle_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_add-circle_warning--enabled"})}),success:e({enabled:e({name:"system_add-circle_success--enabled"})}),neutral:e({enabled:e({name:"system_add-circle_neutral--enabled"}),hover:e({name:"system_add-circle_neutral--hover"}),active:e({name:"system_add-circle_neutral--active"}),disabled:e({name:"system_add-circle_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_add-circle_highlighted--enabled"})}),bright:e({enabled:e({name:"system_add-circle_bright--enabled"})})}),"accessibility-new":e({"on-surface":e({enabled:e({name:"system_accessibility-new_on-surface--enabled"}),hover:e({name:"system_accessibility-new_on-surface--hover"}),active:e({name:"system_accessibility-new_on-surface--active"}),disabled:e({name:"system_accessibility-new_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"system_accessibility-new_on-primary--enabled"}),hover:e({name:"system_accessibility-new_on-primary--hover"}),active:e({name:"system_accessibility-new_on-primary--active"}),disabled:e({name:"system_accessibility-new_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"system_accessibility-new_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"system_accessibility-new_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"system_accessibility-new_on-elevation--enabled"})}),primary:e({enabled:e({name:"system_accessibility-new_primary--enabled"}),hover:e({name:"system_accessibility-new_primary--hover"}),active:e({name:"system_accessibility-new_primary--active"}),disabled:e({name:"system_accessibility-new_primary--disabled"})}),error:e({enabled:e({name:"system_accessibility-new_error--enabled"})}),"error-actionable":e({enabled:e({name:"system_accessibility-new_error-actionable--enabled"}),hover:e({name:"system_accessibility-new_error-actionable--hover"}),active:e({name:"system_accessibility-new_error-actionable--active"}),disabled:e({name:"system_accessibility-new_error-actionable--disabled"})}),warning:e({enabled:e({name:"system_accessibility-new_warning--enabled"})}),success:e({enabled:e({name:"system_accessibility-new_success--enabled"})}),neutral:e({enabled:e({name:"system_accessibility-new_neutral--enabled"}),hover:e({name:"system_accessibility-new_neutral--hover"}),active:e({name:"system_accessibility-new_neutral--active"}),disabled:e({name:"system_accessibility-new_neutral--disabled"})}),highlighted:e({enabled:e({name:"system_accessibility-new_highlighted--enabled"})}),bright:e({enabled:e({name:"system_accessibility-new_bright--enabled"})})})}),states:e({"pill-outlined":e({primary:e({enabled:e({name:"states_pill-outlined_primary--enabled"}),hover:e({name:"states_pill-outlined_primary--hover"}),active:e({name:"states_pill-outlined_primary--active"}),disabled:e({name:"states_pill-outlined_primary--disabled"})}),error:e({enabled:e({name:"states_pill-outlined_error--enabled"})}),warning:e({enabled:e({name:"states_pill-outlined_warning--enabled"})}),success:e({enabled:e({name:"states_pill-outlined_success--enabled"})}),highlighted:e({enabled:e({name:"states_pill-outlined_highlighted--enabled"})})}),"pill-filled":e({primary:e({enabled:e({name:"states_pill-filled_primary--enabled"}),hover:e({name:"states_pill-filled_primary--hover"}),active:e({name:"states_pill-filled_primary--active"}),disabled:e({name:"states_pill-filled_primary--disabled"})}),error:e({enabled:e({name:"states_pill-filled_error--enabled"})}),warning:e({enabled:e({name:"states_pill-filled_warning--enabled"})}),success:e({enabled:e({name:"states_pill-filled_success--enabled"})}),highlighted:e({enabled:e({name:"states_pill-filled_highlighted--enabled"})})})}),"patterns-default-associated":e({synchronized:e({enabled:e({name:"patterns-default-associated_synchronized--enabled"}),hover:e({name:"patterns-default-associated_synchronized--hover"}),active:e({name:"patterns-default-associated_synchronized--active"}),disabled:e({name:"patterns-default-associated_synchronized--disabled"})}),modified:e({enabled:e({name:"patterns-default-associated_modified--enabled"}),hover:e({name:"patterns-default-associated_modified--hover"}),active:e({name:"patterns-default-associated_modified--active"}),disabled:e({name:"patterns-default-associated_modified--disabled"})}),"default-associated":e({enabled:e({name:"patterns-default-associated_default-associated--enabled"}),hover:e({name:"patterns-default-associated_default-associated--hover"}),active:e({name:"patterns-default-associated_default-associated--active"}),disabled:e({name:"patterns-default-associated_default-associated--disabled"})})}),patterns:e({"workwith-for-sd":e({enabled:e({name:"patterns_workwith-for-sd--enabled"}),hover:e({name:"patterns_workwith-for-sd--hover"}),active:e({name:"patterns_workwith-for-sd--active"}),disabled:e({name:"patterns_workwith-for-sd--disabled"})}),"work-with-web":e({enabled:e({name:"patterns_work-with-web--enabled"}),hover:e({name:"patterns_work-with-web--hover"}),active:e({name:"patterns_work-with-web--active"}),disabled:e({name:"patterns_work-with-web--disabled"})}),tabs:e({enabled:e({name:"patterns_tabs--enabled"}),hover:e({name:"patterns_tabs--hover"}),active:e({name:"patterns_tabs--active"}),disabled:e({name:"patterns_tabs--disabled"})}),tab:e({enabled:e({name:"patterns_tab--enabled"}),hover:e({name:"patterns_tab--hover"}),active:e({name:"patterns_tab--active"}),disabled:e({name:"patterns_tab--disabled"})}),structure:e({enabled:e({name:"patterns_structure--enabled"}),hover:e({name:"patterns_structure--hover"}),active:e({name:"patterns_structure--active"}),disabled:e({name:"patterns_structure--disabled"})}),row:e({enabled:e({name:"patterns_row--enabled"}),hover:e({name:"patterns_row--hover"}),active:e({name:"patterns_row--active"}),disabled:e({name:"patterns_row--disabled"})}),"pattern-category":e({enabled:e({name:"patterns_pattern-category--enabled"}),hover:e({name:"patterns_pattern-category--hover"}),active:e({name:"patterns_pattern-category--active"}),disabled:e({name:"patterns_pattern-category--disabled"})}),parameters:e({enabled:e({name:"patterns_parameters--enabled"}),hover:e({name:"patterns_parameters--hover"}),active:e({name:"patterns_parameters--active"}),disabled:e({name:"patterns_parameters--disabled"})}),parameter:e({enabled:e({name:"patterns_parameter--enabled"}),hover:e({name:"patterns_parameter--hover"}),active:e({name:"patterns_parameter--active"}),disabled:e({name:"patterns_parameter--disabled"})}),orders:e({enabled:e({name:"patterns_orders--enabled"}),hover:e({name:"patterns_orders--hover"}),active:e({name:"patterns_orders--active"}),disabled:e({name:"patterns_orders--disabled"})}),list:e({enabled:e({name:"patterns_list--enabled"}),hover:e({name:"patterns_list--hover"}),active:e({name:"patterns_list--active"}),disabled:e({name:"patterns_list--disabled"})}),"fixed-data":e({enabled:e({name:"patterns_fixed-data--enabled"}),hover:e({name:"patterns_fixed-data--hover"}),active:e({name:"patterns_fixed-data--active"}),disabled:e({name:"patterns_fixed-data--disabled"})}),filters:e({enabled:e({name:"patterns_filters--enabled"}),hover:e({name:"patterns_filters--hover"}),active:e({name:"patterns_filters--active"}),disabled:e({name:"patterns_filters--disabled"})}),events:e({enabled:e({name:"patterns_events--enabled"}),hover:e({name:"patterns_events--hover"}),active:e({name:"patterns_events--active"}),disabled:e({name:"patterns_events--disabled"})}),documentation:e({enabled:e({name:"patterns_documentation--enabled"}),hover:e({name:"patterns_documentation--hover"}),active:e({name:"patterns_documentation--active"}),disabled:e({name:"patterns_documentation--disabled"})}),detail:e({enabled:e({name:"patterns_detail--enabled"}),hover:e({name:"patterns_detail--hover"}),active:e({name:"patterns_detail--active"}),disabled:e({name:"patterns_detail--disabled"})}),cell:e({enabled:e({name:"patterns_cell--enabled"}),hover:e({name:"patterns_cell--hover"}),active:e({name:"patterns_cell--active"}),disabled:e({name:"patterns_cell--disabled"})}),attributes:e({enabled:e({name:"patterns_attributes--enabled"}),hover:e({name:"patterns_attributes--hover"}),active:e({name:"patterns_attributes--active"}),disabled:e({name:"patterns_attributes--disabled"})})}),"objects-parts":e({variables:e({enabled:e({name:"objects-parts_variables--enabled"}),hover:e({name:"objects-parts_variables--hover"}),active:e({name:"objects-parts_variables--active"}),disabled:e({name:"objects-parts_variables--disabled"})}),rules:e({enabled:e({name:"objects-parts_rules--enabled"}),hover:e({name:"objects-parts_rules--hover"}),active:e({name:"objects-parts_rules--active"}),disabled:e({name:"objects-parts_rules--disabled"})}),events:e({enabled:e({name:"objects-parts_events--enabled"}),hover:e({name:"objects-parts_events--hover"}),active:e({name:"objects-parts_events--active"}),disabled:e({name:"objects-parts_events--disabled"})}),conditions:e({enabled:e({name:"objects-parts_conditions--enabled"}),hover:e({name:"objects-parts_conditions--hover"}),active:e({name:"objects-parts_conditions--active"}),disabled:e({name:"objects-parts_conditions--disabled"})}),condition:e({enabled:e({name:"objects-parts_condition--enabled"}),hover:e({name:"objects-parts_condition--hover"}),active:e({name:"objects-parts_condition--active"}),disabled:e({name:"objects-parts_condition--disabled"})})}),objects:e({workflow:e({enabled:e({name:"objects_workflow--enabled"}),hover:e({name:"objects_workflow--hover"}),active:e({name:"objects_workflow--active"}),disabled:e({name:"objects_workflow--disabled"})}),"work-panel":e({enabled:e({name:"objects_work-panel--enabled"}),hover:e({name:"objects_work-panel--hover"}),active:e({name:"objects_work-panel--active"}),disabled:e({name:"objects_work-panel--disabled"})}),webpanel:e({enabled:e({name:"objects_webpanel--enabled"}),hover:e({name:"objects_webpanel--hover"}),active:e({name:"objects_webpanel--active"}),disabled:e({name:"objects_webpanel--disabled"})}),"web-component":e({enabled:e({name:"objects_web-component--enabled"}),hover:e({name:"objects_web-component--hover"}),active:e({name:"objects_web-component--active"}),disabled:e({name:"objects_web-component--disabled"})}),version:e({enabled:e({name:"objects_version--enabled"}),hover:e({name:"objects_version--hover"}),active:e({name:"objects_version--active"}),disabled:e({name:"objects_version--disabled"})}),"url-rewrite":e({enabled:e({name:"objects_url-rewrite--enabled"}),hover:e({name:"objects_url-rewrite--hover"}),active:e({name:"objects_url-rewrite--active"}),disabled:e({name:"objects_url-rewrite--disabled"})}),transaction:e({enabled:e({name:"objects_transaction--enabled"}),hover:e({name:"objects_transaction--hover"}),active:e({name:"objects_transaction--active"}),disabled:e({name:"objects_transaction--disabled"})}),"to-be-defined":e({enabled:e({name:"objects_to-be-defined--enabled"}),hover:e({name:"objects_to-be-defined--hover"}),active:e({name:"objects_to-be-defined--active"}),disabled:e({name:"objects_to-be-defined--disabled"})}),theme:e({enabled:e({name:"objects_theme--enabled"}),hover:e({name:"objects_theme--hover"}),active:e({name:"objects_theme--active"}),disabled:e({name:"objects_theme--disabled"})}),"theme-web":e({enabled:e({name:"objects_theme-web--enabled"}),hover:e({name:"objects_theme-web--hover"}),active:e({name:"objects_theme-web--active"}),disabled:e({name:"objects_theme-web--disabled"})}),"theme-for-sd":e({enabled:e({name:"objects_theme-for-sd--enabled"}),hover:e({name:"objects_theme-for-sd--hover"}),active:e({name:"objects_theme-for-sd--active"}),disabled:e({name:"objects_theme-for-sd--disabled"})}),table:e({enabled:e({name:"objects_table--enabled"}),hover:e({name:"objects_table--hover"}),active:e({name:"objects_table--active"}),disabled:e({name:"objects_table--disabled"})}),"super-app":e({enabled:e({name:"objects_super-app--enabled"}),hover:e({name:"objects_super-app--hover"}),active:e({name:"objects_super-app--active"}),disabled:e({name:"objects_super-app--disabled"})}),"subtype-group":e({enabled:e({name:"objects_subtype-group--enabled"}),hover:e({name:"objects_subtype-group--hover"}),active:e({name:"objects_subtype-group--active"}),disabled:e({name:"objects_subtype-group--disabled"})}),"structured-data-type":e({enabled:e({name:"objects_structured-data-type--enabled"}),hover:e({name:"objects_structured-data-type--hover"}),active:e({name:"objects_structured-data-type--active"}),disabled:e({name:"objects_structured-data-type--disabled"})}),stencil:e({enabled:e({name:"objects_stencil--enabled"}),hover:e({name:"objects_stencil--hover"}),active:e({name:"objects_stencil--active"}),disabled:e({name:"objects_stencil--disabled"})}),roles:e({enabled:e({name:"objects_roles--enabled"}),hover:e({name:"objects_roles--hover"}),active:e({name:"objects_roles--active"}),disabled:e({name:"objects_roles--disabled"})}),report:e({enabled:e({name:"objects_report--enabled"}),hover:e({name:"objects_report--hover"}),active:e({name:"objects_report--active"}),disabled:e({name:"objects_report--disabled"})}),references:e({enabled:e({name:"objects_references--enabled"}),hover:e({name:"objects_references--hover"}),active:e({name:"objects_references--active"}),disabled:e({name:"objects_references--disabled"})}),query:e({enabled:e({name:"objects_query--enabled"}),hover:e({name:"objects_query--hover"}),active:e({name:"objects_query--active"}),disabled:e({name:"objects_query--disabled"})}),procedure:e({enabled:e({name:"objects_procedure--enabled"}),hover:e({name:"objects_procedure--hover"}),active:e({name:"objects_procedure--active"}),disabled:e({name:"objects_procedure--disabled"})}),patterns:e({enabled:e({name:"objects_patterns--enabled"}),hover:e({name:"objects_patterns--hover"}),active:e({name:"objects_patterns--active"}),disabled:e({name:"objects_patterns--disabled"})}),"panel-for-sd":e({enabled:e({name:"objects_panel-for-sd--enabled"}),hover:e({name:"objects_panel-for-sd--hover"}),active:e({name:"objects_panel-for-sd--active"}),disabled:e({name:"objects_panel-for-sd--disabled"})}),"orphant-document":e({enabled:e({name:"objects_orphant-document--enabled"}),hover:e({name:"objects_orphant-document--hover"}),active:e({name:"objects_orphant-document--active"}),disabled:e({name:"objects_orphant-document--disabled"})}),"offline-database":e({enabled:e({name:"objects_offline-database--enabled"}),hover:e({name:"objects_offline-database--hover"}),active:e({name:"objects_offline-database--active"}),disabled:e({name:"objects_offline-database--disabled"})}),object:e({enabled:e({name:"objects_object--enabled"}),hover:e({name:"objects_object--hover"}),active:e({name:"objects_object--active"}),disabled:e({name:"objects_object--disabled"})}),"notification-templates":e({enabled:e({name:"objects_notification-templates--enabled"}),hover:e({name:"objects_notification-templates--hover"}),active:e({name:"objects_notification-templates--active"}),disabled:e({name:"objects_notification-templates--disabled"})}),module:e({enabled:e({name:"objects_module--enabled"}),hover:e({name:"objects_module--hover"}),active:e({name:"objects_module--active"}),disabled:e({name:"objects_module--disabled"})}),"module-open":e({enabled:e({name:"objects_module-open--enabled"}),hover:e({name:"objects_module-open--hover"}),active:e({name:"objects_module-open--active"}),disabled:e({name:"objects_module-open--disabled"})}),"mini-app":e({enabled:e({name:"objects_mini-app--enabled"}),hover:e({name:"objects_mini-app--hover"}),active:e({name:"objects_mini-app--active"}),disabled:e({name:"objects_mini-app--disabled"})}),menubar:e({enabled:e({name:"objects_menubar--enabled"}),hover:e({name:"objects_menubar--hover"}),active:e({name:"objects_menubar--active"}),disabled:e({name:"objects_menubar--disabled"})}),menu:e({enabled:e({name:"objects_menu--enabled"}),hover:e({name:"objects_menu--hover"}),active:e({name:"objects_menu--active"}),disabled:e({name:"objects_menu--disabled"})}),masterpage:e({enabled:e({name:"objects_masterpage--enabled"}),hover:e({name:"objects_masterpage--hover"}),active:e({name:"objects_masterpage--active"}),disabled:e({name:"objects_masterpage--disabled"})}),"main-object":e({enabled:e({name:"objects_main-object--enabled"}),hover:e({name:"objects_main-object--hover"}),active:e({name:"objects_main-object--active"}),disabled:e({name:"objects_main-object--disabled"})}),language:e({enabled:e({name:"objects_language--enabled"}),hover:e({name:"objects_language--hover"}),active:e({name:"objects_language--active"}),disabled:e({name:"objects_language--disabled"})}),"knowledge-base":e({enabled:e({name:"objects_knowledge-base--enabled"}),hover:e({name:"objects_knowledge-base--hover"}),active:e({name:"objects_knowledge-base--active"}),disabled:e({name:"objects_knowledge-base--disabled"})}),image:e({enabled:e({name:"objects_image--enabled"}),hover:e({name:"objects_image--hover"}),active:e({name:"objects_image--active"}),disabled:e({name:"objects_image--disabled"})}),generator:e({enabled:e({name:"objects_generator--enabled"}),hover:e({name:"objects_generator--hover"}),active:e({name:"objects_generator--active"}),disabled:e({name:"objects_generator--disabled"})}),"generator-category":e({enabled:e({name:"objects_generator-category--enabled"}),hover:e({name:"objects_generator-category--hover"}),active:e({name:"objects_generator-category--active"}),disabled:e({name:"objects_generator-category--disabled"})}),folder:e({enabled:e({name:"objects_folder--enabled"}),hover:e({name:"objects_folder--hover"}),active:e({name:"objects_folder--active"}),disabled:e({name:"objects_folder--disabled"})}),"folder-open":e({enabled:e({name:"objects_folder-open--enabled"}),hover:e({name:"objects_folder-open--hover"}),active:e({name:"objects_folder-open--active"}),disabled:e({name:"objects_folder-open--disabled"})}),file:e({enabled:e({name:"objects_file--enabled"}),hover:e({name:"objects_file--hover"}),active:e({name:"objects_file--active"}),disabled:e({name:"objects_file--disabled"})}),"external-object":e({enabled:e({name:"objects_external-object--enabled"}),hover:e({name:"objects_external-object--hover"}),active:e({name:"objects_external-object--active"}),disabled:e({name:"objects_external-object--disabled"})}),"environment-select":e({enabled:e({name:"objects_environment-select--enabled"}),hover:e({name:"objects_environment-select--hover"}),active:e({name:"objects_environment-select--active"}),disabled:e({name:"objects_environment-select--disabled"})}),"environment-no-select":e({enabled:e({name:"objects_environment-no-select--enabled"}),hover:e({name:"objects_environment-no-select--hover"}),active:e({name:"objects_environment-no-select--active"}),disabled:e({name:"objects_environment-no-select--disabled"})}),dso:e({enabled:e({name:"objects_dso--enabled"}),hover:e({name:"objects_dso--hover"}),active:e({name:"objects_dso--active"}),disabled:e({name:"objects_dso--disabled"})}),domain:e({enabled:e({name:"objects_domain--enabled"}),hover:e({name:"objects_domain--hover"}),active:e({name:"objects_domain--active"}),disabled:e({name:"objects_domain--disabled"})}),document:e({enabled:e({name:"objects_document--enabled"}),hover:e({name:"objects_document--hover"}),active:e({name:"objects_document--active"}),disabled:e({name:"objects_document--disabled"})}),"document-workflow":e({enabled:e({name:"objects_document-workflow--enabled"}),hover:e({name:"objects_document-workflow--hover"}),active:e({name:"objects_document-workflow--active"}),disabled:e({name:"objects_document-workflow--disabled"})}),diagram:e({enabled:e({name:"objects_diagram--enabled"}),hover:e({name:"objects_diagram--hover"}),active:e({name:"objects_diagram--active"}),disabled:e({name:"objects_diagram--disabled"})}),design:e({enabled:e({name:"objects_design--enabled"}),hover:e({name:"objects_design--hover"}),active:e({name:"objects_design--active"}),disabled:e({name:"objects_design--disabled"})}),"deployment-unit":e({enabled:e({name:"objects_deployment-unit--enabled"}),hover:e({name:"objects_deployment-unit--hover"}),active:e({name:"objects_deployment-unit--active"}),disabled:e({name:"objects_deployment-unit--disabled"})}),"dataview-index":e({enabled:e({name:"objects_dataview-index--enabled"}),hover:e({name:"objects_dataview-index--hover"}),active:e({name:"objects_dataview-index--active"}),disabled:e({name:"objects_dataview-index--disabled"})}),datastore:e({enabled:e({name:"objects_datastore--enabled"}),hover:e({name:"objects_datastore--hover"}),active:e({name:"objects_datastore--active"}),disabled:e({name:"objects_datastore--disabled"})}),"datastore-category":e({enabled:e({name:"objects_datastore-category--enabled"}),hover:e({name:"objects_datastore-category--hover"}),active:e({name:"objects_datastore-category--active"}),disabled:e({name:"objects_datastore-category--disabled"})}),"data-view":e({enabled:e({name:"objects_data-view--enabled"}),hover:e({name:"objects_data-view--hover"}),active:e({name:"objects_data-view--active"}),disabled:e({name:"objects_data-view--disabled"})}),"data-selector":e({enabled:e({name:"objects_data-selector--enabled"}),hover:e({name:"objects_data-selector--hover"}),active:e({name:"objects_data-selector--active"}),disabled:e({name:"objects_data-selector--disabled"})}),"data-provider":e({enabled:e({name:"objects_data-provider--enabled"}),hover:e({name:"objects_data-provider--hover"}),active:e({name:"objects_data-provider--active"}),disabled:e({name:"objects_data-provider--disabled"})}),dashboard:e({enabled:e({name:"objects_dashboard--enabled"}),hover:e({name:"objects_dashboard--hover"}),active:e({name:"objects_dashboard--active"}),disabled:e({name:"objects_dashboard--disabled"})}),customization:e({enabled:e({name:"objects_customization--enabled"}),hover:e({name:"objects_customization--hover"}),active:e({name:"objects_customization--active"}),disabled:e({name:"objects_customization--disabled"})}),"conversational-flows":e({enabled:e({name:"objects_conversational-flows--enabled"}),hover:e({name:"objects_conversational-flows--hover"}),active:e({name:"objects_conversational-flows--active"}),disabled:e({name:"objects_conversational-flows--disabled"})}),category:e({enabled:e({name:"objects_category--enabled"}),hover:e({name:"objects_category--hover"}),active:e({name:"objects_category--active"}),disabled:e({name:"objects_category--disabled"})}),calendars:e({enabled:e({name:"objects_calendars--enabled"}),hover:e({name:"objects_calendars--hover"}),active:e({name:"objects_calendars--active"}),disabled:e({name:"objects_calendars--disabled"})}),"business-process-diagram":e({enabled:e({name:"objects_business-process-diagram--enabled"}),hover:e({name:"objects_business-process-diagram--hover"}),active:e({name:"objects_business-process-diagram--active"}),disabled:e({name:"objects_business-process-diagram--disabled"})}),"bg-color":e({enabled:e({name:"objects_bg-color--enabled"}),hover:e({name:"objects_bg-color--hover"}),active:e({name:"objects_bg-color--active"}),disabled:e({name:"objects_bg-color--disabled"})}),attribute:e({enabled:e({name:"objects_attribute--enabled"}),hover:e({name:"objects_attribute--hover"}),active:e({name:"objects_attribute--active"}),disabled:e({name:"objects_attribute--disabled"})}),api:e({enabled:e({name:"objects_api--enabled"}),hover:e({name:"objects_api--hover"}),active:e({name:"objects_api--active"}),disabled:e({name:"objects_api--disabled"})})}),navigation:e({"pill-outlined":e({"on-surface":e({enabled:e({name:"navigation_pill-outlined_on-surface--enabled"}),hover:e({name:"navigation_pill-outlined_on-surface--hover"}),active:e({name:"navigation_pill-outlined_on-surface--active"}),disabled:e({name:"navigation_pill-outlined_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_pill-outlined_on-primary--enabled"}),hover:e({name:"navigation_pill-outlined_on-primary--hover"}),active:e({name:"navigation_pill-outlined_on-primary--active"}),disabled:e({name:"navigation_pill-outlined_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_pill-outlined_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_pill-outlined_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_pill-outlined_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_pill-outlined_primary--enabled"}),hover:e({name:"navigation_pill-outlined_primary--hover"}),active:e({name:"navigation_pill-outlined_primary--active"}),disabled:e({name:"navigation_pill-outlined_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_pill-outlined_neutral--enabled"}),hover:e({name:"navigation_pill-outlined_neutral--hover"}),active:e({name:"navigation_pill-outlined_neutral--active"}),disabled:e({name:"navigation_pill-outlined_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_pill-outlined_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_pill-outlined_bright--enabled"})})}),"pill-filled":e({"on-surface":e({enabled:e({name:"navigation_pill-filled_on-surface--enabled"}),hover:e({name:"navigation_pill-filled_on-surface--hover"}),active:e({name:"navigation_pill-filled_on-surface--active"}),disabled:e({name:"navigation_pill-filled_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_pill-filled_on-primary--enabled"}),hover:e({name:"navigation_pill-filled_on-primary--hover"}),active:e({name:"navigation_pill-filled_on-primary--active"}),disabled:e({name:"navigation_pill-filled_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_pill-filled_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_pill-filled_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_pill-filled_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_pill-filled_primary--enabled"}),hover:e({name:"navigation_pill-filled_primary--hover"}),active:e({name:"navigation_pill-filled_primary--active"}),disabled:e({name:"navigation_pill-filled_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_pill-filled_neutral--enabled"}),hover:e({name:"navigation_pill-filled_neutral--hover"}),active:e({name:"navigation_pill-filled_neutral--active"}),disabled:e({name:"navigation_pill-filled_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_pill-filled_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_pill-filled_bright--enabled"})})}),"level-up":e({"on-surface":e({enabled:e({name:"navigation_level-up_on-surface--enabled"}),hover:e({name:"navigation_level-up_on-surface--hover"}),active:e({name:"navigation_level-up_on-surface--active"}),disabled:e({name:"navigation_level-up_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_level-up_on-primary--enabled"}),hover:e({name:"navigation_level-up_on-primary--hover"}),active:e({name:"navigation_level-up_on-primary--active"}),disabled:e({name:"navigation_level-up_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_level-up_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_level-up_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_level-up_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_level-up_primary--enabled"}),hover:e({name:"navigation_level-up_primary--hover"}),active:e({name:"navigation_level-up_primary--active"}),disabled:e({name:"navigation_level-up_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_level-up_neutral--enabled"}),hover:e({name:"navigation_level-up_neutral--hover"}),active:e({name:"navigation_level-up_neutral--active"}),disabled:e({name:"navigation_level-up_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_level-up_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_level-up_bright--enabled"})})}),"level-down":e({"on-surface":e({enabled:e({name:"navigation_level-down_on-surface--enabled"}),hover:e({name:"navigation_level-down_on-surface--hover"}),active:e({name:"navigation_level-down_on-surface--active"}),disabled:e({name:"navigation_level-down_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_level-down_on-primary--enabled"}),hover:e({name:"navigation_level-down_on-primary--hover"}),active:e({name:"navigation_level-down_on-primary--active"}),disabled:e({name:"navigation_level-down_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_level-down_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_level-down_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_level-down_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_level-down_primary--enabled"}),hover:e({name:"navigation_level-down_primary--hover"}),active:e({name:"navigation_level-down_primary--active"}),disabled:e({name:"navigation_level-down_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_level-down_neutral--enabled"}),hover:e({name:"navigation_level-down_neutral--hover"}),active:e({name:"navigation_level-down_neutral--active"}),disabled:e({name:"navigation_level-down_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_level-down_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_level-down_bright--enabled"})})}),"gx-arrow-right":e({"on-surface":e({enabled:e({name:"navigation_gx-arrow-right_on-surface--enabled"}),hover:e({name:"navigation_gx-arrow-right_on-surface--hover"}),active:e({name:"navigation_gx-arrow-right_on-surface--active"}),disabled:e({name:"navigation_gx-arrow-right_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_gx-arrow-right_on-primary--enabled"}),hover:e({name:"navigation_gx-arrow-right_on-primary--hover"}),active:e({name:"navigation_gx-arrow-right_on-primary--active"}),disabled:e({name:"navigation_gx-arrow-right_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_gx-arrow-right_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_gx-arrow-right_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_gx-arrow-right_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_gx-arrow-right_primary--enabled"}),hover:e({name:"navigation_gx-arrow-right_primary--hover"}),active:e({name:"navigation_gx-arrow-right_primary--active"}),disabled:e({name:"navigation_gx-arrow-right_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_gx-arrow-right_neutral--enabled"}),hover:e({name:"navigation_gx-arrow-right_neutral--hover"}),active:e({name:"navigation_gx-arrow-right_neutral--active"}),disabled:e({name:"navigation_gx-arrow-right_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_gx-arrow-right_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_gx-arrow-right_bright--enabled"})})}),drag:e({"on-surface":e({enabled:e({name:"navigation_drag_on-surface--enabled"}),hover:e({name:"navigation_drag_on-surface--hover"}),active:e({name:"navigation_drag_on-surface--active"}),disabled:e({name:"navigation_drag_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_drag_on-primary--enabled"}),hover:e({name:"navigation_drag_on-primary--hover"}),active:e({name:"navigation_drag_on-primary--active"}),disabled:e({name:"navigation_drag_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_drag_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_drag_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_drag_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_drag_primary--enabled"}),hover:e({name:"navigation_drag_primary--hover"}),active:e({name:"navigation_drag_primary--active"}),disabled:e({name:"navigation_drag_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_drag_neutral--enabled"}),hover:e({name:"navigation_drag_neutral--hover"}),active:e({name:"navigation_drag_neutral--active"}),disabled:e({name:"navigation_drag_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_drag_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_drag_bright--enabled"})})}),"chevron-up":e({"on-surface":e({enabled:e({name:"navigation_chevron-up_on-surface--enabled"}),hover:e({name:"navigation_chevron-up_on-surface--hover"}),active:e({name:"navigation_chevron-up_on-surface--active"}),disabled:e({name:"navigation_chevron-up_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_chevron-up_on-primary--enabled"}),hover:e({name:"navigation_chevron-up_on-primary--hover"}),active:e({name:"navigation_chevron-up_on-primary--active"}),disabled:e({name:"navigation_chevron-up_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_chevron-up_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_chevron-up_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_chevron-up_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_chevron-up_primary--enabled"}),hover:e({name:"navigation_chevron-up_primary--hover"}),active:e({name:"navigation_chevron-up_primary--active"}),disabled:e({name:"navigation_chevron-up_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_chevron-up_neutral--enabled"}),hover:e({name:"navigation_chevron-up_neutral--hover"}),active:e({name:"navigation_chevron-up_neutral--active"}),disabled:e({name:"navigation_chevron-up_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_chevron-up_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_chevron-up_bright--enabled"})})}),"chevron-right":e({"on-surface":e({enabled:e({name:"navigation_chevron-right_on-surface--enabled"}),hover:e({name:"navigation_chevron-right_on-surface--hover"}),active:e({name:"navigation_chevron-right_on-surface--active"}),disabled:e({name:"navigation_chevron-right_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_chevron-right_on-primary--enabled"}),hover:e({name:"navigation_chevron-right_on-primary--hover"}),active:e({name:"navigation_chevron-right_on-primary--active"}),disabled:e({name:"navigation_chevron-right_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_chevron-right_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_chevron-right_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_chevron-right_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_chevron-right_primary--enabled"}),hover:e({name:"navigation_chevron-right_primary--hover"}),active:e({name:"navigation_chevron-right_primary--active"}),disabled:e({name:"navigation_chevron-right_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_chevron-right_neutral--enabled"}),hover:e({name:"navigation_chevron-right_neutral--hover"}),active:e({name:"navigation_chevron-right_neutral--active"}),disabled:e({name:"navigation_chevron-right_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_chevron-right_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_chevron-right_bright--enabled"})})}),"chevron-left":e({"on-surface":e({enabled:e({name:"navigation_chevron-left_on-surface--enabled"}),hover:e({name:"navigation_chevron-left_on-surface--hover"}),active:e({name:"navigation_chevron-left_on-surface--active"}),disabled:e({name:"navigation_chevron-left_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_chevron-left_on-primary--enabled"}),hover:e({name:"navigation_chevron-left_on-primary--hover"}),active:e({name:"navigation_chevron-left_on-primary--active"}),disabled:e({name:"navigation_chevron-left_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_chevron-left_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_chevron-left_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_chevron-left_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_chevron-left_primary--enabled"}),hover:e({name:"navigation_chevron-left_primary--hover"}),active:e({name:"navigation_chevron-left_primary--active"}),disabled:e({name:"navigation_chevron-left_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_chevron-left_neutral--enabled"}),hover:e({name:"navigation_chevron-left_neutral--hover"}),active:e({name:"navigation_chevron-left_neutral--active"}),disabled:e({name:"navigation_chevron-left_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_chevron-left_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_chevron-left_bright--enabled"})})}),"chevron-down":e({"on-surface":e({enabled:e({name:"navigation_chevron-down_on-surface--enabled"}),hover:e({name:"navigation_chevron-down_on-surface--hover"}),active:e({name:"navigation_chevron-down_on-surface--active"}),disabled:e({name:"navigation_chevron-down_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_chevron-down_on-primary--enabled"}),hover:e({name:"navigation_chevron-down_on-primary--hover"}),active:e({name:"navigation_chevron-down_on-primary--active"}),disabled:e({name:"navigation_chevron-down_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_chevron-down_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_chevron-down_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_chevron-down_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_chevron-down_primary--enabled"}),hover:e({name:"navigation_chevron-down_primary--hover"}),active:e({name:"navigation_chevron-down_primary--active"}),disabled:e({name:"navigation_chevron-down_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_chevron-down_neutral--enabled"}),hover:e({name:"navigation_chevron-down_neutral--hover"}),active:e({name:"navigation_chevron-down_neutral--active"}),disabled:e({name:"navigation_chevron-down_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_chevron-down_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_chevron-down_bright--enabled"})})}),bullet:e({"on-surface":e({enabled:e({name:"navigation_bullet_on-surface--enabled"}),hover:e({name:"navigation_bullet_on-surface--hover"}),active:e({name:"navigation_bullet_on-surface--active"}),disabled:e({name:"navigation_bullet_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_bullet_on-primary--enabled"}),hover:e({name:"navigation_bullet_on-primary--hover"}),active:e({name:"navigation_bullet_on-primary--active"}),disabled:e({name:"navigation_bullet_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_bullet_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_bullet_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_bullet_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_bullet_primary--enabled"}),hover:e({name:"navigation_bullet_primary--hover"}),active:e({name:"navigation_bullet_primary--active"}),disabled:e({name:"navigation_bullet_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_bullet_neutral--enabled"}),hover:e({name:"navigation_bullet_neutral--hover"}),active:e({name:"navigation_bullet_neutral--active"}),disabled:e({name:"navigation_bullet_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_bullet_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_bullet_bright--enabled"})})}),"arrow-up":e({"on-surface":e({enabled:e({name:"navigation_arrow-up_on-surface--enabled"}),hover:e({name:"navigation_arrow-up_on-surface--hover"}),active:e({name:"navigation_arrow-up_on-surface--active"}),disabled:e({name:"navigation_arrow-up_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_arrow-up_on-primary--enabled"}),hover:e({name:"navigation_arrow-up_on-primary--hover"}),active:e({name:"navigation_arrow-up_on-primary--active"}),disabled:e({name:"navigation_arrow-up_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_arrow-up_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_arrow-up_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_arrow-up_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_arrow-up_primary--enabled"}),hover:e({name:"navigation_arrow-up_primary--hover"}),active:e({name:"navigation_arrow-up_primary--active"}),disabled:e({name:"navigation_arrow-up_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_arrow-up_neutral--enabled"}),hover:e({name:"navigation_arrow-up_neutral--hover"}),active:e({name:"navigation_arrow-up_neutral--active"}),disabled:e({name:"navigation_arrow-up_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_arrow-up_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_arrow-up_bright--enabled"})})}),"arrow-right":e({"on-surface":e({enabled:e({name:"navigation_arrow-right_on-surface--enabled"}),hover:e({name:"navigation_arrow-right_on-surface--hover"}),active:e({name:"navigation_arrow-right_on-surface--active"}),disabled:e({name:"navigation_arrow-right_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_arrow-right_on-primary--enabled"}),hover:e({name:"navigation_arrow-right_on-primary--hover"}),active:e({name:"navigation_arrow-right_on-primary--active"}),disabled:e({name:"navigation_arrow-right_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_arrow-right_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_arrow-right_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_arrow-right_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_arrow-right_primary--enabled"}),hover:e({name:"navigation_arrow-right_primary--hover"}),active:e({name:"navigation_arrow-right_primary--active"}),disabled:e({name:"navigation_arrow-right_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_arrow-right_neutral--enabled"}),hover:e({name:"navigation_arrow-right_neutral--hover"}),active:e({name:"navigation_arrow-right_neutral--active"}),disabled:e({name:"navigation_arrow-right_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_arrow-right_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_arrow-right_bright--enabled"})})}),"arrow-left":e({"on-surface":e({enabled:e({name:"navigation_arrow-left_on-surface--enabled"}),hover:e({name:"navigation_arrow-left_on-surface--hover"}),active:e({name:"navigation_arrow-left_on-surface--active"}),disabled:e({name:"navigation_arrow-left_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_arrow-left_on-primary--enabled"}),hover:e({name:"navigation_arrow-left_on-primary--hover"}),active:e({name:"navigation_arrow-left_on-primary--active"}),disabled:e({name:"navigation_arrow-left_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_arrow-left_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_arrow-left_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_arrow-left_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_arrow-left_primary--enabled"}),hover:e({name:"navigation_arrow-left_primary--hover"}),active:e({name:"navigation_arrow-left_primary--active"}),disabled:e({name:"navigation_arrow-left_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_arrow-left_neutral--enabled"}),hover:e({name:"navigation_arrow-left_neutral--hover"}),active:e({name:"navigation_arrow-left_neutral--active"}),disabled:e({name:"navigation_arrow-left_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_arrow-left_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_arrow-left_bright--enabled"})})}),"arrow-down":e({"on-surface":e({enabled:e({name:"navigation_arrow-down_on-surface--enabled"}),hover:e({name:"navigation_arrow-down_on-surface--hover"}),active:e({name:"navigation_arrow-down_on-surface--active"}),disabled:e({name:"navigation_arrow-down_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_arrow-down_on-primary--enabled"}),hover:e({name:"navigation_arrow-down_on-primary--hover"}),active:e({name:"navigation_arrow-down_on-primary--active"}),disabled:e({name:"navigation_arrow-down_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_arrow-down_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_arrow-down_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_arrow-down_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_arrow-down_primary--enabled"}),hover:e({name:"navigation_arrow-down_primary--hover"}),active:e({name:"navigation_arrow-down_primary--active"}),disabled:e({name:"navigation_arrow-down_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_arrow-down_neutral--enabled"}),hover:e({name:"navigation_arrow-down_neutral--hover"}),active:e({name:"navigation_arrow-down_neutral--active"}),disabled:e({name:"navigation_arrow-down_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_arrow-down_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_arrow-down_bright--enabled"})})}),"arrow-down-skyblue":e({"on-surface":e({enabled:e({name:"navigation_arrow-down-skyblue_on-surface--enabled"}),hover:e({name:"navigation_arrow-down-skyblue_on-surface--hover"}),active:e({name:"navigation_arrow-down-skyblue_on-surface--active"}),disabled:e({name:"navigation_arrow-down-skyblue_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"navigation_arrow-down-skyblue_on-primary--enabled"}),hover:e({name:"navigation_arrow-down-skyblue_on-primary--hover"}),active:e({name:"navigation_arrow-down-skyblue_on-primary--active"}),disabled:e({name:"navigation_arrow-down-skyblue_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"navigation_arrow-down-skyblue_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"navigation_arrow-down-skyblue_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"navigation_arrow-down-skyblue_on-elevation--enabled"})}),primary:e({enabled:e({name:"navigation_arrow-down-skyblue_primary--enabled"}),hover:e({name:"navigation_arrow-down-skyblue_primary--hover"}),active:e({name:"navigation_arrow-down-skyblue_primary--active"}),disabled:e({name:"navigation_arrow-down-skyblue_primary--disabled"})}),neutral:e({enabled:e({name:"navigation_arrow-down-skyblue_neutral--enabled"}),hover:e({name:"navigation_arrow-down-skyblue_neutral--hover"}),active:e({name:"navigation_arrow-down-skyblue_neutral--active"}),disabled:e({name:"navigation_arrow-down-skyblue_neutral--disabled"})}),highlighted:e({enabled:e({name:"navigation_arrow-down-skyblue_highlighted--enabled"})}),bright:e({enabled:e({name:"navigation_arrow-down-skyblue_bright--enabled"})})})}),menus:e({undo:e({"on-surface":e({enabled:e({name:"menus_undo_on-surface--enabled"}),hover:e({name:"menus_undo_on-surface--hover"}),active:e({name:"menus_undo_on-surface--active"}),disabled:e({name:"menus_undo_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_undo_on-primary--enabled"}),hover:e({name:"menus_undo_on-primary--hover"}),active:e({name:"menus_undo_on-primary--active"}),disabled:e({name:"menus_undo_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_undo_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_undo_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_undo_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_undo_primary--enabled"}),hover:e({name:"menus_undo_primary--hover"}),active:e({name:"menus_undo_primary--active"}),disabled:e({name:"menus_undo_primary--disabled"})}),neutral:e({enabled:e({name:"menus_undo_neutral--enabled"}),hover:e({name:"menus_undo_neutral--hover"}),active:e({name:"menus_undo_neutral--active"}),disabled:e({name:"menus_undo_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_undo_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_undo_bright--enabled"})})}),"undo-close-object":e({"on-surface":e({enabled:e({name:"menus_undo-close-object_on-surface--enabled"}),hover:e({name:"menus_undo-close-object_on-surface--hover"}),active:e({name:"menus_undo-close-object_on-surface--active"}),disabled:e({name:"menus_undo-close-object_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_undo-close-object_on-primary--enabled"}),hover:e({name:"menus_undo-close-object_on-primary--hover"}),active:e({name:"menus_undo-close-object_on-primary--active"}),disabled:e({name:"menus_undo-close-object_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_undo-close-object_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_undo-close-object_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_undo-close-object_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_undo-close-object_primary--enabled"}),hover:e({name:"menus_undo-close-object_primary--hover"}),active:e({name:"menus_undo-close-object_primary--active"}),disabled:e({name:"menus_undo-close-object_primary--disabled"})}),neutral:e({enabled:e({name:"menus_undo-close-object_neutral--enabled"}),hover:e({name:"menus_undo-close-object_neutral--hover"}),active:e({name:"menus_undo-close-object_neutral--active"}),disabled:e({name:"menus_undo-close-object_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_undo-close-object_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_undo-close-object_bright--enabled"})})}),save:e({"on-surface":e({enabled:e({name:"menus_save_on-surface--enabled"}),hover:e({name:"menus_save_on-surface--hover"}),active:e({name:"menus_save_on-surface--active"}),disabled:e({name:"menus_save_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_save_on-primary--enabled"}),hover:e({name:"menus_save_on-primary--hover"}),active:e({name:"menus_save_on-primary--active"}),disabled:e({name:"menus_save_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_save_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_save_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_save_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_save_primary--enabled"}),hover:e({name:"menus_save_primary--hover"}),active:e({name:"menus_save_primary--active"}),disabled:e({name:"menus_save_primary--disabled"})}),neutral:e({enabled:e({name:"menus_save_neutral--enabled"}),hover:e({name:"menus_save_neutral--hover"}),active:e({name:"menus_save_neutral--active"}),disabled:e({name:"menus_save_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_save_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_save_bright--enabled"})})}),"save-all":e({"on-surface":e({enabled:e({name:"menus_save-all_on-surface--enabled"}),hover:e({name:"menus_save-all_on-surface--hover"}),active:e({name:"menus_save-all_on-surface--active"}),disabled:e({name:"menus_save-all_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_save-all_on-primary--enabled"}),hover:e({name:"menus_save-all_on-primary--hover"}),active:e({name:"menus_save-all_on-primary--active"}),disabled:e({name:"menus_save-all_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_save-all_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_save-all_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_save-all_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_save-all_primary--enabled"}),hover:e({name:"menus_save-all_primary--hover"}),active:e({name:"menus_save-all_primary--active"}),disabled:e({name:"menus_save-all_primary--disabled"})}),neutral:e({enabled:e({name:"menus_save-all_neutral--enabled"}),hover:e({name:"menus_save-all_neutral--hover"}),active:e({name:"menus_save-all_neutral--active"}),disabled:e({name:"menus_save-all_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_save-all_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_save-all_bright--enabled"})})}),run:e({"on-surface":e({enabled:e({name:"menus_run_on-surface--enabled"}),hover:e({name:"menus_run_on-surface--hover"}),active:e({name:"menus_run_on-surface--active"}),disabled:e({name:"menus_run_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_run_on-primary--enabled"}),hover:e({name:"menus_run_on-primary--hover"}),active:e({name:"menus_run_on-primary--active"}),disabled:e({name:"menus_run_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_run_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_run_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_run_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_run_primary--enabled"}),hover:e({name:"menus_run_primary--hover"}),active:e({name:"menus_run_primary--active"}),disabled:e({name:"menus_run_primary--disabled"})}),neutral:e({enabled:e({name:"menus_run_neutral--enabled"}),hover:e({name:"menus_run_neutral--hover"}),active:e({name:"menus_run_neutral--active"}),disabled:e({name:"menus_run_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_run_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_run_bright--enabled"})})}),redo:e({"on-surface":e({enabled:e({name:"menus_redo_on-surface--enabled"}),hover:e({name:"menus_redo_on-surface--hover"}),active:e({name:"menus_redo_on-surface--active"}),disabled:e({name:"menus_redo_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_redo_on-primary--enabled"}),hover:e({name:"menus_redo_on-primary--hover"}),active:e({name:"menus_redo_on-primary--active"}),disabled:e({name:"menus_redo_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_redo_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_redo_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_redo_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_redo_primary--enabled"}),hover:e({name:"menus_redo_primary--hover"}),active:e({name:"menus_redo_primary--active"}),disabled:e({name:"menus_redo_primary--disabled"})}),neutral:e({enabled:e({name:"menus_redo_neutral--enabled"}),hover:e({name:"menus_redo_neutral--hover"}),active:e({name:"menus_redo_neutral--active"}),disabled:e({name:"menus_redo_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_redo_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_redo_bright--enabled"})})}),properties:e({"on-surface":e({enabled:e({name:"menus_properties_on-surface--enabled"}),hover:e({name:"menus_properties_on-surface--hover"}),active:e({name:"menus_properties_on-surface--active"}),disabled:e({name:"menus_properties_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_properties_on-primary--enabled"}),hover:e({name:"menus_properties_on-primary--hover"}),active:e({name:"menus_properties_on-primary--active"}),disabled:e({name:"menus_properties_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_properties_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_properties_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_properties_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_properties_primary--enabled"}),hover:e({name:"menus_properties_primary--hover"}),active:e({name:"menus_properties_primary--active"}),disabled:e({name:"menus_properties_primary--disabled"})}),neutral:e({enabled:e({name:"menus_properties_neutral--enabled"}),hover:e({name:"menus_properties_neutral--hover"}),active:e({name:"menus_properties_neutral--active"}),disabled:e({name:"menus_properties_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_properties_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_properties_bright--enabled"})})}),paste:e({"on-surface":e({enabled:e({name:"menus_paste_on-surface--enabled"}),hover:e({name:"menus_paste_on-surface--hover"}),active:e({name:"menus_paste_on-surface--active"}),disabled:e({name:"menus_paste_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_paste_on-primary--enabled"}),hover:e({name:"menus_paste_on-primary--hover"}),active:e({name:"menus_paste_on-primary--active"}),disabled:e({name:"menus_paste_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_paste_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_paste_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_paste_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_paste_primary--enabled"}),hover:e({name:"menus_paste_primary--hover"}),active:e({name:"menus_paste_primary--active"}),disabled:e({name:"menus_paste_primary--disabled"})}),neutral:e({enabled:e({name:"menus_paste_neutral--enabled"}),hover:e({name:"menus_paste_neutral--hover"}),active:e({name:"menus_paste_neutral--active"}),disabled:e({name:"menus_paste_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_paste_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_paste_bright--enabled"})})}),"open-object":e({"on-surface":e({enabled:e({name:"menus_open-object_on-surface--enabled"}),hover:e({name:"menus_open-object_on-surface--hover"}),active:e({name:"menus_open-object_on-surface--active"}),disabled:e({name:"menus_open-object_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_open-object_on-primary--enabled"}),hover:e({name:"menus_open-object_on-primary--hover"}),active:e({name:"menus_open-object_on-primary--active"}),disabled:e({name:"menus_open-object_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_open-object_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_open-object_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_open-object_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_open-object_primary--enabled"}),hover:e({name:"menus_open-object_primary--hover"}),active:e({name:"menus_open-object_primary--active"}),disabled:e({name:"menus_open-object_primary--disabled"})}),neutral:e({enabled:e({name:"menus_open-object_neutral--enabled"}),hover:e({name:"menus_open-object_neutral--hover"}),active:e({name:"menus_open-object_neutral--active"}),disabled:e({name:"menus_open-object_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_open-object_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_open-object_bright--enabled"})})}),"new-object":e({"on-surface":e({enabled:e({name:"menus_new-object_on-surface--enabled"}),hover:e({name:"menus_new-object_on-surface--hover"}),active:e({name:"menus_new-object_on-surface--active"}),disabled:e({name:"menus_new-object_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_new-object_on-primary--enabled"}),hover:e({name:"menus_new-object_on-primary--hover"}),active:e({name:"menus_new-object_on-primary--active"}),disabled:e({name:"menus_new-object_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_new-object_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_new-object_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_new-object_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_new-object_primary--enabled"}),hover:e({name:"menus_new-object_primary--hover"}),active:e({name:"menus_new-object_primary--active"}),disabled:e({name:"menus_new-object_primary--disabled"})}),neutral:e({enabled:e({name:"menus_new-object_neutral--enabled"}),hover:e({name:"menus_new-object_neutral--hover"}),active:e({name:"menus_new-object_neutral--active"}),disabled:e({name:"menus_new-object_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_new-object_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_new-object_bright--enabled"})})}),find:e({"on-surface":e({enabled:e({name:"menus_find_on-surface--enabled"}),hover:e({name:"menus_find_on-surface--hover"}),active:e({name:"menus_find_on-surface--active"}),disabled:e({name:"menus_find_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_find_on-primary--enabled"}),hover:e({name:"menus_find_on-primary--hover"}),active:e({name:"menus_find_on-primary--active"}),disabled:e({name:"menus_find_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_find_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_find_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_find_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_find_primary--enabled"}),hover:e({name:"menus_find_primary--hover"}),active:e({name:"menus_find_primary--active"}),disabled:e({name:"menus_find_primary--disabled"})}),neutral:e({enabled:e({name:"menus_find_neutral--enabled"}),hover:e({name:"menus_find_neutral--hover"}),active:e({name:"menus_find_neutral--active"}),disabled:e({name:"menus_find_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_find_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_find_bright--enabled"})})}),delete:e({"on-surface":e({enabled:e({name:"menus_delete_on-surface--enabled"}),hover:e({name:"menus_delete_on-surface--hover"}),active:e({name:"menus_delete_on-surface--active"}),disabled:e({name:"menus_delete_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_delete_on-primary--enabled"}),hover:e({name:"menus_delete_on-primary--hover"}),active:e({name:"menus_delete_on-primary--active"}),disabled:e({name:"menus_delete_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_delete_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_delete_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_delete_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_delete_primary--enabled"}),hover:e({name:"menus_delete_primary--hover"}),active:e({name:"menus_delete_primary--active"}),disabled:e({name:"menus_delete_primary--disabled"})}),neutral:e({enabled:e({name:"menus_delete_neutral--enabled"}),hover:e({name:"menus_delete_neutral--hover"}),active:e({name:"menus_delete_neutral--active"}),disabled:e({name:"menus_delete_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_delete_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_delete_bright--enabled"})})}),cut:e({"on-surface":e({enabled:e({name:"menus_cut_on-surface--enabled"}),hover:e({name:"menus_cut_on-surface--hover"}),active:e({name:"menus_cut_on-surface--active"}),disabled:e({name:"menus_cut_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_cut_on-primary--enabled"}),hover:e({name:"menus_cut_on-primary--hover"}),active:e({name:"menus_cut_on-primary--active"}),disabled:e({name:"menus_cut_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_cut_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_cut_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_cut_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_cut_primary--enabled"}),hover:e({name:"menus_cut_primary--hover"}),active:e({name:"menus_cut_primary--active"}),disabled:e({name:"menus_cut_primary--disabled"})}),neutral:e({enabled:e({name:"menus_cut_neutral--enabled"}),hover:e({name:"menus_cut_neutral--hover"}),active:e({name:"menus_cut_neutral--active"}),disabled:e({name:"menus_cut_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_cut_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_cut_bright--enabled"})})}),"create-database-tables":e({"on-surface":e({enabled:e({name:"menus_create-database-tables_on-surface--enabled"}),hover:e({name:"menus_create-database-tables_on-surface--hover"}),active:e({name:"menus_create-database-tables_on-surface--active"}),disabled:e({name:"menus_create-database-tables_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_create-database-tables_on-primary--enabled"}),hover:e({name:"menus_create-database-tables_on-primary--hover"}),active:e({name:"menus_create-database-tables_on-primary--active"}),disabled:e({name:"menus_create-database-tables_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_create-database-tables_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_create-database-tables_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_create-database-tables_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_create-database-tables_primary--enabled"}),hover:e({name:"menus_create-database-tables_primary--hover"}),active:e({name:"menus_create-database-tables_primary--active"}),disabled:e({name:"menus_create-database-tables_primary--disabled"})}),neutral:e({enabled:e({name:"menus_create-database-tables_neutral--enabled"}),hover:e({name:"menus_create-database-tables_neutral--hover"}),active:e({name:"menus_create-database-tables_neutral--active"}),disabled:e({name:"menus_create-database-tables_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_create-database-tables_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_create-database-tables_bright--enabled"})})}),copy:e({"on-surface":e({enabled:e({name:"menus_copy_on-surface--enabled"}),hover:e({name:"menus_copy_on-surface--hover"}),active:e({name:"menus_copy_on-surface--active"}),disabled:e({name:"menus_copy_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_copy_on-primary--enabled"}),hover:e({name:"menus_copy_on-primary--hover"}),active:e({name:"menus_copy_on-primary--active"}),disabled:e({name:"menus_copy_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_copy_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_copy_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_copy_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_copy_primary--enabled"}),hover:e({name:"menus_copy_primary--hover"}),active:e({name:"menus_copy_primary--active"}),disabled:e({name:"menus_copy_primary--disabled"})}),neutral:e({enabled:e({name:"menus_copy_neutral--enabled"}),hover:e({name:"menus_copy_neutral--hover"}),active:e({name:"menus_copy_neutral--active"}),disabled:e({name:"menus_copy_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_copy_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_copy_bright--enabled"})})}),"cancel-build":e({"on-surface":e({enabled:e({name:"menus_cancel-build_on-surface--enabled"}),hover:e({name:"menus_cancel-build_on-surface--hover"}),active:e({name:"menus_cancel-build_on-surface--active"}),disabled:e({name:"menus_cancel-build_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_cancel-build_on-primary--enabled"}),hover:e({name:"menus_cancel-build_on-primary--hover"}),active:e({name:"menus_cancel-build_on-primary--active"}),disabled:e({name:"menus_cancel-build_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_cancel-build_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_cancel-build_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_cancel-build_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_cancel-build_primary--enabled"}),hover:e({name:"menus_cancel-build_primary--hover"}),active:e({name:"menus_cancel-build_primary--active"}),disabled:e({name:"menus_cancel-build_primary--disabled"})}),neutral:e({enabled:e({name:"menus_cancel-build_neutral--enabled"}),hover:e({name:"menus_cancel-build_neutral--hover"}),active:e({name:"menus_cancel-build_neutral--active"}),disabled:e({name:"menus_cancel-build_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_cancel-build_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_cancel-build_bright--enabled"})})}),build:e({"on-surface":e({enabled:e({name:"menus_build_on-surface--enabled"}),hover:e({name:"menus_build_on-surface--hover"}),active:e({name:"menus_build_on-surface--active"}),disabled:e({name:"menus_build_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_build_on-primary--enabled"}),hover:e({name:"menus_build_on-primary--hover"}),active:e({name:"menus_build_on-primary--active"}),disabled:e({name:"menus_build_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_build_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_build_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_build_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_build_primary--enabled"}),hover:e({name:"menus_build_primary--hover"}),active:e({name:"menus_build_primary--active"}),disabled:e({name:"menus_build_primary--disabled"})}),neutral:e({enabled:e({name:"menus_build_neutral--enabled"}),hover:e({name:"menus_build_neutral--hover"}),active:e({name:"menus_build_neutral--active"}),disabled:e({name:"menus_build_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_build_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_build_bright--enabled"})})}),"build-all":e({"on-surface":e({enabled:e({name:"menus_build-all_on-surface--enabled"}),hover:e({name:"menus_build-all_on-surface--hover"}),active:e({name:"menus_build-all_on-surface--active"}),disabled:e({name:"menus_build-all_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"menus_build-all_on-primary--enabled"}),hover:e({name:"menus_build-all_on-primary--hover"}),active:e({name:"menus_build-all_on-primary--active"}),disabled:e({name:"menus_build-all_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"menus_build-all_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"menus_build-all_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"menus_build-all_on-elevation--enabled"})}),primary:e({enabled:e({name:"menus_build-all_primary--enabled"}),hover:e({name:"menus_build-all_primary--hover"}),active:e({name:"menus_build-all_primary--active"}),disabled:e({name:"menus_build-all_primary--disabled"})}),neutral:e({enabled:e({name:"menus_build-all_neutral--enabled"}),hover:e({name:"menus_build-all_neutral--hover"}),active:e({name:"menus_build-all_neutral--active"}),disabled:e({name:"menus_build-all_neutral--disabled"})}),highlighted:e({enabled:e({name:"menus_build-all_highlighted--enabled"})}),bright:e({enabled:e({name:"menus_build-all_bright--enabled"})})})}),"gx-test":e({"unit-test":e({enabled:e({name:"gx-test_unit-test--enabled"}),hover:e({name:"gx-test_unit-test--hover"}),active:e({name:"gx-test_unit-test--active"}),disabled:e({name:"gx-test_unit-test--disabled"})}),"unit-test-db":e({enabled:e({name:"gx-test_unit-test-db--enabled"}),hover:e({name:"gx-test_unit-test-db--hover"}),active:e({name:"gx-test_unit-test-db--active"}),disabled:e({name:"gx-test_unit-test-db--disabled"})}),"ui-test-web":e({enabled:e({name:"gx-test_ui-test-web--enabled"}),hover:e({name:"gx-test_ui-test-web--hover"}),active:e({name:"gx-test_ui-test-web--active"}),disabled:e({name:"gx-test_ui-test-web--disabled"})}),"ui-test-sd":e({enabled:e({name:"gx-test_ui-test-sd--enabled"}),hover:e({name:"gx-test_ui-test-sd--hover"}),active:e({name:"gx-test_ui-test-sd--active"}),disabled:e({name:"gx-test_ui-test-sd--disabled"})}),"test-suite":e({enabled:e({name:"gx-test_test-suite--enabled"}),hover:e({name:"gx-test_test-suite--hover"}),active:e({name:"gx-test_test-suite--active"}),disabled:e({name:"gx-test_test-suite--disabled"})}),"test-results":e({enabled:e({name:"gx-test_test-results--enabled"}),hover:e({name:"gx-test_test-results--hover"}),active:e({name:"gx-test_test-results--active"}),disabled:e({name:"gx-test_test-results--disabled"})}),"test-folder":e({enabled:e({name:"gx-test_test-folder--enabled"}),hover:e({name:"gx-test_test-folder--hover"}),active:e({name:"gx-test_test-folder--active"}),disabled:e({name:"gx-test_test-folder--disabled"})}),"test-folder-open":e({enabled:e({name:"gx-test_test-folder-open--enabled"}),hover:e({name:"gx-test_test-folder-open--hover"}),active:e({name:"gx-test_test-folder-open--active"}),disabled:e({name:"gx-test_test-folder-open--disabled"})}),"screenshot-viewer":e({enabled:e({name:"gx-test_screenshot-viewer--enabled"}),hover:e({name:"gx-test_screenshot-viewer--hover"}),active:e({name:"gx-test_screenshot-viewer--active"}),disabled:e({name:"gx-test_screenshot-viewer--disabled"})}),"run-unit-test":e({enabled:e({name:"gx-test_run-unit-test--enabled"}),hover:e({name:"gx-test_run-unit-test--hover"}),active:e({name:"gx-test_run-unit-test--active"}),disabled:e({name:"gx-test_run-unit-test--disabled"})}),"run-ui-test-web":e({enabled:e({name:"gx-test_run-ui-test-web--enabled"}),hover:e({name:"gx-test_run-ui-test-web--hover"}),active:e({name:"gx-test_run-ui-test-web--active"}),disabled:e({name:"gx-test_run-ui-test-web--disabled"})}),"run-ui-test-sd":e({enabled:e({name:"gx-test_run-ui-test-sd--enabled"}),hover:e({name:"gx-test_run-ui-test-sd--hover"}),active:e({name:"gx-test_run-ui-test-sd--active"}),disabled:e({name:"gx-test_run-ui-test-sd--disabled"})}),"run-tests":e({enabled:e({name:"gx-test_run-tests--enabled"}),hover:e({name:"gx-test_run-tests--hover"}),active:e({name:"gx-test_run-tests--active"}),disabled:e({name:"gx-test_run-tests--disabled"})}),"run-test-suite":e({enabled:e({name:"gx-test_run-test-suite--enabled"}),hover:e({name:"gx-test_run-test-suite--hover"}),active:e({name:"gx-test_run-test-suite--active"}),disabled:e({name:"gx-test_run-test-suite--disabled"})}),"run-test-cancel":e({enabled:e({name:"gx-test_run-test-cancel--enabled"}),hover:e({name:"gx-test_run-test-cancel--hover"}),active:e({name:"gx-test_run-test-cancel--active"}),disabled:e({name:"gx-test_run-test-cancel--disabled"})}),"result-warning":e({enabled:e({name:"gx-test_result-warning--enabled"}),hover:e({name:"gx-test_result-warning--hover"}),active:e({name:"gx-test_result-warning--active"}),disabled:e({name:"gx-test_result-warning--disabled"})}),"result-skipped":e({enabled:e({name:"gx-test_result-skipped--enabled"}),hover:e({name:"gx-test_result-skipped--hover"}),active:e({name:"gx-test_result-skipped--active"}),disabled:e({name:"gx-test_result-skipped--disabled"})}),"result-ok":e({enabled:e({name:"gx-test_result-ok--enabled"}),hover:e({name:"gx-test_result-ok--hover"}),active:e({name:"gx-test_result-ok--active"}),disabled:e({name:"gx-test_result-ok--disabled"})}),"result-exception":e({enabled:e({name:"gx-test_result-exception--enabled"}),hover:e({name:"gx-test_result-exception--hover"}),active:e({name:"gx-test_result-exception--active"}),disabled:e({name:"gx-test_result-exception--disabled"})}),"result-error":e({enabled:e({name:"gx-test_result-error--enabled"}),hover:e({name:"gx-test_result-error--hover"}),active:e({name:"gx-test_result-error--active"}),disabled:e({name:"gx-test_result-error--disabled"})}),"record-mock":e({enabled:e({name:"gx-test_record-mock--enabled"}),hover:e({name:"gx-test_record-mock--hover"}),active:e({name:"gx-test_record-mock--active"}),disabled:e({name:"gx-test_record-mock--disabled"})}),plus:e({enabled:e({name:"gx-test_plus--enabled"}),hover:e({name:"gx-test_plus--hover"}),active:e({name:"gx-test_plus--active"}),disabled:e({name:"gx-test_plus--disabled"})}),image:e({enabled:e({name:"gx-test_image--enabled"}),hover:e({name:"gx-test_image--hover"}),active:e({name:"gx-test_image--active"}),disabled:e({name:"gx-test_image--disabled"})}),explorer:e({enabled:e({name:"gx-test_explorer--enabled"}),hover:e({name:"gx-test_explorer--hover"}),active:e({name:"gx-test_explorer--active"}),disabled:e({name:"gx-test_explorer--disabled"})}),cutfo:e({enabled:e({name:"gx-test_cutfo--enabled"}),hover:e({name:"gx-test_cutfo--hover"}),active:e({name:"gx-test_cutfo--active"}),disabled:e({name:"gx-test_cutfo--disabled"})})}),"gx-server":e({public:e({enabled:e({name:"gx-server_public--enabled"}),hover:e({name:"gx-server_public--hover"}),active:e({name:"gx-server_public--active"}),disabled:e({name:"gx-server_public--disabled"})}),private:e({enabled:e({name:"gx-server_private--enabled"}),hover:e({name:"gx-server_private--hover"}),active:e({name:"gx-server_private--active"}),disabled:e({name:"gx-server_private--disabled"})}),new:e({enabled:e({name:"gx-server_new--enabled"}),hover:e({name:"gx-server_new--hover"}),active:e({name:"gx-server_new--active"}),disabled:e({name:"gx-server_new--disabled"})}),"lock-without-changes":e({enabled:e({name:"gx-server_lock-without-changes--enabled"}),hover:e({name:"gx-server_lock-without-changes--hover"}),active:e({name:"gx-server_lock-without-changes--active"}),disabled:e({name:"gx-server_lock-without-changes--disabled"})}),"lock-by-user-reserve":e({enabled:e({name:"gx-server_lock-by-user-reserve--enabled"}),hover:e({name:"gx-server_lock-by-user-reserve--hover"}),active:e({name:"gx-server_lock-by-user-reserve--active"}),disabled:e({name:"gx-server_lock-by-user-reserve--disabled"})}),"lock-by-user-changes":e({enabled:e({name:"gx-server_lock-by-user-changes--enabled"}),hover:e({name:"gx-server_lock-by-user-changes--hover"}),active:e({name:"gx-server_lock-by-user-changes--active"}),disabled:e({name:"gx-server_lock-by-user-changes--disabled"})}),internal:e({enabled:e({name:"gx-server_internal--enabled"}),hover:e({name:"gx-server_internal--hover"}),active:e({name:"gx-server_internal--active"}),disabled:e({name:"gx-server_internal--disabled"})}),delete:e({enabled:e({name:"gx-server_delete--enabled"}),hover:e({name:"gx-server_delete--hover"}),active:e({name:"gx-server_delete--active"}),disabled:e({name:"gx-server_delete--disabled"})}),conflict:e({enabled:e({name:"gx-server_conflict--enabled"}),hover:e({name:"gx-server_conflict--hover"}),active:e({name:"gx-server_conflict--active"}),disabled:e({name:"gx-server_conflict--disabled"})}),"changes-commit-pending":e({enabled:e({name:"gx-server_changes-commit-pending--enabled"}),hover:e({name:"gx-server_changes-commit-pending--hover"}),active:e({name:"gx-server_changes-commit-pending--active"}),disabled:e({name:"gx-server_changes-commit-pending--disabled"})})}),general:e({version:e({enabled:e({name:"general_version--enabled"}),hover:e({name:"general_version--hover"}),active:e({name:"general_version--active"}),disabled:e({name:"general_version--disabled"})}),swift:e({enabled:e({name:"general_swift--enabled"}),hover:e({name:"general_swift--hover"}),active:e({name:"general_swift--active"}),disabled:e({name:"general_swift--disabled"})}),"sql-server":e({enabled:e({name:"general_sql-server--enabled"}),hover:e({name:"general_sql-server--hover"}),active:e({name:"general_sql-server--active"}),disabled:e({name:"general_sql-server--disabled"})}),services:e({enabled:e({name:"general_services--enabled"}),hover:e({name:"general_services--hover"}),active:e({name:"general_services--active"}),disabled:e({name:"general_services--disabled"})}),sd:e({enabled:e({name:"general_sd--enabled"}),hover:e({name:"general_sd--hover"}),active:e({name:"general_sd--active"}),disabled:e({name:"general_sd--disabled"})}),"sd-web":e({enabled:e({name:"general_sd-web--enabled"}),hover:e({name:"general_sd-web--hover"}),active:e({name:"general_sd-web--active"}),disabled:e({name:"general_sd-web--disabled"})}),"sap-hana":e({enabled:e({name:"general_sap-hana--enabled"}),hover:e({name:"general_sap-hana--hover"}),active:e({name:"general_sap-hana--active"}),disabled:e({name:"general_sap-hana--disabled"})}),references:e({enabled:e({name:"general_references--enabled"}),hover:e({name:"general_references--hover"}),active:e({name:"general_references--active"}),disabled:e({name:"general_references--disabled"})}),"qr-code":e({enabled:e({name:"general_qr-code--enabled"}),hover:e({name:"general_qr-code--hover"}),active:e({name:"general_qr-code--active"}),disabled:e({name:"general_qr-code--disabled"})}),"postgre-sql":e({enabled:e({name:"general_postgre-sql--enabled"}),hover:e({name:"general_postgre-sql--hover"}),active:e({name:"general_postgre-sql--active"}),disabled:e({name:"general_postgre-sql--disabled"})}),patterns:e({enabled:e({name:"general_patterns--enabled"}),hover:e({name:"general_patterns--hover"}),active:e({name:"general_patterns--active"}),disabled:e({name:"general_patterns--disabled"})}),oracle:e({enabled:e({name:"general_oracle--enabled"}),hover:e({name:"general_oracle--hover"}),active:e({name:"general_oracle--active"}),disabled:e({name:"general_oracle--disabled"})}),mysql:e({enabled:e({name:"general_mysql--enabled"}),hover:e({name:"general_mysql--hover"}),active:e({name:"general_mysql--active"}),disabled:e({name:"general_mysql--disabled"})}),launchpad:e({enabled:e({name:"general_launchpad--enabled"}),hover:e({name:"general_launchpad--hover"}),active:e({name:"general_launchpad--active"}),disabled:e({name:"general_launchpad--disabled"})}),"knowledge-base":e({enabled:e({name:"general_knowledge-base--enabled"}),hover:e({name:"general_knowledge-base--hover"}),active:e({name:"general_knowledge-base--active"}),disabled:e({name:"general_knowledge-base--disabled"})}),java:e({enabled:e({name:"general_java--enabled"}),hover:e({name:"general_java--hover"}),active:e({name:"general_java--active"}),disabled:e({name:"general_java--disabled"})}),informix:e({enabled:e({name:"general_informix--enabled"}),hover:e({name:"general_informix--hover"}),active:e({name:"general_informix--active"}),disabled:e({name:"general_informix--disabled"})}),generator:e({enabled:e({name:"general_generator--enabled"}),hover:e({name:"general_generator--hover"}),active:e({name:"general_generator--active"}),disabled:e({name:"general_generator--disabled"})}),"environment-select":e({enabled:e({name:"general_environment-select--enabled"}),hover:e({name:"general_environment-select--hover"}),active:e({name:"general_environment-select--active"}),disabled:e({name:"general_environment-select--disabled"})}),"environment-no-select":e({enabled:e({name:"general_environment-no-select--enabled"}),hover:e({name:"general_environment-no-select--hover"}),active:e({name:"general_environment-no-select--active"}),disabled:e({name:"general_environment-no-select--disabled"})}),db2:e({enabled:e({name:"general_db2--enabled"}),hover:e({name:"general_db2--hover"}),active:e({name:"general_db2--active"}),disabled:e({name:"general_db2--disabled"})}),datastore:e({enabled:e({name:"general_datastore--enabled"}),hover:e({name:"general_datastore--hover"}),active:e({name:"general_datastore--active"}),disabled:e({name:"general_datastore--disabled"})}),customization:e({enabled:e({name:"general_customization--enabled"}),hover:e({name:"general_customization--hover"}),active:e({name:"general_customization--active"}),disabled:e({name:"general_customization--disabled"})}),csharp:e({enabled:e({name:"general_csharp--enabled"}),hover:e({name:"general_csharp--hover"}),active:e({name:"general_csharp--active"}),disabled:e({name:"general_csharp--disabled"})}),apple:e({enabled:e({name:"general_apple--enabled"}),hover:e({name:"general_apple--hover"}),active:e({name:"general_apple--active"}),disabled:e({name:"general_apple--disabled"})}),angular:e({enabled:e({name:"general_angular--enabled"}),hover:e({name:"general_angular--hover"}),active:e({name:"general_angular--active"}),disabled:e({name:"general_angular--disabled"})}),android:e({enabled:e({name:"general_android--enabled"}),hover:e({name:"general_android--hover"}),active:e({name:"general_android--active"}),disabled:e({name:"general_android--disabled"})})}),"gemini-tools":e({warning:e({"on-surface":e({enabled:e({name:"gemini-tools_warning_on-surface--enabled"}),hover:e({name:"gemini-tools_warning_on-surface--hover"}),active:e({name:"gemini-tools_warning_on-surface--active"}),disabled:e({name:"gemini-tools_warning_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_warning_on-primary--enabled"}),hover:e({name:"gemini-tools_warning_on-primary--hover"}),active:e({name:"gemini-tools_warning_on-primary--active"}),disabled:e({name:"gemini-tools_warning_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_warning_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_warning_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_warning_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_warning_primary--enabled"}),hover:e({name:"gemini-tools_warning_primary--hover"}),active:e({name:"gemini-tools_warning_primary--active"}),disabled:e({name:"gemini-tools_warning_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_warning_neutral--enabled"}),hover:e({name:"gemini-tools_warning_neutral--hover"}),active:e({name:"gemini-tools_warning_neutral--active"}),disabled:e({name:"gemini-tools_warning_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_warning_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_warning_bright--enabled"})})}),success:e({"on-surface":e({enabled:e({name:"gemini-tools_success_on-surface--enabled"}),hover:e({name:"gemini-tools_success_on-surface--hover"}),active:e({name:"gemini-tools_success_on-surface--active"}),disabled:e({name:"gemini-tools_success_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_success_on-primary--enabled"}),hover:e({name:"gemini-tools_success_on-primary--hover"}),active:e({name:"gemini-tools_success_on-primary--active"}),disabled:e({name:"gemini-tools_success_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_success_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_success_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_success_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_success_primary--enabled"}),hover:e({name:"gemini-tools_success_primary--hover"}),active:e({name:"gemini-tools_success_primary--active"}),disabled:e({name:"gemini-tools_success_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_success_neutral--enabled"}),hover:e({name:"gemini-tools_success_neutral--hover"}),active:e({name:"gemini-tools_success_neutral--active"}),disabled:e({name:"gemini-tools_success_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_success_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_success_bright--enabled"})})}),"show-more-vertical":e({"on-surface":e({enabled:e({name:"gemini-tools_show-more-vertical_on-surface--enabled"}),hover:e({name:"gemini-tools_show-more-vertical_on-surface--hover"}),active:e({name:"gemini-tools_show-more-vertical_on-surface--active"}),disabled:e({name:"gemini-tools_show-more-vertical_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_show-more-vertical_on-primary--enabled"}),hover:e({name:"gemini-tools_show-more-vertical_on-primary--hover"}),active:e({name:"gemini-tools_show-more-vertical_on-primary--active"}),disabled:e({name:"gemini-tools_show-more-vertical_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_show-more-vertical_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_show-more-vertical_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_show-more-vertical_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_show-more-vertical_primary--enabled"}),hover:e({name:"gemini-tools_show-more-vertical_primary--hover"}),active:e({name:"gemini-tools_show-more-vertical_primary--active"}),disabled:e({name:"gemini-tools_show-more-vertical_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_show-more-vertical_neutral--enabled"}),hover:e({name:"gemini-tools_show-more-vertical_neutral--hover"}),active:e({name:"gemini-tools_show-more-vertical_neutral--active"}),disabled:e({name:"gemini-tools_show-more-vertical_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_show-more-vertical_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_show-more-vertical_bright--enabled"})})}),"show-more-horizontal":e({"on-surface":e({enabled:e({name:"gemini-tools_show-more-horizontal_on-surface--enabled"}),hover:e({name:"gemini-tools_show-more-horizontal_on-surface--hover"}),active:e({name:"gemini-tools_show-more-horizontal_on-surface--active"}),disabled:e({name:"gemini-tools_show-more-horizontal_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_show-more-horizontal_on-primary--enabled"}),hover:e({name:"gemini-tools_show-more-horizontal_on-primary--hover"}),active:e({name:"gemini-tools_show-more-horizontal_on-primary--active"}),disabled:e({name:"gemini-tools_show-more-horizontal_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_show-more-horizontal_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_show-more-horizontal_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_show-more-horizontal_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_show-more-horizontal_primary--enabled"}),hover:e({name:"gemini-tools_show-more-horizontal_primary--hover"}),active:e({name:"gemini-tools_show-more-horizontal_primary--active"}),disabled:e({name:"gemini-tools_show-more-horizontal_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_show-more-horizontal_neutral--enabled"}),hover:e({name:"gemini-tools_show-more-horizontal_neutral--hover"}),active:e({name:"gemini-tools_show-more-horizontal_neutral--active"}),disabled:e({name:"gemini-tools_show-more-horizontal_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_show-more-horizontal_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_show-more-horizontal_bright--enabled"})})}),share:e({"on-surface":e({enabled:e({name:"gemini-tools_share_on-surface--enabled"}),hover:e({name:"gemini-tools_share_on-surface--hover"}),active:e({name:"gemini-tools_share_on-surface--active"}),disabled:e({name:"gemini-tools_share_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_share_on-primary--enabled"}),hover:e({name:"gemini-tools_share_on-primary--hover"}),active:e({name:"gemini-tools_share_on-primary--active"}),disabled:e({name:"gemini-tools_share_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_share_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_share_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_share_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_share_primary--enabled"}),hover:e({name:"gemini-tools_share_primary--hover"}),active:e({name:"gemini-tools_share_primary--active"}),disabled:e({name:"gemini-tools_share_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_share_neutral--enabled"}),hover:e({name:"gemini-tools_share_neutral--hover"}),active:e({name:"gemini-tools_share_neutral--active"}),disabled:e({name:"gemini-tools_share_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_share_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_share_bright--enabled"})})}),settings:e({"on-surface":e({enabled:e({name:"gemini-tools_settings_on-surface--enabled"}),hover:e({name:"gemini-tools_settings_on-surface--hover"}),active:e({name:"gemini-tools_settings_on-surface--active"}),disabled:e({name:"gemini-tools_settings_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_settings_on-primary--enabled"}),hover:e({name:"gemini-tools_settings_on-primary--hover"}),active:e({name:"gemini-tools_settings_on-primary--active"}),disabled:e({name:"gemini-tools_settings_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_settings_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_settings_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_settings_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_settings_primary--enabled"}),hover:e({name:"gemini-tools_settings_primary--hover"}),active:e({name:"gemini-tools_settings_primary--active"}),disabled:e({name:"gemini-tools_settings_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_settings_neutral--enabled"}),hover:e({name:"gemini-tools_settings_neutral--hover"}),active:e({name:"gemini-tools_settings_neutral--active"}),disabled:e({name:"gemini-tools_settings_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_settings_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_settings_bright--enabled"})})}),search:e({"on-surface":e({enabled:e({name:"gemini-tools_search_on-surface--enabled"}),hover:e({name:"gemini-tools_search_on-surface--hover"}),active:e({name:"gemini-tools_search_on-surface--active"}),disabled:e({name:"gemini-tools_search_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_search_on-primary--enabled"}),hover:e({name:"gemini-tools_search_on-primary--hover"}),active:e({name:"gemini-tools_search_on-primary--active"}),disabled:e({name:"gemini-tools_search_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_search_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_search_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_search_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_search_primary--enabled"}),hover:e({name:"gemini-tools_search_primary--hover"}),active:e({name:"gemini-tools_search_primary--active"}),disabled:e({name:"gemini-tools_search_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_search_neutral--enabled"}),hover:e({name:"gemini-tools_search_neutral--hover"}),active:e({name:"gemini-tools_search_neutral--active"}),disabled:e({name:"gemini-tools_search_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_search_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_search_bright--enabled"})})}),reset:e({"on-surface":e({enabled:e({name:"gemini-tools_reset_on-surface--enabled"}),hover:e({name:"gemini-tools_reset_on-surface--hover"}),active:e({name:"gemini-tools_reset_on-surface--active"}),disabled:e({name:"gemini-tools_reset_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_reset_on-primary--enabled"}),hover:e({name:"gemini-tools_reset_on-primary--hover"}),active:e({name:"gemini-tools_reset_on-primary--active"}),disabled:e({name:"gemini-tools_reset_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_reset_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_reset_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_reset_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_reset_primary--enabled"}),hover:e({name:"gemini-tools_reset_primary--hover"}),active:e({name:"gemini-tools_reset_primary--active"}),disabled:e({name:"gemini-tools_reset_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_reset_neutral--enabled"}),hover:e({name:"gemini-tools_reset_neutral--hover"}),active:e({name:"gemini-tools_reset_neutral--active"}),disabled:e({name:"gemini-tools_reset_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_reset_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_reset_bright--enabled"})})}),"read-only":e({"on-surface":e({enabled:e({name:"gemini-tools_read-only_on-surface--enabled"}),hover:e({name:"gemini-tools_read-only_on-surface--hover"}),active:e({name:"gemini-tools_read-only_on-surface--active"}),disabled:e({name:"gemini-tools_read-only_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_read-only_on-primary--enabled"}),hover:e({name:"gemini-tools_read-only_on-primary--hover"}),active:e({name:"gemini-tools_read-only_on-primary--active"}),disabled:e({name:"gemini-tools_read-only_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_read-only_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_read-only_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_read-only_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_read-only_primary--enabled"}),hover:e({name:"gemini-tools_read-only_primary--hover"}),active:e({name:"gemini-tools_read-only_primary--active"}),disabled:e({name:"gemini-tools_read-only_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_read-only_neutral--enabled"}),hover:e({name:"gemini-tools_read-only_neutral--hover"}),active:e({name:"gemini-tools_read-only_neutral--active"}),disabled:e({name:"gemini-tools_read-only_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_read-only_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_read-only_bright--enabled"})})}),"open-window":e({"on-surface":e({enabled:e({name:"gemini-tools_open-window_on-surface--enabled"}),hover:e({name:"gemini-tools_open-window_on-surface--hover"}),active:e({name:"gemini-tools_open-window_on-surface--active"}),disabled:e({name:"gemini-tools_open-window_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_open-window_on-primary--enabled"}),hover:e({name:"gemini-tools_open-window_on-primary--hover"}),active:e({name:"gemini-tools_open-window_on-primary--active"}),disabled:e({name:"gemini-tools_open-window_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_open-window_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_open-window_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_open-window_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_open-window_primary--enabled"}),hover:e({name:"gemini-tools_open-window_primary--hover"}),active:e({name:"gemini-tools_open-window_primary--active"}),disabled:e({name:"gemini-tools_open-window_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_open-window_neutral--enabled"}),hover:e({name:"gemini-tools_open-window_neutral--hover"}),active:e({name:"gemini-tools_open-window_neutral--active"}),disabled:e({name:"gemini-tools_open-window_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_open-window_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_open-window_bright--enabled"})})}),notice:e({"on-surface":e({enabled:e({name:"gemini-tools_notice_on-surface--enabled"}),hover:e({name:"gemini-tools_notice_on-surface--hover"}),active:e({name:"gemini-tools_notice_on-surface--active"}),disabled:e({name:"gemini-tools_notice_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_notice_on-primary--enabled"}),hover:e({name:"gemini-tools_notice_on-primary--hover"}),active:e({name:"gemini-tools_notice_on-primary--active"}),disabled:e({name:"gemini-tools_notice_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_notice_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_notice_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_notice_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_notice_primary--enabled"}),hover:e({name:"gemini-tools_notice_primary--hover"}),active:e({name:"gemini-tools_notice_primary--active"}),disabled:e({name:"gemini-tools_notice_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_notice_neutral--enabled"}),hover:e({name:"gemini-tools_notice_neutral--hover"}),active:e({name:"gemini-tools_notice_neutral--active"}),disabled:e({name:"gemini-tools_notice_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_notice_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_notice_bright--enabled"})})}),"more-info":e({"on-surface":e({enabled:e({name:"gemini-tools_more-info_on-surface--enabled"}),hover:e({name:"gemini-tools_more-info_on-surface--hover"}),active:e({name:"gemini-tools_more-info_on-surface--active"}),disabled:e({name:"gemini-tools_more-info_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_more-info_on-primary--enabled"}),hover:e({name:"gemini-tools_more-info_on-primary--hover"}),active:e({name:"gemini-tools_more-info_on-primary--active"}),disabled:e({name:"gemini-tools_more-info_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_more-info_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_more-info_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_more-info_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_more-info_primary--enabled"}),hover:e({name:"gemini-tools_more-info_primary--hover"}),active:e({name:"gemini-tools_more-info_primary--active"}),disabled:e({name:"gemini-tools_more-info_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_more-info_neutral--enabled"}),hover:e({name:"gemini-tools_more-info_neutral--hover"}),active:e({name:"gemini-tools_more-info_neutral--active"}),disabled:e({name:"gemini-tools_more-info_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_more-info_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_more-info_bright--enabled"})})}),minus:e({"on-surface":e({enabled:e({name:"gemini-tools_minus_on-surface--enabled"}),hover:e({name:"gemini-tools_minus_on-surface--hover"}),active:e({name:"gemini-tools_minus_on-surface--active"}),disabled:e({name:"gemini-tools_minus_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_minus_on-primary--enabled"}),hover:e({name:"gemini-tools_minus_on-primary--hover"}),active:e({name:"gemini-tools_minus_on-primary--active"}),disabled:e({name:"gemini-tools_minus_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_minus_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_minus_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_minus_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_minus_primary--enabled"}),hover:e({name:"gemini-tools_minus_primary--hover"}),active:e({name:"gemini-tools_minus_primary--active"}),disabled:e({name:"gemini-tools_minus_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_minus_neutral--enabled"}),hover:e({name:"gemini-tools_minus_neutral--hover"}),active:e({name:"gemini-tools_minus_neutral--active"}),disabled:e({name:"gemini-tools_minus_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_minus_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_minus_bright--enabled"})})}),"minus-circle":e({"on-surface":e({enabled:e({name:"gemini-tools_minus-circle_on-surface--enabled"}),hover:e({name:"gemini-tools_minus-circle_on-surface--hover"}),active:e({name:"gemini-tools_minus-circle_on-surface--active"}),disabled:e({name:"gemini-tools_minus-circle_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_minus-circle_on-primary--enabled"}),hover:e({name:"gemini-tools_minus-circle_on-primary--hover"}),active:e({name:"gemini-tools_minus-circle_on-primary--active"}),disabled:e({name:"gemini-tools_minus-circle_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_minus-circle_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_minus-circle_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_minus-circle_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_minus-circle_primary--enabled"}),hover:e({name:"gemini-tools_minus-circle_primary--hover"}),active:e({name:"gemini-tools_minus-circle_primary--active"}),disabled:e({name:"gemini-tools_minus-circle_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_minus-circle_neutral--enabled"}),hover:e({name:"gemini-tools_minus-circle_neutral--hover"}),active:e({name:"gemini-tools_minus-circle_neutral--active"}),disabled:e({name:"gemini-tools_minus-circle_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_minus-circle_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_minus-circle_bright--enabled"})})}),"list-view":e({"on-surface":e({enabled:e({name:"gemini-tools_list-view_on-surface--enabled"}),hover:e({name:"gemini-tools_list-view_on-surface--hover"}),active:e({name:"gemini-tools_list-view_on-surface--active"}),disabled:e({name:"gemini-tools_list-view_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_list-view_on-primary--enabled"}),hover:e({name:"gemini-tools_list-view_on-primary--hover"}),active:e({name:"gemini-tools_list-view_on-primary--active"}),disabled:e({name:"gemini-tools_list-view_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_list-view_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_list-view_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_list-view_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_list-view_primary--enabled"}),hover:e({name:"gemini-tools_list-view_primary--hover"}),active:e({name:"gemini-tools_list-view_primary--active"}),disabled:e({name:"gemini-tools_list-view_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_list-view_neutral--enabled"}),hover:e({name:"gemini-tools_list-view_neutral--hover"}),active:e({name:"gemini-tools_list-view_neutral--active"}),disabled:e({name:"gemini-tools_list-view_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_list-view_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_list-view_bright--enabled"})})}),folder:e({"on-surface":e({enabled:e({name:"gemini-tools_folder_on-surface--enabled"}),hover:e({name:"gemini-tools_folder_on-surface--hover"}),active:e({name:"gemini-tools_folder_on-surface--active"}),disabled:e({name:"gemini-tools_folder_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_folder_on-primary--enabled"}),hover:e({name:"gemini-tools_folder_on-primary--hover"}),active:e({name:"gemini-tools_folder_on-primary--active"}),disabled:e({name:"gemini-tools_folder_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_folder_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_folder_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_folder_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_folder_primary--enabled"}),hover:e({name:"gemini-tools_folder_primary--hover"}),active:e({name:"gemini-tools_folder_primary--active"}),disabled:e({name:"gemini-tools_folder_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_folder_neutral--enabled"}),hover:e({name:"gemini-tools_folder_neutral--hover"}),active:e({name:"gemini-tools_folder_neutral--active"}),disabled:e({name:"gemini-tools_folder_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_folder_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_folder_bright--enabled"})})}),"flow-arrow":e({"on-surface":e({enabled:e({name:"gemini-tools_flow-arrow_on-surface--enabled"}),hover:e({name:"gemini-tools_flow-arrow_on-surface--hover"}),active:e({name:"gemini-tools_flow-arrow_on-surface--active"}),disabled:e({name:"gemini-tools_flow-arrow_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_flow-arrow_on-primary--enabled"}),hover:e({name:"gemini-tools_flow-arrow_on-primary--hover"}),active:e({name:"gemini-tools_flow-arrow_on-primary--active"}),disabled:e({name:"gemini-tools_flow-arrow_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_flow-arrow_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_flow-arrow_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_flow-arrow_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_flow-arrow_primary--enabled"}),hover:e({name:"gemini-tools_flow-arrow_primary--hover"}),active:e({name:"gemini-tools_flow-arrow_primary--active"}),disabled:e({name:"gemini-tools_flow-arrow_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_flow-arrow_neutral--enabled"}),hover:e({name:"gemini-tools_flow-arrow_neutral--hover"}),active:e({name:"gemini-tools_flow-arrow_neutral--active"}),disabled:e({name:"gemini-tools_flow-arrow_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_flow-arrow_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_flow-arrow_bright--enabled"})})}),file:e({"on-surface":e({enabled:e({name:"gemini-tools_file_on-surface--enabled"}),hover:e({name:"gemini-tools_file_on-surface--hover"}),active:e({name:"gemini-tools_file_on-surface--active"}),disabled:e({name:"gemini-tools_file_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_file_on-primary--enabled"}),hover:e({name:"gemini-tools_file_on-primary--hover"}),active:e({name:"gemini-tools_file_on-primary--active"}),disabled:e({name:"gemini-tools_file_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_file_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_file_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_file_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_file_primary--enabled"}),hover:e({name:"gemini-tools_file_primary--hover"}),active:e({name:"gemini-tools_file_primary--active"}),disabled:e({name:"gemini-tools_file_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_file_neutral--enabled"}),hover:e({name:"gemini-tools_file_neutral--hover"}),active:e({name:"gemini-tools_file_neutral--active"}),disabled:e({name:"gemini-tools_file_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_file_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_file_bright--enabled"})})}),error:e({"on-surface":e({enabled:e({name:"gemini-tools_error_on-surface--enabled"}),hover:e({name:"gemini-tools_error_on-surface--hover"}),active:e({name:"gemini-tools_error_on-surface--active"}),disabled:e({name:"gemini-tools_error_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_error_on-primary--enabled"}),hover:e({name:"gemini-tools_error_on-primary--hover"}),active:e({name:"gemini-tools_error_on-primary--active"}),disabled:e({name:"gemini-tools_error_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_error_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_error_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_error_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_error_primary--enabled"}),hover:e({name:"gemini-tools_error_primary--hover"}),active:e({name:"gemini-tools_error_primary--active"}),disabled:e({name:"gemini-tools_error_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_error_neutral--enabled"}),hover:e({name:"gemini-tools_error_neutral--hover"}),active:e({name:"gemini-tools_error_neutral--active"}),disabled:e({name:"gemini-tools_error_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_error_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_error_bright--enabled"})})}),edit:e({"on-surface":e({enabled:e({name:"gemini-tools_edit_on-surface--enabled"}),hover:e({name:"gemini-tools_edit_on-surface--hover"}),active:e({name:"gemini-tools_edit_on-surface--active"}),disabled:e({name:"gemini-tools_edit_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_edit_on-primary--enabled"}),hover:e({name:"gemini-tools_edit_on-primary--hover"}),active:e({name:"gemini-tools_edit_on-primary--active"}),disabled:e({name:"gemini-tools_edit_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_edit_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_edit_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_edit_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_edit_primary--enabled"}),hover:e({name:"gemini-tools_edit_primary--hover"}),active:e({name:"gemini-tools_edit_primary--active"}),disabled:e({name:"gemini-tools_edit_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_edit_neutral--enabled"}),hover:e({name:"gemini-tools_edit_neutral--hover"}),active:e({name:"gemini-tools_edit_neutral--active"}),disabled:e({name:"gemini-tools_edit_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_edit_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_edit_bright--enabled"})})}),"edit-wand":e({"on-surface":e({enabled:e({name:"gemini-tools_edit-wand_on-surface--enabled"}),hover:e({name:"gemini-tools_edit-wand_on-surface--hover"}),active:e({name:"gemini-tools_edit-wand_on-surface--active"}),disabled:e({name:"gemini-tools_edit-wand_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_edit-wand_on-primary--enabled"}),hover:e({name:"gemini-tools_edit-wand_on-primary--hover"}),active:e({name:"gemini-tools_edit-wand_on-primary--active"}),disabled:e({name:"gemini-tools_edit-wand_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_edit-wand_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_edit-wand_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_edit-wand_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_edit-wand_primary--enabled"}),hover:e({name:"gemini-tools_edit-wand_primary--hover"}),active:e({name:"gemini-tools_edit-wand_primary--active"}),disabled:e({name:"gemini-tools_edit-wand_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_edit-wand_neutral--enabled"}),hover:e({name:"gemini-tools_edit-wand_neutral--hover"}),active:e({name:"gemini-tools_edit-wand_neutral--active"}),disabled:e({name:"gemini-tools_edit-wand_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_edit-wand_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_edit-wand_bright--enabled"})})}),duplicate:e({"on-surface":e({enabled:e({name:"gemini-tools_duplicate_on-surface--enabled"}),hover:e({name:"gemini-tools_duplicate_on-surface--hover"}),active:e({name:"gemini-tools_duplicate_on-surface--active"}),disabled:e({name:"gemini-tools_duplicate_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_duplicate_on-primary--enabled"}),hover:e({name:"gemini-tools_duplicate_on-primary--hover"}),active:e({name:"gemini-tools_duplicate_on-primary--active"}),disabled:e({name:"gemini-tools_duplicate_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_duplicate_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_duplicate_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_duplicate_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_duplicate_primary--enabled"}),hover:e({name:"gemini-tools_duplicate_primary--hover"}),active:e({name:"gemini-tools_duplicate_primary--active"}),disabled:e({name:"gemini-tools_duplicate_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_duplicate_neutral--enabled"}),hover:e({name:"gemini-tools_duplicate_neutral--hover"}),active:e({name:"gemini-tools_duplicate_neutral--active"}),disabled:e({name:"gemini-tools_duplicate_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_duplicate_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_duplicate_bright--enabled"})})}),download:e({"on-surface":e({enabled:e({name:"gemini-tools_download_on-surface--enabled"}),hover:e({name:"gemini-tools_download_on-surface--hover"}),active:e({name:"gemini-tools_download_on-surface--active"}),disabled:e({name:"gemini-tools_download_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_download_on-primary--enabled"}),hover:e({name:"gemini-tools_download_on-primary--hover"}),active:e({name:"gemini-tools_download_on-primary--active"}),disabled:e({name:"gemini-tools_download_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_download_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_download_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_download_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_download_primary--enabled"}),hover:e({name:"gemini-tools_download_primary--hover"}),active:e({name:"gemini-tools_download_primary--active"}),disabled:e({name:"gemini-tools_download_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_download_neutral--enabled"}),hover:e({name:"gemini-tools_download_neutral--hover"}),active:e({name:"gemini-tools_download_neutral--active"}),disabled:e({name:"gemini-tools_download_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_download_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_download_bright--enabled"})})}),deleted:e({"on-surface":e({enabled:e({name:"gemini-tools_deleted_on-surface--enabled"}),hover:e({name:"gemini-tools_deleted_on-surface--hover"}),active:e({name:"gemini-tools_deleted_on-surface--active"}),disabled:e({name:"gemini-tools_deleted_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_deleted_on-primary--enabled"}),hover:e({name:"gemini-tools_deleted_on-primary--hover"}),active:e({name:"gemini-tools_deleted_on-primary--active"}),disabled:e({name:"gemini-tools_deleted_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_deleted_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_deleted_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_deleted_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_deleted_primary--enabled"}),hover:e({name:"gemini-tools_deleted_primary--hover"}),active:e({name:"gemini-tools_deleted_primary--active"}),disabled:e({name:"gemini-tools_deleted_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_deleted_neutral--enabled"}),hover:e({name:"gemini-tools_deleted_neutral--hover"}),active:e({name:"gemini-tools_deleted_neutral--active"}),disabled:e({name:"gemini-tools_deleted_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_deleted_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_deleted_bright--enabled"})})}),delete:e({"on-surface":e({enabled:e({name:"gemini-tools_delete_on-surface--enabled"}),hover:e({name:"gemini-tools_delete_on-surface--hover"}),active:e({name:"gemini-tools_delete_on-surface--active"}),disabled:e({name:"gemini-tools_delete_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_delete_on-primary--enabled"}),hover:e({name:"gemini-tools_delete_on-primary--hover"}),active:e({name:"gemini-tools_delete_on-primary--active"}),disabled:e({name:"gemini-tools_delete_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_delete_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_delete_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_delete_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_delete_primary--enabled"}),hover:e({name:"gemini-tools_delete_primary--hover"}),active:e({name:"gemini-tools_delete_primary--active"}),disabled:e({name:"gemini-tools_delete_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_delete_neutral--enabled"}),hover:e({name:"gemini-tools_delete_neutral--hover"}),active:e({name:"gemini-tools_delete_neutral--active"}),disabled:e({name:"gemini-tools_delete_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_delete_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_delete_bright--enabled"})})}),"data-provider":e({"on-surface":e({enabled:e({name:"gemini-tools_data-provider_on-surface--enabled"}),hover:e({name:"gemini-tools_data-provider_on-surface--hover"}),active:e({name:"gemini-tools_data-provider_on-surface--active"}),disabled:e({name:"gemini-tools_data-provider_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_data-provider_on-primary--enabled"}),hover:e({name:"gemini-tools_data-provider_on-primary--hover"}),active:e({name:"gemini-tools_data-provider_on-primary--active"}),disabled:e({name:"gemini-tools_data-provider_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_data-provider_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_data-provider_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_data-provider_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_data-provider_primary--enabled"}),hover:e({name:"gemini-tools_data-provider_primary--hover"}),active:e({name:"gemini-tools_data-provider_primary--active"}),disabled:e({name:"gemini-tools_data-provider_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_data-provider_neutral--enabled"}),hover:e({name:"gemini-tools_data-provider_neutral--hover"}),active:e({name:"gemini-tools_data-provider_neutral--active"}),disabled:e({name:"gemini-tools_data-provider_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_data-provider_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_data-provider_bright--enabled"})})}),copy:e({"on-surface":e({enabled:e({name:"gemini-tools_copy_on-surface--enabled"}),hover:e({name:"gemini-tools_copy_on-surface--hover"}),active:e({name:"gemini-tools_copy_on-surface--active"}),disabled:e({name:"gemini-tools_copy_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_copy_on-primary--enabled"}),hover:e({name:"gemini-tools_copy_on-primary--hover"}),active:e({name:"gemini-tools_copy_on-primary--active"}),disabled:e({name:"gemini-tools_copy_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_copy_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_copy_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_copy_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_copy_primary--enabled"}),hover:e({name:"gemini-tools_copy_primary--hover"}),active:e({name:"gemini-tools_copy_primary--active"}),disabled:e({name:"gemini-tools_copy_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_copy_neutral--enabled"}),hover:e({name:"gemini-tools_copy_neutral--hover"}),active:e({name:"gemini-tools_copy_neutral--active"}),disabled:e({name:"gemini-tools_copy_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_copy_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_copy_bright--enabled"})})}),"copy-to-clipboard":e({"on-surface":e({enabled:e({name:"gemini-tools_copy-to-clipboard_on-surface--enabled"}),hover:e({name:"gemini-tools_copy-to-clipboard_on-surface--hover"}),active:e({name:"gemini-tools_copy-to-clipboard_on-surface--active"}),disabled:e({name:"gemini-tools_copy-to-clipboard_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_copy-to-clipboard_on-primary--enabled"}),hover:e({name:"gemini-tools_copy-to-clipboard_on-primary--hover"}),active:e({name:"gemini-tools_copy-to-clipboard_on-primary--active"}),disabled:e({name:"gemini-tools_copy-to-clipboard_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_copy-to-clipboard_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_copy-to-clipboard_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_copy-to-clipboard_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_copy-to-clipboard_primary--enabled"}),hover:e({name:"gemini-tools_copy-to-clipboard_primary--hover"}),active:e({name:"gemini-tools_copy-to-clipboard_primary--active"}),disabled:e({name:"gemini-tools_copy-to-clipboard_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_copy-to-clipboard_neutral--enabled"}),hover:e({name:"gemini-tools_copy-to-clipboard_neutral--hover"}),active:e({name:"gemini-tools_copy-to-clipboard_neutral--active"}),disabled:e({name:"gemini-tools_copy-to-clipboard_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_copy-to-clipboard_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_copy-to-clipboard_bright--enabled"})})}),"color-picker":e({"on-surface":e({enabled:e({name:"gemini-tools_color-picker_on-surface--enabled"}),hover:e({name:"gemini-tools_color-picker_on-surface--hover"}),active:e({name:"gemini-tools_color-picker_on-surface--active"}),disabled:e({name:"gemini-tools_color-picker_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_color-picker_on-primary--enabled"}),hover:e({name:"gemini-tools_color-picker_on-primary--hover"}),active:e({name:"gemini-tools_color-picker_on-primary--active"}),disabled:e({name:"gemini-tools_color-picker_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_color-picker_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_color-picker_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_color-picker_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_color-picker_primary--enabled"}),hover:e({name:"gemini-tools_color-picker_primary--hover"}),active:e({name:"gemini-tools_color-picker_primary--active"}),disabled:e({name:"gemini-tools_color-picker_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_color-picker_neutral--enabled"}),hover:e({name:"gemini-tools_color-picker_neutral--hover"}),active:e({name:"gemini-tools_color-picker_neutral--active"}),disabled:e({name:"gemini-tools_color-picker_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_color-picker_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_color-picker_bright--enabled"})})}),close:e({"on-surface":e({enabled:e({name:"gemini-tools_close_on-surface--enabled"}),hover:e({name:"gemini-tools_close_on-surface--hover"}),active:e({name:"gemini-tools_close_on-surface--active"}),disabled:e({name:"gemini-tools_close_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_close_on-primary--enabled"}),hover:e({name:"gemini-tools_close_on-primary--hover"}),active:e({name:"gemini-tools_close_on-primary--active"}),disabled:e({name:"gemini-tools_close_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_close_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_close_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_close_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_close_primary--enabled"}),hover:e({name:"gemini-tools_close_primary--hover"}),active:e({name:"gemini-tools_close_primary--active"}),disabled:e({name:"gemini-tools_close_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_close_neutral--enabled"}),hover:e({name:"gemini-tools_close_neutral--hover"}),active:e({name:"gemini-tools_close_neutral--active"}),disabled:e({name:"gemini-tools_close_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_close_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_close_bright--enabled"})})}),"category-ungroup":e({"on-surface":e({enabled:e({name:"gemini-tools_category-ungroup_on-surface--enabled"}),hover:e({name:"gemini-tools_category-ungroup_on-surface--hover"}),active:e({name:"gemini-tools_category-ungroup_on-surface--active"}),disabled:e({name:"gemini-tools_category-ungroup_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_category-ungroup_on-primary--enabled"}),hover:e({name:"gemini-tools_category-ungroup_on-primary--hover"}),active:e({name:"gemini-tools_category-ungroup_on-primary--active"}),disabled:e({name:"gemini-tools_category-ungroup_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_category-ungroup_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_category-ungroup_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_category-ungroup_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_category-ungroup_primary--enabled"}),hover:e({name:"gemini-tools_category-ungroup_primary--hover"}),active:e({name:"gemini-tools_category-ungroup_primary--active"}),disabled:e({name:"gemini-tools_category-ungroup_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_category-ungroup_neutral--enabled"}),hover:e({name:"gemini-tools_category-ungroup_neutral--hover"}),active:e({name:"gemini-tools_category-ungroup_neutral--active"}),disabled:e({name:"gemini-tools_category-ungroup_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_category-ungroup_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_category-ungroup_bright--enabled"})})}),"category-group":e({"on-surface":e({enabled:e({name:"gemini-tools_category-group_on-surface--enabled"}),hover:e({name:"gemini-tools_category-group_on-surface--hover"}),active:e({name:"gemini-tools_category-group_on-surface--active"}),disabled:e({name:"gemini-tools_category-group_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_category-group_on-primary--enabled"}),hover:e({name:"gemini-tools_category-group_on-primary--hover"}),active:e({name:"gemini-tools_category-group_on-primary--active"}),disabled:e({name:"gemini-tools_category-group_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_category-group_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_category-group_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_category-group_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_category-group_primary--enabled"}),hover:e({name:"gemini-tools_category-group_primary--hover"}),active:e({name:"gemini-tools_category-group_primary--active"}),disabled:e({name:"gemini-tools_category-group_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_category-group_neutral--enabled"}),hover:e({name:"gemini-tools_category-group_neutral--hover"}),active:e({name:"gemini-tools_category-group_neutral--active"}),disabled:e({name:"gemini-tools_category-group_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_category-group_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_category-group_bright--enabled"})})}),"card-view":e({"on-surface":e({enabled:e({name:"gemini-tools_card-view_on-surface--enabled"}),hover:e({name:"gemini-tools_card-view_on-surface--hover"}),active:e({name:"gemini-tools_card-view_on-surface--active"}),disabled:e({name:"gemini-tools_card-view_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_card-view_on-primary--enabled"}),hover:e({name:"gemini-tools_card-view_on-primary--hover"}),active:e({name:"gemini-tools_card-view_on-primary--active"}),disabled:e({name:"gemini-tools_card-view_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_card-view_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_card-view_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_card-view_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_card-view_primary--enabled"}),hover:e({name:"gemini-tools_card-view_primary--hover"}),active:e({name:"gemini-tools_card-view_primary--active"}),disabled:e({name:"gemini-tools_card-view_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_card-view_neutral--enabled"}),hover:e({name:"gemini-tools_card-view_neutral--hover"}),active:e({name:"gemini-tools_card-view_neutral--active"}),disabled:e({name:"gemini-tools_card-view_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_card-view_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_card-view_bright--enabled"})})}),add:e({"on-surface":e({enabled:e({name:"gemini-tools_add_on-surface--enabled"}),hover:e({name:"gemini-tools_add_on-surface--hover"}),active:e({name:"gemini-tools_add_on-surface--active"}),disabled:e({name:"gemini-tools_add_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_add_on-primary--enabled"}),hover:e({name:"gemini-tools_add_on-primary--hover"}),active:e({name:"gemini-tools_add_on-primary--active"}),disabled:e({name:"gemini-tools_add_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_add_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_add_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_add_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_add_primary--enabled"}),hover:e({name:"gemini-tools_add_primary--hover"}),active:e({name:"gemini-tools_add_primary--active"}),disabled:e({name:"gemini-tools_add_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_add_neutral--enabled"}),hover:e({name:"gemini-tools_add_neutral--hover"}),active:e({name:"gemini-tools_add_neutral--active"}),disabled:e({name:"gemini-tools_add_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_add_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_add_bright--enabled"})})}),"add-circle":e({"on-surface":e({enabled:e({name:"gemini-tools_add-circle_on-surface--enabled"}),hover:e({name:"gemini-tools_add-circle_on-surface--hover"}),active:e({name:"gemini-tools_add-circle_on-surface--active"}),disabled:e({name:"gemini-tools_add-circle_on-surface--disabled"})}),"on-primary":e({enabled:e({name:"gemini-tools_add-circle_on-primary--enabled"}),hover:e({name:"gemini-tools_add-circle_on-primary--hover"}),active:e({name:"gemini-tools_add-circle_on-primary--active"}),disabled:e({name:"gemini-tools_add-circle_on-primary--disabled"})}),"on-disabled":e({enabled:e({name:"gemini-tools_add-circle_on-disabled--enabled"})}),"on-message":e({enabled:e({name:"gemini-tools_add-circle_on-message--enabled"})}),"on-elevation":e({enabled:e({name:"gemini-tools_add-circle_on-elevation--enabled"})}),primary:e({enabled:e({name:"gemini-tools_add-circle_primary--enabled"}),hover:e({name:"gemini-tools_add-circle_primary--hover"}),active:e({name:"gemini-tools_add-circle_primary--active"}),disabled:e({name:"gemini-tools_add-circle_primary--disabled"})}),neutral:e({enabled:e({name:"gemini-tools_add-circle_neutral--enabled"}),hover:e({name:"gemini-tools_add-circle_neutral--hover"}),active:e({name:"gemini-tools_add-circle_neutral--active"}),disabled:e({name:"gemini-tools_add-circle_neutral--disabled"})}),highlighted:e({enabled:e({name:"gemini-tools_add-circle_highlighted--enabled"})}),bright:e({enabled:e({name:"gemini-tools_add-circle_bright--enabled"})})})}),"editing-structures":e({"user-index":e({enabled:e({name:"editing-structures_user-index--enabled"}),hover:e({name:"editing-structures_user-index--hover"}),active:e({name:"editing-structures_user-index--active"}),disabled:e({name:"editing-structures_user-index--disabled"})}),"system-index":e({enabled:e({name:"editing-structures_system-index--enabled"}),hover:e({name:"editing-structures_system-index--hover"}),active:e({name:"editing-structures_system-index--active"}),disabled:e({name:"editing-structures_system-index--disabled"})}),"redundant-attribute":e({enabled:e({name:"editing-structures_redundant-attribute--enabled"}),hover:e({name:"editing-structures_redundant-attribute--hover"}),active:e({name:"editing-structures_redundant-attribute--active"}),disabled:e({name:"editing-structures_redundant-attribute--disabled"})}),platforms:e({enabled:e({name:"editing-structures_platforms--enabled"}),hover:e({name:"editing-structures_platforms--hover"}),active:e({name:"editing-structures_platforms--active"}),disabled:e({name:"editing-structures_platforms--disabled"})}),"logical-attributes":e({enabled:e({name:"editing-structures_logical-attributes--enabled"}),hover:e({name:"editing-structures_logical-attributes--hover"}),active:e({name:"editing-structures_logical-attributes--active"}),disabled:e({name:"editing-structures_logical-attributes--disabled"})}),"formula-redundant":e({enabled:e({name:"editing-structures_formula-redundant--enabled"}),hover:e({name:"editing-structures_formula-redundant--hover"}),active:e({name:"editing-structures_formula-redundant--active"}),disabled:e({name:"editing-structures_formula-redundant--disabled"})}),default:e({enabled:e({name:"editing-structures_default--enabled"}),hover:e({name:"editing-structures_default--hover"}),active:e({name:"editing-structures_default--active"}),disabled:e({name:"editing-structures_default--disabled"})}),"attribute-key":e({enabled:e({name:"editing-structures_attribute-key--enabled"}),hover:e({name:"editing-structures_attribute-key--hover"}),active:e({name:"editing-structures_attribute-key--active"}),disabled:e({name:"editing-structures_attribute-key--disabled"})}),"attribute-formula":e({enabled:e({name:"editing-structures_attribute-formula--enabled"}),hover:e({name:"editing-structures_attribute-formula--hover"}),active:e({name:"editing-structures_attribute-formula--active"}),disabled:e({name:"editing-structures_attribute-formula--disabled"})}),"attribute-description":e({enabled:e({name:"editing-structures_attribute-description--enabled"}),hover:e({name:"editing-structures_attribute-description--hover"}),active:e({name:"editing-structures_attribute-description--active"}),disabled:e({name:"editing-structures_attribute-description--disabled"})})}),controls:e({variable:e({enabled:e({name:"controls_variable--enabled"}),hover:e({name:"controls_variable--hover"}),active:e({name:"controls_variable--active"}),disabled:e({name:"controls_variable--disabled"})}),treeview:e({enabled:e({name:"controls_treeview--enabled"}),hover:e({name:"controls_treeview--hover"}),active:e({name:"controls_treeview--active"}),disabled:e({name:"controls_treeview--disabled"})}),"text-block":e({enabled:e({name:"controls_text-block--enabled"}),hover:e({name:"controls_text-block--hover"}),active:e({name:"controls_text-block--active"}),disabled:e({name:"controls_text-block--disabled"})}),"tag-html":e({enabled:e({name:"controls_tag-html--enabled"}),hover:e({name:"controls_tag-html--hover"}),active:e({name:"controls_tag-html--active"}),disabled:e({name:"controls_tag-html--disabled"})}),table:e({enabled:e({name:"controls_table--enabled"}),hover:e({name:"controls_table--hover"}),active:e({name:"controls_table--active"}),disabled:e({name:"controls_table--disabled"})}),"table-row":e({enabled:e({name:"controls_table-row--enabled"}),hover:e({name:"controls_table-row--hover"}),active:e({name:"controls_table-row--active"}),disabled:e({name:"controls_table-row--disabled"})}),"table-column":e({enabled:e({name:"controls_table-column--enabled"}),hover:e({name:"controls_table-column--hover"}),active:e({name:"controls_table-column--active"}),disabled:e({name:"controls_table-column--disabled"})}),"table-cell":e({enabled:e({name:"controls_table-cell--enabled"}),hover:e({name:"controls_table-cell--hover"}),active:e({name:"controls_table-cell--active"}),disabled:e({name:"controls_table-cell--disabled"})}),tab:e({enabled:e({name:"controls_tab--enabled"}),hover:e({name:"controls_tab--hover"}),active:e({name:"controls_tab--active"}),disabled:e({name:"controls_tab--disabled"})}),"tab-page":e({enabled:e({name:"controls_tab-page--enabled"}),hover:e({name:"controls_tab-page--hover"}),active:e({name:"controls_tab-page--active"}),disabled:e({name:"controls_tab-page--disabled"})}),snippet:e({enabled:e({name:"controls_snippet--enabled"}),hover:e({name:"controls_snippet--hover"}),active:e({name:"controls_snippet--active"}),disabled:e({name:"controls_snippet--disabled"})}),"smart-table":e({enabled:e({name:"controls_smart-table--enabled"}),hover:e({name:"controls_smart-table--hover"}),active:e({name:"controls_smart-table--active"}),disabled:e({name:"controls_smart-table--disabled"})}),section:e({enabled:e({name:"controls_section--enabled"}),hover:e({name:"controls_section--hover"}),active:e({name:"controls_section--active"}),disabled:e({name:"controls_section--disabled"})}),"pop-up":e({enabled:e({name:"controls_pop-up--enabled"}),hover:e({name:"controls_pop-up--hover"}),active:e({name:"controls_pop-up--active"}),disabled:e({name:"controls_pop-up--disabled"})}),messages:e({enabled:e({name:"controls_messages--enabled"}),hover:e({name:"controls_messages--hover"}),active:e({name:"controls_messages--active"}),disabled:e({name:"controls_messages--disabled"})}),"media-player":e({enabled:e({name:"controls_media-player--enabled"}),hover:e({name:"controls_media-player--hover"}),active:e({name:"controls_media-player--active"}),disabled:e({name:"controls_media-player--disabled"})}),"id-html":e({enabled:e({name:"controls_id-html--enabled"}),hover:e({name:"controls_id-html--hover"}),active:e({name:"controls_id-html--active"}),disabled:e({name:"controls_id-html--disabled"})}),hyperlink:e({enabled:e({name:"controls_hyperlink--enabled"}),hover:e({name:"controls_hyperlink--hover"}),active:e({name:"controls_hyperlink--active"}),disabled:e({name:"controls_hyperlink--disabled"})}),html:e({enabled:e({name:"controls_html--enabled"}),hover:e({name:"controls_html--hover"}),active:e({name:"controls_html--active"}),disabled:e({name:"controls_html--disabled"})}),"horizontal-line":e({enabled:e({name:"controls_horizontal-line--enabled"}),hover:e({name:"controls_horizontal-line--hover"}),active:e({name:"controls_horizontal-line--active"}),disabled:e({name:"controls_horizontal-line--disabled"})}),"history-manager":e({enabled:e({name:"controls_history-manager--enabled"}),hover:e({name:"controls_history-manager--hover"}),active:e({name:"controls_history-manager--active"}),disabled:e({name:"controls_history-manager--disabled"})}),"gx-scheduler":e({enabled:e({name:"controls_gx-scheduler--enabled"}),hover:e({name:"controls_gx-scheduler--hover"}),active:e({name:"controls_gx-scheduler--active"}),disabled:e({name:"controls_gx-scheduler--disabled"})}),group:e({enabled:e({name:"controls_group--enabled"}),hover:e({name:"controls_group--hover"}),active:e({name:"controls_group--active"}),disabled:e({name:"controls_group--disabled"})}),grid:e({enabled:e({name:"controls_grid--enabled"}),hover:e({name:"controls_grid--hover"}),active:e({name:"controls_grid--active"}),disabled:e({name:"controls_grid--disabled"})}),"google-geomap":e({enabled:e({name:"controls_google-geomap--enabled"}),hover:e({name:"controls_google-geomap--hover"}),active:e({name:"controls_google-geomap--active"}),disabled:e({name:"controls_google-geomap--disabled"})}),"google-charts":e({enabled:e({name:"controls_google-charts--enabled"}),hover:e({name:"controls_google-charts--hover"}),active:e({name:"controls_google-charts--active"}),disabled:e({name:"controls_google-charts--disabled"})}),"google-annotated-tmeline":e({enabled:e({name:"controls_google-annotated-tmeline--enabled"}),hover:e({name:"controls_google-annotated-tmeline--hover"}),active:e({name:"controls_google-annotated-tmeline--active"}),disabled:e({name:"controls_google-annotated-tmeline--disabled"})}),"google-analytics":e({enabled:e({name:"controls_google-analytics--enabled"}),hover:e({name:"controls_google-analytics--hover"}),active:e({name:"controls_google-analytics--active"}),disabled:e({name:"controls_google-analytics--disabled"})}),"free-style-grid":e({enabled:e({name:"controls_free-style-grid--enabled"}),hover:e({name:"controls_free-style-grid--hover"}),active:e({name:"controls_free-style-grid--active"}),disabled:e({name:"controls_free-style-grid--disabled"})}),font:e({enabled:e({name:"controls_font--enabled"}),hover:e({name:"controls_font--hover"}),active:e({name:"controls_font--active"}),disabled:e({name:"controls_font--disabled"})}),flex:e({enabled:e({name:"controls_flex--enabled"}),hover:e({name:"controls_flex--hover"}),active:e({name:"controls_flex--active"}),disabled:e({name:"controls_flex--disabled"})}),"file-upload":e({enabled:e({name:"controls_file-upload--enabled"}),hover:e({name:"controls_file-upload--hover"}),active:e({name:"controls_file-upload--active"}),disabled:e({name:"controls_file-upload--disabled"})}),"error-viewer":e({enabled:e({name:"controls_error-viewer--enabled"}),hover:e({name:"controls_error-viewer--hover"}),active:e({name:"controls_error-viewer--active"}),disabled:e({name:"controls_error-viewer--disabled"})}),"embedded-page":e({enabled:e({name:"controls_embedded-page--enabled"}),hover:e({name:"controls_embedded-page--hover"}),active:e({name:"controls_embedded-page--active"}),disabled:e({name:"controls_embedded-page--disabled"})}),default:e({enabled:e({name:"controls_default--enabled"}),hover:e({name:"controls_default--hover"}),active:e({name:"controls_default--active"}),disabled:e({name:"controls_default--disabled"})}),component:e({enabled:e({name:"controls_component--enabled"}),hover:e({name:"controls_component--hover"}),active:e({name:"controls_component--active"}),disabled:e({name:"controls_component--disabled"})}),"class-html":e({enabled:e({name:"controls_class-html--enabled"}),hover:e({name:"controls_class-html--hover"}),active:e({name:"controls_class-html--active"}),disabled:e({name:"controls_class-html--disabled"})}),canva:e({enabled:e({name:"controls_canva--enabled"}),hover:e({name:"controls_canva--hover"}),active:e({name:"controls_canva--active"}),disabled:e({name:"controls_canva--disabled"})}),"call-target":e({enabled:e({name:"controls_call-target--enabled"}),hover:e({name:"controls_call-target--hover"}),active:e({name:"controls_call-target--active"}),disabled:e({name:"controls_call-target--disabled"})}),button:e({enabled:e({name:"controls_button--enabled"}),hover:e({name:"controls_button--hover"}),active:e({name:"controls_button--active"}),disabled:e({name:"controls_button--disabled"})}),"button-group":e({enabled:e({name:"controls_button-group--enabled"}),hover:e({name:"controls_button-group--hover"}),active:e({name:"controls_button-group--active"}),disabled:e({name:"controls_button-group--disabled"})}),"action-group":e({enabled:e({name:"controls_action-group--enabled"}),hover:e({name:"controls_action-group--hover"}),active:e({name:"controls_action-group--active"}),disabled:e({name:"controls_action-group--disabled"})}),"action-group-item":e({enabled:e({name:"controls_action-group-item--enabled"}),hover:e({name:"controls_action-group-item--hover"}),active:e({name:"controls_action-group-item--active"}),disabled:e({name:"controls_action-group-item--disabled"})})}),bpm:e({"timer-6":e({neutral:e({enabled:e({name:"bpm_timer-6_neutral--enabled"}),hover:e({name:"bpm_timer-6_neutral--hover"}),active:e({name:"bpm_timer-6_neutral--active"}),disabled:e({name:"bpm_timer-6_neutral--disabled"})})}),"timer-5":e({neutral:e({enabled:e({name:"bpm_timer-5_neutral--enabled"}),hover:e({name:"bpm_timer-5_neutral--hover"}),active:e({name:"bpm_timer-5_neutral--active"}),disabled:e({name:"bpm_timer-5_neutral--disabled"})})}),"timer-2":e({neutral:e({enabled:e({name:"bpm_timer-2_neutral--enabled"}),hover:e({name:"bpm_timer-2_neutral--hover"}),active:e({name:"bpm_timer-2_neutral--active"}),disabled:e({name:"bpm_timer-2_neutral--disabled"})})}),"timer-1":e({neutral:e({enabled:e({name:"bpm_timer-1_neutral--enabled"}),hover:e({name:"bpm_timer-1_neutral--hover"}),active:e({name:"bpm_timer-1_neutral--active"}),disabled:e({name:"bpm_timer-1_neutral--disabled"})})}),"terminale-4":e({neutral:e({enabled:e({name:"bpm_terminale-4_neutral--enabled"}),hover:e({name:"bpm_terminale-4_neutral--hover"}),active:e({name:"bpm_terminale-4_neutral--active"}),disabled:e({name:"bpm_terminale-4_neutral--disabled"})})}),tasks:e({neutral:e({enabled:e({name:"bpm_tasks_neutral--enabled"}),hover:e({name:"bpm_tasks_neutral--hover"}),active:e({name:"bpm_tasks_neutral--active"}),disabled:e({name:"bpm_tasks_neutral--disabled"})})}),subprocess:e({neutral:e({enabled:e({name:"bpm_subprocess_neutral--enabled"}),hover:e({name:"bpm_subprocess_neutral--hover"}),active:e({name:"bpm_subprocess_neutral--active"}),disabled:e({name:"bpm_subprocess_neutral--disabled"})})}),"signal-6":e({neutral:e({enabled:e({name:"bpm_signal-6_neutral--enabled"}),hover:e({name:"bpm_signal-6_neutral--hover"}),active:e({name:"bpm_signal-6_neutral--active"}),disabled:e({name:"bpm_signal-6_neutral--disabled"})})}),"signal-5":e({neutral:e({enabled:e({name:"bpm_signal-5_neutral--enabled"}),hover:e({name:"bpm_signal-5_neutral--hover"}),active:e({name:"bpm_signal-5_neutral--active"}),disabled:e({name:"bpm_signal-5_neutral--disabled"})})}),"signal-4":e({neutral:e({enabled:e({name:"bpm_signal-4_neutral--enabled"}),hover:e({name:"bpm_signal-4_neutral--hover"}),active:e({name:"bpm_signal-4_neutral--active"}),disabled:e({name:"bpm_signal-4_neutral--disabled"})})}),"signal-3":e({neutral:e({enabled:e({name:"bpm_signal-3_neutral--enabled"}),hover:e({name:"bpm_signal-3_neutral--hover"}),active:e({name:"bpm_signal-3_neutral--active"}),disabled:e({name:"bpm_signal-3_neutral--disabled"})})}),"signal-2":e({neutral:e({enabled:e({name:"bpm_signal-2_neutral--enabled"}),hover:e({name:"bpm_signal-2_neutral--hover"}),active:e({name:"bpm_signal-2_neutral--active"}),disabled:e({name:"bpm_signal-2_neutral--disabled"})})}),"signal-1":e({neutral:e({enabled:e({name:"bpm_signal-1_neutral--enabled"}),hover:e({name:"bpm_signal-1_neutral--hover"}),active:e({name:"bpm_signal-1_neutral--active"}),disabled:e({name:"bpm_signal-1_neutral--disabled"})})}),person:e({neutral:e({enabled:e({name:"bpm_person_neutral--enabled"}),hover:e({name:"bpm_person_neutral--hover"}),active:e({name:"bpm_person_neutral--active"}),disabled:e({name:"bpm_person_neutral--disabled"})})}),"paralell-4":e({neutral:e({enabled:e({name:"bpm_paralell-4_neutral--enabled"}),hover:e({name:"bpm_paralell-4_neutral--hover"}),active:e({name:"bpm_paralell-4_neutral--active"}),disabled:e({name:"bpm_paralell-4_neutral--disabled"})})}),"paralell-3":e({neutral:e({enabled:e({name:"bpm_paralell-3_neutral--enabled"}),hover:e({name:"bpm_paralell-3_neutral--hover"}),active:e({name:"bpm_paralell-3_neutral--active"}),disabled:e({name:"bpm_paralell-3_neutral--disabled"})})}),"paralell-2":e({neutral:e({enabled:e({name:"bpm_paralell-2_neutral--enabled"}),hover:e({name:"bpm_paralell-2_neutral--hover"}),active:e({name:"bpm_paralell-2_neutral--active"}),disabled:e({name:"bpm_paralell-2_neutral--disabled"})})}),"paralell-1":e({neutral:e({enabled:e({name:"bpm_paralell-1_neutral--enabled"}),hover:e({name:"bpm_paralell-1_neutral--hover"}),active:e({name:"bpm_paralell-1_neutral--active"}),disabled:e({name:"bpm_paralell-1_neutral--disabled"})})}),oval:e({neutral:e({enabled:e({name:"bpm_oval_neutral--enabled"}),hover:e({name:"bpm_oval_neutral--hover"}),active:e({name:"bpm_oval_neutral--active"}),disabled:e({name:"bpm_oval_neutral--disabled"})})}),"oval-doble":e({neutral:e({enabled:e({name:"bpm_oval-doble_neutral--enabled"}),hover:e({name:"bpm_oval-doble_neutral--hover"}),active:e({name:"bpm_oval-doble_neutral--active"}),disabled:e({name:"bpm_oval-doble_neutral--disabled"})})}),"multiple-6":e({neutral:e({enabled:e({name:"bpm_multiple-6_neutral--enabled"}),hover:e({name:"bpm_multiple-6_neutral--hover"}),active:e({name:"bpm_multiple-6_neutral--active"}),disabled:e({name:"bpm_multiple-6_neutral--disabled"})})}),"multiple-5":e({neutral:e({enabled:e({name:"bpm_multiple-5_neutral--enabled"}),hover:e({name:"bpm_multiple-5_neutral--hover"}),active:e({name:"bpm_multiple-5_neutral--active"}),disabled:e({name:"bpm_multiple-5_neutral--disabled"})})}),"multiple-4":e({neutral:e({enabled:e({name:"bpm_multiple-4_neutral--enabled"}),hover:e({name:"bpm_multiple-4_neutral--hover"}),active:e({name:"bpm_multiple-4_neutral--active"}),disabled:e({name:"bpm_multiple-4_neutral--disabled"})})}),"multiple-3":e({neutral:e({enabled:e({name:"bpm_multiple-3_neutral--enabled"}),hover:e({name:"bpm_multiple-3_neutral--hover"}),active:e({name:"bpm_multiple-3_neutral--active"}),disabled:e({name:"bpm_multiple-3_neutral--disabled"})})}),"multiple-2":e({neutral:e({enabled:e({name:"bpm_multiple-2_neutral--enabled"}),hover:e({name:"bpm_multiple-2_neutral--hover"}),active:e({name:"bpm_multiple-2_neutral--active"}),disabled:e({name:"bpm_multiple-2_neutral--disabled"})})}),"multiple-1":e({neutral:e({enabled:e({name:"bpm_multiple-1_neutral--enabled"}),hover:e({name:"bpm_multiple-1_neutral--hover"}),active:e({name:"bpm_multiple-1_neutral--active"}),disabled:e({name:"bpm_multiple-1_neutral--disabled"})})}),"message-6":e({neutral:e({enabled:e({name:"bpm_message-6_neutral--enabled"}),hover:e({name:"bpm_message-6_neutral--hover"}),active:e({name:"bpm_message-6_neutral--active"}),disabled:e({name:"bpm_message-6_neutral--disabled"})})}),"message-5":e({neutral:e({enabled:e({name:"bpm_message-5_neutral--enabled"}),hover:e({name:"bpm_message-5_neutral--hover"}),active:e({name:"bpm_message-5_neutral--active"}),disabled:e({name:"bpm_message-5_neutral--disabled"})})}),"message-4":e({neutral:e({enabled:e({name:"bpm_message-4_neutral--enabled"}),hover:e({name:"bpm_message-4_neutral--hover"}),active:e({name:"bpm_message-4_neutral--active"}),disabled:e({name:"bpm_message-4_neutral--disabled"})})}),"message-3":e({neutral:e({enabled:e({name:"bpm_message-3_neutral--enabled"}),hover:e({name:"bpm_message-3_neutral--hover"}),active:e({name:"bpm_message-3_neutral--active"}),disabled:e({name:"bpm_message-3_neutral--disabled"})})}),"message-2":e({neutral:e({enabled:e({name:"bpm_message-2_neutral--enabled"}),hover:e({name:"bpm_message-2_neutral--hover"}),active:e({name:"bpm_message-2_neutral--active"}),disabled:e({name:"bpm_message-2_neutral--disabled"})})}),"message-1":e({neutral:e({enabled:e({name:"bpm_message-1_neutral--enabled"}),hover:e({name:"bpm_message-1_neutral--hover"}),active:e({name:"bpm_message-1_neutral--active"}),disabled:e({name:"bpm_message-1_neutral--disabled"})})}),"link-4":e({neutral:e({enabled:e({name:"bpm_link-4_neutral--enabled"}),hover:e({name:"bpm_link-4_neutral--hover"}),active:e({name:"bpm_link-4_neutral--active"}),disabled:e({name:"bpm_link-4_neutral--disabled"})})}),"link-3":e({neutral:e({enabled:e({name:"bpm_link-3_neutral--enabled"}),hover:e({name:"bpm_link-3_neutral--hover"}),active:e({name:"bpm_link-3_neutral--active"}),disabled:e({name:"bpm_link-3_neutral--disabled"})})}),"escalation-6":e({neutral:e({enabled:e({name:"bpm_escalation-6_neutral--enabled"}),hover:e({name:"bpm_escalation-6_neutral--hover"}),active:e({name:"bpm_escalation-6_neutral--active"}),disabled:e({name:"bpm_escalation-6_neutral--disabled"})})}),"escalation-5":e({neutral:e({enabled:e({name:"bpm_escalation-5_neutral--enabled"}),hover:e({name:"bpm_escalation-5_neutral--hover"}),active:e({name:"bpm_escalation-5_neutral--active"}),disabled:e({name:"bpm_escalation-5_neutral--disabled"})})}),"escalation-4":e({neutral:e({enabled:e({name:"bpm_escalation-4_neutral--enabled"}),hover:e({name:"bpm_escalation-4_neutral--hover"}),active:e({name:"bpm_escalation-4_neutral--active"}),disabled:e({name:"bpm_escalation-4_neutral--disabled"})})}),"escalation-3":e({neutral:e({enabled:e({name:"bpm_escalation-3_neutral--enabled"}),hover:e({name:"bpm_escalation-3_neutral--hover"}),active:e({name:"bpm_escalation-3_neutral--active"}),disabled:e({name:"bpm_escalation-3_neutral--disabled"})})}),"escalation-2":e({neutral:e({enabled:e({name:"bpm_escalation-2_neutral--enabled"}),hover:e({name:"bpm_escalation-2_neutral--hover"}),active:e({name:"bpm_escalation-2_neutral--active"}),disabled:e({name:"bpm_escalation-2_neutral--disabled"})})}),"escalation-1":e({neutral:e({enabled:e({name:"bpm_escalation-1_neutral--enabled"}),hover:e({name:"bpm_escalation-1_neutral--hover"}),active:e({name:"bpm_escalation-1_neutral--active"}),disabled:e({name:"bpm_escalation-1_neutral--disabled"})})}),"error-2":e({neutral:e({enabled:e({name:"bpm_error-2_neutral--enabled"}),hover:e({name:"bpm_error-2_neutral--hover"}),active:e({name:"bpm_error-2_neutral--active"}),disabled:e({name:"bpm_error-2_neutral--disabled"})})}),"error-1":e({neutral:e({enabled:e({name:"bpm_error-1_neutral--enabled"}),hover:e({name:"bpm_error-1_neutral--hover"}),active:e({name:"bpm_error-1_neutral--active"}),disabled:e({name:"bpm_error-1_neutral--disabled"})})}),delete:e({neutral:e({enabled:e({name:"bpm_delete_neutral--enabled"}),hover:e({name:"bpm_delete_neutral--hover"}),active:e({name:"bpm_delete_neutral--active"}),disabled:e({name:"bpm_delete_neutral--disabled"})})}),conditional:e({neutral:e({enabled:e({name:"bpm_conditional_neutral--enabled"}),hover:e({name:"bpm_conditional_neutral--hover"}),active:e({name:"bpm_conditional_neutral--active"}),disabled:e({name:"bpm_conditional_neutral--disabled"})})}),"conditional-6":e({neutral:e({enabled:e({name:"bpm_conditional-6_neutral--enabled"}),hover:e({name:"bpm_conditional-6_neutral--hover"}),active:e({name:"bpm_conditional-6_neutral--active"}),disabled:e({name:"bpm_conditional-6_neutral--disabled"})})}),"conditional-5":e({neutral:e({enabled:e({name:"bpm_conditional-5_neutral--enabled"}),hover:e({name:"bpm_conditional-5_neutral--hover"}),active:e({name:"bpm_conditional-5_neutral--active"}),disabled:e({name:"bpm_conditional-5_neutral--disabled"})})}),"conditional-2":e({neutral:e({enabled:e({name:"bpm_conditional-2_neutral--enabled"}),hover:e({name:"bpm_conditional-2_neutral--hover"}),active:e({name:"bpm_conditional-2_neutral--active"}),disabled:e({name:"bpm_conditional-2_neutral--disabled"})})}),"conditional-1":e({neutral:e({enabled:e({name:"bpm_conditional-1_neutral--enabled"}),hover:e({name:"bpm_conditional-1_neutral--hover"}),active:e({name:"bpm_conditional-1_neutral--active"}),disabled:e({name:"bpm_conditional-1_neutral--disabled"})})}),"compensation-4":e({neutral:e({enabled:e({name:"bpm_compensation-4_neutral--enabled"}),hover:e({name:"bpm_compensation-4_neutral--hover"}),active:e({name:"bpm_compensation-4_neutral--active"}),disabled:e({name:"bpm_compensation-4_neutral--disabled"})})}),"compensation-3":e({neutral:e({enabled:e({name:"bpm_compensation-3_neutral--enabled"}),hover:e({name:"bpm_compensation-3_neutral--hover"}),active:e({name:"bpm_compensation-3_neutral--active"}),disabled:e({name:"bpm_compensation-3_neutral--disabled"})})}),"compensation-2":e({neutral:e({enabled:e({name:"bpm_compensation-2_neutral--enabled"}),hover:e({name:"bpm_compensation-2_neutral--hover"}),active:e({name:"bpm_compensation-2_neutral--active"}),disabled:e({name:"bpm_compensation-2_neutral--disabled"})})}),"compensation-1":e({neutral:e({enabled:e({name:"bpm_compensation-1_neutral--enabled"}),hover:e({name:"bpm_compensation-1_neutral--hover"}),active:e({name:"bpm_compensation-1_neutral--active"}),disabled:e({name:"bpm_compensation-1_neutral--disabled"})})}),"cancel-4":e({neutral:e({enabled:e({name:"bpm_cancel-4_neutral--enabled"}),hover:e({name:"bpm_cancel-4_neutral--hover"}),active:e({name:"bpm_cancel-4_neutral--active"}),disabled:e({name:"bpm_cancel-4_neutral--disabled"})})}),"cancel-2":e({neutral:e({enabled:e({name:"bpm_cancel-2_neutral--enabled"}),hover:e({name:"bpm_cancel-2_neutral--hover"}),active:e({name:"bpm_cancel-2_neutral--active"}),disabled:e({name:"bpm_cancel-2_neutral--disabled"})})}),arrows:e({neutral:e({enabled:e({name:"bpm_arrows_neutral--enabled"}),hover:e({name:"bpm_arrows_neutral--hover"}),active:e({name:"bpm_arrows_neutral--active"}),disabled:e({name:"bpm_arrows_neutral--disabled"})})})})})}); diff --git a/packages/mercury/showcase/assets/scripts/bundles.js b/packages/mercury/showcase/assets/scripts/bundles.js deleted file mode 100644 index 8d699e10e..000000000 --- a/packages/mercury/showcase/assets/scripts/bundles.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";let s;const n=(c,o,p,t=void 0)=>{const g=p?p+o:o,m=s?s[o]:o,w=`${c}${m}.css`;return t===void 0?{name:g,url:w}:{name:g,url:w,attachStyleSheet:t}};export const getThemeBundles=(c,o)=>[n(c,"components/accordion",o),n(c,"components/button",o),n(c,"components/chat",o),n(c,"components/checkbox",o),n(c,"components/code",o),n(c,"components/combo-box",o),n(c,"components/flexible-layout",o),n(c,"components/dialog",o),n(c,"components/dropdown",o),n(c,"components/icon",o),n(c,"components/edit",o),n(c,"components/layout-splitter",o),n(c,"components/list-box",o),n(c,"components/markdown-viewer",o,!1),n(c,"components/navigation-list",o),n(c,"components/pills",o),n(c,"components/radio-group",o),n(c,"components/segmented-control",o),n(c,"components/sidebar",o),n(c,"components/slider",o),n(c,"components/switch",o),n(c,"components/tab",o),n(c,"components/tabular-grid",o),n(c,"components/ticket-list",o),n(c,"components/tooltip",o),n(c,"components/tree-view",o),n(c,"components/widget",o),n(c,"resets/box-sizing",o),n(c,"utils/form",o),n(c,"utils/elevation",o),n(c,"utils/form--full",o),n(c,"utils/layout",o),n(c,"utils/spacing",o),n(c,"utils/typography",o),n(c,"chameleon/scrollbar",o)];const v=(c,o)=>o?c.map(p=>o+p):c;export const getBundles=(c,o,p)=>o?c.map(t=>n(o,t,p)):v(c,p),setBundleMapping=c=>{s=c}; diff --git a/packages/mercury/showcase/assets/scripts/generate-icons.js b/packages/mercury/showcase/assets/scripts/generate-icons.js deleted file mode 100644 index 7b6c04e03..000000000 --- a/packages/mercury/showcase/assets/scripts/generate-icons.js +++ /dev/null @@ -1,332 +0,0 @@ -import { MERCURY_ASSETS } from "./assets/MERCURY_ASSETS.js"; -const CONTAINER_EL = document.querySelector(".container"); -const NOT_AVAILABLE_ICON = `url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSIwIDAgMzAgMzAiIHdpZHRoPSIzMHB4IiBoZWlnaHQ9IjMwcHgiPjxwYXRoIGQ9Ik0gMTUgMyBDIDExLjc4MzA1OSAzIDguODY0MTk4MiA0LjI4MDc5MjYgNi43MDcwMzEyIDYuMzQ5NjA5NCBBIDEuMDAwMSAxLjAwMDEgMCAwIDAgNi4zNDc2NTYyIDYuNzA3MDMxMiBDIDQuMjc5Mzc2NiA4Ljg2NDEwNzEgMyAxMS43ODM1MzEgMyAxNSBDIDMgMjEuNjE1NTcyIDguMzg0NDI3NiAyNyAxNSAyNyBDIDE4LjIxMDAwNyAyNyAyMS4xMjM0NzUgMjUuNzI0OTk1IDIzLjI3OTI5NyAyMy42NjQwNjIgQSAxLjAwMDEgMS4wMDAxIDAgMCAwIDIzLjY2MjEwOSAyMy4yODEyNSBDIDI1LjcyNDE2OCAyMS4xMjUyMzUgMjcgMTguMjEwOTk4IDI3IDE1IEMgMjcgOC4zODQ0Mjc2IDIxLjYxNTU3MiAzIDE1IDMgeiBNIDE1IDUgQyAyMC41MzQ2OTIgNSAyNSA5LjQ2NTMwNzkgMjUgMTUgQyAyNSAxNy40MDYzNyAyNC4xNTUxNzMgMTkuNjA5MDYyIDIyLjc0NjA5NCAyMS4zMzIwMzEgTCA4LjY2Nzk2ODggNy4yNTM5MDYyIEMgMTAuMzkwOTM4IDUuODQ0ODI3NCAxMi41OTM2MyA1IDE1IDUgeiBNIDcuMjUzOTA2MiA4LjY2Nzk2ODggTCAyMS4zMzIwMzEgMjIuNzQ2MDk0IEMgMTkuNjA5MDYyIDI0LjE1NTE3MyAxNy40MDYzNyAyNSAxNSAyNSBDIDkuNDY1MzA3OSAyNSA1IDIwLjUzNDY5MiA1IDE1IEMgNSAxMi41OTM2MyA1Ljg0NDgyNzQgMTAuMzkwOTM4IDcuMjUzOTA2MiA4LjY2Nzk2ODggeiIvPjwvc3ZnPg==)`; - -/* - - - - - - - - - - - - - - - - - - - - -On colors mapping -- - - - - - - - - - - - - - - - - - - - */ -// the following "on" colors are not definitive. -// they should be validated with the designer. -const ON_COLORS = { - "on-primary": "--mer-accent__primary", - "on-surface": "--mer-color__surface", - "on-message": "--mer-color__message-yellow--100", - "on-elevation": "--mer-surface__elevation--01", - "on-disabled": "--mer-accent__primary--disabled" -}; - -/* - - - - - - - - - - - - - - - - - - - - -Multicolors Array -- - - - - - - - - - - - - - - - - - - - */ -// This array contains the multicolor categories names -// Is used to render the icon as multicolor, since it has -// some differences with the monochrome icon. -const MULTI_COLOR_CATEGORIES = [ - "objects", - "controls", - "editing-structures", - "general", - "gx-server", - "gx-test", - "objects-parts", - "patterns", - "patterns-default-associated" -]; - -/* - - - - - - - - - - - - - - - - - - - - -Icons descriptions mapping -- - - - - - - - - - - - - - - - - - - - */ -const ICONS_DESCRIPTIONS = { - "window-tools": - "This category includes icons related to various tools and utilities used within the GeneXus development environment. These tools assist developers in managing and configuring different aspects of their projects, enhancing productivity and streamlining workflow within the GeneXus platform.", - - "patterns-default-associated": - "Icons in this category represent default patterns that are automatically associated with certain functionalities within GeneXus. These patterns simplify the development process by providing pre-defined structures and behaviors that can be easily implemented across various parts of an application.", - - patterns: - "The patterns category encompasses a range of design patterns that can be applied to GeneXus projects. These patterns help standardize development practices, ensuring consistency and efficiency when creating applications. They cover common scenarios and workflows, offering reusable solutions to common problems.", - - "object-parts": - "This category includes icons representing various parts of objects within GeneXus. Objects in GeneXus are the building blocks of applications, and this category helps identify different components or sections of these objects, aiding developers in organizing and structuring their applications.", - - objects: - "Icons under the objects category represent the core elements that make up GeneXus applications. Objects are essential units of functionality, including data structures, user interfaces, and business logic, which together define the behavior and appearance of an application.", - - navigation: - "The navigation category features icons related to the navigation of applications and the GeneXus development environment. These icons help developers design and implement user-friendly navigation flows, ensuring that users can move seamlessly through different sections of an application.", - - menus: - "This category is dedicated to icons representing menus within applications. Menus are crucial for organizing and presenting options to users, and these icons help in designing intuitive and accessible menus that enhance the overall user experience.", - - "gx-test": - "Icons in the gx-test category are related to testing tools and features within GeneXus. Testing is a critical phase in the development process, and these icons represent the various tools and functionalities that help ensure the quality and reliability of applications developed with GeneXus.", - - "gx-server": - "The gx-server category includes icons associated with GeneXus Server, a tool that facilitates collaboration and version control in GeneXus projects. These icons help represent different server-related actions, such as committing changes, updating versions, and managing project repositories.", - - general: - "This category covers a broad range of icons that don't fit into specific categories but are essential for various general tasks and functionalities within GeneXus. These icons provide visual cues for a wide array of operations and actions in the development environment.", - - "gemini-tools": - "Icons in the gemini-tools category are linked to tools that are part of the Gemini framework within GeneXus. These tools provide specialized functionalities for specific tasks, aiding developers in extending the capabilities of their applications and enhancing their workflows.", - - "editing-structures": - "The editing-structures category includes icons related to the creation and modification of data structures within GeneXus. These icons assist developers in defining and managing the underlying data models that power their applications, ensuring that data is organized and accessible.", - - controls: - "Icons under the controls category represent various UI controls that can be implemented in GeneXus applications. These controls include buttons, input fields, dropdowns, and other interactive elements that are essential for building user interfaces.", - - bpm: "The bpm category features icons related to Business Process Management (BPM) within GeneXus. BPM tools help in designing, automating, and optimizing business processes, and these icons represent the various elements and actions involved in managing and executing workflows." -}; - -/* - - - - - - - - - - - - - - - - - - - - -Helper Render Functions (Elements) -- - - - - - - - - - - - - - - - - - - - */ - -const createSection = iconCategory => { - const sectionEl = document.createElement("section"); - sectionEl.setAttribute("id", iconCategory); - sectionEl.className = "section"; - // description - const sectionDescriptionEl = document.createElement("p"); - sectionDescriptionEl.classList.add("section__description"); - sectionDescriptionEl.textContent = ICONS_DESCRIPTIONS[iconCategory]; - // header - const headerElement = document.createElement("header"); - headerElement.className = "section__header"; - // title - const titleElement = document.createElement("h1"); - titleElement.className = "section__title"; - titleElement.textContent = iconCategory; - // appends - headerElement.appendChild(titleElement); - headerElement.appendChild(sectionDescriptionEl); - sectionEl.appendChild(headerElement); - return sectionEl; -}; -const createSectionArticlesContainer = () => { - const sectionArticlesContainer = document.createElement("div"); - sectionArticlesContainer.className = "section__articles-container"; - return sectionArticlesContainer; -}; -const createArticle = dataTitle => { - const article = document.createElement("article"); - article.className = "article"; - if (dataTitle) { - article.setAttribute("data-title", dataTitle); - } - return article; -}; -const createArticleHeader = () => { - const header = document.createElement("header"); - header.className = "article__header"; - return header; -}; -const createArticleMain = () => { - const articleMain = document.createElement("div"); - articleMain.className = "article__main"; - return articleMain; -}; -const createArticleContent = () => { - const articleContent = document.createElement("div"); - articleContent.className = "article__content"; - return articleContent; -}; -const createIconsGrid = () => { - const iconsGridEl = document.createElement("div"); - iconsGridEl.className = "icons-grid"; - return iconsGridEl; -}; -const createItemTitle = listTitle => { - const iconsGridItemTitle = document.createElement("h2"); - iconsGridItemTitle.className = "icons-grid__item-title"; - iconsGridItemTitle.textContent = listTitle; - return iconsGridItemTitle; -}; -const createMonochromeIconsStatesList = (statesObject, itemName) => { - // list - const ulElement = document.createElement("ul"); - ulElement.className = "icons-grid__list"; - // list items - let notImplementedStates = ["enabled", "hover", "active", "disabled"]; - for (let state in statesObject) { - const customVar = `var(--icon__${statesObject[state].name})`; - const liEl = document.createElement("li"); - const iEl = document.createElement("i"); - const stateTextNode = document.createTextNode(state); - iEl.className = "icon icon-sm"; - iEl.style.setProperty("--icon-path", customVar); - - if (itemName.includes("on-")) { - // some monochrome icons are expected to be applied on specific background colors. - // these icons color begin with "on". ie.: "on-surface". - const suffix = state !== "enabled" ? `--${state}` : ""; - const color = `${ON_COLORS[itemName]}${suffix}`; - iEl.style.backgroundColor = `var(${color})`; - } - - liEl.appendChild(iEl); - liEl.appendChild(stateTextNode); - ulElement.appendChild(liEl); - // remove state from notImplementedStates - const implementedStateIndex = notImplementedStates.indexOf(state); - if (implementedStateIndex !== -1) { - notImplementedStates.splice(implementedStateIndex, 1); - } - } - - notImplementedStates.forEach(notImplementedState => { - const liEl = document.createElement("li"); - liEl.classList.add("icon-not-implemented"); - liEl.classList.add("not-applicable"); - const iEl = document.createElement("i"); - const stateTextNode = document.createTextNode(notImplementedState); - iEl.className = "icon icon-sm"; - iEl.style.setProperty("mask-image", NOT_AVAILABLE_ICON); - liEl.appendChild(iEl); - liEl.appendChild(stateTextNode); - ulElement.appendChild(liEl); - }); - - return ulElement; -}; -const createMulticolorIconsStatesList = (statesObject, itemName) => { - // list - const ulElement = document.createElement("ul"); - ulElement.className = "icons-grid__list"; - // list items - let states = ["enabled", "hover", "active", "disabled"]; - for (let state in statesObject) { - const customVar = `var(--icon__${statesObject[state].name})`; - const liEl = document.createElement("li"); - const iEl = document.createElement("i"); - const stateTextNode = document.createTextNode(state); - iEl.className = "icon icon-sm"; - iEl.style.setProperty("--icon-path", customVar); - - if (itemName.includes("on-")) { - // some monochrome icons are expected to be applied on specific background colors. - // these icons colors begin with "on". ie.: "on-surface". - const suffix = state !== "enabled" ? `--${state}` : ""; - const color = `${ON_COLORS[itemName]}${suffix}`; - iEl.style.backgroundColor = `var(${color})`; - } - - liEl.appendChild(iEl); - liEl.appendChild(stateTextNode); - ulElement.appendChild(liEl); - } - - return ulElement; -}; - -const createIconsGridItem = (itemName, itemStatesObject, isMonochrome) => { - const iconsGridItem = document.createElement("div"); - iconsGridItem.className = "icons-grid__item"; - // item title - const title = createItemTitle(itemName); - // list - let statesList; - if (isMonochrome) { - statesList = createMonochromeIconsStatesList(itemStatesObject, itemName); - } else { - statesList = createMulticolorIconsStatesList(itemStatesObject, itemName); - } - - iconsGridItem.appendChild(title); - iconsGridItem.appendChild(statesList); - return iconsGridItem; -}; - -/* - - - - - - - - - - - - - - - - - - - - -Render Multicolor or Monochrome -- - - - - - - - - - - - - - - - - - - - */ - -const renderMulticolorArticle = categoryIcons => { - const articleEl = createArticle(); - const articleMailEl = createArticleMain(); - const articleContent = createArticleContent(); - const iconsGridEl = createIconsGrid(); - for (let icon in categoryIcons) { - const iconStates = categoryIcons[icon]; - const gridItemEl = createIconsGridItem(icon, iconStates, false); - iconsGridEl.appendChild(gridItemEl); - iconsGridEl.appendChild(gridItemEl); - } - - articleContent.appendChild(iconsGridEl); - articleMailEl.appendChild(articleContent); - articleEl.appendChild(articleMailEl); - return articleEl; -}; - -const renderMonochromeArticle = (iconName, iconColorsObject) => { - const articleEl = createArticle(iconName); - const articleHeaderEl = createArticleHeader(); - const articleMailEl = createArticleMain(); - const articleContent = createArticleContent(); - const iconsGridEl = createIconsGrid(); - for (let color in iconColorsObject) { - const gridItemEl = createIconsGridItem( - color, - iconColorsObject[color], - true - ); - iconsGridEl.appendChild(gridItemEl); - } - articleContent.appendChild(iconsGridEl); - articleMailEl.appendChild(articleContent); - articleEl.appendChild(articleHeaderEl); - articleEl.appendChild(articleMailEl); - return articleEl; -}; - -/* - - - - - - - - - - - - - - - - - - - - -Main function -- - - - - - - - - - - - - - - - - - - - */ - -const generateIconsForShowcase = () => { - const designSystemIcons = MERCURY_ASSETS.icons; - if (Object.keys(designSystemIcons).length === 0) { - return; - } - - // For each category... - for (let category in designSystemIcons) { - const categoryIcons = designSystemIcons[category]; - if (Object.keys(categoryIcons).length === 0) { - continue; - } - - // createSection = .section + .section__header + .section__title - let sectionEl = createSection(category); - sectionEl.setAttribute("data-title", category); - sectionEl.setAttribute("data-nav", true); - let sectionArticlesContainerEl = createSectionArticlesContainer(); - - // is this monochrome or multicolor? - const isMultiColor = MULTI_COLOR_CATEGORIES.includes(category); - if (isMultiColor) { - // One article for each category - const multicolorArticle = renderMulticolorArticle(categoryIcons); - sectionArticlesContainerEl.appendChild(multicolorArticle); - } else { - // One article for each icon - for (let icon in categoryIcons) { - if (Object.keys(icon).length === 0) { - continue; - } - - const monochromeArticle = renderMonochromeArticle( - icon, - categoryIcons[icon] - ); - sectionArticlesContainerEl.appendChild(monochromeArticle); - } - } - - sectionEl.appendChild(sectionArticlesContainerEl); - CONTAINER_EL.appendChild(sectionEl); - } -}; -generateIconsForShowcase(); diff --git a/packages/mercury/showcase/assets/scripts/icons-showcase-paths.js b/packages/mercury/showcase/assets/scripts/icons-showcase-paths.js deleted file mode 100644 index d6e3e4c71..000000000 --- a/packages/mercury/showcase/assets/scripts/icons-showcase-paths.js +++ /dev/null @@ -1,29 +0,0 @@ -import { getIconPath } from "./assets-manager.js"; - -export const BUTTON_ICONS = { - GEMINI_TOOLS_ADD_CIRCLE_ON_PRIMARY: getIconPath({ - category: "gemini-tools", - name: "add-circle", - colorType: "on-primary" - }), - GEMINI_TOOLS_ADD_CIRCLE_ON_DISABLED: getIconPath({ - category: "gemini-tools", - name: "add-circle", - colorType: "on-disabled" - }), - GEMINI_TOOLS_ADD_CIRCLE_NEUTRAL: getIconPath({ - category: "gemini-tools", - name: "add-circle", - colorType: "neutral" - }), - GEMINI_TOOLS_ADD_CIRCLE_PRIMARY: getIconPath({ - category: "gemini-tools", - name: "add-circle", - colorType: "primary" - }), - GEMINI_TOOLS_ADD_CIRCLE_PRIMARY: getIconPath({ - category: "gemini-tools", - name: "add-circle", - colorType: "primary" - }) -}; diff --git a/packages/mercury/showcase/assets/scripts/register-mercury.js b/packages/mercury/showcase/assets/scripts/register-mercury.js deleted file mode 100644 index a8b3e2635..000000000 --- a/packages/mercury/showcase/assets/scripts/register-mercury.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";import{MERCURY_ALIAS as r,registerAssets as e}from"./assets-manager.js";import{MERCURY_ASSETS as t}from"./assets/MERCURY_ASSETS.js";export const registerMercury=()=>e("Mercury",r,t); diff --git a/packages/mercury/showcase/assets/scripts/scripts-header.js b/packages/mercury/showcase/assets/scripts/scripts-header.js deleted file mode 100644 index f73a5c20a..000000000 --- a/packages/mercury/showcase/assets/scripts/scripts-header.js +++ /dev/null @@ -1,22 +0,0 @@ -import { BUTTON_ICONS } from "./icons-showcase-paths.js"; -// All definitions in this script are used for local testing purposes -// only. The IDE Web's SDK implements all this and more -import { defineCustomElements } from "https://unpkg.com/@genexus/chameleon-controls-library@6.2.0/dist/esm/loader.js"; - -import { registryProperty } from "https://unpkg.com/@genexus/chameleon-controls-library@6.2.0/dist/esm/index.js"; - -import { - getImagePathCallbackDefinitions, - getIconPath -} from "./assets-manager.js"; - -import { registerMercury } from "./register-mercury.js"; -registerMercury(); - -// Register getImagePath callbacks -registryProperty("getImagePathCallback", getImagePathCallbackDefinitions); - -// Make accessible globally: -window.BUTTON_ICONS = BUTTON_ICONS; -window.getIconPath = getIconPath; -defineCustomElements(window); diff --git a/packages/mercury/showcase/assets/scripts/scripts.js b/packages/mercury/showcase/assets/scripts/scripts.js deleted file mode 100644 index ab17f0904..000000000 --- a/packages/mercury/showcase/assets/scripts/scripts.js +++ /dev/null @@ -1,721 +0,0 @@ -// configuration -// constants -const _URL = new URL(window.location.href); -const PAGE_URL = `${_URL.origin}${_URL.pathname}`; -// sections as articles, is for rendering sections on the sidebar nav, as if -// they were articles. This feature was created for the /icons showcase page, -// where we just want to include navigation for the sections, but it makes sense -// to display the list items as articles, because these are the only items. -const NAV_SECTIONS_AS_ARTICLES = document.body.hasAttribute( - "data-sections-as-articles" -); -const ARTICLE_HEADER_CLASS = ".article__header"; -const SECTION_SELECTOR = ".section"; -const SECTION_TITLE_SELECTOR = ".section__title"; -const ARTICLE_SELECTOR = ".article"; -const SECTION_SIDEBAR_SELECTOR = ".section[data-nav]"; -const ARTICLE_SIDEBAR_SELECTOR = ".article[data-nav]"; -const DATA_TITLE_SELECTOR = "data-title"; -const SIDEBAR_CHILD_LIST_CLASS = "sidebar__list--child"; -let SIDEBAR_NAV; // A reference to the sidebar nav. -let CONTAINER_REF; -let topBarRef = null; -// code and ch-code -const ARTICLE_CODE_SELECTOR = ".article__code"; -const CH_CODE_VALUE_LET_NAME = "chCodeValue"; -const BUNDLE_SELECTOR = "data-bundle"; - -// references -const HTML = document.querySelector("html"); -const HEAD = document.head; -const BODY = document.querySelector("body"); -const SIDEBAR_DATA_ATTR = "data-sidebar"; -const MAIN_SELECTOR = ".main"; -let CURRENT_PAGE_NAV_ITEM; // a reference the navigation item for the actual actual page. -let PAGE_SECTIONS; // a reference to all the page ".article" -let PAGE_ARTICLES; // a reference to all the page ".article" - -const includeFavicon = () => { - const linkElement = document.createElement("link"); - linkElement.rel = "icon"; - linkElement.type = "image/png"; - linkElement.href = "./assets/images/favicon.png"; - linkElement.sizes = "32x32"; - document.head.appendChild(linkElement); -}; - -const setScheme = () => { - HTML.classList.add("dark"); -}; - -const addGoogleFonts = () => { - // Create the first link element for preconnecting to "https://fonts.googleapis.com" - const googleApis = document.createElement("link"); - googleApis.rel = "preconnect"; - googleApis.href = "https://fonts.googleapis.com"; - - // Create the second link element for preconnecting to "https://fonts.gstatic.com" with crossorigin attribute - const googleStatic = document.createElement("link"); - googleStatic.rel = "preconnect"; - googleStatic.href = "https://fonts.gstatic.com"; - googleStatic.setAttribute("crossorigin", ""); - - // Create the third link element for importing JetBrains font - const jetBrains = document.createElement("link"); - jetBrains.rel = "stylesheet"; - jetBrains.href = - "https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,500;1,500&display=swap"; - - // Append the link elements to the document head - HEAD.appendChild(googleApis); - HEAD.appendChild(googleStatic); - HEAD.appendChild(jetBrains); -}; - -const toggleRTLBtn = () => { - const toggleRTLBtn = document.getElementById("toggle-rtl-btn"); - if (toggleRTLBtn) { - toggleRTLBtn.addEventListener("click", () => { - const dir = HTML.getAttribute("dir"); - if (dir && dir === "ltr") { - HTML.setAttribute("dir", "rtl"); - } else if (dir && dir === "rtl") { - HTML.setAttribute("dir", "ltr"); - } - }); - } -}; - -const getNavbarItems = () => { - // Fetch the list of the showcase html pages. - return fetch("./assets/json/navbar-items.json") - .then(response => { - if (!response.ok) { - throw new Error("Network response was not ok"); - } - return response.json(); - }) - .then(data => { - return data; - }) - .catch(error => { - console.error("There was a problem with the fetch operation:", error); - }); -}; - -const includeSidebarPageInternalNav = () => { - // This is the navigation items for the current page articles. - // Let's call this the internal navigation. - const includeSidebar = BODY.hasAttribute(SIDEBAR_DATA_ATTR); - if (includeSidebar && CURRENT_PAGE_NAV_ITEM) { - // CURRENT_PAGE_NAV_ITEM is a reference to the item on the sidebar - // that refers to the actual page. - - SIDEBAR_SECTIONS = document.querySelectorAll(SECTION_SIDEBAR_SELECTOR); - SIDEBAR_ARTICLES = document.querySelectorAll(ARTICLE_SIDEBAR_SELECTOR); - if (SIDEBAR_ARTICLES.length || SIDEBAR_SECTIONS.length) { - //If there is more than one section to be added to the navigation.. - const navigationIncludesSections = SIDEBAR_SECTIONS.length > 1; - const navigationSectionsArray = []; - if (navigationIncludesSections && !NAV_SECTIONS_AS_ARTICLES) { - // Create the navigation for the sections - // Consider all sections, even the ones that are not intended to be added to the nav. - // If The section has no data-nav attribute, it will be included in the nav without title. - const allSections = document.querySelectorAll(SECTION_SELECTOR); - allSections.forEach((section, i) => { - // add a data-index for easier reference later. - section.dataset.index = i; - - // section divider - const navSection = document.createElement("div"); - section.classList.add("current-page__section"); - // title - const sectionTitle = - section.querySelector(".section__title").textContent; - - if (sectionTitle) { - const navSectionTitleEl = document.createElement("h3"); - navSectionTitleEl.classList.add("current-page__section-title"); - navSectionTitleEl.textContent = sectionTitle; - navSection.appendChild(navSectionTitleEl); - } - // list - const navSectionList = document.createElement("ul"); - navSectionList.classList.add(SIDEBAR_CHILD_LIST_CLASS); - navSection.appendChild(navSectionList); - - navigationSectionsArray.push(navSection); - }); - } else if (navigationIncludesSections && NAV_SECTIONS_AS_ARTICLES) { - SIDEBAR_ARTICLES = SIDEBAR_SECTIONS; - } - - const pageUlEl = document.createElement("ul"); - pageUlEl.classList.add(SIDEBAR_CHILD_LIST_CLASS); - SIDEBAR_ARTICLES.forEach(article => { - let li; - const hasId = article.hasAttribute("id"); - const hasTitle = article.hasAttribute(DATA_TITLE_SELECTOR); - const isHidden = article.hasAttribute("hidden"); - - if (hasId && hasTitle && !isHidden) { - const articleId = article.getAttribute("id"); - const articleTitle = article.getAttribute(DATA_TITLE_SELECTOR); - li = document.createElement("li"); - const a = document.createElement("a"); - a.href = `#${articleId}`; - a.textContent = articleTitle; - li.appendChild(a); - } - - if (navigationIncludesSections && !NAV_SECTIONS_AS_ARTICLES) { - const articleSection = article.closest(SECTION_SELECTOR); - const articleSectionIndexString = articleSection.dataset.index; - const articleSectionIndex = parseInt(articleSectionIndexString); - const childList = navigationSectionsArray[ - articleSectionIndex - ].querySelector(`.${SIDEBAR_CHILD_LIST_CLASS}`); - childList.appendChild(li); - } else { - pageUlEl.appendChild(li); - } - }); - - if (navigationIncludesSections && !NAV_SECTIONS_AS_ARTICLES) { - navigationSectionsArray.forEach((navigationSection, i) => { - CURRENT_PAGE_NAV_ITEM.appendChild(navigationSection); - }); - } else { - CURRENT_PAGE_NAV_ITEM.appendChild(pageUlEl); - } - } - } -}; - -const includeTopBar = () => { - if (CONTAINER_REF) { - const topBarEl = document.createElement("div"); - topBarEl.className = "container__top-bar"; - CONTAINER_REF.appendChild(topBarEl); - topBarRef = topBarEl; - - // body - BODY.classList.add("has-top-bar"); - } -}; - -const addArticleTitles = () => { - if (!PAGE_ARTICLES) { - PAGE_ARTICLES = document.querySelectorAll(ARTICLE_SELECTOR); - } - if (PAGE_ARTICLES.length) { - const moreThanOne = PAGE_ARTICLES.length > 1; - PAGE_ARTICLES.forEach((article, i) => { - const title = article.getAttribute(DATA_TITLE_SELECTOR); - const header = article.querySelector(ARTICLE_HEADER_CLASS); - if (title && header) { - const articleTitleEl = document.createElement("h2"); - articleTitleEl.classList.add("article__title"); - articleTitleEl.textContent = title; - - // Add a number to each item to make it easier to refer to. - // Make it a separate element, to allow different style. - // This only makes sense if there is more than one .article[data-nav] - if (moreThanOne) { - const numberTag = document.createElement("span"); - numberTag.classList.add("article__number-id"); - numberTag.textContent = `${i + 1}`; - articleTitleEl.insertBefore(numberTag, articleTitleEl.firstChild); - } - - // Add an id to the article, to allow sharing the page url with an anchor to this article. - const articleId = generateArticleId(title, i); - if (articleId) { - article.setAttribute("id", articleId); - } - - header.insertBefore(articleTitleEl, header.firstChild); - } - }); - } -}; - -const addTitleAnchors = () => { - if (!PAGE_ARTICLES) { - PAGE_ARTICLES = document.querySelectorAll(ARTICLE_SELECTOR); - } - if (PAGE_ARTICLES.length) { - PAGE_ARTICLES.forEach(article => { - const header = article.querySelector(ARTICLE_HEADER_CLASS); - const articleId = article.getAttribute("id"); - if (header && articleId) { - header.addEventListener("click", () => { - copyToClipBoard(`${PAGE_URL}#${articleId}`); - }); - } - }); - } -}; - -const generateArticleId = (title, i) => { - // the index prevents duplicate ids if the article title is the same in more - // than one case (who knows). - return `${title.toLowerCase().replace(/ /g, "-")}-${i}`; -}; - -const includeSidebarNav = async () => { - // This is the navigation items for the showcase html pages. - // Let's call this the external navigation. - const includeSidebar = BODY.hasAttribute(SIDEBAR_DATA_ATTR); - if (includeSidebar) { - const renderSidebarItems = itemsObj => { - // get page url name to identify the navigation item - // for this page later. - const pageName = PAGE_URL.split("/").pop().split(".")[0]; - const listCaption = itemsObj.listCaption; - const listItemsArr = itemsObj.items; - - // list section element - const listSectionEl = document.createElement("section"); - listSectionEl.classList.add("sidebar__section"); - - // list section title element - let listSectionTitleEl; - if (listCaption) { - listSectionTitleEl = document.createElement("h2"); - listSectionTitleEl.classList.add("sidebar__section-title"); - listSectionTitleEl.textContent = listCaption; - listSectionEl.appendChild(listSectionTitleEl); - } - - // list element - const ul = document.createElement("ul"); - ul.classList.add("sidebar__list"); - - // sort alphabetically - listItemsArr.sort((a, b) => { - if (a.caption < b.caption) return -1; - if (a.caption > b.caption) return 1; - return 0; - }); - - listItemsArr.forEach(item => { - const hidden = item.hidden; - if (!hidden) { - const li = document.createElement("li"); - const a = document.createElement("a"); - - a.href = item.url; - a.textContent = item.caption; - - // ¿Is this the item of the actual page? - if (item.url.split(".")[0] === pageName) { - CURRENT_PAGE_NAV_ITEM = li; - li.classList.add("current-page"); - - // Include chameleon URL - if (item.chameleonUrl && item.chameleonUrl !== null) { - includeChameleonURL(item.chameleonUrl); - } - } - - li.appendChild(a); - ul.appendChild(li); - } - }); - - listSectionEl.appendChild(ul); - SIDEBAR_NAV.appendChild(listSectionEl); - }; - - const navbarItems = await getNavbarItems(); - const componentsItemsObj = navbarItems?.components; - const documentationItemsObj = navbarItems?.documentation; - - if (navbarItems && componentsItemsObj.items?.length) { - renderSidebarItems(componentsItemsObj); - } - if (navbarItems && documentationItemsObj.items?.length) { - renderSidebarItems(documentationItemsObj); - } - } - - if (CURRENT_PAGE_NAV_ITEM) { - // only create internal navigation if the navigation item - // for this page exists. - includeSidebarPageInternalNav(); - } -}; - -const includeSidebar = () => { - // the following js is credit to chat-gpt. - // I just gave him the html, amazing! - - const includeSidebar = BODY.hasAttribute(SIDEBAR_DATA_ATTR); - if (includeSidebar) { - // Create aside element - const aside = document.createElement("aside"); - aside.classList.add("sidebar"); - - // Create header element - const header = document.createElement("header"); - header.classList.add("sidebar__header"); - header.textContent = "Mercury Design System"; - aside.appendChild(header); - - // Create nav element - SIDEBAR_NAV = document.createElement("nav"); - SIDEBAR_NAV.classList.add("sidebar__nav"); - aside.appendChild(SIDEBAR_NAV); - - // // Create footer element - // const footer = document.createElement("footer"); - // footer.classList.add("sidebar__footer"); - // aside.appendChild(footer); - - // // Create anchor element - // const anchor = document.createElement("a"); - // anchor.classList.add("sidebar__footer-link"); - // anchor.href = "#"; - // footer.appendChild(anchor); - // // temporary until tokens are ready: - // anchor.addEventListener("click", () => { - // alert("Tokens showcase is not ready yet!"); - // }); - - // // Create span elements for footer text - // const span1 = document.createElement("span"); - // span1.classList.add("sidebar__footer-text"); - // span1.textContent = "⚛️ The Tokens"; - - // const span2 = document.createElement("span"); - // span2.classList.add( - // "sidebar__footer-text", - // "sidebar__footer-text--the-gold" - // ); - // span2.textContent = "✨ The Gold !"; - - // // Append span elements to anchor element - // anchor.appendChild(span1); - // anchor.appendChild(span2); - - // Prepend the aside element as the first child of the body - const body = document.body; - body.insertBefore(aside, body.firstChild); - - includeSidebarNav(); - } -}; - -const listenToCtrlCmd = () => { - // when ctrl or cmd is pressed, if the mouse cursor is over a code block, - // we want to display a pointer cursor, because it is on the "copy" mode. - document.addEventListener("keydown", e => { - if (e.key === "Control" || e.key === "Meta") { - BODY.classList.add("ctrl-cmd-pressed"); - } - }); - document.addEventListener("keyup", e => { - if (e.key === "Control" || e.key === "Meta") { - BODY.classList.remove("ctrl-cmd-pressed"); - } - }); -}; - -const addCopyCodeFunctionality = () => { - const chCodes = document.querySelectorAll(".code"); - if (chCodes.length) { - chCodes.forEach(chCode => { - // ch-code header - const chCodeHeader = document.createElement("div"); - chCodeHeader.classList.add("code__header"); - - // data-attributes - const dataTitle = chCode.dataset.title; - const dataDocumentation = chCode.dataset.documentation; - - // copy code button - const copyCodeButton = document.createElement("button"); - copyCodeButton.classList.add("code__button"); - copyCodeButton.innerText = dataTitle || "copy markup"; - - // append button inside header - chCodeHeader.appendChild(copyCodeButton); - - // insert the ch-code header before ch-code - const codeParent = chCode.parentElement; - codeParent.insertBefore(chCodeHeader, chCode); - - if (dataDocumentation === undefined) { - copyCodeButton.classList.add("code__copy-button"); - // only add copy feature if it is not "documentation". - copyCodeButton.addEventListener("click", event => { - // assuming the copy code button is being inserted before ch-code - // inside .code__header. - const chCode = chCodeHeader.nextElementSibling; - if (chCode) { - copyToClipBoard(chCode.value); - chCode.classList.add("code--highlight"); - setTimeout(() => { - chCode.classList.remove("code--highlight"); - }, 200); - } - }); - } else { - copyCodeButton.classList.add("code__button--documentation"); - } - }); - } -}; - -const includeChameleonURL = chameleonURL => { - if (chameleonURL && topBarRef) { - const anchor = document.createElement("a"); - anchor.className = "button-tertiary"; - anchor.textContent = "Chameleon Reference"; - anchor.textContent = "Chameleon Reference"; - anchor.setAttribute("href", chameleonURL); - anchor.setAttribute("target", "_blank"); - topBarRef.appendChild(anchor); - } -}; - -const copyToClipBoard = text => { - navigator.clipboard - .writeText(text) - .then(() => { - // copied successfully - }) - .catch(err => { - console.error("Error copying text: ", err); - }); -}; - -/** - * @description this function sets for every ch-code the value, by getting the - */ -const extractCodeContent = str => { - const match = str.match(/`([^`]*)`/); - return match ? match[1] : null; -}; -const getChCodeValues = () => { - document.querySelectorAll(ARTICLE_CODE_SELECTOR).forEach(articleCode => { - // Find the script tag inside each articleCode - const script = articleCode.querySelector("script"); - const chCodeElement = articleCode.querySelector("ch-code"); - const chCodeElementHasId = chCodeElement.getAttribute("id"); - if (script && chCodeElement && !chCodeElementHasId) { - // If chCodeElement has no id, assume that the chCode value is a string inside the script tag. - const scriptChCode = extractCodeContent(script.textContent); - chCodeElement.value = scriptChCode; - } - }); -}; - -/** - * @description this function includes a "Copy Bundle" that will be rendered at the top of the page. - */ -const includeBundleButton = () => { - const bundleValue = document.body.getAttribute("data-bundle"); - const MAIN_REF = document.querySelector(MAIN_SELECTOR); - - if (bundleValue !== null && MAIN_REF) { - // if bundleValue.length is 0, it means this component does not requires a bundle. - // loading the icons is not required if the component does not requires a bundle. - const PAGE_TITLE = document.title; - let COPY_ICON; - let CHECK_ICON; - let WARNING_ICON; - let chImage; - let buttonCaption; - - if (bundleValue.length !== 0) { - // Icons references - COPY_ICON = getIconPath({ - category: "system", - name: "copy", - colorType: "primary" - }); - CHECK_ICON = getIconPath({ - category: "system", - name: "check", - colorType: "primary" - }); - WARNING_ICON = getIconPath({ - category: "system", - name: "warning", - colorType: "primary" - }); - } - - // Create the .bundle-container - const bundleContainer = document.createElement("header"); - bundleContainer.className = "bundle-container"; - - // Create and add the ch-image element - if (bundleValue.length !== 0) { - chImage = document.createElement("ch-image"); - chImage.className = "icon-md"; - chImage.src = COPY_ICON; - } - - // Create the "copy bundle" button - const copyBundleButton = document.createElement("button"); - copyBundleButton.className = "button-tertiary button-icon-and-text"; - if (bundleValue.length !== 0) { - buttonCaption = `Copy ${PAGE_TITLE} Bundle`; - } else { - buttonCaption = `No Bundle Required For ${PAGE_TITLE}`; - } - const buttonCaptionTextNode = document.createTextNode(buttonCaption); - - if (bundleValue.length !== 0) { - copyBundleButton.addEventListener("click", e => { - navigator.clipboard - .writeText(`"${bundleValue}"`) - .then(() => { - chImage.nextSibling.textContent = "Bundle Copied!"; - chImage.src = CHECK_ICON; - e.target.style.pointerEvents = "none"; - }) - .catch(err => { - chImage.nextSibling.textContent = "Failed to Copy"; - chImage.src = WARNING_ICON; - e.target.style.pointerEvents = "none"; - }); - setTimeout(() => { - chImage.nextSibling.textContent = buttonCaption; - chImage.src = COPY_ICON; - e.target.style.pointerEvents = "auto"; - }, 1500); - }); - } - - // Appends - if (bundleValue.length !== 0) { - copyBundleButton.appendChild(chImage); - chImage.after(buttonCaptionTextNode); - } else { - copyBundleButton.innerText = buttonCaption; - copyBundleButton.disabled = true; - } - bundleContainer.appendChild(copyBundleButton); - MAIN_REF.insertBefore(bundleContainer, MAIN_REF.firstChild); - } -}; - -const includeBundleButtonV2 = () => { - const bundleValue = document.body.getAttribute("data-bundle"); - - if (bundleValue !== null && topBarRef) { - // if bundleValue.length is 0, it means this component does not requires a bundle. - const PAGE_TITLE = document.title; - let COPY_ICON; - let CHECK_ICON; - let WARNING_ICON; - let chImage; - let buttonCaption; - - // Icons references - COPY_ICON = getIconPath({ - category: "system", - name: "copy", - colorType: "primary" - }); - CHECK_ICON = getIconPath({ - category: "system", - name: "check", - colorType: "primary" - }); - WARNING_ICON = getIconPath({ - category: "system", - name: "warning", - colorType: "primary" - }); - - // Create and add the ch-image element - chImage = document.createElement("ch-image"); - chImage.className = "icon-md"; - chImage.src = COPY_ICON; - - // "copy bundle" container (for Label + Button) - const copyBundleContainer = document.createElement("div"); - copyBundleContainer.classList.add("copy-bundle__container"); - - // "copy bundle" label - const copyBundleLabel = document.createElement("label"); - copyBundleLabel.classList.add("copy-bundle__label"); - copyBundleLabel.textContent = "Bundle:"; - - // Create the "copy bundle" button - const copyBundleButton = document.createElement("button"); - copyBundleButton.className = "button-tertiary button-icon-and-text"; - buttonCaption = `${bundleValue}`; - - const buttonCaptionTextNode = document.createTextNode(buttonCaption); - - copyBundleButton.addEventListener("click", e => { - navigator.clipboard - .writeText(`"${bundleValue}"`) - .then(() => { - chImage.previousSibling.textContent = "Copied!"; - chImage.src = CHECK_ICON; - e.target.style.pointerEvents = "none"; - }) - .catch(err => { - chImage.previousSibling.textContent = "Failed to Copy"; - chImage.src = WARNING_ICON; - e.target.style.pointerEvents = "none"; - }); - setTimeout(() => { - chImage.previousSibling.textContent = buttonCaption; - chImage.src = COPY_ICON; - e.target.style.pointerEvents = "auto"; - }, 1500); - }); - - // Appends - copyBundleButton.appendChild(buttonCaptionTextNode); - copyBundleButton.appendChild(chImage); - // chImage.after(buttonCaptionTextNode); - copyBundleContainer.appendChild(copyBundleLabel); - copyBundleContainer.appendChild(copyBundleButton); - - topBarRef.appendChild(copyBundleContainer); - } -}; - -/** - * @description: this function includes for every section a caption at the end that indicates the end. - */ -const includeEndOfSectionCaption = () => { - const pageSections = document.querySelectorAll(SECTION_SELECTOR); - pageSections.forEach(section => { - const sectionTitleEl = section.querySelector(SECTION_TITLE_SELECTOR); - if (sectionTitleEl && sectionTitleEl.textContent.trim().length > 0) { - const endOfSectionEl = document.createElement("p"); - endOfSectionEl.classList.add("section__end-caption"); - endOfSectionEl.textContent = `end of ${sectionTitleEl.textContent.trim()} section`; - section.appendChild(endOfSectionEl); - } - }); -}; - -document.addEventListener("DOMContentLoaded", function () { - CONTAINER_REF = document.querySelector(".container"); - includeFavicon(); - addGoogleFonts(); - addArticleTitles(); - addTitleAnchors(); - setScheme(); - toggleRTLBtn(); - addCopyCodeFunctionality(); - listenToCtrlCmd(); - includeSidebar(); - includeTopBar(); - getChCodeValues(); - // includeBundleButton(); // This version adds the button below the top-bar - includeBundleButtonV2(); // This version adds the button inside the top-bar - includeChameleonURL(); - includeEndOfSectionCaption(); -}); diff --git a/packages/mercury/showcase/assets/styles/main.css b/packages/mercury/showcase/assets/styles/main.css deleted file mode 100644 index 20dca5853..000000000 --- a/packages/mercury/showcase/assets/styles/main.css +++ /dev/null @@ -1,612 +0,0 @@ -:root { - --sc-base__border-color: var(--mer-color__neutral-gray--500); - --sc-base__body-line-height: 1.7; - /* TOKENS MAIN */ - --body__font-size: 16px; - --body__line-height: 16px; - /* .container */ - --container__max-width: 960px; - --container__padding-inline: 32px; - /* section */ - --section: ; - --section__gap: 128px; - --section__padding-block: 128px; - --section-header__gap: 24px; - --section-title__font-size: 36px; - --section-title__color: var(--mer-color__neutral-gray--100); - --section-title__font-family: var(--mer-font-family--title); - --section-title__font-weight: var(--mer-font__weight--light); - --section-description__font-size: 16px; - --section-description__line-height: var(--sc-base__body-line-height); - --section-description__max-width: 640px; - --articles-container__gap: 0; - /* article */ - --article-padding-block: 64px 72px; - --article__gap: 32px; - --article-header__gap: 16px; - --article-header__margin-block-end: 32px; - --article-title__font-size: 20px; - --article-title__font-weight: 400; - --article-title__pipe-font-size: 14px; - --article-title__pipe-padding-inline: 4px; - --article-description__font-size: 14px; - --article-description__max-width: 640px; - --article-sub-title__font-size: 16px; - --article-mini-title__font-size: 12px; - --article-border-block-end: 1px solid var(--mer-color__neutral-gray--700); - /* pills */ - --article-pills__gap: 12px; - --article-pill__font-family: "JetBrains Mono", monospace; - --article-pill__font-size: 12px; - --article-pill__font-weight: 500; - --article-pill__padding-inline: 8px; - --article-pill__height: 22px; - --article-pill__bg-color: transparent; - --article-pill__bg-border-width: 1px; - --article-pill__color--class: #64d9a899; - --article-pill__color--icon: #ffc96b99; - --article-pill__color--property-string: #5ba7ff80; - --article-pill__color--property-boolean: #fb7c8499; - --article-pill__color--property-number: #ba7cfb99; - /* content */ -} -/*==================== -DS overrides -For the showcase some DS styles are better overridden -====================*/ - -/*==================== -Helper Classes -====================*/ -.line-through { - text-decoration: line-through; -} -.d-grid { - display: grid; -} -.c-green { - color: #30cbb8; -} - -/*==================== -Grid items -====================*/ -.dummy-grid-container { - display: grid; - gap: 8px; - grid-template-columns: 1fr; -} -.dummy-grid-container-2 { - grid-template-columns: repeat(2, 1fr); -} -.dummy-grid-container-3 { - grid-template-columns: repeat(3, 1fr); -} -.dummy-grid-container__item { - padding: 12px 16px; - font-size: 16px; - border-radius: 4px; - display: flex; - align-items: center; - justify-content: center; - border-width: 1px; - border-style: solid; - color: var(--item__color); - background-color: var(--item__bg-color); - border-color: var(--item__border-color); - --item__bg-color: var(--mer-surface__elevation--01); -} -a.dummy-grid-container__item { - color: inherit !important; - --item__bg-color: var(--mer-surface__elevation--01); -} -a.dummy-grid-container__item:hover { - --item__bg-color: var(--item__bg-color--hover); - --item__border-color: var(--item__border-color--hover); - --item__color: var(--item__color--hover); -} -a.dummy-grid-container__item:active { - --item__bg-color: var(--item__bg-color--selected); - --item__border-color: var(--item__border-color--selected); - --item__color: var(--item__color--selected); -} -/*==================== -Dashed dummy border -====================*/ - -.dummy-border-highlighted { - --dummy-border-color: var(--mer-border-color__primary); -} -.dummy-border-dim { - --dummy-border-color: var(--mer-border-color__on-surface); -} -.dummy-border { - border: 1px dashed var(--dummy-border-color); -} -.dummy-border-block-start { - border-block-start: 1px dashed var(--dummy-border-color); -} -.dummy-border-block-end { - border-block-end: 1px dashed var(--dummy-border-color); -} -.dummy-border-inline-start { - border-inline-start: 1px dashed var(--dummy-border-color); -} -.dummy-border-inline-end { - border-inline-end: 1px dashed var(--dummy-border-color); -} - -/*==================== -Dummy Layout -====================*/ -.layout { - background-color: var(--mer-surface__elevation--01); - height: 300px; -} -.layout__panel { - border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--01); - border-radius: var(--mer-border__radius--sm); - background-color: var(--mer-surface__elevation--02); - display: grid; - align-content: center; - justify-content: center; - font-size: var(--mer-font__size--xs); -} -/*==================== -General -====================*/ -/* Scroll */ -::-webkit-scrollbar { - width: var(--mer-spacing--xs); - height: var(--scrollbar__size); -} -::-webkit-scrollbar-track { - background-color: var(--scrollbar-track__bg-color); - border-radius: var(--scrollbar-track__border-radius); -} -::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb__bg-color); - border-radius: var(--scrollbar-thumb__border-radius); -} -::-webkit-scrollbar-corner { - background: transparent; -} - -/* Other */ -* { - scroll-behavior: smooth; -} -body.has-top-bar .main { - padding-block-start: var(--sc-top-bar__height); -} -.main a { - text-decoration: underline; - /* color: var(--mer-accent__primary); */ -} -.main a:hover { - text-decoration: underline; - color: var(--mer-accent__primary); - /* color: var(--mer-accent__primary--hover); */ -} -.main a:active { - text-decoration: underline; - color: var(--mer-accent__primary--active); -} -html { - background-color: var(--mer-color__surface); -} -body.showcase { - display: block; /*WA: Prevent issues with scroll in internal controls due to display: grid on the body*/ -} -.article[hidden] { - display: none; -} -::selection { - background-color: var(--mer-color__tinted-primary--10); - color: var(--mer-text__on-surface); -} -.m-0 { - margin: 0; -} -body.all-hidden .article:not([show]), -body.all-hidden .section__header { - display: none; -} -.dummy-box { - display: flex; - align-items: center; - justify-content: center; - border: 2px dotted var(--mer-surface__elevation--03); - color: var(--mer-color__neutral-gray--500); - padding: var(--mer-spacing--xs); -} -.dummy-box--sm { - inline-size: 150px; -} -.dummy-box--md { - inline-size: 200px; -} -.dummy-box--lg { - inline-size: 400px; -} - -/* List */ -.article__list li { - position: relative; - padding-inline-start: 12px; - display: block; -} -.article__list li::before { - position: absolute; - top: 0.8em; - left: 0; - content: ""; - display: block; - width: 3px; - height: 3px; - background-color: var(--sc-base__border-color); -} - -.padding-bg-color { - --green-for-padding: var(--mer-color__tinted-green--60); - background-color: var(--green-for-padding) !important; -} - -/*==================== -Top Bar -====================*/ -.top-bar { - background-color: rgba(0, 0, 0, 0.5); - padding: 12px 32px; - position: fixed; - width: 100%; - z-index: 1; - backdrop-filter: blur(15px) saturate(1.5); -} -.top-bar__button { - border: 1px solid rgb(153, 153, 153); - font-size: 14px; - padding: 4px 12px; - border-radius: 2px; -} -.top-bar__button:hover { - filter: brightness(1.5); -} -.top-bar__button:active { - filter: brightness(1.2); -} - -/*==================== -Container -====================*/ -.main { - height: 100%; - overflow-y: auto; -} -.container { - width: 100%; - max-width: var(--container__max-width); - padding-inline: var(--container__padding-inline); - margin: 0 auto; -} -.container.reverse { - display: flex; - flex-direction: column-reverse; -} - -/*==================== -Section -====================*/ -.section { - display: flex; - flex-direction: column; - padding-block: var(--section__padding-block); - gap: var(--section__gap); - position: relative; -} - -.section__articles-container { - display: flex; - flex-direction: column; -} -.section__articles-container.reverse { - flex-direction: column-reverse; -} -.section__articles-container.reverse .article { - padding-block-end: var(--article-padding-block); - padding-block-start: 0; -} - -.section:not(:last-of-type) { - border-bottom: 3px dashed var(--mer-color__neutral-gray--700); -} -.section__header { - display: flex; - flex-direction: column; - gap: var(--section-header__gap); -} -.section__title { - color: var(--section-title__color); - font-size: var(--section-title__font-size); - font-family: var(--section-title__font-family); - font-weight: var(--mer-font__weight--light); -} -.section__title--mono { - font-family: monospace; -} -.section__description { - font-size: var(--section-description__font-size); - max-width: var(--section-description__max-width); - line-height: var(--section-description__line-height); -} -.section__description--note::before { - content: "note:"; - display: block; - font-weight: 600; - margin-block-end: var(--mer-spacing--2xs); - font-size: 16px; -} -.section__description--note { - color: var(--mer-color__neutral-gray--400); - font-size: var(--mer-font__size--2xs); - padding-block: var(--mer-spacing--sm); - padding-inline: var(--mer-spacing--md); - border-inline-start: 2px solid var(--mer-border-color__on-surface); - background-color: var(--mer-surface__elevation--01); - border-radius: var(--mer-border__radius--sm); -} -.section__end-caption { - position: absolute; - bottom: 0; - left: 50%; - transform: translateY(50%) translateX(-50%); - padding: 4px 12px; - background-color: var(--mer-surface); - border-radius: 2px; - font-style: italic; - font-size: var(--mer-font__size--xs); - color: var(--mer-color__neutral-gray--500); -} -.section:last-of-type .section__end-caption { - bottom: calc(var(--section__padding-block) / 2); -} -/*==================== -Articles -====================*/ -/* articles__container*/ -.articles-container { - display: flex; - flex-direction: column; - gap: var(--articles-container__gap); -} -/* article */ -.article { - display: flex; - flex-direction: column; - padding-block: var(--article-padding-block); - gap: var(--article__gap); -} -.article:not(:last-child) { - /* border-block-end: var(--article-border-block-end); */ - border-block-end: 0.5px solid; /* Set the border width */ - border-image: linear-gradient( - to right, - transparent, - var(--mer-color__neutral-gray--600), - transparent - ) - 1; -} -.article.no-separator { - border-block-end: none; - padding-block-end: 0; -} -.article:first-of-type { - padding-block-start: 0; -} -.article:last-child { - padding-block-end: 0; -} -/* article header */ -.article__header { - display: flex; - flex-direction: column; - gap: var(--article-header__gap); -} -/* articles title */ -.article__title { - font-size: var(--article-title__font-size); - font-weight: var(--article-title__font-weight); - display: flex; - align-items: center; -} -.article__number-id { - font-family: monospace; - font-size: var(--article-title__font-size); - display: flex; - align-items: center; -} -.article__number-id::after { - content: "|"; - font-size: 0.8em; - padding: 0 8px; - opacity: 0.25; -} -.article__description { - font-size: var(--article-description__font-size); - max-width: var(--article-description__max-width); - line-height: var(--sc-base__body-line-height); -} -.article__sub-title { - font-size: var(--article-sub-title__font-size); -} -/* articles pills */ -.article__pills { - list-style-type: none; - padding: 0; - margin: 0; - display: flex; - gap: var(--article-pills__gap); - display: none; /*hide because ch-code provides the info.*/ -} -.article__pill { - font-family: var(--article-pill__font-family); - font-size: var(--article-pill__font-size); - font-weight: var(--article-pill__font-weight); - padding-inline: var(--article-pill__padding-inline); - height: var(--article-pill__height); - background-color: var(--article-pill__bg-color); - display: flex; - align-items: center; - border-width: var(--article-pill__bg-border-width); - border-style: solid; - border-radius: calc(var(--article-pill__height) / 2); - border: none; - background: var(--mer-color__neutral-gray--1000); -} -.article__pill--attribute { - /* background-color: transparent; */ - /* border-color: var(--article-pill__color--attribute); */ - color: var(--article-pill__color--attribute); -} -.article__pill--class { - /* background-color: transparent; */ - /* border-color: var(--article-pill__color--class); */ - color: var(--article-pill__color--class); -} -.article__pill--icon { - /* background-color: transparent; */ - /* border-color: var(--article-pill__color--icon); */ - color: var(--article-pill__color--icon); -} -.article__pill--property-string { - /* background-color: transparent; */ - /* border-color: var(--article-pill__color--property-string); */ - color: var(--article-pill__color--property-string); -} -.article__pill--property-number { - /* background-color: transparent; */ - /* border-color: var(--article-pill__color--property-number); */ - color: var(--article-pill__color--property-number); -} -.article__pill--property-boolean { - /* background-color: transparent; */ - /* border-color: var(--article-pill__color--property-boolean); */ - color: var(--article-pill__color--property-boolean); -} -/* article__main*/ -.article__main { - display: flex; - flex-direction: column; - gap: var(--mer-spacing--lg); -} - -/*==================== -ch-code -====================*/ -.code { - position: relative; - transition: background-color 50ms; - max-height: 360px; - border-block-start: none; -} -.code .article__pill { - opacity: 0; - transition: 100ms opacity; - position: absolute; - right: 9px; - top: 9px; - /* 9px makes the pill vertically centered on a ch-code of one line*/ -} -.code:hover .article__pill { - opacity: 1; -} -body.ctrl-cmd-pressed .code { - cursor: pointer; -} -body.ctrl-cmd-pressed .article__pill { - opacity: 0 !important; -} -/* generated header and copy button (/showcase/assets/scripts.js) */ -.code__header { - --code-header__color: var(--mer-color__neutral-gray--400); - font-size: var(--mer-font__size--3xs); - background-color: var(--mer-color__neutral-gray--700); - display: flex; - justify-content: end; - overflow: hidden; - color: var(--code-header__color); - /* border-top-left-radius: var(--ch-code__border-radius); - border-top-right-radius: var(--ch-code__border-radius); */ - /* border-radius should be equal to .code border-radius */ - border-top-left-radius: var(--mer-border__radius--sm); - border-top-right-radius: var(--mer-border__radius--sm); -} -/* .code__header should not implement padding. instead it is better for the elements inside to implement padding. This helps reduce vertical space in the .code__header. */ -.code__header > * { - /* padding-inline: var(--mer-spacing--md); - padding-block: var(--mer-spacing--2xs); */ - padding: var(--mer-spacing--2xs); - text-transform: uppercase; - /*border-inline-start: var(--mer-border__width--sm) solid - var(--mer-color__neutral-gray--700);*/ -} -.code__button { - color: var(--code-header__color); - block-size: 30px; - padding-block: 0; - font-size: 11px; -} -.code__button:hover { - cursor: pointer; - --code-header__color: var(--mer-color__neutral-gray--300); - background-color: var(--mer-color__neutral-gray--650); -} -.code__button:active { - --code-header__color: var(--mer-color__neutral-gray--400); - background-color: var(--mer-color__neutral-gray--700); -} -.code__header + .code { - border-top-left-radius: 0; - border-top-right-radius: 0; -} -.code__copy-button { - display: flex; - width: 100%; - flex-direction: row-reverse; -} -.code__button--documentation { - pointer-events: none; - padding-inline: 12px; -} -.code__copy-button::before { - content: ""; - width: var(--mer-spacing--lg); - height: var(--mer-spacing--lg); - display: inline-block; - background-color: var(--code-header__color); - -webkit-mask: no-repeat center / 75% url("../images/copy.svg"); -} -.code--highlight { - animation: bgChange 0.1s linear 2; - animation-direction: alternate; -} -@keyframes bgChange { - from { - background-color: var(--mer-color__neutral-gray--800); - } - to { - background-color: var(--mer-color__neutral-gray--700); - } -} - -/*==================== -code inline tag -====================*/ -code { - background-color: var(--mer-color__neutral-gray--650); - padding: 2px 6px; - border-radius: 4px; - font-size: 12px; - color: var(--mer-text__on-elevation); -} diff --git a/packages/mercury/showcase/assets/styles/reset.css b/packages/mercury/showcase/assets/styles/reset.css deleted file mode 100644 index 59b7d9254..000000000 --- a/packages/mercury/showcase/assets/styles/reset.css +++ /dev/null @@ -1,13 +0,0 @@ -/* List Reset */ -ul, -ol { - margin: 0; - padding: 0; - list-style: none; -} - -/* Optionally, reset other list-related elements */ -li { - margin: 0; - padding: 0; -} diff --git a/packages/mercury/showcase/assets/styles/sidebar.css b/packages/mercury/showcase/assets/styles/sidebar.css deleted file mode 100644 index 98ae77a7e..000000000 --- a/packages/mercury/showcase/assets/styles/sidebar.css +++ /dev/null @@ -1,224 +0,0 @@ -:root.dark { - /*values for the showcase that I prefer*/ - --mer-color__old-neutral-gray--100: #525151; - --mer-color__old-neutral-gray--300: #999999; - --mer-color__old-neutral-gray--700: #333333; - --mer-color__old-neutral-gray--800: #1a1a1a; -} -:root.light { - /*values for the showcase that I prefer*/ - --mer-color__old-neutral-gray--100: #cccccc; - --mer-color__old-neutral-gray--300: #696969; - --mer-color__old-neutral-gray--700: #b3b3b3; - --mer-color__old-neutral-gray--800: #cccccc; -} - -:root { - /*Sidebar*/ - --sc-sidebar__width: 250px; - --sc-sidebar__font-size: var(--mer-font__size--xs); - --sc-sidebar__color: var(--mer-color__neutral-gray--300); - --sc-sidebar__bg-color: var(--mer-color__neutral-gray--800); - --sc-sidebar__padding: var(--mer-spacing--lg); - --sc-sidebar__border-color: var(--sc-base__border-color); - - /*Sidebar Header*/ - --sc-sidebar-header__padding-block: var(--sc-sidebar__padding); - --sc-sidebar-header__padding-inline: var(--sc-sidebar__padding); - --sc-sidebar-header__border-block-end: 1; - - /*Sidebar Nav*/ - --sc-sidebar-nav__padding-block: var(--sc-sidebar__padding); - --sc-sidebar-nav__padding-inline: var(--sc-sidebar__padding); - - /*Sidebar List Child*/ - --sc-sidebar-list-child__margin-inline-start: var(--mer-spacing--sm); -} - -/*==================== -General -====================*/ - -body.showcase[data-sidebar] { - display: grid; - grid-template-columns: var(--sc-sidebar__width) 1fr; /* 250px for aside, rest for main */ - height: 100vh; /* Full viewport height */ - margin: 0; -} - -/*==================== -General -====================*/ - -.sidebar { - background-color: var(--sc-sidebar__bg-color); - color: var(--sc-sidebar__color); - display: grid; - grid-template-rows: auto 1fr; - overflow-y: auto; -} - -/*==================== -Header -====================*/ - -.sidebar__header, -.sidebar__footer { - text-align: center; - color: var(--mer-color__neutral-gray--300); - text-transform: uppercase; - font-size: 13px; - letter-spacing: 1px; - font-family: var(--mer-font-family--inter-semi-bold); -} -.sidebar__header, -.sidebar__footer-link { - padding-inline: var(--sc-sidebar-header__padding-inline); - display: flex; - align-items: center; - justify-content: center; - height: var(--sc-top-bar__height); -} -.sidebar__header { - border-block-end: 1px solid var(--mer-surface__elevation--02); -} -.sidebar__footer { - display: none; - border-block-start: 1px solid var(--sc-sidebar__border-color); -} -.sidebar__footer-text--the-gold { - color: var(--mer-color__message-yellow--100); - filter: hue-rotate(361deg); /*fix the yellow difference*/ -} -.sidebar__footer-text:nth-child(2) { - display: none; -} -.sidebar__footer-link:hover .sidebar__footer-text:nth-child(2) { - display: block; -} -.sidebar__footer-link:hover .sidebar__footer-text:nth-child(1) { - display: none; -} - -/*==================== -Nav -====================*/ - -.sidebar__nav { - padding-block: var(--sc-sidebar-nav__padding-block); - padding-inline: var(--sc-sidebar-nav__padding-inline); - font-size: var(--sc-sidebar__font-size); - flex-grow: 1; - overflow-y: auto; -} - -/*==================== -Section -====================*/ - -.sidebar__section { - display: flex; - flex-direction: column; - gap: 8px; -} - -.sidebar__section:not(:last-child) { - padding-block-end: 16px; - margin-block-end: 16px; - border-block-end: 1px solid var(--mer-color__neutral-gray--700); -} - -/* Title */ -.sidebar__section-title { - font-weight: var(--mer-font__weight--semi-bold); - text-transform: capitalize; - color: var(--mer-color__neutral-gray--200); -} - -/*==================== -List -====================*/ - -.sidebar__list > li > a { - letter-spacing: 0.05em; -} - -.sidebar__list > li { - text-transform: uppercase; - font-size: 12px; - font-weight: 400; -} - -.sidebar__list li { - line-height: 1.6em; -} -.sidebar__list li:not(:last-child) { -} -.sidebar__list li a { - position: relative; - padding: 4px 0 4px 12px; - display: block; -} -.sidebar__list li a:hover { - color: var(--mer-color__neutral-gray--100); -} -.sidebar__list li a:hover::before { - background-color: var(--mer-color__neutral-gray--100); -} -.sidebar__list li a:active { - color: var(--mer-color__neutral-gray--400); -} -.sidebar__list li a:active::before { - background-color: var(--mer-color__neutral-gray--400); -} -.sidebar__list li a::before { - position: absolute; - top: 50%; - left: 0; - content: ""; - display: block; - width: 3px; - height: 3px; - transform: translateY(-50%); - - background-color: var(--sc-base__border-color); -} -/* current page */ -.sidebar__list li.current-page > a { - pointer-events: none; - color: var(--mer-accent__primary); - font-weight: 600; -} -.sidebar__list li.current-page > a::before { - background-color: var(--mer-accent__primary); -} -/*List Parent*/ -.sidebar__list--parent { - text-transform: uppercase; - letter-spacing: 0.5px; - font-size: 12px; -} -/*List Child*/ -.sidebar__list--child { - margin-inline-start: var(--sc-sidebar-list-child__margin-inline-start); - position: relative; - padding: 2px 0; - text-transform: lowercase; - letter-spacing: 0.5px; - font-size: 12px; -} -.sidebar__list--child::before { - content: ""; - height: calc(100% - 15px); - width: 2px; - position: absolute; - left: calc(var(--sc-sidebar-list-child__margin-inline-start) * -1); - top: 3%; - border-left: 1px dashed var(--sc-sidebar__border-color); -} -/*List Child Section Divider */ -.current-page__section-title { - padding: 4px 0 2px 0; - text-transform: capitalize; - color: var(--mer-text__bright); -} diff --git a/packages/mercury/showcase/assets/styles/top-bar.css b/packages/mercury/showcase/assets/styles/top-bar.css deleted file mode 100644 index 35b37b598..000000000 --- a/packages/mercury/showcase/assets/styles/top-bar.css +++ /dev/null @@ -1,45 +0,0 @@ -:root { - --sc-top-bar__height: 40px; -} -.container__top-bar { - position: fixed; - top: 0; - left: var(--sc-sidebar__width); - inline-size: calc(100vw - var(--sc-sidebar__width)); - block-size: var(--sc-top-bar__height); - z-index: 99; - - background-color: var(--mer-color__surface); - border-block-end: 1px solid var(--mer-surface__elevation--01); - padding-inline: 16px; - - display: flex; - align-items: center; - justify-content: space-between; -} -.container__top-bar a { - text-decoration: none !important; -} - -/*copy bundle*/ -.copy-bundle__label { - font-size: var(--control__font-size--regular); - color: var(--mer-text__on-disabled); -} -.copy-bundle__container { - display: flex; - align-items: center; -} - -/* .bundle-container { - border-block-end: 1px solid var(--mer-surface__elevation--01); - block-size: var(--sc-top-bar__height); - background-color: var(--mer-color__surface); - z-index: 99; - display: grid; - align-items: center; - text-transform: capitalize; - position: fixed; - top: var(--sc-top-bar__height); - inline-size: calc(100vw - var(--sc-sidebar__width)); -} */ diff --git a/packages/mercury/showcase/assets/tests/grid-01.png b/packages/mercury/showcase/assets/tests/grid-01.png deleted file mode 100644 index 93b70f8d4..000000000 Binary files a/packages/mercury/showcase/assets/tests/grid-01.png and /dev/null differ diff --git a/packages/mercury/showcase/assets/tests/grid-02.png b/packages/mercury/showcase/assets/tests/grid-02.png deleted file mode 100644 index f8512bf1e..000000000 Binary files a/packages/mercury/showcase/assets/tests/grid-02.png and /dev/null differ diff --git a/packages/mercury/showcase/button.html b/packages/mercury/showcase/button.html deleted file mode 100644 index f2ef782e4..000000000 --- a/packages/mercury/showcase/button.html +++ /dev/null @@ -1,840 +0,0 @@ - - - - - - Button - - - - - - - - - - -
-
- -
-
-

button primary

-

- A primary HTML button is a key element on a webpage, designed to - stand out and encourage user interaction. It typically represents - the main action a user should take, such as submitting a form or - saving changes. -

-
-
- -
-
-
-
- -
-
- - -
-
-
- - -
- -
- -
-
- -
-
- - -
-
-
- - -
- -
- -
-
- -
-
- - -
-
-
- - -
- -
- -
-
- -
-
- - -
-

- See how to set the icon -

-
-
- - -
- -
- -
-
- -
-
- - -
-

- See how to set the icon -

-
-
- - -
- -
- -
-
- -
-
- - -
-

- See how to set the icon -

-
-
- - -
- -
- -
-
- -
-
- - -
-

- See how to set the icon -

-
-
- - -
- -
- -
-
- -
-
- - -
-
-
- - - - - -
- -
- -
-
- -
-
- - -
-
-
-
-
- - -
- -
-

button secondary

-

- A secondary HTML button is a supportive element on a webpage, - designed to complement the primary button without overshadowing - it. It usually represents less critical actions, such as - navigating to another page or cancelling an action, providing - users with alternative options. -

-
-
- -
-
- -
-
- -
-
- - -
-
-
- - -
- -
- -
-
- -
-
- - -
-
-
- - -
- -
- -
-
- -
-
- - -
-
-
- - -
- -
- -
-
- -
-
- - -
-

- See how to set the icon -

-
-
- - -
- -
- -
-
- -
-
- - -
-

- See how to set the icon -

-
-
- - -
- -
- -
-
- -
-
- - -
-

- See how to set the icon -

-
-
- - -
- -
- -
-
- -
-
- - -
-
-
- - - - - -
- -
- -
-
- -
-
- - -
-
-
-
-
- - -
- -
-

button tertiary

-

- A tertiary HTML button is a minimalistic element on a webpage, - designed to be subtle and unobtrusive. With no border and a - transparent background, it typically represents the least critical - actions, such as linking to additional information or performing - tertiary tasks, allowing it to blend seamlessly into the content. -

-
-
- -
-
- -
-
- -
-
- - -
-
-
- - -
- -
- -
-
- -
-
- - -
-
-
- - -
- -
- -
-
- -
-
- - -
-

- See how to set the icon -

-
-
- - -
- -
- -
-
- -
-
- - -
-

- See how to set the icon -

-
-
- - -
- -
- -
-
- -
-
- - -
-

- See how to set the icon -

-
-
- - -
- -
- -
-
- -
-
- - -
-
- -
-
-
-
-
-
-
- - - - diff --git a/packages/mercury/showcase/chat.html b/packages/mercury/showcase/chat.html deleted file mode 100644 index 940c67160..000000000 --- a/packages/mercury/showcase/chat.html +++ /dev/null @@ -1,448 +0,0 @@ - - - - - - Chat - - - - - - - - - - - - -
-
- -
- -
-

ch-chat

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque - commodi nisi, quisquam placeat veniam eius labore sunt, libero, - error voluptatibus ipsa ipsum harum doloremque eveniet. Magnam - ipsum perspiciatis alias officiis! -

-
-
- -
-
- -
- -
-
- -
- - -
- - -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/checkbox.html b/packages/mercury/showcase/checkbox.html deleted file mode 100644 index a3c20ed98..000000000 --- a/packages/mercury/showcase/checkbox.html +++ /dev/null @@ -1,322 +0,0 @@ - - - - - - Checkbox - - - - - - - - - - -
-
- -
- -
-

checkbox

-

- A checkbox input element is a versatile component on a webpage, - designed to allow users to make binary choices. It is typically - used for selecting multiple options from a list or toggling a - setting on and off, making it an essential tool for enhancing user - interaction and data collection. -

-
-
- -
-
- -
-
- -
-
- - -
- -
- -
- - -
-
- -
-
- -
-
- - -
- -
- -
- - -
-
- -
-
- -
-
- - -
- -
- -
- - -
-
- -
-
- -
-
- - -
- -
- -
- - -
-
- -
-
- - -
-
- - -
- -
- -
- - -
-
- -
-
- -
-
- - -
- -
- -
- - -
-
- -
-
-
- - - -
-
-
- - -
- -
- -
- - -
-
- -
-
-
- - - -
-
-
- - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/combo-box.html b/packages/mercury/showcase/combo-box.html deleted file mode 100644 index 83756b26e..000000000 --- a/packages/mercury/showcase/combo-box.html +++ /dev/null @@ -1,178 +0,0 @@ - - - - - - Combo Box - - - - - - - - - - -
-
- -
- -
-

combo box

-

- A combo box is a versatile UI component in HTML, designed to - combine the features of a text input and a select element. It - allows users to either type a custom value or select from a - predefined list of options. This component enhances user - interaction by providing auto-suggestions, search functionality, - and the flexibility to handle both fixed and dynamic input. It is - ideal for scenarios where users need the convenience of a dropdown - list with the added capability of entering custom data. -

-
-
- -
-
- -
-
- - -
-
- - -
- -
- -
- - -
-
- -
-
- - -
-
- - -
- -
- -
- - -
-
- -
-
- - -
-
- - -
- -
- -
- - -
-
- -
-
- - -
-
- - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/dialog.html b/packages/mercury/showcase/dialog.html deleted file mode 100644 index 5aa2b310a..000000000 --- a/packages/mercury/showcase/dialog.html +++ /dev/null @@ -1,312 +0,0 @@ - - - - - - Dialog - - - - - - - - - - - - -
-
- -
- -
-

dialog

-

- A dialog component, similar to a modal, is an overlay element - designed to capture user attention for tasks like confirmations, - prompts, or additional information. It appears on top of the main - content, requiring user interaction to proceed -

-
-
- -
-
- -
-
- - -
-

- GeneXus is a low-code development platform that - streamlines the creation of enterprise applications by - automatically generating code for various environments - from a single specification. -

-

- It's ideal for developers who want to quickly prototype, - develop, and deploy applications across web, mobile, and - desktop platforms. With its model-driven approach, - GeneXus minimizes the need for manual coding, allowing - developers to focus on design and user experience. -

-

- The platform also excels in its robust integration - capabilities, enabling seamless connectivity with - various databases and third-party services. This - flexibility ensures that applications built with GeneXus - are scalable and maintainable, reducing the time and - effort required for updates and enhancements. -

-
-
- - -
-
- - -
-
- - -
- -
- -
- - - -
-
- -
- -
-

.control-footer

-

- The .control-footer class is a helper utility - designed to mimic the styles of the native dialog footer, - including padding and a border-block-start, ensuring a consistent - appearance across dialogs. It is particularly useful when certain - action buttons need to be embedded within the content area rather - than placed in the slotted dialog footer. By applying the - .control-footer class, developers can ensure these - buttons maintain the same visual treatment as standard footer - actions, while seamlessly integrating with the dialog's main - content logic. -

-
-
- -
-
- -
-

- In this example the dashed line all around is not part of the - .control-footer design. It has been added to - allow you to see the .control-footer boundaries. -

-
- -
-
- - -
- -
- -
- - -
-
- -
-

- Add the .control-footer-with-border to apply a - border-block-start border line as well. In this example the - dashed line is not part of the - .control-footer design. It has has been added to - allow you to see the .control-footer boundaries. -

-
- -
-
- - -
- -
- -
- - -
-
- -
-

- The .control-footer component only applies - padding to the top (block-start) by default. To add padding on - the other sides, you can use any of the available "spacing" - classes. These classes will adjust the padding based on the - specific context in which the .control-footer is - used. -

-
- -
-
- - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/doc-gemini-migration.html b/packages/mercury/showcase/doc-gemini-migration.html deleted file mode 100644 index b524f3eff..000000000 --- a/packages/mercury/showcase/doc-gemini-migration.html +++ /dev/null @@ -1,2043 +0,0 @@ - - - - - - Gemini Migration - - - - - - - - - - -
-
- -
- -
-

gemini migration

-

- When migrating from the "Gemini" design system to "Mercury," - you'll be transitioning your project's styles, components, and - design principles to align with the new system. This process - involves updating your codebase to replace Gemini-specific - components and styles with their Mercury equivalents, ensuring - consistency with Mercury's guidelines. The migration guide will - provide you with step-by-step instructions to help make this - transition as smooth as possible. -

-
- -
- -
-
- -
-

- When transitioning from a gxg-button that is - "only text": -

-
    -
  1. - Replace the gxg-button tag with a - button tag. -
  2. -
  3. Remove all the attributes and values
  4. -
  5. - Add any of the mercury classes that apply for "text only" - button types -
  6. -
-
- - - - -
-
- - - - -
-
- -
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-button that is - "text with icon": -

-
    -
  1. - Replace the gxg-button tag with a - button tag. -
  2. -
  3. Remove all the attributes and values
  4. -
  5. Add the .button-icon-and-text class.
  6. -
  7. - Insert a - ch-image inside the button and - follow the documentation for using an icon -
  8. -
-
- - - - -
- -
- - - - -
-
- -
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-combo-box: -

-
    -
  1. - Replace the gxg-combo-box tag with a - ch-combo-box-render tag. -
  2. -
  3. Remove all the attributes and values
  4. -
  5. Add the .combo-box class.
  6. -
  7. - Specify the ch-combo-box-render items following the model - property - -
  8. -
-
- - - - -
- -
- - - - -
-
- - -
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-form-checkbox: -

-
    -
  1. - Replace the gxg-form-checkbox tag with a - ch-checkbox tag. -
  2. -
  3. Remove all the attributes and values
  4. -
  5. Add the .checkbox class.
  6. -
  7. - Specify the control properties following the Chameleon - documentation -
  8. -
-
- - - - -
- -
- - - - -
-
- -
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-form-radio-group: -

-
    -
  1. - Replace the gxg-form-radio-group tag with a - ch-radio-group-render tag. -
  2. -
  3. Remove all the attributes and values
  4. -
  5. Add the .radio-group class.
  6. -
  7. - Specify the ch-radio-group-render radio item's following - the model property. -
  8. -
-
- - - - -
- -
- - - - -
-
- - -
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-form-text: -

-
    -
  1. - Replace the gxg-form-text tag with a - ch-edit tag. -
  2. -
  3. Remove all the attributes and values
  4. -
  5. Add the .input class.
  6. -
  7. - If the gxg-form-text was displaying an icon, - use the startImgSrc property -
  8. -
  9. - Specify the control properties following the Chameleon - documentation -
  10. -
-
- - - - -
- -
- - - - -
-
- -
- -
- -
-
- -
- - -
-
- -
-

- The transition steps from the - gxg-form-textarea are the same as the - gxg-form-text, since the - ch-edit can be behave as a textarea as well ✨. - To make the ch-edit behave like a textarea set the - multiline property to true. -

- -
- - - - -
- -
- - - - -
-
- -
- - -
-
-

- textarea showcase in progress -

-
-
-
- -
- - -
-
- -
-

- When transitioning from a gxg-grid: -

-
    -
  1. Remove the gxg-grid wrapper tag.
  2. -
  3. - For every grid tag, update the prefix - ch-grid-... with - ch-tabular-grid-.... -
  4. -
  5. - For every grid tag, add the appropriate css class. The class - of every tag begins with the prefix - .tabular-grid-.... - You can refer to this showcase documentation. -
  6. -
  7. - Specify the control properties following the Chameleon - documentation -
  8. -
-
- - - - -
- -
- - - - -
-
- - - - - - - - - - - - Uruguay - UY - ~3.5 million - - - - Brazil - BR - ~214 million - - - - Argentina - AR - ~46 million - - -
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-icon: -

-
    -
  1. - Replace the gxg-icon tag with a - ch-image tag. -
  2. -
  3. Remove all the attributes and values.
  4. -
  5. - Add the .icon-sm or .icon-md class - for setting the sizing. -
  6. -
  7. - Import and use the utility getIconPath to get - any of the Mercury library icons source. -
  8. -
  9. - Set the icon source as the ch-image - srcvalue. -
  10. -
  11. - Specify any other control properties following chameleon - documentation -
  12. -
-
- - - - -
- -
- - - - -
-
- - - - - -
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-label: -

-
    -
  1. - Replace the gxg-label tag with a - label tag. -
  2. -
  3. Remove all the attributes and values.
  4. -
  5. Add the .label class.
  6. -
  7. - For positioning the label around a control, you will have to - wrap both with a div with specific classes. Please - form label classes. -
  8. -
-
- - - - -
- -
- - - - -
-
-
- -
-
-
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-list-box: -

-
    -
  1. - Replace the gxg-list-box tag with a - ch-action-list-render tag. -
  2. -
  3. Remove all the attributes and values.
  4. -
  5. Add the .list-box class.
  6. -
  7. - Remove all the gxg-list-box-item items, as they - will be set with a model. -
  8. -
  9. - Specify other control properties if required, following - chameleon documentation. -
  10. -
-
- - - - -
- -
- - - - -
-
- - -
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-suggest: -

-
    -
  1. - Replace the gxg-suggest tag with a - ch-combo-box-render tag. -
  2. -
  3. Remove all the attributes and values
  4. -
  5. Add the .combo-box class.
  6. -
  7. - Specify the ch-combo-box-render items following the model - property - -
  8. -
  9. - Set the suggest property to - true to turn the suggest feature on. -
  10. -
  11. - Subscribe to the filterChange event listener, - and use the event.detail to filter the items - accordingly, by defining the filter value. -
  12. -
  13. - Specify the options by following the - suggestOptions - property - -
  14. -
-
- - - - -
- -
- - - - -
-
- - -
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-tabs: -

-
    -
  1. - Replace the gxg-tabs tag with a - ch-tab-render tag. -
  2. -
  3. Remove all the attributes and values.
  4. -
  5. Add the .tab class.
  6. -
  7. - Clear everything inside the ch-tab-render tag, - and then include as many div's as tab's you - would like, and define for every div, a - slot attribute with a unique identifier. -
  8. - -
  9. - Specify the tab buttons following the tab model - property - Note that the model item's id's should match the - corresponding slot value for the div's that you inserted - before. -
  10. -
-
- - - - -
- -
- - - - -
-
- -
-

- An apple is a sweet, edible fruit produced by an apple - tree. Apple trees are cultivated worldwide and are the - most widely grown species in the genus Malus. The tree - originated in Central Asia, where its wild ancestor, - Malus sieversii, is still found today. An apple is a - sweet, edible fruit produced by an apple tree. -

-
-
-

- A banana is an elongated, edible fruit – botanically a - berry – produced by several kinds of large herbaceous - flowering plants in the genus Musa. In some countries, - bananas used for cooking may be called "plantains", - distinguishing them from dessert bananas. -

-
-
-

- A cherry is the fruit of many plants of the genus - Prunus, and is a fleshy drupe. Commercial cherries are - obtained from cultivars of several species, such as the - sweet Prunus avium and the sour Prunus cerasus. -

-
-
- -
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-text: -

-
    -
  1. - Replace the gxg-text tag with a - p tag. -
  2. -
  3. Remove all the attributes and values
  4. -
  5. Add the .text-body class.
  6. -
-
- - - - -
- -
- - - - -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-title: -

-
    -
  1. - Replace the gxg-title tag with any of the six - heading html tags:
    h1, h2, - h3, h4, h5 or - h6. -
  2. -
  3. Remove all the attributes and values
  4. -
  5. - Add a .heading-* class, where - * represents your heading level. -
  6. -
  7. - Add any of the - allowed heading colors classes. The heading color will be transparent unless you apply a - valid color css class. -
  8. -
-
- - - - -
- -
- - - - -
-
-

This is a heading 1

-
-

And so on...

-
- -
- -
-
- -
- - -
-
- -
-

- When transitioning from a gxg-tree-view: -

-
    -
  1. - Replace the gxg-tree-view tag with a - ch-tree-view-render tag. -
  2. -
  3. Remove all the attributes and values
  4. -
  5. Add the .tree-view class.
  6. -
  7. - Specify the control properties following chameleon - documentation -
  8. -
-
- - - - -
- -
- - - - -
-
- - -
- -
- -
-
- -
- - -
-
- -
-

- The pill in mercury has not been created yet. -

- -
-
-

- mercury pill in progress -

-
-
-
- -
- - -
-
- -
-

- The buttons group in mercury has not been created yet. -

- -
-
-

- buttons group in progress -

-
-
-
- -
-
-
-
-
- - - diff --git a/packages/mercury/showcase/doc-gradients.html b/packages/mercury/showcase/doc-gradients.html deleted file mode 100644 index 9ded8f1fd..000000000 --- a/packages/mercury/showcase/doc-gradients.html +++ /dev/null @@ -1,285 +0,0 @@ - - - - - - Gradients - - - - - - - - - - - - -
-
- -
- -
-

gradients

-

- Gradients in a design system add visual depth and dimension, - offering a modern and dynamic look to interfaces. They can be used - to highlight key elements, create smooth transitions between - colors, and enhance brand identity by incorporating brand colors - in a more engaging way. Gradients also improve user experience by - drawing attention to important areas while maintaining a cohesive - aesthetic across the design. -

-
-
- -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
-
- - -
-
-
- -
-
-
-
-
-
-
-
-
- - diff --git a/packages/mercury/showcase/doc-helper-classes.html b/packages/mercury/showcase/doc-helper-classes.html deleted file mode 100644 index f40a3dfc1..000000000 --- a/packages/mercury/showcase/doc-helper-classes.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - Helper Classes - - - - - - - - - - - - -
-
- -
- -
-

helper classes

-

- Helper classes in a design system are utility classes designed to - apply common CSS properties quickly and consistently across a - project. They provide predefined styles for spacing, alignment, - typography, visibility, and more, enabling developers to easily - adjust elements without writing custom CSS each time. This - promotes consistency and efficiency in styling by using a - standardized set of classes.p> -

-
- -
- -
-
- -
-

- The .icon-and-text helper class ensures a - consistent and visually appealing gap between an icon and - accompanying text (or any other element) across your design - system. By applying this class, you can easily align icons and - text with a uniform spacing. (For documentation on the - ch-image please click on the link provided bellow the markup) -

-
-
- - your text or element here -
- -
-
- - - -
-
-
- icon -
-
-
-
-
-
-
-
- - diff --git a/packages/mercury/showcase/doc-icons.html b/packages/mercury/showcase/doc-icons.html deleted file mode 100644 index 0ec90ed0a..000000000 --- a/packages/mercury/showcase/doc-icons.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - Icons - - - - - - - - - - - - -
-
- -
-
- - diff --git a/packages/mercury/showcase/doc-items.html b/packages/mercury/showcase/doc-items.html deleted file mode 100644 index 8bf001281..000000000 --- a/packages/mercury/showcase/doc-items.html +++ /dev/null @@ -1,361 +0,0 @@ - - - - - - Item - - - - - - - - - - - -
-
- -
- -
-

items

-

- Many controls are constructed and depend on items. Although a - control items styles may differ a bit from other controls, the - base styles should remain the same in order to keep consistence. - "Base styles" refers to - color, border-color, and - background-color, in the four states: - enabled, hover, active and - disabled. -

-

- Other styles that affect the item structure, like - font-size, line-height and - padding should also maintain consistence in general, - but because there might be some controls that are bigger or - smaller, these styles are "allowed" to change in this cases. This - page is a documentation of the controls items colors and structure - styles. -

-
-
- -
-
- -
-
-
-
- This is how an enabled control item looks like -
-
-
-
- - - -
- -
- -
- - -
-
- -
-
-
-
- This is how an hovered control item looks like -
-
-
-
- - - -
- -
- -
- - -
-
- -
-
-
-
- This is how a selected control item looks like -
-
-
-
- - - -
- -
- -
- - -
-
- -
-
-
-
- This is how a selected + hover control item looks like -
-
-
-
- - - -
- -
- -
- - -
-
- -
-
-
-
- This is how a disabled control item looks like -
-
-
-
- - - -
- -
- -
- - -
-
- -
-
-
-
- This is how an enabled control item looks like -
-
- This is how an hovered control item looks like -
-
- This is how a selected control item looks like -
-
- This is how a selected + hover control item looks like -
-
- This is how a disabled control item looks like -
-
-
-
- -
- - -
-
- -
-

- Control items are always contained inside a container. A - regular container is usually the most common type of - container. It will apply some common styles like - background-color, gap and - padding. -

-
-
- - This is the first enabled control item - - - This is the second enabled control item - - - This is the third selected control item - - - This is the fourth selected control item - -
-
-
- - - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/doc-spacing.html b/packages/mercury/showcase/doc-spacing.html deleted file mode 100644 index fdb5fdad7..000000000 --- a/packages/mercury/showcase/doc-spacing.html +++ /dev/null @@ -1,364 +0,0 @@ - - - - - - Spacing - - - - - - - - - - - - - - -
-
- -
- -
-

body spacing

-

- In our web components library, some components come without - default padding to offer greater flexibility. This design choice - allows users to control the padding based on their specific needs - by applying one of our predefined padding classes. By providing a - wrapper <div> with the appropriate class, users - can easily customize the spacing inside the component, ensuring - that it aligns perfectly with their design requirements. -

-

- In the following examples the padding is represented by a - green background color. These - classes names apply for some web components, that are listed - at the bottom of this page. -

-
-
- -
-
- -
-

- Provides padding all around the box. -

-
-
-
Your content
-
-
-
- - - -
- -
- -
- - -
-
- -
-

- Provides padding for the padding-block property - (usually above and below the box). -

-
-
-
Your content
-
-
-
- - - -
- -
- -
- - -
-
- -
-

- Provides padding for the - padding-block-start property (usually above the - box). -

-
-
-
Your content
-
-
-
- - - -
- -
- -
- - -
-
- -
-

- Provides padding for the - padding-block-end property (usually below the - box). -

-
-
-
Your content
-
-
-
- - - -
- -
- -
- - -
-
- -
-

- Provides padding for the padding-inline property - (usually the left and right sides of the box). -

-
-
-
Your content
-
-
-
- - - -
- -
- -
- - -
-
- -
-

- Provides padding for the - padding-inline-start property (usually the left - side of the box). -

-
-
-
Your content
-
-
-
- - - -
- -
- -
- - -
-
- -
-

- Provides padding for the - padding-inline-start property (usually the right - side of the box). -

-
-
-
Your content
-
-
-
- - - -
- -
- -
- - -
-
- -
-

- The following are the web components of mercury that adhere to - the global padding classes mentioned above: -

- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/doc-tabular-controls.html b/packages/mercury/showcase/doc-tabular-controls.html deleted file mode 100644 index 3dc2f54d7..000000000 --- a/packages/mercury/showcase/doc-tabular-controls.html +++ /dev/null @@ -1,179 +0,0 @@ - - - - - - Controls inside Tablular Grid - - - - - - - - - - - -
-
- -
- -
-

tabular grid controls

-

- Explore our interactive showcase of versatile controls, including - combo-boxes, list-boxes, and more, seamlessly integrated into the - tabular-grid component. Each example demonstrates how these - controls adapt within the grid's structured layout, highlighting - their functionality and design -

-
-
- -
- -
- -
-
- - - - - - - - - AR - - Select Period - - - - - Spanish - - - - BR - - 1973-1974 - - - - - Portuguese - - -
-
- - -
- - -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/doc-utility-classes.html b/packages/mercury/showcase/doc-utility-classes.html deleted file mode 100644 index 503ded8b8..000000000 --- a/packages/mercury/showcase/doc-utility-classes.html +++ /dev/null @@ -1,238 +0,0 @@ - - - - - - Utility Classes - - - - - - - - - - - - - -
-
- -
- -
-

background

-

- CSS utility classes for background colors offer a fast, consistent - way to apply styles, reducing repetitive code. They speed up - development and simplify maintenance by centralizing color - updates, ensuring uniformity across the project. -

-
-
- -
-
- -
-

- Apply the .elevation-1 background color class - only when the container has no ancestor with an elevation - background. This approach maintains a clear visual hierarchy - by enhancing contrast between nested elevation containers. -

-
-
- -
- -
-
-
-
- - -
- -
- -
- - -
-
- -
-

- Apply the .elevation-2 background color class - when the parent container's has a - .elevation-1 background. This maintains a clear - visual hierarchy by enhancing contrast between nested - elevation containers. -

-
-
- -
- -
-
-
-
- - -
- -
- -
- - -
-
- -
-

- Apply the .elevation-3 background color class - when the parent container's has a - .elevation-2 background. This maintains a clear - visual hierarchy by enhancing contrast between nested - elevation containers. -

-
-
- -
- -
-
-
-
- - -
- -
- -
-
-
- - - -
- -
-

layout

-

- CSS utility classes for layouts provide a quick and consistent way - to structure content. They simplify applying common patterns like - flexbox or grid, speeding up development and ensuring uniformity, - while also making layout updates easier to maintain across a - project. -

-
- -
- -
-
- -
-

- The .icon-and-text helper class ensures a - consistent and visually appealing gap between an icon and - accompanying text (or any other element) across your design - system. By applying this class, you can easily align icons and - text with a uniform spacing. (For documentation on the - ch-image please click on the link provided bellow the markup) -

-
-
- - your text or element here -
- -
-
- - -
-
-
- icon -
-
-
-
-
-
-
-
- - diff --git a/packages/mercury/showcase/dropdown.html b/packages/mercury/showcase/dropdown.html deleted file mode 100644 index 0ce333d46..000000000 --- a/packages/mercury/showcase/dropdown.html +++ /dev/null @@ -1,211 +0,0 @@ - - - - - - Dropdown - - - - - - - - - - - -
-
- -
- -
-

dropdown

-

- A dropdown component is a versatile UI element designed to display - a list of options when triggered, allowing users to select one or - more items. It typically enhances navigation or input selection by - conserving space and presenting choices in an organized, - collapsible manner. Commonly used for menus, filters, or settings, - a dropdown ensures seamless user interaction while maintaining a - clean interface. -

-
-
- -
-
- -
-

- A plain dropdown offers a clean, simple interface for quick, - direct interactions. Without icons or nested items, it ensures - a minimalistic design that's easy to navigate and ideal for - straightforward selections. -

-
- - - - -
-
- - -
- -
- -
- - -
-
- -
-

- A dropdown with nested items enhances functionality by - organizing options into hierarchical groups. This design is - ideal for complex selections, allowing users to navigate - submenus while keeping the interface organized and efficient. -

-
- - - - - -
-
- - -
- -
- -
- - -
-
- -
-

- A dropdown with separators improves organization by dividing - items into clear categories. The separators visually group - related options, making navigation more intuitive and - enhancing the overall user experience. -

-
- - - - - -
-
- - -
- -
- -
- - -
-
- -
-

- A dropdown with a header or footer slot enhances usability by - allowing custom content, such as titles, descriptions, or - actions, to be placed above or below the main items. This - provides additional context or functionality, improving - clarity and streamlining user interaction. -

-
- -

- This is the header slot -

- - -
- -
-
- - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/form.html b/packages/mercury/showcase/form.html deleted file mode 100644 index 0a7440487..000000000 --- a/packages/mercury/showcase/form.html +++ /dev/null @@ -1,400 +0,0 @@ - - - - - - Form - - - - - - - - - - - -
-
-
- -
-

form classes

-

- Using form CSS classes for spacing and alignment streamlines the - styling process by providing a consistent and reusable set of - styles. This approach ensures uniformity across the application, - reduces the need for repetitive code, and simplifies maintenance. - It also enhances readability and efficiency, making it easier for - developers to apply and adjust styles quickly. Overall, form CSS - classes improve the user experience by delivering a more polished - and cohesive interface. -

-
-
- -
-
- -
-

- Displaying controls in a vertical layout enhances readability, - especially on mobile devices, by aligning with natural - scrolling. It organizes related controls intuitively and - adapts well to various screen sizes, ensuring a consistent - user experience. -

-
-
- your control - your control - your control -
-
-
- - - -
- -
- -
- - -
-
- -
-

- Adding labels to controls improves accessibility and usability - by clearly indicating the purpose of each control. Displaying - the label in a block direction, is great for clarity and - readability, especially in forms with limited horizontal - space, like on mobile devices. It makes it easy for users to - associate labels with their respective controls. -

-
-
-
- - your control -
-
- - your control -
-
- - your control -
-
-
-
- - - -
- -
- -
- - -
-
- -
-
- Adding labels to controls improves accessibility and usability - by clearly indicating the purpose of each control. Displaying - the label in an inline direction, is more compact and - efficient, allowing for quick scanning and understanding of - the form. It works well when you have enough horizontal space - and want to maintain a streamlined appearance. -
-
-
-
- - your control -
-
- - your control -
-
- - your control -
-
-
-
- - - -
- -
- -
- - -
-
- -
-
- A grid layout with aligned labels and controls ensures - consistency and readability, making it easier to scan and - understand the form. Each label and control having the same - width provides a clean, organized appearance, enhancing the - overall user experience. -
-
-
- - - your control - - - your control - - - your control -
-
-
- - - -
- -
- -
- - -
-
- -
-
- A custom grid layout allows for flexible arrangement of form - controls, such as placing two controls in the first row and a - full-width control in the second row. For custom grids you - should always apply the .field-group class on the - container, as this class defines the spacing between columns - and rows. Then, for defining your custom layout, we suggest - using grid-template such as in the next example. -
-
- -
- -
- - Control for Name -
- -
- - Control for Last Name -
- - -
-
-
- - - -
- -
- -
- - -
-
- -
-

- By default field group does not provide any padding. To apply - padding to the field group you will have to include - any of the global body padding classes - to the .field-group element. In this example the - dashed line all around is not part of the tree design. It has - been added to allow you to see the presence of padding. -

-
-
-
- - your control -
-
- - your control -
-
- - your control -
-
-
-
- - - -
- - -
- - -
-
-
-
-
- - diff --git a/packages/mercury/showcase/icon.html b/packages/mercury/showcase/icon.html deleted file mode 100644 index 527907314..000000000 --- a/packages/mercury/showcase/icon.html +++ /dev/null @@ -1,167 +0,0 @@ - - - - - - Icon - - - - - - - - - - -
-
- -
- -
-

icon

-

- Icons are essential in web development as they enhance user - experience by providing visual cues, improving navigation, and - making interfaces more intuitive. They help in quickly conveying - actions or information, reducing the need for extensive text, and - contributing to a clean, visually appealing design. -

-
-
- -
-
- -
-
- - - - -
-
- - -
- -
- -
- - -
-
- -
-
- - - - - - -
-
- - -
- -
- -
- - -
-
- -
-
-

- Mercury provides an utility function to get - any icon from the library - called getIconPath.
To set the icon on the - ch-image: -

-
    -
  • Import getIconPath.
  • -
  • - Use getIconPath to declare the category, - name, and optional color type. -
  • -
  • - Use the return from the preceding step to apply on the - ch-image src property. -
  • -
-
-
-
- - - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/icons/index.html b/packages/mercury/showcase/icons/index.html deleted file mode 100644 index 6edec643b..000000000 --- a/packages/mercury/showcase/icons/index.html +++ /dev/null @@ -1,203400 +0,0 @@ - - - - - - - Icons Showcase - - - - -
- - - Automatically generated -
- - - - - - - - -
- - -
- -

auto-generated scalable vector icons

- -

- 208 - - Multicolor Icons -

- - - - - -
- -

- patterns-default-associated

- - - -
- -
-

synchronized.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

modified.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

default-associated.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
- -

- patterns-default-associated

- - - -
- -
-

synchronized.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

modified.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

default-associated.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-
- - -
- -

- patterns

- - - -
- -
-

workwith-for-sd.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

work-with-web.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

tabs.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

tab.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

structure.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

row.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

pattern-category.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

parameters.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

parameter.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

orders.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

list.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

fixed-data.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

filters.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

events.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

documentation.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

detail.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

cell.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

attributes.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
- -

- patterns

- - - -
- -
-

workwith-for-sd.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

work-with-web.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

tabs.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

tab.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

structure.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

row.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

pattern-category.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

parameters.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

parameter.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

orders.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

list.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

fixed-data.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

filters.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

events.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

documentation.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

detail.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

cell.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

attributes.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-
- - -
- -

- objects-parts

- - - -
- -
-

variables.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

rules.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

events.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

conditions.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

condition.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
- -

- objects-parts

- - - -
- -
-

variables.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

rules.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

events.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

conditions.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

condition.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-
- - -
- -

- objects

- - - -
- -
-

workflow.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

work-panel.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

webpanel.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

web-component.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

version.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

url-rewrite.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

transaction.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

to-be-defined.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

theme.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

theme-web.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

theme-for-sd.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

table.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

super-app.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

subtype-group.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

structured-data-type.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

stencil.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

roles.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

report.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

references.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

query.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

procedure.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

patterns.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

panel-for-sd.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

orphant-document.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

offline-database.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

object.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

notification-templates.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

module.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

module-open.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

mini-app.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

menubar.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

menu.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

masterpage.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

main-object.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

language.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

knowledge-base.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

image.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

generator.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

generator-category.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

folder.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

folder-open.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

file.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

external-object.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

environment-select.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

environment-no-select.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

dso.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

domain.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

document.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

document-workflow.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

diagram.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

design.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

deployment-unit.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

dataview-index.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

datastore.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

datastore-category.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

data-view.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

data-selector.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

data-provider.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

dashboard.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

customization.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

conversational-flows.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

category.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

calendars.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

business-process-diagram.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

bg-color.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

attribute.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

api.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
- -

- objects

- - - -
- -
-

workflow.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

work-panel.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

webpanel.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

web-component.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

version.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

url-rewrite.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

transaction.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

to-be-defined.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

theme.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

theme-web.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

theme-for-sd.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

table.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

super-app.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

subtype-group.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

structured-data-type.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

stencil.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

roles.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

report.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

references.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

query.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

procedure.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

patterns.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

panel-for-sd.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

orphant-document.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

offline-database.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

object.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

notification-templates.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

module.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

module-open.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

mini-app.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

menubar.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

menu.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

masterpage.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

main-object.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

language.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

knowledge-base.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

image.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

generator.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

generator-category.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

folder.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

folder-open.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

file.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

external-object.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

environment-select.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

environment-no-select.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

dso.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

domain.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

document.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

document-workflow.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

diagram.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

design.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

deployment-unit.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

dataview-index.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

datastore.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

datastore-category.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

data-view.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

data-selector.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

data-provider.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

dashboard.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

customization.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

conversational-flows.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

category.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

calendars.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

business-process-diagram.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

bg-color.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

attribute.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

api.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-
- - -
- -

- gx-test

- - - -
- -
-

unit-test.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

unit-test-db.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

ui-test-web.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

ui-test-sd.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

test-suite.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

test-results.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

test-folder.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

test-folder-open.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

screenshot-viewer.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

run-unit-test.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

run-ui-test-web.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

run-ui-test-sd.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

run-tests.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

run-test-suite.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

run-test-cancel.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

result-warning.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

result-skipped.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

result-ok.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

result-exception.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

result-error.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

record-mock.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

plus.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

image.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

explorer.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

cutfo.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
- -

- gx-test

- - - -
- -
-

unit-test.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

unit-test-db.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

ui-test-web.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

ui-test-sd.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

test-suite.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

test-results.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

test-folder.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

test-folder-open.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

screenshot-viewer.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

run-unit-test.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

run-ui-test-web.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

run-ui-test-sd.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

run-tests.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

run-test-suite.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

run-test-cancel.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

result-warning.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

result-skipped.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

result-ok.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

result-exception.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

result-error.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

record-mock.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

plus.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

image.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

explorer.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

cutfo.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-
- - -
- -

- gx-server

- - - -
- -
-

public.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

private.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

new.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

lock-without-changes.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

lock-by-user-reserve.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

lock-by-user-changes.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

internal.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

delete.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

conflict.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

changes-commit-pending.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
- -

- gx-server

- - - -
- -
-

public.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

private.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

new.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

lock-without-changes.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

lock-by-user-reserve.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

lock-by-user-changes.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

internal.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

delete.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

conflict.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

changes-commit-pending.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-
- - -
- -

- general

- - - -
- -
-

version.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

swift.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

sql-server.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

services.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

sd.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

sd-web.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

sap-hana.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

references.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

qr-code.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

postgre-sql.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

patterns.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

oracle.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

mysql.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

launchpad.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

knowledge-base.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

java.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

informix.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

generator.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

environment-select.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

environment-no-select.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

db2.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

datastore.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

customization.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

csharp.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

apple.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

angular.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

android.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
- -

- general

- - - -
- -
-

version.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

swift.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

sql-server.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

services.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

sd.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

sd-web.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

sap-hana.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

references.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

qr-code.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

postgre-sql.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

patterns.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

oracle.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

mysql.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

launchpad.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

knowledge-base.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

java.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

informix.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

generator.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

environment-select.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

environment-no-select.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

db2.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

datastore.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

customization.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

csharp.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

apple.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

angular.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

android.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-
- - -
- -

- editing-structures

- - - -
- -
-

user-index.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

system-index.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

redundant-attribute.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

platforms.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

logical-attributes.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

formula-redundant.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

default.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

attribute-key.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

attribute-formula.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

attribute-description.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
- -

- editing-structures

- - - -
- -
-

user-index.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

system-index.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

redundant-attribute.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

platforms.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

logical-attributes.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

formula-redundant.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

default.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

attribute-key.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

attribute-formula.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

attribute-description.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-
- - -
- -

- controls

- - - -
- -
-

variable.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

treeview.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

text-block.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

tag-html.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

table.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

table-row.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

table-column.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

table-cell.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

tab.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

tab-page.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

snippet.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

smart-table.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

section.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

pop-up.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

messages.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

media-player.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

id-html.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
- -
-

html.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

horizontal-line.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

history-manager.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

gx-scheduler.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

group.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

grid.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

google-geomap.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

google-charts.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

google-annotated-tmeline.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

google-analytics.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

free-style-grid.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

font.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

flex.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

file-upload.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

error-viewer.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

embedded-page.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

default.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

component.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

class-html.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

canva.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

call-target.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

button.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

button-group.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

action-group.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

action-group-item.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
- -

- controls

- - - -
- -
-

variable.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

treeview.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

text-block.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

tag-html.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

table.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

table-row.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

table-column.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

table-cell.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

tab.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

tab-page.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

snippet.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

smart-table.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

section.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

pop-up.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

messages.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

media-player.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

id-html.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
- -
-

html.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

horizontal-line.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

history-manager.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

gx-scheduler.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

group.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

grid.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

google-geomap.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

google-charts.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

google-annotated-tmeline.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

google-analytics.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

free-style-grid.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

font.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

flex.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

file-upload.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

error-viewer.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

embedded-page.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

default.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

component.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

class-html.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

canva.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

call-target.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

button.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

button-group.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

action-group.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-

action-group-item.svg

-
    -
  • - -
  • - -
  • - -
  • - -
  • -
-
-
-
- -
- - -
- -

- 270 - - Monochrome Icons -

- - - - - -
- -

- window-tools (31) - - - -
- -
-

workflow.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

workflow-settings.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

work-with-attributes.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

watch.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

toolbox.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

teamdev.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

services.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

roles.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

rol.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

responsive-sizes.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

references.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

properties.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

preferences.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

performance-test-objects.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

output.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

logout.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

last-changes-view.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

kb-explorer.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

indexer-monitor.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

history.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

genexus-cloud.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

frontend.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

filter.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

filter-conditions.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

error-list.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

debugx.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

datastores.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

category-groups.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

breakpoints.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

backend.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

alphabetical-order.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

- -

- window-tools (31)

- - - -
- -
-

workflow.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

workflow-settings.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

work-with-attributes.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

watch.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

toolbox.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

teamdev.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

services.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

roles.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

rol.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

responsive-sizes.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

references.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

properties.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

preferences.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

performance-test-objects.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

output.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

logout.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

last-changes-view.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

kb-explorer.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

indexer-monitor.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

history.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

genexus-cloud.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

frontend.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

filter.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

filter-conditions.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

error-list.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

debugx.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

datastores.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

category-groups.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

breakpoints.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

backend.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

alphabetical-order.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-
- - -
- -

- system (113) - - - -
- -
-

zoom-out.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

zoom-in.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

warning.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

version.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

user.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

upload.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

undo.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

tools.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

toggle-theme.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

time.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

thunder.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

thumb-up.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

thumb-down.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

text-compare.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

table.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

substract.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

star.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

star-unselected.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

show.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

share.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

settings.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

send.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
- -
-

save.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

run.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

right-panel-open.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

retry.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

refresh.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

query.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

qr-code.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

publish.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

property.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

photo.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

pause.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

order-numberically.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

order-alphabetically.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

notification.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

news.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

more-vertical.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

more-horizontal.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

mobile.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

mic.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

mic-off.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

message.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

menu.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

mail.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

logout.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

log-out.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

lock.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

loading.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

list.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
- - -
-

left-panel-open.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

launch.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

language.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

key.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

information.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

home.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

hide.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

help.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

help-variant.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

folder.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

filters.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

eyedropper.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

expand.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

expand-content.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

error.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

edit.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

drag.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

download.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

double-chevron-right.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

double-chevron-left.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

detail.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

delete-outlined.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

database.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

data-modeling.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

dashboard.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

cut.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

copy.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

contact.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

computer.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

company.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

collapse-content.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

close.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

close-small.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

close-sidebar.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-up.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-small-up.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-small-right.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-small-left.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-small-down.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-right.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-pag-right.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-pag-left.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-left.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-down.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

check.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

check-circle.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

card.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

cancel-circle.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

calendar.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

assistant.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

arrow-right.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

arrow-left.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

arrow-drop-up.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

arrow-drop-right.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

arrow-drop-left.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

arrow-drop-down.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

applications.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

add.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

add-circle.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

accessibility-new.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

- -

- system (113)

- - - -
- -
-

zoom-out.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

zoom-in.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

warning.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

version.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

user.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

upload.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

undo.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

tools.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

toggle-theme.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

time.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

thunder.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

thumb-up.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

thumb-down.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

text-compare.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

table.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

substract.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

star.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

star-unselected.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

show.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

share.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

settings.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

send.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
- -
-

save.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

run.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

right-panel-open.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

retry.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

refresh.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

query.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

qr-code.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

publish.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

property.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

photo.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

pause.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

order-numberically.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

order-alphabetically.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

notification.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

news.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

more-vertical.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

more-horizontal.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

mobile.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

mic.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

mic-off.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

message.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

menu.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

mail.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

logout.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

log-out.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

lock.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

loading.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

list.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
- - -
-

left-panel-open.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

launch.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

language.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

key.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

information.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

home.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

hide.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

help.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

help-variant.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

folder.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

filters.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

eyedropper.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

expand.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

expand-content.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

error.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

edit.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

drag.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

download.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

double-chevron-right.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

double-chevron-left.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

detail.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

delete-outlined.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

database.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

data-modeling.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

dashboard.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

cut.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

copy.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

contact.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

computer.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

company.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

collapse-content.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

close.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

close-small.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

close-sidebar.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-up.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-small-up.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-small-right.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-small-left.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-small-down.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-right.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-pag-right.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-pag-left.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-left.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

chevron-down.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

check.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

check-circle.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

card.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

cancel-circle.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

calendar.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

assistant.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

arrow-right.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

arrow-left.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

arrow-drop-up.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

arrow-drop-right.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

arrow-drop-left.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

arrow-drop-down.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

applications.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

add.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

add-circle.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

accessibility-new.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    error-actionable
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-
- - -
- -

- states (2) - - - -
- -
-

pill-outlined.svg

-
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

pill-filled.svg

-
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

- -

- states (2)

- - - -
- -
-

pill-outlined.svg

-
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

pill-filled.svg

-
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    error
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    warning
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    success
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-
- - -
- -

- navigation (16) - - - -
- - - - - - - - - - - - - - - - - -
-

- -

- navigation (16)

- - - -
- - - - - - - - - - - - - - - - - -
-
- - -
- -

- menus (18) - - - -
- - - - - - - - - - - - - - - - - - - -
-

- -

- menus (18)

- - - -
- - - - - - - - - - - - - - - - - - - -
-
- - -
- -

- gemini-tools (35) - - - -
- -
-

warning.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

success.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

show-more-vertical.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

show-more-horizontal.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

share.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

settings.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
- -
-

reset.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

read-only.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

open-window.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

notice.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

more-info.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

minus.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

minus-circle.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

list-view.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

folder.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

flow-arrow.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

file.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

error.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

edit.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

edit-wand.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

duplicate.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

download.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

deleted.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

delete.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

data-provider.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

copy.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

copy-to-clipboard.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

color-picker.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

close.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

category-ungroup.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

category-group.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

card-view.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

add.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

add-circle.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

- -

- gemini-tools (35)

- - - -
- -
-

warning.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

success.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

show-more-vertical.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

show-more-horizontal.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

share.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

settings.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
- -
-

reset.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

read-only.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

open-window.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

notice.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

more-info.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

minus.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

minus-circle.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

list-view.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

folder.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

flow-arrow.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

file.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

error.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

edit.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

edit-wand.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

duplicate.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

download.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

deleted.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

delete.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

data-provider.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

copy.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

copy-to-clipboard.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

color-picker.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

close.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

category-ungroup.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

category-group.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

card-view.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

add.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-

add-circle.svg

-
  • -
    on-surface
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    on-disabled
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-message
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    on-elevation
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    primary
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
  • -
    highlighted
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
  • -
    bright
    -
      - -
    • - - -
    • -
    • - -
      - -
      hover is not defined
      -
      -
    • -
    • - -
      - -
      active is not defined
      -
      -
    • -
    • - -
      - -
      disabled is not defined
      -
      -
    • -
    -
-
-
-
- - -
- -

- bpm (55) - - - -
- -
-

timer-6.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

timer-5.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

timer-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

timer-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

terminale-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

tasks.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

subprocess.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

signal-6.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

signal-5.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

signal-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

signal-3.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

signal-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

signal-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

person.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

paralell-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

paralell-3.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

paralell-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

paralell-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

oval.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

oval-doble.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

multiple-6.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

multiple-5.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

multiple-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

multiple-3.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

multiple-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

multiple-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

message-6.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

message-5.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

message-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

message-3.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

message-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

message-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
- - -
-

escalation-6.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

escalation-5.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

escalation-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

escalation-3.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

escalation-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

escalation-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

error-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

error-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

delete.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

conditional.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

conditional-6.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

conditional-5.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

conditional-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

conditional-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

compensation-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

compensation-3.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

compensation-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

compensation-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

cancel-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

cancel-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

arrows.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

- -

- bpm (55)

- - - -
- -
-

timer-6.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

timer-5.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

timer-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

timer-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

terminale-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

tasks.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

subprocess.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

signal-6.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

signal-5.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

signal-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

signal-3.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

signal-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

signal-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

person.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

paralell-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

paralell-3.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

paralell-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

paralell-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

oval.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

oval-doble.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

multiple-6.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

multiple-5.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

multiple-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

multiple-3.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

multiple-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

multiple-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

message-6.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

message-5.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

message-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

message-3.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

message-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

message-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
- - -
-

escalation-6.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

escalation-5.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

escalation-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

escalation-3.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

escalation-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

escalation-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

error-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

error-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

delete.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

conditional.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

conditional-6.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

conditional-5.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

conditional-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

conditional-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

compensation-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

compensation-3.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

compensation-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

compensation-1.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

cancel-4.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

cancel-2.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-

arrows.svg

-
  • -
    neutral
    -
      - -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    • - - -
    • -
    -
-
-
-
- -
-
- - - - - - - - - - - - - \ No newline at end of file diff --git a/packages/mercury/showcase/input.html b/packages/mercury/showcase/input.html deleted file mode 100644 index 39c820d2f..000000000 --- a/packages/mercury/showcase/input.html +++ /dev/null @@ -1,334 +0,0 @@ - - - - - - Input - - - - - - - - - - - -
-
- -
- -
-

input

-

- A primary HTML input element is a crucial part of a webpage, - designed to capture user data and facilitate interactions. It - serves as the main interface for users to enter information such - as text, numbers, or dates, making it essential for data - collection and user engagement, whether within a form or used - independently. -

-
-
- -
-
- -
-
- -
-
- - -
- -
- -
- - -
-
- -
-
- -
-
- - -
- -
- -
- - -
-
- -
-
- -
-
- - -
- -
- -
- - -
-
- -
-
- -
-
- - -
- -
- -
- - -
-
- -
-
- - -
-
- - -
-
- -
- - -
-
- -
-
- -
-
- - -
- -
- -
- - -
-
- -
-

- To display a .input input with a label, you will - have to provide a label with the corresponding class, as well - as a div wrapper around the label and the control with the - corresponding classes to get the proper styling and spacing. - These styles are documented on the label and - form - sections, correspondingly. The links to those pages are - provided below this code example. -

-
-
- - -
-
-
- - -
-
- -
-
- -
-
-
- - -
- -
-

form input: search

-

- A input of type "search" is a specialized HTML input element - designed for search functionality within a webpage. It allows - users to enter search queries, providing a streamlined and - intuitive interface for finding content. -

-
-
- -
-
- -
-

- Note: The styles for the input type="search" are not yet - completed. -

-
- - -
-
- - -
-
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/label.html b/packages/mercury/showcase/label.html deleted file mode 100644 index 7cbadcb03..000000000 --- a/packages/mercury/showcase/label.html +++ /dev/null @@ -1,188 +0,0 @@ - - - - - - Label - - - - - - - - - - -
-
- -
- -
-

label

-

- A label element is a crucial component on a webpage, designed to - provide descriptive text for form controls. It improves - accessibility and usability by indicating the purpose of the - associated input element, helping users understand what - information is required. -

-
-
- -
-
- -
-
- -
-
- - - -
- -
- -
- - -
-
- -
-
- -
-
- - -
- -
- -
- - -
-
- -
-
-
-
- -
-
-
-
-
- - - -
- -
- -
- - -
-
- -
-
-
-
- -
-
-
-
-
- - - -
- -
- -
- - -
-
- -
-

- For a more detailed documentation about positioning the label, - please refer to the form page,
on the link - provided below. -

- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/layouts.html b/packages/mercury/showcase/layouts.html deleted file mode 100644 index 812bc58c4..000000000 --- a/packages/mercury/showcase/layouts.html +++ /dev/null @@ -1,282 +0,0 @@ - - - - - - Layouts - - - - - - - - - - -
-
- -
- -
-

layouts

-

- Layouts in web design refer to the structured arrangement of - visual elements on a webpage, guiding the user's experience. They - are fundamental because they enhance usability by making - information easy to find, improve aesthetics for a positive - impression, ensure responsiveness across devices, support - accessibility for all users, and reinforce brand identity through - consistent design. Effective layouts create intuitive, engaging, - and functional websites. -

-
-
- -
-
- -
-
-
-
Content of column
-
-
-
- - - -
- -
- -
- - -
-
- -
-
-
-
Content of column 1
-
Content of column 2
-
-
-
- - - -
- -
- -
- - -
-
- -
-
-
-
Content of column 1
-
Content of column 2
-
Content of column 3
-
-
-
- - - -
- -
- -
- - -
-
- -
-
-
-
Content of column 1
-
Content of column 2
-
Content of column 3
-
Content of column 4
-
-
-
- - - -
- -
- -
- - -
-
- -
-
-
-
Content of column 1
-
Content of column 2
-
-
-
- - - -
- -
- -
- - -
-
- -
-
-
-
Content of column 1
-
Content of column 2
-
-
-
- - - -
- -
- -
- - -
-
- -
-

- By default the layout does not provide any padding. To apply - padding to the layout you have to include - any of the global body padding classes - to the .layout container. -

-
-
-
Content of column
-
-
-
- - - -
- - -
- - -
-
-
-
-
- - diff --git a/packages/mercury/showcase/list-box.html b/packages/mercury/showcase/list-box.html deleted file mode 100644 index d900b5467..000000000 --- a/packages/mercury/showcase/list-box.html +++ /dev/null @@ -1,114 +0,0 @@ - - - - - - List Box - - - - - - - - - - -
-
- -
- -
-

list box

-

- A list-box component is a versatile UI element used to present a - selectable list of items, offering users a straightforward way to - make choices or navigate through options. It's commonly employed - in forms, dropdown menus, and selection interfaces where space is - limited. The list-box displays a series of options, allowing users - to select one or multiple items from the list, depending on its - configuration. -

-
-
- -
-
- -
-
- - -
-
- - -
- -
- -
- - -
-
- -
-
- - -
-
- - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/pills.html b/packages/mercury/showcase/pills.html deleted file mode 100644 index bba41ca44..000000000 --- a/packages/mercury/showcase/pills.html +++ /dev/null @@ -1,451 +0,0 @@ - - - - - - Pills - - - - - - - - - - - -
-
- -
- -
-

pills

-

- A pill in web development is a compact, rounded UI element used to - display labels, categories, or selections. It visually stands out - with a subtle, often colorful background, and is commonly used to - represent tags, filters, or options. Pills can be interactive, - allowing users to select or remove them, enhancing usability and - clarity in filtering or selection tasks. -

-

- The Pills component is built on top of the Chameleon - ch-combo-box-render. Since the Pills component uses a - predefined set of icons, the image-related properties provided by - ch-combo-box-render should not be used. However, if - you need to use custom icons, you should turn off the default - icons, by setting to false the Pills mixin property - $add--icon. -

-
-
- -
-
-
-
-
- -
- - -
-
- - -
-
-
- - -
-
-
-
-
- -
- - -
-
- - -
-
-
- - -
-
-
-
-
- -
- - -
-
- - -
-
-
- - -
-
-
-
-
- -
- - -
-
- - -
-
-
- - -
-
-
-
-
- -
- - -
-
- - -
-
-
- - -
-
-
-
-
- -
- - -
-
- - -
-
-
- - -
-
-
-
-
- -
- - -
-
- - -
-
-
- - -
-
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- - -
-
- - -
-
-
-
-
-
-
- - diff --git a/packages/mercury/showcase/property-grid.html b/packages/mercury/showcase/property-grid.html deleted file mode 100644 index c1b02de71..000000000 --- a/packages/mercury/showcase/property-grid.html +++ /dev/null @@ -1,317 +0,0 @@ - - - - - - Property Grid - - - - - - - - - - - - - -
-
- -
- -
-

property grid

-

- A property grid is a specialized tabular component designed to - display data in a two-column format. The first column lists - property names, while the second column displays their - corresponding values. This structure is ideal for presenting - key-value pairs, such as settings, attributes, or metadata, in a - clear and organized manner. Unlike traditional tables with - multiple columns, the property grid focuses on simplicity and - readability, making it an efficient choice for displaying concise, - structured information. -

-
-
- -
-
- -
-
-

- For readonly property name: - .property-grid-property-readonly
- For readonly property value: - .property-grid-property-value
- For edited property value: - .property-grid-property-edited -

-
- -
- - - - - - - - - Property Name: Read Only Property Name: Read Only - Property Name: Read Only Property Name: Read Only - Property Name: Read Only - - Property Value: Enabled Property Value: Enabled - Property Value: Enabled Property Value: Enabled Property - Value: Enabled - - - - - - Property Name: Enabled - Property Value: Read Only - - - - - - Property Name: Enabled - Property Value: Edited - - - -
-
- - -
- -
- -
- - -
-
- -
-
-

- For setting as editing: - .property-grid-value-editing -

-
- -
- - - - - - - - Combo Box - - - - - - Form Input - - - -
-
- - -
-
- - -
-
-
-
-
- - diff --git a/packages/mercury/showcase/radio-group.html b/packages/mercury/showcase/radio-group.html deleted file mode 100644 index 067b147fa..000000000 --- a/packages/mercury/showcase/radio-group.html +++ /dev/null @@ -1,149 +0,0 @@ - - - - - - Radio Group - - - - - - - - - - -
-
- -
- -
-

radio group

-

- A radio group is an essential UI component in HTML, designed to - allow users to select one option from a set of choices. Each radio - button within the group represents a distinct option, ensuring - mutual exclusivity. This setup is commonly used in forms to - facilitate decisions such as choosing a payment method, selecting - a preferred contact time, or specifying a shipping option. -

-
-
- -
-
- -
-
- - -
-
- - -
- -
- -
- - -
-
- -
-
- - -
-
- - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/scss/_dummy-items.scss b/packages/mercury/showcase/scss/_dummy-items.scss deleted file mode 100644 index a68194e76..000000000 --- a/packages/mercury/showcase/scss/_dummy-items.scss +++ /dev/null @@ -1,58 +0,0 @@ -@import "../../src/base/common"; -.dummy-item { - // copied from combo-box "item" part - display: flex; - align-items: center; - - @include item-colors-enabled(); - @include item-border(); - @include item-border-radius(); - @include item-padding-inline(); - @include item-height-regular(); - - // colors - &--hover { - @include item-colors-hover(); - } - &--selected { - @include item-colors-selected(); - } - &--selected-hover { - @include item-colors-hover(); - } - &--disabled { - @include item-colors-disabled(); - } -} - -.dummy-items-container { - // copied from combo-box "window__content" part - display: grid; - grid-auto-rows: max-content; - overflow: auto; - box-sizing: border-box; - - @include items-container-colors(); - @include items-container-padding(); - @include items-container-dropdown(); - @include items-container-gap(); -} -.colors-all-together-container { - // copied from combo-box "window__content" part - display: grid; - grid-auto-rows: max-content; - overflow: auto; - box-sizing: border-box; - gap: var(--mer-spacing--2xs); -} - -.dummy-control { - display: flex; - align-items: center; - justify-content: center; - color: var(--mer-color__neutral-gray--500); - @include control-border(); - @include control-colors-enabled(); - @include control-padding-inline-block(); - border-style: dashed; -} diff --git a/packages/mercury/showcase/scss/_tabular-grid-helpers.scss b/packages/mercury/showcase/scss/_tabular-grid-helpers.scss deleted file mode 100644 index ec4527115..000000000 --- a/packages/mercury/showcase/scss/_tabular-grid-helpers.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "mercury.scss"; - -@include tabular-grid-cell-layout( - $tabular-grid-selector: ".controls-on-col-2", - $tabular-grid-cell-node-type: "element", - $tabular-grid-affected-columns-nth-list: ( - 2 - ) -); diff --git a/packages/mercury/showcase/scss/mercury.scss b/packages/mercury/showcase/scss/mercury.scss deleted file mode 100644 index bdc88fc4b..000000000 --- a/packages/mercury/showcase/scss/mercury.scss +++ /dev/null @@ -1,25673 +0,0 @@ -// Base styles from packages/common -@mixin button-common-styles() { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - justify-content: center; -} - -@mixin label-common-styles() { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - grid-template-rows: auto; // Necessary to avoid creating additional rows and then adding additional gap at the bottom of the label - align-items: center; -} - -@mixin document-common-styles() { - display: grid; - grid-template-rows: 1fr; - min-block-size: 100dvh; - margin: 0; -} - -// - - - - - - - - - - - - - - - - - - - - -// Icons | Mask & Background -// - - - - - - - - - - - - - - - - - - - - - -// Icon mask styles -@mixin icon-mask-common-styles( - $inline-size: var(--icon-size), - $block-size: var(--icon-size), - $mask-size: var(--icon-mask-size) -) { - content: ""; - display: block; - inline-size: $inline-size; - block-size: $block-size; - -webkit-mask: no-repeat center / $mask-size var(--icon-path); - background-color: currentColor; -} - -// Icon background styles -@mixin icon-background-common-styles( - $inline-size: var(--icon-size), - $block-size: var(--icon-size), - $background-size: var(--icon-background-size) -) { - content: ""; - display: block; - inline-size: $inline-size; - block-size: $block-size; - background: no-repeat center / $background-size var(--icon-path); -} - -// - - - - - - - - - - - - - - - - - - - - -// Icons | Gap -// - - - - - - - - - - - - - - - - - - - - - -@mixin icon-and-text-styles($gap) { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - gap: $gap; -} - -// - - - - - - - - - - - - - - - - - - - - -// Ellipsis -// - - - - - - - - - - - - - - - - - - - - - -@mixin ellipsis() { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -%ellipsis { - @include ellipsis(); -} - -/// Replace `$search` with `$replace` in `$string` -/// @param {String} $string - Initial string -/// @param {String} $search - Substring to replace -/// @param {String} $replace ('') - New value -/// @return {String} - Updated string -@function str-replace($string, $search, $replace: "") { - $index: str-index($string, $search); - - @if $index { - @return str-slice($string, 1, $index - 1) + $replace + - str-replace( - str-slice($string, $index + str-length($search)), - $search, - $replace - ); - } - @return $string; -} - -%tree-view-item__action-icon--base { - content: ""; - display: block; - inline-size: var(--ch-tree-view-item__image-size); - block-size: var(--ch-tree-view-item__image-size); - content-visibility: auto; - contain-intrinsic-size: auto var(--ch-tree-view-item__image-size); -} - -@mixin tree-view-item__action-icon--start() { - grid-area: start-img; -} - -@mixin tree-view-item__action-icon--end() { - grid-area: end-img; -} - -@mixin tree-view-item__action-icon--background($icon-path: "") { - background: no-repeat center / 100% #{$icon-path}; -} - -@mixin tree-view-item__action-icon--mask($icon-path: "") { - -webkit-mask: #{$icon-path} 50% 50% / 100% 100% no-repeat; - background-color: currentColor; -} - -@mixin tree-view-item__action-icon( - $position: "start", - $item__action-with-icon-selector: - ".tree-view-class::part(item__action custom-icon)", - $icon-path: "", - $icon-type: "background" -) { - @if $position == "start" { - #{$item__action-with-icon-selector}::before { - @extend %tree-view-item__action-icon--base; - @include tree-view-item__action-icon--start(); - - // background image - @if $icon-type == "background" { - @include tree-view-item__action-icon--background( - $icon-path: $icon-path - ); - } - // mask image - @else { - @include tree-view-item__action-icon--mask($icon-path: $icon-path); - } - } - } - // $position == "end" - @else { - #{$item__action-with-icon-selector}::before { - @extend %tree-view-item__action-icon--base; - @include tree-view-item__action-icon--end(); - - // background image - @if $icon-type == "background" { - @include tree-view-item__action-icon--background( - $icon-path: $icon-path - ); - } - // mask image - @else { - @include tree-view-item__action-icon--mask($icon-path: $icon-path); - } - } - } -} - -@mixin button-common-styles() { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - justify-content: center; -} - -@mixin label-common-styles() { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - grid-template-rows: auto; // Necessary to avoid creating additional rows and then adding additional gap at the bottom of the label - align-items: center; -} - -@mixin document-common-styles() { - display: grid; - grid-template-rows: 1fr; - min-block-size: 100dvh; - margin: 0; -} - -// - - - - - - - - - - - - - - - - - - - - -// Icons | Mask & Background -// - - - - - - - - - - - - - - - - - - - - - -// Icon mask styles -@mixin icon-mask-common-styles( - $inline-size: var(--icon-size), - $block-size: var(--icon-size), - $mask-size: var(--icon-mask-size) -) { - content: ""; - display: block; - inline-size: $inline-size; - block-size: $block-size; - -webkit-mask: no-repeat center / $mask-size var(--icon-path); - background-color: currentColor; -} - -// Icon background styles -@mixin icon-background-common-styles( - $inline-size: var(--icon-size), - $block-size: var(--icon-size), - $background-size: var(--icon-background-size) -) { - content: ""; - display: block; - inline-size: $inline-size; - block-size: $block-size; - background: no-repeat center / $background-size var(--icon-path); -} - -// - - - - - - - - - - - - - - - - - - - - -// Icons | Gap -// - - - - - - - - - - - - - - - - - - - - - -@mixin icon-and-text-styles($gap) { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - gap: $gap; -} - -// - - - - - - - - - - - - - - - - - - - - -// Ellipsis -// - - - - - - - - - - - - - - - - - - - - - -@mixin ellipsis() { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -%ellipsis { - @include ellipsis(); -} - - -// ---------------------- -// Focus -// ---------------------- -@mixin focus-outline() { - outline: var(--focus__outline-width) var(--focus__outline-style) - var(--focus__outline-color); - outline-offset: var(--focus__outline-offset); -} -@mixin focus-border() { - border-color: var(--borders-un-border-color__focused); -} - -// ---------------------- -// Scrollbar Styles -// ---------------------- -@mixin scrollbar-styles() { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb__bg-color) - var(--scrollbar-track__bg-color); - - //scrollbar - &::-webkit-scrollbar { - width: var(--scrollbar__size); - height: var(--scrollbar__size); - } - - // track - &::-webkit-scrollbar-track { - background-color: var(--scrollbar-track__bg-color); - border-radius: var(--scrollbar-track__border-radius); - } - - // thumb - &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb__bg-color); - border-radius: var(--scrollbar-thumb__border-radius); - } - - // corner - &::-webkit-scrollbar-corner { - background: var(--scrollbar-corner__bg); - } -} - -// ---------------------- -// Scrollbar Components -// ---------------------- -@mixin scrollbar-components() { - :host(.ch-scrollable), - .ch-scrollable, - .scrollable { - @include scrollbar-styles(); - } -} - -// ---------------------- -// Control -// ---------------------- - -// Colors -@mixin control-colors-enabled() { - background-color: var(--control__bg-color); - color: var(--control__color); - --ch-placeholder-color: var(--control-placeholder__color); - // enabled border color is defined in control-border() -} -@mixin control-colors-hover() { - --control__border-color: var(--control__border-color--hover); -} -@mixin control-colors-disabled() { - --control__bg-color: var(--control__background-color--disabled); - --control__border-color: var(--control__border-color--disabled); - --control__color: var(--control__color--disabled); - --ch-placeholder-color: var(--control-placeholder__color--disabled); -} -@mixin control-colors-error() { - --control__border-color: var(--control__border-color--error); -} -// Border -@mixin control-border() { - border-width: var(--control__border-width); - border-style: var(--control__border-style); - border-color: var(--control__border-color); - border-radius: var(--control__border-radius); -} -@mixin control-remove-border() { - // This resets the border applied - // (for controls inside the property grid) - --control__border-width: 0; - --control__border-color: transparent; - --control__border-radius: 0; -} -// Height -@mixin control-height-regular() { - block-size: var(--control__height); - // to be removed (TODO) - // fixed block-size comes with some issues. -} -// Padding -@mixin control-padding-inline() { - padding-inline: var(--control__padding-inline); -} -@mixin control-padding-block() { - padding-block: var(--control__padding-block); -} -@mixin control-padding-inline-block() { - padding-block: var(--control__padding-block); - padding-inline: var(--control__padding-inline); -} -// Placeholder -@mixin control-placeholder() { - color: var(--control-placeholder__color); - font-style: var(--control-placeholder__font-style); -} - -// ---------------------- -// Control Tiny -// ---------------------- - -@mixin control-tiny-size() { - block-size: var(--control-tiny__size); - inline-size: var(--control-tiny__size); -} -@mixin control-tiny-border() { - border-width: var(--control__border-width); - border-style: var(--control__border-style); - border-color: var(--control__border-color); - border-radius: var(--control__border-radius); -} -@mixin control-tiny-border-hover() { - --control__border-color: var(--control__border-color--hover); -} -@mixin control-tiny-border-disabled() { - --control__border-color: var(--control__border-color--disabled); -} -@mixin control-tiny-border-error() { - --control__border-color: var(--control__border-color--error); -} - -// ---------------------- -// Items Container -// ---------------------- - -@mixin items-container-border() { - border-style: var(--items-container__border-style); - border-width: var(--items-container__border-width); -} -@mixin items-container-border-radius() { - border-radius: var(--items-container__border-radius); -} -@mixin items-container-colors() { - background-color: var(--items-container__bg-color); - border-color: var(--items-container__border-color); -} -@mixin items-container-padding() { - padding-block: var(--items-container__padding-block); - padding-inline: var(--items-container__padding-inline); -} -@mixin items-container-dropdown() { - box-shadow: var(--items-container__box-shadow); -} -@mixin items-container-gap() { - gap: var(--items-container__gap); -} -@mixin items-container-gap-small() { - gap: var(--items-container__gap--small); -} -@mixin items-container-max-height() { - max-block-size: var(--items-container__max-block-size); -} -@mixin items-container-separator() { - block-size: var(--items-container-separator__block-size); - inline-size: var(--items-container-separator__inline-size); - background-color: var(--items-container-separator__bg-color); -} - -// ------------------------------------ -// Single Item (Every item except grid) -// ------------------------------------ - -@mixin item-colors-enabled() { - background-color: var(--item__bg-color); - border-color: var(--item__border-color); - color: var(--item__color); -} -@mixin item-colors-hover() { - --item__bg-color: var(--item__bg-color--hover); - --item__border-color: var(--item__border-color--hover); - --item__color: var(--item__color--hover); -} -@mixin item-colors-selected() { - --item__bg-color: var(--item__bg-color--selected); - --item__border-color: var(--item__border-color--selected); - --item__color: var(--item__color--selected); -} -@mixin item-colors-selected-hover() { - --item__bg-color: var(--item__bg-color--selected-hover); - --item__border-color: var(--item__border-color--selected-hover); - --item__color: var(--item__color--selected-hover); -} -@mixin item-colors-disabled() { - --item__bg-color: var(--item__bg-color--disabled); - --item__border-color: var(--item__border-color--disabled); - --item__color: var(--item__color--disabled); -} -@mixin item-border() { - border: var(--item__border-width) var(--item__border-style) - var(--item__border-color); -} -@mixin item-border-block-end() { - border-block-end: var(--item__border-width) var(--item__border-style) - var(--item__border-color); -} -@mixin item-border-radius() { - border-radius: var(--item__border-radius); -} -@mixin item-gap() { - gap: var(--item__gap--regular); -} -@mixin item-column-gap() { - column-gap: var(--item__gap--regular); -} -@mixin item-padding() { - padding-block: var(--item__padding-block); - padding-inline: var(--item__padding-inline); -} -@mixin item-padding-block() { - padding-block: var(--item__padding-inline); -} -@mixin item-padding-inline() { - padding-inline: var(--item__padding-inline); -} -@mixin item-height-regular() { - block-size: var(--item__height--regular); -} -@mixin item-height-large() { - block-size: var(--item__height--large); -} - -// --------------------------------- -// Grid Item -// --------------------------------- - -// Row -@mixin grid-row-colors-enabled() { - // Some controls using --item__** variables inside the tabular grid inherit - // unwanted styles. For example, when a row is selected, controls like a - // list-box inherit the selected background color. To prevent this, these - // properties cannot be directly applied to the tabular grid. - --grid-row__bg-color: var(--item__bg-color); - --grid-row__color: var(--item__color); - background-color: var(--grid-row__bg-color); - color: var(--grid-row__color); -} -@mixin grid-row-colors-highlighted() { - --grid-row__bg-color: var(--item__bg-color--hover); - --grid-row__color: var(--item__color--hover); -} -@mixin grid-row-colors-selected() { - --grid-row__bg-color: var(--item__bg-color--selected); - --grid-row__color: var(--item__color--selected); -} -@mixin grid-row-dragging() { - box-shadow: var(--mer-box-shadow--01); -} -@mixin grid-cell-border-inline-block() { - // this mixin uses the box-shadow property, but it looks - // as a border to the user. - box-shadow: var(--grid-cell__box-shadow-inline-block); -} -@mixin grid-cell-padding-inline() { - padding-inline: var(--grid-cell__padding-block); -} -@mixin grid-cell-padding-block() { - padding-block: var(--grid-cell__padding-block); -} -@mixin grid-cell-padding-inline-block() { - padding-block: var(--grid-cell__padding-block); - padding-inline: var(--grid-cell__padding-inline); -} -@mixin grid-cell-remove-padding() { - // we should redefine '--grid-cell__padding-inline' here because when a control - // is inside a a tabular-grid-cell the cell padding-inline value is required to - // be applied on the control padding-inline. - padding-block: 0; - padding-inline: 0; -} -@mixin grid-rowset-legend-padding-block() { - padding-block-start: var(--mer-spacing--xs); - padding-block-end: var(--mer-spacing--xs); -} -@mixin grid-rowset-legend-colors-enabled() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02); - background-color: var(--grid-rowset-legend__bg-color); -} -@mixin grid-rowset-legend-colors-hover() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--03); -} -@mixin grid-rowset-legend-colors-active() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02); -} - -// ---------------------- -// Tab Caption (Button) -// ---------------------- -@mixin tab-button-border-block() { - border-block: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-border-block-end() { - border-block-end: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-border-block-start() { - border-block-start: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-gap() { - gap: var(--tab-caption__gap); -} -@mixin tab-button-colors-enabled() { - background-color: var(--tab-caption__bg-color); - color: var(--tab-caption__color); - border-color: var(--tab-caption__border-color); -} -@mixin tab-button-colors-hover() { - --tab-caption__bg-color: var(--tab-caption__bg-color--hover); - // color remains the same - // border-color remains the same -} -@mixin tab-button-colors-disabled() { - --tab-caption__bg-color: var(--tab-caption__bg-color--disabled); - --tab-caption__color: var(--mer-text__primary--disabled); - --tab-caption__border-color--selected-inline: var( - --mer-border-color__primary--disabled - ); - --tab-caption__border-color--selected-stack: var( - --mer-surface__elevation--02 - ); -} -@mixin tab-button-colors-selected-inline() { - --tab-caption__bg-color: var(--tab-caption__bg-color--selected-inline); - --tab-caption__color: var(--tab-caption__color--selected); - --tab-caption__border-color: var( - --tab-caption__border-color--selected-inline - ); -} -@mixin tab-button-colors-selected-stack() { - --tab-caption__bg-color: var(--tab-caption__bg-color--selected-stack); - --tab-caption__color: var(--tab-caption__color--selected); - --tab-caption__border-color: var(--tab-caption__border-color--selected-stack); -} -@mixin tab-button-padding-inline() { - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); -} -@mixin tab-button-padding-stack() { - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); -} - -// ---------------------- -// Label -// ---------------------- - -@mixin label-gap-block() { - gap: var(--label__gap--block); -} -@mixin label-gap-inline() { - gap: var(--label__gap--inline); -} -@mixin label-color-hover() { - --label__color: var(--label__color--hover); -} -@mixin label-color-disabled() { - --label__color: var(--label__color--disabled); -} - -// ---------------------- -// Window -// ---------------------- - -// TODO: This styles should better be applied on the ch-window ? -%window-styles { - border: var(--window__border); - border-radius: var(--window__border-radius); - padding: var(---window__padding); - background-color: var(--window__bg-color); - box-shadow: var(--mer-box-shadow--01); -} - -// ---------------------- -// Dropdown -// ---------------------- - -@mixin dropdown-styles() { - box-shadow: var(--mer-box-shadow--01); - border-radius: var(--mer-border__radius--sm); -} - -// ---------------------- -// Pseudo Dialog Footer -// ---------------------- - -@mixin control-footer-base() { - --control-footer-justify-content: end; - padding-block-start: var(--mer-spacing--xs); - display: flex; - justify-content: var(--control-footer-justify-content); - align-items: center; -} -@mixin control-footer-border() { - border-block-start: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); -} -@mixin control-footer( - $selector: ".control-footer", - $with-border-selector: ".control-footer-with-border", - $justify-start-selector: ".control-footer-start", - $justify-center-selector: ".control-footer-center", - $justify-space-between-selector: ".control-footer-space-between", - $with-border: true -) { - #{$selector}, - #{$with-border-selector} { - @include control-footer-base(); - } - #{$justify-start-selector} { - --control-footer-justify-content: start; - } - #{$justify-center-selector} { - --control-footer-justify-content: center; - } - #{$justify-space-between-selector} { - --control-footer-justify-content: space-between; - } - @if $with-border { - #{$with-border-selector} { - @include control-footer-border(); - } - } -} - -// ---------------------- -// Pseudo Dialog Header -// ---------------------- - -@mixin control-header-base() { - padding-block-end: var(--mer-spacing--md); -} -@mixin control-header-border() { - border-block-end: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); -} -@mixin control-header( - $selector: ".control-header", - $with-border-selector: ".control-header-with-border", - $with-border: true -) { - #{$selector}, - #{$with-border-selector} { - @include control-header-base(); - } - @if $with-border { - #{$with-border-selector} { - @include control-header-border(); - } - } -} - -// ---------------------- -// Body Spacing -// ---------------------- - -// This custom properties define the block and inline spacing of containers. -// i.e.: dialog, layout, etc.. - -%spacing-body { - padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); - padding-inline: var(--spacing-body-inline-start) - var(--spacing-body-inline-end); -} - -%spacing-body-block { - padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); -} -%spacing-body-block-start { - padding-block-start: var(--spacing-body-block-start); -} -%spacing-body-block-end { - padding-block-end: var(--spacing-body-block-end); -} - -%spacing-body-inline { - padding-inline: var(--spacing-body-inline-start) - var(--spacing-body-inline-end); -} -%spacing-body-inline-start { - padding-inline-start: var(--spacing-body-inline-start); -} -%spacing-body-inline-end { - padding-inline-end: var(--spacing-body-inline-end); -} - -@mixin spacing-body( - $body-selector: ".spacing-body,:host(.spacing-body)", - $body-block-selector: ".spacing-body-block,:host(.spacing-body-block)", - $body-block-start-selector: - ".spacing-body-block-start,:host(.spacing-body-block-start)", - $body-block-end-selector: - ".spacing-body-block-end,:host(.spacing-body-block-end)", - $body-inline-selector: ".spacing-body-inline,:host(.spacing-body-inline)", - $body-inline-start-selector: - ".spacing-body-inline-start,:host(.spacing-body-inline-start)", - $body-inline-end-selector: - ".spacing-body-inline-end,:host(.spacing-body-inline-end)" -) { - #{$body-selector} { - @extend %spacing-body; - } - // block - #{$body-block-selector} { - @extend %spacing-body-block; - } - #{$body-block-start-selector} { - @extend %spacing-body-block-start; - } - #{$body-block-end-selector} { - @extend %spacing-body-block-end; - } - // inline - #{$body-inline-selector} { - @extend %spacing-body-inline; - } - #{$body-inline-start-selector} { - @extend %spacing-body-inline-start; - } - #{$body-inline-end-selector} { - @extend %spacing-body-inline-end; - } -} - -// ---------------------- -// Spinner -// ---------------------- - -@mixin spinner($size, $spinner_color, $track_color) { - $border_thinness: 7; // the higher the thinner - width: $size; - height: $size; - border: calc($size / $border_thinness) solid $track_color; - border-top: calc($size / $border_thinness) solid $spinner_color; - border-radius: 50%; - animation: spin var(--mer-timing--regular) linear infinite; - - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } -} - -/// @group UtilityClasses -/// @param {String} $elevation-1-selector [".elevation-1,:host(.elevation-1)"] - -/// @param {String} $elevation-2-selector [".elevation-2,:host(.elevation-2)"] - -/// @param {String} $elevation-3-selector [".elevation-3,:host(.elevation-3)"] - -@mixin utilities-elevation( - $elevation-1-selector: ".elevation-1,:host(.elevation-1)", - $elevation-2-selector: ".elevation-2,:host(.elevation-2)", - $elevation-3-selector: ".elevation-3,:host(.elevation-3)" -) { - #{$elevation-1-selector}, - #{$elevation-2-selector}, - #{$elevation-3-selector} { - color: var(--mer-text__on-elevation); - } - #{$elevation-1-selector} { - background-color: var(--mer-surface__elevation--01); - } - #{$elevation-2-selector} { - background-color: var(--mer-surface__elevation--02); - } - #{$elevation-3-selector} { - background-color: var(--mer-surface__elevation--03); - } -} - - -// Resets -@mixin typography-reset() { - h1, - h2, - h3, - h4, - h5, - h6, - p { - font: unset; - margin: 0; - padding: 0; - color: unset; - } -} - -@mixin button-reset() { - :where(button, a) { - all: unset; - display: inline-flex; - align-items: center; - - // Disallow selecting the text - user-select: none; - - // Avoid zooming on double tap on iOS devices - touch-action: manipulation; - - // Allow user drag - // -webkit-user-drag: element; - - cursor: pointer; - } - - button:disabled { - pointer-events: none; - } -} - -@mixin input-reset() { - input, - select, - textarea { - padding: 0; - margin: 0; - background-color: unset; - border: unset; - color: unset; - font: unset; - outline: unset; - } -} - -@mixin other-reset() { - hr { - block-size: 1px; - margin: unset; - padding: unset; - border: unset; - background-color: currentColor; - } - - fieldset, - legend { - padding: 0; - margin: 0; - } - - img { - display: block; - } -} - -@mixin box-sizing() { - *, - ::after, - ::before { - box-sizing: border-box; - } -} - - -// Tokens Primitive -@mixin border() { - // border widths - --mer-border__width--sm: 1px; - --mer-border__width--md: 2px; - --mer-border__width--lg: 4px; - - //border radius - --mer-border__radius--2xs: 1px; - --mer-border__radius--xs: 2px; - --mer-border__radius--sm: 4px; - --mer-border__radius--md: 8px; - --mer-border__radius--lg: 12px; - --mer-border__radius--xl: 30px; -} - -@mixin foundation-colors--light($globant-colors: false) { - @if $globant-colors { - // Globant Colors - - // TODO: update with Globant colors when available - // primary - --mer-color__primary--200: #005ac1; - --mer-color__primary--300: #5498e8; - --mer-color__primary--400: #437dc0; - --mer-color__primary--600: #335884; - - // neutral - --mer-color__neutral-gray--100: #4a5870; - --mer-color__neutral-gray--200: #49566d; - --mer-color__neutral-gray--300: #56677a; - --mer-color__neutral-gray--400: #56677a; - --mer-color__neutral-gray--450: #56677a; - --mer-color__neutral-gray--500: #828b96; - --mer-color__neutral-gray--550: #9da9b6; - --mer-color__neutral-gray--600: #aeb9c6; - --mer-color__neutral-gray--650: #c6d1dd; - --mer-color__neutral-gray--700: #e1ecf9; - --mer-color__neutral-gray--800: #fafbfd; - --mer-color__neutral-gray--900: #f0f4fa; - --mer-color__neutral-gray--1000: #ffffff; - - // tinted - --mer-color__tinted-yellow--5: #faf9f6; - --mer-color__tinted-yellow--60: #fafbfd; - --mer-color__tinted-red--5: #faf5f7; - --mer-color__tinted-red--60: #fbb2b7; - --mer-color__tinted-green--5: #f2f7f8; - --mer-color__tinted-green--60: #94cac4; - --mer-color__tinted-primary--5: #f3f6fd; - --mer-color__tinted-primary--8: #eff5fd; - --mer-color__tinted-primary--10: #ecf3fd; - --mer-color__tinted-primary--20: #deebfe; - --mer-color__tinted-primary--30: #cfe3fe; - --mer-color__tinted-primary--50: #b1d2fe; - - // message - --mer-color__message-green--100: #208e80; - --mer-color__message-green--200: #208e80; - --mer-color__message-yellow--100: #dfa135; - --mer-color__message-yellow--200: #dfa135; - --mer-color__message-red--100: #da1a27; - --mer-color__message-red--200: #da1a27; - --mer-color__message-red--300: #4d0000; - --mer-color__message-red--400: #800000; - --mer-color__message-red--500: #ff9999; - --mer-color__message-red--600: #ff9999; - } @else { - // Mercury Colors - - // primary - --mer-color__primary--200: #005ac1; - --mer-color__primary--300: #5498e8; - --mer-color__primary--400: #437dc0; - --mer-color__primary--600: #335884; - - // neutral - --mer-color__neutral-gray--100: #4a5870; - --mer-color__neutral-gray--200: #49566d; - --mer-color__neutral-gray--300: #56677a; - --mer-color__neutral-gray--400: #56677a; - --mer-color__neutral-gray--450: #56677a; - --mer-color__neutral-gray--500: #828b96; - --mer-color__neutral-gray--550: #9da9b6; - --mer-color__neutral-gray--600: #aeb9c6; - --mer-color__neutral-gray--650: #c6d1dd; - --mer-color__neutral-gray--700: #e1ecf9; - --mer-color__neutral-gray--800: #fafbfd; - --mer-color__neutral-gray--900: #f0f4fa; - --mer-color__neutral-gray--1000: #ffffff; - - // tinted - --mer-color__tinted-yellow--5: #faf9f6; - --mer-color__tinted-yellow--60: #fafbfd; - --mer-color__tinted-red--5: #faf5f7; - --mer-color__tinted-red--60: #fbb2b7; - --mer-color__tinted-green--5: #f2f7f8; - --mer-color__tinted-green--60: #94cac4; - --mer-color__tinted-primary--5: #f3f6fd; - --mer-color__tinted-primary--8: #eff5fd; - --mer-color__tinted-primary--10: #ecf3fd; - --mer-color__tinted-primary--20: #deebfe; - --mer-color__tinted-primary--30: #cfe3fe; - --mer-color__tinted-primary--50: #b1d2fe; - - // message - --mer-color__message-green--100: #208e80; - --mer-color__message-green--200: #208e80; - --mer-color__message-yellow--100: #dfa135; - --mer-color__message-yellow--200: #dfa135; - --mer-color__message-red--100: #6d272b; - --mer-color__message-red--200: #883035; - --mer-color__message-red--300: #a63a41; - --mer-color__message-red--400: #d54b54; - --mer-color__message-red--500: #e35861; - --mer-color__message-red--600: #e98b8f; - --mer-color__message-red--700: #eda4a7; - --mer-color__message-red--800: #f4cdcf; - --mer-color__message-red--900: #f8dfe0; - --mer-color__message-red--1000: #fcf4f4; - - // green (TODO: Update with light values. The following are dark values) - --color-green-100: #eef5f4; - --color-green-200: #ddebe9; - --color-green-300: #cae0dd; - --color-green-400: #b4d5d0; - --color-green-500: #9cc9c2; - --color-green-600: #3fa89b; - --color-green-700: #389287; - --color-green-800: #318278; - --color-green-900: #286a62; - --color-green-1000: #1c4b45; - } -} - -@mixin foundation-colors--dark($globant-colors: false) { - @if $globant-colors { - // Globant Colors - - // primary - --mer-color__primary--200: #bfd732; - --mer-color__primary--300: #b4cc28; - --mer-color__primary--400: #96aa22; - --mer-color__primary--600: #697718; - - // neutral - --mer-color__neutral-gray--100: #ededed; - --mer-color__neutral-gray--200: #dfdfdf; - --mer-color__neutral-gray--300: #cdcdcd; - --mer-color__neutral-gray--400: #a9a9a9; - --mer-color__neutral-gray--450: #8c8c8c; - --mer-color__neutral-gray--500: #686868; - --mer-color__neutral-gray--550: #575757; - --mer-color__neutral-gray--600: #464646; - --mer-color__neutral-gray--650: #3b3b3b; - --mer-color__neutral-gray--700: #303030; - --mer-color__neutral-gray--800: #212121; - --mer-color__neutral-gray--900: #171717; - --mer-color__neutral-gray--1000: #000000; - - // tinted - //TODO: update 'tinted-blue' with tinted-primary' in globant and mercury. - --mer-color__tinted-yellow--5: #282a2d; - --mer-color__tinted-yellow--60: #ad8a53; - --mer-color__tinted-red--5: #29252f; - --mer-color__tinted-red--60: #aa5962; - --mer-color__tinted-green--5: #1c2830; - --mer-color__tinted-green--60: #317571; - --mer-color__tinted-primary--5: #202118; - --mer-color__tinted-primary--8: #242619; - --mer-color__tinted-primary--10: #282a1a; - --mer-color__tinted-primary--20: #383d1c; - --mer-color__tinted-primary--30: #49501f; - --mer-color__tinted-primary--50: #6a7624; - - // message - --mer-color__message-green--100: #b1e1b6; - --mer-color__message-green--200: #9ccba1; - --mer-color__message-yellow--100: #dfa135; - --mer-color__message-yellow--200: #dfa135; - --mer-color__message-red--100: #da1a27; - --mer-color__message-red--200: #da1a27; - --mer-color__message-red--300: #4d0000; - --mer-color__message-red--400: #800000; - --mer-color__message-red--500: #ff9999; - --mer-color__message-red--600: #ff9999; - } @else { - // Mercury Colors - - // primary - --mer-color__primary--200: #5ba7ff; - --mer-color__primary--300: #5498e8; - --mer-color__primary--400: #437dc0; - --mer-color__primary--600: #335884; - - // neutral - --mer-color__neutral-gray--100: #e1ecf9; - --mer-color__neutral-gray--200: #d2ddeb; - --mer-color__neutral-gray--300: #c0ccd9; - --mer-color__neutral-gray--400: #9da9b6; - --mer-color__neutral-gray--450: #828b96; - --mer-color__neutral-gray--500: #56677a; - --mer-color__neutral-gray--550: #485665; - --mer-color__neutral-gray--600: #394552; - --mer-color__neutral-gray--650: #2d3a48; - --mer-color__neutral-gray--700: #242d3c; - --mer-color__neutral-gray--800: #181f2a; - --mer-color__neutral-gray--900: #11151c; - --mer-color__neutral-gray--1000: #1f2225; - - // tinted - --mer-color__tinted-yellow--5: #282a2d; - --mer-color__tinted-yellow--60: #ad8a53; - --mer-color__tinted-red--5: #29252f; - --mer-color__tinted-red--60: #aa5962; - --mer-color__tinted-green--5: #1c2830; - --mer-color__tinted-green--60: #317571; - --mer-color__tinted-primary--5: #1d2838; - --mer-color__tinted-primary--8: #1f2c3f; - --mer-color__tinted-primary--10: #1f2e43; - --mer-color__tinted-primary--20: #293d5c; - --mer-color__tinted-primary--30: #2e4e72; - --mer-color__tinted-primary--50: #3c689c; - - // message - --mer-color__message-green--100: #3fa89b; - --mer-color__message-green--200: #3fa89b; - --mer-color__message-yellow--100: #f9bd56; - --mer-color__message-yellow--200: #f9bd56; - --mer-color__message-red--100: #fcf4f4; - --mer-color__message-red--200: #f8dfe0; - --mer-color__message-red--300: #f4cdcf; - --mer-color__message-red--400: #eda4a7; - --mer-color__message-red--500: #e98b8f; - --mer-color__message-red--600: #e35861; - --mer-color__message-red--700: #d54b54; - --mer-color__message-red--800: #a63a41; - --mer-color__message-red--900: #883035; - --mer-color__message-red--1000: #6d272b; - - --color-green-100: #eef5f4; - --color-green-200: #ddebe9; - --color-green-300: #cae0dd; - --color-green-400: #b4d5d0; - --color-green-500: #9cc9c2; - --color-green-600: #3fa89b; - --color-green-700: #389287; - --color-green-800: #318278; - --color-green-900: #286a62; - --color-green-1000: #1c4b45; - } -} - -@mixin font() { - // font-families - --font-family-header: Inter, Helvetica, Arial, sans-serif; - --font-family-body: Inter, Helvetica, Arial, sans-serif; - --font-family-code: monospace; - - // font-sizes: headers - --font-size-header-h1: 40px; - --font-size-header-h2: 32px; - --font-size-header-h3: 28px; - --font-size-header-h4: 24px; - --font-size-header-h5: 20px; - --font-size-header-h6: 18px; - - // font-sizes: subtitle - --font-size-subtitle-l: 20px; - --font-size-subtitle-m: 18px; - --font-size-subtitle-s: 16px; - --font-size-subtitle-xs: 14px; - - // font-sizes: body - --font-size-body-xl: 18px; - --font-size-body-l: 16px; - --font-size-body-m: 14px; - --font-size-body-s: 12px; - --font-size-body-xs: 11px; - - // font-sizes: tiny - --font-size-tiny-l: 12px; - --font-size-tiny-m: 11px; - --font-size-tiny-s: 10px; - --font-size-tiny-xs: 8px; - - // font-weights - --font-weight-bold: 700; - --font-weight-semi-bold: 600; - --font-weight-regular: 400; - - // line-heights - --line-height-tight: 1.2; - --line-height-regular: 1.3; - - // letter spacings (to be done) - - // - - - - - - - - // !Deprecated - // - - - - - - - - - --mer-font-family--title: Inter, Helvetica, Arial, sans-serif; /* @deprecated */ - --mer-font-family--body: Inter, Helvetica, Arial, sans-serif; /* @deprecated */ - --mer-font-family--code: monospace; /* @deprecated */ - - --mer-font__weight--extra-bold: 800; /* @deprecated */ - --mer-font__weight--bold: 700; /* @deprecated */ - --mer-font__weight--semi-bold: 600; /* @deprecated */ - --mer-font__weight--medium: 500; /* @deprecated */ - --mer-font__weight--regular: 400; /* @deprecated */ - --mer-font__weight--light: 300; /* @deprecated */ - - --mer-font__size--4xs: 11px; /* @deprecated */ - --mer-font__size--3xs: 12px; /* @deprecated */ - --mer-font__size--2xs: 13px; /* @deprecated */ - --mer-font__size--xs: 14px; /* @deprecated */ - --mer-font__size--sm: 16px; /* @deprecated */ - --mer-font__size--md: 20px; /* @deprecated */ - --mer-font__size--lg: 24px; /* @deprecated */ - --mer-font__size--xl: 36px; /* @deprecated */ - --mer-font__size--2xl: 40px; /* @deprecated */ - - --mer-line-height--tight: 1.3; /* @deprecated */ - --mer-line-height--regular: 1.4; /* @deprecated */ - --mer-line-height--spaced: 1.5; /* @deprecated */ -} - -@mixin foundation-colors--gradients() { - // gradients - --mer-color__gradient-angle: 225deg; - --mer-color__gradient-opacity--low: 0.7; - --mer-color__gradient-opacity--medium: 0.9; - --mer-color__gradient-opacity--high: 1; - - // gradient 01 - --mer-color__gradient--01: linear-gradient( - var(--mer-color__gradient-angle), - rgba(0, 204, 255, var(--mer-color__gradient-opacity--medium)) 0%, - rgba(163, 0, 255, var(--mer-color__gradient-opacity--medium)) 100% - ); - // gradient 02 - --mer-color__gradient--02: linear-gradient( - var(--mer-color__gradient-angle), - rgba(57, 255, 20, var(--mer-color__gradient-opacity--high)) 0%, - rgba(255, 0, 114, var(--mer-color__gradient-opacity--high)) 100% - ); - // gradient 03 - --mer-color__gradient--03: linear-gradient( - var(--mer-color__gradient-angle), - rgba(0, 245, 255, var(--mer-color__gradient-opacity--low)) 0%, - rgba(255, 234, 0, var(--mer-color__gradient-opacity--high)) 100% - ); - // gradient 04 - --mer-color__gradient--04: linear-gradient( - var(--mer-color__gradient-angle), - rgba(16, 196, 195, var(--mer-color__gradient-opacity--high)) 0%, - rgba(236, 30, 91, var(--mer-color__gradient-opacity--high)) 100% - ); - // gradient 05 - --mer-color__gradient--05: linear-gradient( - var(--mer-color__gradient-angle), - rgba(255, 0, 162, var(--mer-color__gradient-opacity--high)) 0%, - rgba(139, 0, 255, var(--mer-color__gradient-opacity--high)) 100% - ); - // gradient 06 - --mer-color__gradient--06: linear-gradient( - var(--mer-color__gradient-angle), - rgba(204, 255, 0, var(--mer-color__gradient-opacity--medium)) 0%, - rgba(0, 255, 204, var(--mer-color__gradient-opacity--medium)) 100% - ); - // gradient 07 - --mer-color__gradient--07: linear-gradient( - var(--mer-color__gradient-angle), - rgba(91, 118, 255, var(--mer-color__gradient-opacity--medium)) 0%, - rgba(0, 255, 203, var(--mer-color__gradient-opacity--medium)) 100% - ); - // gradient 08 - --mer-color__gradient--08: linear-gradient( - var(--mer-color__gradient-angle), - rgba(255, 0, 255, var(--mer-color__gradient-opacity--high)) 0%, - rgba(0, 149, 255, var(--mer-color__gradient-opacity--high)) 100% - ); - // gradient 09 - --mer-color__gradient--09: linear-gradient( - var(--mer-color__gradient-angle), - rgba(255, 69, 0, var(--mer-color__gradient-opacity--medium)) 0%, - rgba(142, 84, 200, var(--mer-color__gradient-opacity--medium)) 100% - ); - // gradient 10 - --mer-color__gradient--10: linear-gradient( - var(--mer-color__gradient-angle), - rgba(255, 0, 127, var(--mer-color__gradient-opacity--low)) 0%, - rgba(0, 255, 0, var(--mer-color__gradient-opacity--low)) 100% - ); - // gradient 11 - --mer-color__gradient--11: linear-gradient( - var(--mer-color__gradient-angle), - rgba(255, 199, 0, var(--mer-color__gradient-opacity--high)) 0%, - rgba(138, 43, 226, var(--mer-color__gradient-opacity--high)) 100% - ); - // gradient 12 - --mer-color__gradient--12: linear-gradient( - var(--mer-color__gradient-angle), - rgba(255, 0, 51, var(--mer-color__gradient-opacity--medium)) 0%, - rgba(255, 204, 0, var(--mer-color__gradient-opacity--medium)) 100% - ); - // gradient 13 - --mer-color__gradient--13: linear-gradient( - var(--mer-color__gradient-angle), - rgba(0, 255, 60, var(--mer-color__gradient-opacity--high)) 0%, - rgba(255, 102, 0, var(--mer-color__gradient-opacity--high)) 100% - ); -} - -@mixin spacing() { - --mer-spacing--3xs: 2px; - --mer-spacing--2xs: 4px; - --mer-spacing--xs: 8px; - --mer-spacing--sm: 12px; - --mer-spacing--md: 16px; - --mer-spacing--lg: 24px; - --mer-spacing--xl: 32px; - --mer-spacing--2xl: 40px; - --mer-spacing--3xl: 48px; - --mer-spacing--4xl: 64px; -} - -@mixin timing() { - --mer-timing--super-fast: 100ms; - --mer-timing--fast: 200ms; - --mer-timing--regular: 500ms; - --mer-timing--slow: 1000ms; -} - - -// Tokens Semantic -@mixin semantic-accent() { - --mer-accent__primary: var(--mer-color__primary--200); - --mer-accent__primary--hover: var(--mer-color__primary--400); - --mer-accent__primary--active: var(--mer-color__primary--600); - --mer-accent__primary--disabled: var(--mer-color__neutral-gray--500); - --mer-accent__primary--destructive: var(--mer-color__message-red--600); - --mer-accent__primary--destructive-hover: var(--mer-color__message-red--800); - --mer-accent__primary--destructive-active: var( - --mer-color__message-red--1000 - ); - - --accent-success-lighter: var(--color-green-300); - --accent-success-light: var(--color-green-500); - --accent-success-enabled: var(--color-green-600); - --accent-success-hover: var(--color-green-800); - --accent-success-active: var(--color-green-1000); -} - -@mixin semantic-border() { - --mer-border-color__primary: var(--mer-accent__primary); - --mer-border-color__primary--hover: var(--mer-accent__primary--hover); - --mer-border-color__primary--active: var(--mer-accent__primary--active); - --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled); - --mer-border-color__primary--focused: var(--mer-color__neutral-gray--200); - --mer-border-color__dim: var(--mer-color__neutral-gray--550); - --mer-border-color__error: var(--mer-color__message-red--600); - --mer-border-color__error--hover: var( - --mer-accent__primary--destructive-hover - ); - --mer-border-color__error--active: var( - --mer-accent__primary--destructive-active - ); - --mer-border-color__warning: var(--mer-color__message-yellow--100); - --mer-border-color__success: var(--mer-color__message-green--100); - --mer-border-color__neutral: var(--mer-color__neutral-gray--400); - --mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100); - --mer-border-color__neutral--active: var(--mer-color__neutral-gray--200); - --mer-border-color__on-surface: var(--mer-color__neutral-gray--650); - --mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--600); - --mer-border-color__on-elevation--02: var(--mer-color__neutral-gray--550); - --mer-border-color__on-elevation--03: var(--mer-color__neutral-gray--500); -} - -@mixin semantic-control() { - // --------------------------------------------------------------- - // Inline Controls should have the same height to look good inline - // --------------------------------------------------------------- - - --control__block-size: 32px; // Used for calculations - - // - - - - - - - Colors - - - - - - - - - --control__bg-color: var(--control__bg-color--enabled); - --control__border-color: var(--control__border-color--enabled); - --control__color: var(--control__color--enabled); - - // enabled - --control__bg-color--enabled: transparent; - --control__border-color--enabled: var(--mer-color__neutral-gray--500); - --control__color--enabled: var(--mer-text__neutral); - - // hover - --control__border-color--hover: var(--mer-border-color__neutral--hover); - - // disabled - --control__background-color--disabled: var(--mer-accent__primary--disabled); - --control__border-color--disabled: var(--control__background-color--disabled); - --control__color--disabled: var(--mer-text__on-disabled); - - // error - --control__border-color--error: var(--mer-border-color__error); - - // - - - - - - - Border - - - - - - - - - --control__border-width: var(--mer-border__width--sm); - --control__border-style: solid; - --control__border-radius: var(--mer-border__radius--sm); - - // - - - - - - - Font Face - - - - - - - - - // - - - - - - - Padding - - - - - - - - - // A calc is required to force the control block-size be 32px. Using padding tokens from the - // DS results in higer block-size. - --control__padding-block: calc( - ( - var(--control__block-size) - 2 * var(--control__border-width) - - var(--font-size-body-m) * var(--line-height-tight) - ) / 2 - ); - --control__padding-inline: var(--mer-spacing--xs); - - // - - - - - - - Gap - - - - - - - - - --control__icon-gap: var(--mer-spacing--xs); - - // - - - - - - - Placeholder - - - - - - - - - --control-placeholder__color: var(--mer-color__neutral-gray--400); - --control-placeholder__color--disabled: var( - --mer-form-input__color--disabled - ); - --control-placeholder__font-style: italic; - - // ------------------------------------------------------------- - // Tiny controls (ie.: checkbox, radio-button) - // ------------------------------------------------------------- - - // border colors are the same from "--control__***" tokens - - --control-tiny__size: var(--mer-spacing--md); - --control-tiny__border-width: 1.2px; - --control-tiny__border-style: solid; - --control-tiny__border-radius-sm: 1px; - --control-tiny__border-radius-rounded: 50%; - --control-tiny-option__color: var(--control__border-color); - - // ------------------------------------------------------------- - // Controls Label - // ------------------------------------------------------------- - - // fixed values - --label__border-width: 1.2px; - --label__border-style: solid; - --label__border-radius: var(--mer-border__radius--2xs); - --label__gap--inline: var(--mer-spacing--xs); - --label__gap--block: var(--mer-spacing--xs); - - // depend on state - --label__color: var(--label__color--enabled); - - // enabled - --label__color--enabled: var(--mer-text__neutral); - - // hover - --label__color--hover: var(--mer-text__highlighted); - - // disabled - --label__color--disabled: var(--mer-text__primary--disabled); - - // error - --label__color--error: var(--mer-text__neutral); - - // ------------------------------------------------------------- - // Controls Container - // ------------------------------------------------------------- - - --controls__container-row-gap: var(--mer-spacing--md); - --controls__group-gap--block: var(--mer-spacing--sm); - --controls__group-gap--inline: var(--mer-spacing--md); -} - -@mixin semantic-field() { - // field group - --field-group__row-gap: var(--mer-spacing--md); - --field-group__column-gap: var(--mer-spacing--lg); - - // field - --field__row-gap: var(--mer-spacing--xs); - --field__column-gap: var(--mer-spacing--md); - --field-inline-label__margin-block-start: 6px; // 6px is the proper value, but it does not exists on the mercury ds. -} - -@mixin semantic-general() { - // ---------------------- - // Body - // ---------------------- - --mer-body__bg-color: var(--mer-surface); - --mer-body__color: var(--mer-text__on-surface); - --mer-body__margin-block: var(--mer-spacing--sm); - - // ---------------------- - // System - // ---------------------- - // System tokens are the most basic kind, used when there is not a more specific categorization. - --mer-system__border-width: var(--mer-border__width--sm); - --mer-system__border-style: solid; - --mer-system__border-color: var(--mer-color__neutral-gray--500); - - // ---------------------- - // Scrollbar - // ---------------------- - // scrollbar - --scrollbar__size: var(--mer-spacing--2xs); - // scrollbar-track - --scrollbar-track__bg-color: transparent; - - --scrollbar-track__border-radius: var(--mer-spacing--xs); - // scrollbar-thumb - --scrollbar-thumb__bg-color: var(--mer-color__neutral-gray--550); - --scrollbar-thumb__border-radius: var(--mer-spacing--xs); - // scrollbar-thumb - --scrollbar-corner__bg: transparent; - - // ---------------------- - // Icon Size - // ---------------------- - // box (shell) - --mer-icon__box--sm: var(--mer-spacing--sm); - --mer-icon__box--md: 14px; // no spacing token exists for 14px. - // icon (background-size) - --mer-icon__size--sm: 100%; - --mer-icon__size--md: 100%; - - // ------------------------------------------------------------ - // Form Input (form-input-*** background-position-x RTL support) - // ------------------------------------------------------------ - --mer-form-input__padding-inline: var(--mer-spacing--xs); - --mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline); - --mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value); - // The following css variables are at the time of writing, global, because some components, besides - // the ch-checkbox, implement their own checkboxes. For example, the tabular-grid cell parts "selector-label" - // and "selector". - --mer-form-input__border-color: var(--mer-color__neutral-gray--500); - --mer-form-input__border-style: solid; - --mer-form-input__border-width: var(--mer-border__width--sm); - --mer-form-input__border: var(--mer-form-input__border-width) - var(--mer-form-input__border-style) var(--mer-form-input__border-color); - --mer-form-input__border-radius: var(--mer-border__radius--sm); - // the input checkbox checked styles, or radio button inner circle - --mer-form-input-check__border-width: var(--mer-border__radius--xs); - --mer-form-input-check__border-color: var( - --mer-border-color__neutral--active - ); - --mer-form-input-check__border-color--disabled: var( - --mer-accent__primary--disabled - ); - --mer-checkbox__option-checked-image: url("data:image/svg+xml, "); - - // ---------------------- - // Window - // ---------------------- - // TODO: This styles should better be applied on the ch-window. - --window__border: var(--mer-border__width--sm) solid - var(--mer-surface__elevation--01); - --window__border-radius: var(--mer-border__radius--sm); - --window__padding: var(--mer-spacing--xs); - --window__bg-color: var(--mer-surface__elevation--01); - --window__gap: var(--mer-spacing--xs); - --window__box-shadow: var(--mer-box-shadow--01); - - // ---------------------- - // Focus - // ---------------------- - --focus__outline-width: var(--mer-border__width--sm); - --focus__outline-style: solid; - --focus__outline-color: var(--mer-border-color__primary); - --focus__outline-offset: calc(var(--mer-system__border-width) * -1); - --borders-un-border-color__focused: var(--focus__outline-color); -} - -@mixin semantic-heading() { - --mer-heading__gray--light: var(--mer-color__neutral-gray--200); - --mer-header__background-color: var(--mer-color__neutral-gray--700); -} - -@mixin semantic-icon() { - --mer-icon__on-surface: var(--mer-color__neutral-gray--200); - --mer-icon__on-primary: var(--mer-color__neutral-gray--900); - --mer-icon__on-primary--hover: var(--mer-color__neutral-gray--300); - --mer-icon__on-primary--active: var(--mer-color__neutral-gray--100); - --mer-icon__on-disabled: var(--mer-color__neutral-gray--450); - --mer-icon__on-message: var(--mer-color__neutral-gray--700); - --mer-icon__on-elevation: var(--mer-color__neutral-gray--100); - --mer-icon__primary: var(--mer-accent__primary); - --mer-icon__primary--hover: var(--mer-accent__primary--hover); - --mer-icon__primary--active: var(--mer-accent__primary--active); - --mer-icon__primary--disabled: var(--mer-accent__primary--disabled); - --mer-icon__error: var(--mer-color__message-red--600); - --mer-icon__warning: var(--mer-color__message-yellow--100); - --mer-icon__success: var(--mer-color__message-green--100); - --mer-icon__neutral: var(--mer-color__neutral-gray--300); - --mer-icon__highlighted: var(--mer-color__neutral-gray--100); - --mer-icon__bright: var(--mer-color__neutral-gray--300); -} - -@mixin semantic-item() { - // - - - - - - - - - - - - - - - - - - - - - // Items - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - Colors - - - - - - - - - --item__bg-color: var(--item__bg-color--enabled); - --item__border-color: var(--item__border-color--enabled); - --item__color: var(--item__color--enabled); - - // enabled - --item__bg-color--enabled: transparent; - --item__border-color--enabled: transparent; - --item__color--enabled: var(--mer-text__on-elevation); - - // hover - --item__bg-color--hover: var(--mer-color__tinted-primary--5); - // --item__border-color--hover: var(--mer-color__tinted-primary--20); // to be defined later with design team - --item__border-color--hover: transparent; - --item__color--hover: var(--mer-color__neutral-gray--100); - - // selected - --item__bg-color--selected: var(--mer-color__tinted-primary--10); - --item__border-color--selected: var(--mer-color__tinted-primary--30); - --item__color--selected: var(--mer-color__neutral-gray--100); - - // selected + hover - --item__bg-color--selected-hover: var(--mer-color__tinted-primary--10); - --item__border-color--selected-hover: var(--mer-color__tinted-primary--20); - --item__color--selected-hover: var(--mer-color__neutral-gray--100); - - // disabled - --item__bg-color--disabled: transparent; - --item__border-color--disabled: transparent; - --item__color--disabled: var(--mer-text__primary--disabled); - - // - - - - - - - Border - - - - - - - - - --item__border-width: var(--mer-border__width--sm); - --item__border-style: solid; - - // - - - - - - - Border Radius - - - - - - - - - --item__border-radius: var(--mer-border__radius--sm); - - // - - - - - - - Padding - - - - - - - - - --item__padding-block: var(--mer-spacing--2xs); - --item__padding-inline: var(--mer-spacing--xs); - - // - - - - - - - Height - - - - - - - - - --item__height--regular: var(--mer-spacing--xl); // ie.: Combo box - --item__height--large: 36px; // ie.: Grid - - // - - - - - - - Item Gap - - - - - - - - // For example, the gap between the icon and the caption - --item__gap--regular: var(--mer-spacing--xs); - - // - - - - - - - Line Height - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Items Container - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - Border - - - - - - - - - --items-container__border-width: var(--mer-border__width--sm); - --items-container__border-style: solid; - - // - - - - - - - Colors - - - - - - - - - --items-container__bg-color: var(--mer-surface__elevation--01); - --items-container__border-color: var(--mer-border-color__on-surface); - - // - - - - - - - Padding - - - - - - - - - --items-container__padding-block: var(--mer-spacing--xs); - --items-container__padding-inline: var(--mer-spacing--xs); - - // - - - - - - - Type Dropdown - - - - - - - - - --items-container__border-radius: var(--mer-border__radius--sm); - --items-container__box-shadow: var(--mer-box-shadow--01); - - // - - - - - - - Gap - - - - - - - - - --items-container__gap: var(--mer-spacing--2xs); - --items-container__gap--small: var(--mer-spacing--2xs); - - // - - - - - - - Height - - - - - - - - - --items-container__max-block-size: 300px; - - // - - - - - - - Separator - - - - - - - - // The separator is an element that separates - // two groups inside the container. - - --items-container-separator__block-size: var(--mer-border__width--sm); - --items-container-separator__inline-size: 100%; - --items-container-separator__bg-color: var(--items-container__border-color); - - // - - - - - - - - - - - - - - - - - - - - - // Grid Cell - // - - - - - - - - - - - - - - - - - - - - - - --grid-cell__border-color: var(--mer-border-color__on-elevation--01); - --grid-cell__border: var(--mer-border__width--sm) solid - var(--grid-cell__border-color); - --grid-cell__box-shadow-inline-block: 0 0 0 1px var(--grid-cell__border-color); - --grid-cell__padding-block: var(--mer-spacing--xs); - --grid-cell__padding-inline: var(--mer-spacing--sm); - // - - - - - - - - - - - - - - - - - - - - - // Tab Caption (Button) - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - Color Generic - - - - - - - - --tab-caption__bg-color: var(--tab-caption__bg-color--enabled); - --tab-caption__color: var(--tab-caption__color--enabled); - --tab-caption__border-color: transparent; - - // - - - - - - - Border - - - - - - - - --tab-caption__border-style: solid; - --tab-caption__border-width: var(--mer-border__width--sm); - - // - - - - - - - Colors - - - - - - - - // enabled - --tab-caption__bg-color--enabled: transparent; - --tab-caption__border-color--enabled: transparent; - --tab-caption__color--enabled: var(--mer-text__neutral); - - // hover - --tab-caption__bg-color--hover: var(--mer-color__tinted-primary--10); - - // selected - --tab-caption__bg-color--selected-inline: transparent; - --tab-caption__bg-color--selected-stack: var(--mer-color__tinted-primary--10); - --tab-caption__border-color--selected-inline: var(--mer-accent__primary); - --tab-caption__border-color--selected-stack: var( - --mer-color__tinted-primary--20 - ); - --tab-caption__color--selected: var(--mer-text__highlighted); - - // disabled - --tab-caption__bg-color--disabled: transparent; - --tab-caption__border-color--disabled: var( - --mer-border-color__on-elevation--01 - ); - --tab-caption__color--disabled: var(--mer-text__primary--disabled); - - // - - - - - - - Padding - - - - - - - - --tab-caption__padding-block: var(--mer-spacing--xs); - - --tab-caption__padding-inline: var(--mer-spacing--sm); - - // - - - - - - - Gap - - - - - - - - --tab-caption__gap: var(--mer-spacing--xs); // 6px does not exist on the ds. -} - -@mixin semantic-surface() { - --mer-surface: var(--mer-color__neutral-gray--900); - --mer-color__surface: var( - --mer-surface - ); // '--mer-color__surface' TO be removed later (deprecated) - - --mer-surface__elevation--01: var(--mer-color__neutral-gray--800); - --mer-surface__elevation--02: var(--mer-color__neutral-gray--700); - --mer-surface__elevation--03: var(--mer-color__neutral-gray--650); - - // box shadow - --mer-box-shadow--01: 0px 4px 20px 0px #00000040; -} - -@mixin semantic-text() { - --mer-text__on-surface: var(--mer-color__neutral-gray--200); - --mer-text__on-primary: var(--mer-color__neutral-gray--900); - --mer-text__on-primary--active: var(--mer-color__neutral-gray--100); - --mer-text__on-disabled: var(--mer-color__neutral-gray--450); - --mer-text__on-message: var(--mer-color__neutral-gray--700); - --mer-text__on-elevation: var(--mer-color__neutral-gray--100); - --mer-text__primary: var(--mer-accent__primary); - --mer-text__primary--hover: var(--mer-accent__primary--hover); - --mer-text__primary--active: var(--mer-accent__primary--active); - --mer-text__primary--disabled: var(--mer-accent__primary--disabled); - --mer-text__neutral: var(--mer-color__neutral-gray--300); - --mer-text__highlighted: var(--mer-color__neutral-gray--100); - --mer-text__success: var(--mer-color__message-green--100); - --mer-text__error: var(--mer-color__message-red--600); - --mer-text__warning: var(--mer-color__message-yellow--100); - --mer-text__complementary: var(--mer-color__neutral-gray--450); - --mer-text__bright: var( - --mer-color__neutral-gray--100 - ); // "--mer-text__bright" does not exists anymore in figma, but the colors are being updated. Ask the designer. -} - - -// Base classes -@mixin button-common-styles() { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - justify-content: center; -} - -@mixin label-common-styles() { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - grid-template-rows: auto; // Necessary to avoid creating additional rows and then adding additional gap at the bottom of the label - align-items: center; -} - -@mixin document-common-styles() { - display: grid; - grid-template-rows: 1fr; - min-block-size: 100dvh; - margin: 0; -} - -// - - - - - - - - - - - - - - - - - - - - -// Icons | Mask & Background -// - - - - - - - - - - - - - - - - - - - - - -// Icon mask styles -@mixin icon-mask-common-styles( - $inline-size: var(--icon-size), - $block-size: var(--icon-size), - $mask-size: var(--icon-mask-size) -) { - content: ""; - display: block; - inline-size: $inline-size; - block-size: $block-size; - -webkit-mask: no-repeat center / $mask-size var(--icon-path); - background-color: currentColor; -} - -// Icon background styles -@mixin icon-background-common-styles( - $inline-size: var(--icon-size), - $block-size: var(--icon-size), - $background-size: var(--icon-background-size) -) { - content: ""; - display: block; - inline-size: $inline-size; - block-size: $block-size; - background: no-repeat center / $background-size var(--icon-path); -} - -// - - - - - - - - - - - - - - - - - - - - -// Icons | Gap -// - - - - - - - - - - - - - - - - - - - - - -@mixin icon-and-text-styles($gap) { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - gap: $gap; -} - -// - - - - - - - - - - - - - - - - - - - - -// Ellipsis -// - - - - - - - - - - - - - - - - - - - - - -@mixin ellipsis() { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -%ellipsis { - @include ellipsis(); -} - - -// ---------------------- -// Focus -// ---------------------- -@mixin focus-outline() { - outline: var(--focus__outline-width) var(--focus__outline-style) - var(--focus__outline-color); - outline-offset: var(--focus__outline-offset); -} -@mixin focus-border() { - border-color: var(--borders-un-border-color__focused); -} - -// ---------------------- -// Scrollbar Styles -// ---------------------- -@mixin scrollbar-styles() { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb__bg-color) - var(--scrollbar-track__bg-color); - - //scrollbar - &::-webkit-scrollbar { - width: var(--scrollbar__size); - height: var(--scrollbar__size); - } - - // track - &::-webkit-scrollbar-track { - background-color: var(--scrollbar-track__bg-color); - border-radius: var(--scrollbar-track__border-radius); - } - - // thumb - &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb__bg-color); - border-radius: var(--scrollbar-thumb__border-radius); - } - - // corner - &::-webkit-scrollbar-corner { - background: var(--scrollbar-corner__bg); - } -} - -// ---------------------- -// Scrollbar Components -// ---------------------- -@mixin scrollbar-components() { - :host(.ch-scrollable), - .ch-scrollable, - .scrollable { - @include scrollbar-styles(); - } -} - -// ---------------------- -// Control -// ---------------------- - -// Colors -@mixin control-colors-enabled() { - background-color: var(--control__bg-color); - color: var(--control__color); - --ch-placeholder-color: var(--control-placeholder__color); - // enabled border color is defined in control-border() -} -@mixin control-colors-hover() { - --control__border-color: var(--control__border-color--hover); -} -@mixin control-colors-disabled() { - --control__bg-color: var(--control__background-color--disabled); - --control__border-color: var(--control__border-color--disabled); - --control__color: var(--control__color--disabled); - --ch-placeholder-color: var(--control-placeholder__color--disabled); -} -@mixin control-colors-error() { - --control__border-color: var(--control__border-color--error); -} -// Border -@mixin control-border() { - border-width: var(--control__border-width); - border-style: var(--control__border-style); - border-color: var(--control__border-color); - border-radius: var(--control__border-radius); -} -@mixin control-remove-border() { - // This resets the border applied - // (for controls inside the property grid) - --control__border-width: 0; - --control__border-color: transparent; - --control__border-radius: 0; -} -// Height -@mixin control-height-regular() { - block-size: var(--control__height); - // to be removed (TODO) - // fixed block-size comes with some issues. -} -// Padding -@mixin control-padding-inline() { - padding-inline: var(--control__padding-inline); -} -@mixin control-padding-block() { - padding-block: var(--control__padding-block); -} -@mixin control-padding-inline-block() { - padding-block: var(--control__padding-block); - padding-inline: var(--control__padding-inline); -} -// Placeholder -@mixin control-placeholder() { - color: var(--control-placeholder__color); - font-style: var(--control-placeholder__font-style); -} - -// ---------------------- -// Control Tiny -// ---------------------- - -@mixin control-tiny-size() { - block-size: var(--control-tiny__size); - inline-size: var(--control-tiny__size); -} -@mixin control-tiny-border() { - border-width: var(--control__border-width); - border-style: var(--control__border-style); - border-color: var(--control__border-color); - border-radius: var(--control__border-radius); -} -@mixin control-tiny-border-hover() { - --control__border-color: var(--control__border-color--hover); -} -@mixin control-tiny-border-disabled() { - --control__border-color: var(--control__border-color--disabled); -} -@mixin control-tiny-border-error() { - --control__border-color: var(--control__border-color--error); -} - -// ---------------------- -// Items Container -// ---------------------- - -@mixin items-container-border() { - border-style: var(--items-container__border-style); - border-width: var(--items-container__border-width); -} -@mixin items-container-border-radius() { - border-radius: var(--items-container__border-radius); -} -@mixin items-container-colors() { - background-color: var(--items-container__bg-color); - border-color: var(--items-container__border-color); -} -@mixin items-container-padding() { - padding-block: var(--items-container__padding-block); - padding-inline: var(--items-container__padding-inline); -} -@mixin items-container-dropdown() { - box-shadow: var(--items-container__box-shadow); -} -@mixin items-container-gap() { - gap: var(--items-container__gap); -} -@mixin items-container-gap-small() { - gap: var(--items-container__gap--small); -} -@mixin items-container-max-height() { - max-block-size: var(--items-container__max-block-size); -} -@mixin items-container-separator() { - block-size: var(--items-container-separator__block-size); - inline-size: var(--items-container-separator__inline-size); - background-color: var(--items-container-separator__bg-color); -} - -// ------------------------------------ -// Single Item (Every item except grid) -// ------------------------------------ - -@mixin item-colors-enabled() { - background-color: var(--item__bg-color); - border-color: var(--item__border-color); - color: var(--item__color); -} -@mixin item-colors-hover() { - --item__bg-color: var(--item__bg-color--hover); - --item__border-color: var(--item__border-color--hover); - --item__color: var(--item__color--hover); -} -@mixin item-colors-selected() { - --item__bg-color: var(--item__bg-color--selected); - --item__border-color: var(--item__border-color--selected); - --item__color: var(--item__color--selected); -} -@mixin item-colors-selected-hover() { - --item__bg-color: var(--item__bg-color--selected-hover); - --item__border-color: var(--item__border-color--selected-hover); - --item__color: var(--item__color--selected-hover); -} -@mixin item-colors-disabled() { - --item__bg-color: var(--item__bg-color--disabled); - --item__border-color: var(--item__border-color--disabled); - --item__color: var(--item__color--disabled); -} -@mixin item-border() { - border: var(--item__border-width) var(--item__border-style) - var(--item__border-color); -} -@mixin item-border-block-end() { - border-block-end: var(--item__border-width) var(--item__border-style) - var(--item__border-color); -} -@mixin item-border-radius() { - border-radius: var(--item__border-radius); -} -@mixin item-gap() { - gap: var(--item__gap--regular); -} -@mixin item-column-gap() { - column-gap: var(--item__gap--regular); -} -@mixin item-padding() { - padding-block: var(--item__padding-block); - padding-inline: var(--item__padding-inline); -} -@mixin item-padding-block() { - padding-block: var(--item__padding-inline); -} -@mixin item-padding-inline() { - padding-inline: var(--item__padding-inline); -} -@mixin item-height-regular() { - block-size: var(--item__height--regular); -} -@mixin item-height-large() { - block-size: var(--item__height--large); -} - -// --------------------------------- -// Grid Item -// --------------------------------- - -// Row -@mixin grid-row-colors-enabled() { - // Some controls using --item__** variables inside the tabular grid inherit - // unwanted styles. For example, when a row is selected, controls like a - // list-box inherit the selected background color. To prevent this, these - // properties cannot be directly applied to the tabular grid. - --grid-row__bg-color: var(--item__bg-color); - --grid-row__color: var(--item__color); - background-color: var(--grid-row__bg-color); - color: var(--grid-row__color); -} -@mixin grid-row-colors-highlighted() { - --grid-row__bg-color: var(--item__bg-color--hover); - --grid-row__color: var(--item__color--hover); -} -@mixin grid-row-colors-selected() { - --grid-row__bg-color: var(--item__bg-color--selected); - --grid-row__color: var(--item__color--selected); -} -@mixin grid-row-dragging() { - box-shadow: var(--mer-box-shadow--01); -} -@mixin grid-cell-border-inline-block() { - // this mixin uses the box-shadow property, but it looks - // as a border to the user. - box-shadow: var(--grid-cell__box-shadow-inline-block); -} -@mixin grid-cell-padding-inline() { - padding-inline: var(--grid-cell__padding-block); -} -@mixin grid-cell-padding-block() { - padding-block: var(--grid-cell__padding-block); -} -@mixin grid-cell-padding-inline-block() { - padding-block: var(--grid-cell__padding-block); - padding-inline: var(--grid-cell__padding-inline); -} -@mixin grid-cell-remove-padding() { - // we should redefine '--grid-cell__padding-inline' here because when a control - // is inside a a tabular-grid-cell the cell padding-inline value is required to - // be applied on the control padding-inline. - padding-block: 0; - padding-inline: 0; -} -@mixin grid-rowset-legend-padding-block() { - padding-block-start: var(--mer-spacing--xs); - padding-block-end: var(--mer-spacing--xs); -} -@mixin grid-rowset-legend-colors-enabled() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02); - background-color: var(--grid-rowset-legend__bg-color); -} -@mixin grid-rowset-legend-colors-hover() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--03); -} -@mixin grid-rowset-legend-colors-active() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02); -} - -// ---------------------- -// Tab Caption (Button) -// ---------------------- -@mixin tab-button-border-block() { - border-block: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-border-block-end() { - border-block-end: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-border-block-start() { - border-block-start: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-gap() { - gap: var(--tab-caption__gap); -} -@mixin tab-button-colors-enabled() { - background-color: var(--tab-caption__bg-color); - color: var(--tab-caption__color); - border-color: var(--tab-caption__border-color); -} -@mixin tab-button-colors-hover() { - --tab-caption__bg-color: var(--tab-caption__bg-color--hover); - // color remains the same - // border-color remains the same -} -@mixin tab-button-colors-disabled() { - --tab-caption__bg-color: var(--tab-caption__bg-color--disabled); - --tab-caption__color: var(--mer-text__primary--disabled); - --tab-caption__border-color--selected-inline: var( - --mer-border-color__primary--disabled - ); - --tab-caption__border-color--selected-stack: var( - --mer-surface__elevation--02 - ); -} -@mixin tab-button-colors-selected-inline() { - --tab-caption__bg-color: var(--tab-caption__bg-color--selected-inline); - --tab-caption__color: var(--tab-caption__color--selected); - --tab-caption__border-color: var( - --tab-caption__border-color--selected-inline - ); -} -@mixin tab-button-colors-selected-stack() { - --tab-caption__bg-color: var(--tab-caption__bg-color--selected-stack); - --tab-caption__color: var(--tab-caption__color--selected); - --tab-caption__border-color: var(--tab-caption__border-color--selected-stack); -} -@mixin tab-button-padding-inline() { - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); -} -@mixin tab-button-padding-stack() { - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); -} - -// ---------------------- -// Label -// ---------------------- - -@mixin label-gap-block() { - gap: var(--label__gap--block); -} -@mixin label-gap-inline() { - gap: var(--label__gap--inline); -} -@mixin label-color-hover() { - --label__color: var(--label__color--hover); -} -@mixin label-color-disabled() { - --label__color: var(--label__color--disabled); -} - -// ---------------------- -// Window -// ---------------------- - -// TODO: This styles should better be applied on the ch-window ? -%window-styles { - border: var(--window__border); - border-radius: var(--window__border-radius); - padding: var(---window__padding); - background-color: var(--window__bg-color); - box-shadow: var(--mer-box-shadow--01); -} - -// ---------------------- -// Dropdown -// ---------------------- - -@mixin dropdown-styles() { - box-shadow: var(--mer-box-shadow--01); - border-radius: var(--mer-border__radius--sm); -} - -// ---------------------- -// Pseudo Dialog Footer -// ---------------------- - -@mixin control-footer-base() { - --control-footer-justify-content: end; - padding-block-start: var(--mer-spacing--xs); - display: flex; - justify-content: var(--control-footer-justify-content); - align-items: center; -} -@mixin control-footer-border() { - border-block-start: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); -} -@mixin control-footer( - $selector: ".control-footer", - $with-border-selector: ".control-footer-with-border", - $justify-start-selector: ".control-footer-start", - $justify-center-selector: ".control-footer-center", - $justify-space-between-selector: ".control-footer-space-between", - $with-border: true -) { - #{$selector}, - #{$with-border-selector} { - @include control-footer-base(); - } - #{$justify-start-selector} { - --control-footer-justify-content: start; - } - #{$justify-center-selector} { - --control-footer-justify-content: center; - } - #{$justify-space-between-selector} { - --control-footer-justify-content: space-between; - } - @if $with-border { - #{$with-border-selector} { - @include control-footer-border(); - } - } -} - -// ---------------------- -// Pseudo Dialog Header -// ---------------------- - -@mixin control-header-base() { - padding-block-end: var(--mer-spacing--md); -} -@mixin control-header-border() { - border-block-end: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); -} -@mixin control-header( - $selector: ".control-header", - $with-border-selector: ".control-header-with-border", - $with-border: true -) { - #{$selector}, - #{$with-border-selector} { - @include control-header-base(); - } - @if $with-border { - #{$with-border-selector} { - @include control-header-border(); - } - } -} - -// ---------------------- -// Body Spacing -// ---------------------- - -// This custom properties define the block and inline spacing of containers. -// i.e.: dialog, layout, etc.. - -%spacing-body { - padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); - padding-inline: var(--spacing-body-inline-start) - var(--spacing-body-inline-end); -} - -%spacing-body-block { - padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); -} -%spacing-body-block-start { - padding-block-start: var(--spacing-body-block-start); -} -%spacing-body-block-end { - padding-block-end: var(--spacing-body-block-end); -} - -%spacing-body-inline { - padding-inline: var(--spacing-body-inline-start) - var(--spacing-body-inline-end); -} -%spacing-body-inline-start { - padding-inline-start: var(--spacing-body-inline-start); -} -%spacing-body-inline-end { - padding-inline-end: var(--spacing-body-inline-end); -} - -@mixin spacing-body( - $body-selector: ".spacing-body,:host(.spacing-body)", - $body-block-selector: ".spacing-body-block,:host(.spacing-body-block)", - $body-block-start-selector: - ".spacing-body-block-start,:host(.spacing-body-block-start)", - $body-block-end-selector: - ".spacing-body-block-end,:host(.spacing-body-block-end)", - $body-inline-selector: ".spacing-body-inline,:host(.spacing-body-inline)", - $body-inline-start-selector: - ".spacing-body-inline-start,:host(.spacing-body-inline-start)", - $body-inline-end-selector: - ".spacing-body-inline-end,:host(.spacing-body-inline-end)" -) { - #{$body-selector} { - @extend %spacing-body; - } - // block - #{$body-block-selector} { - @extend %spacing-body-block; - } - #{$body-block-start-selector} { - @extend %spacing-body-block-start; - } - #{$body-block-end-selector} { - @extend %spacing-body-block-end; - } - // inline - #{$body-inline-selector} { - @extend %spacing-body-inline; - } - #{$body-inline-start-selector} { - @extend %spacing-body-inline-start; - } - #{$body-inline-end-selector} { - @extend %spacing-body-inline-end; - } -} - -// ---------------------- -// Spinner -// ---------------------- - -@mixin spinner($size, $spinner_color, $track_color) { - $border_thinness: 7; // the higher the thinner - width: $size; - height: $size; - border: calc($size / $border_thinness) solid $track_color; - border-top: calc($size / $border_thinness) solid $spinner_color; - border-radius: 50%; - animation: spin var(--mer-timing--regular) linear infinite; - - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } -} - - -%label-font { - @extend %body-semi-bold-m; -} - -/// @group Label -/// @param {String} $label-selector [".label"] - -/// @param {String} $label--disabled-selector [".label--disabled"] - -@mixin label( - $label-selector: ".label", - $label--disabled-selector: ".label--disabled", - $label--position-block-selector: ".label--above", - $label--position-inline-selector: ".label--before" -) { - #{$label-selector} { - @extend %label-font; - } - #{$label--disabled-selector} { - @include label-color-disabled(); - } -} - // should be at the top, since other elements use it. -@mixin button-common-styles() { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - justify-content: center; -} - -@mixin label-common-styles() { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - grid-template-rows: auto; // Necessary to avoid creating additional rows and then adding additional gap at the bottom of the label - align-items: center; -} - -@mixin document-common-styles() { - display: grid; - grid-template-rows: 1fr; - min-block-size: 100dvh; - margin: 0; -} - -// - - - - - - - - - - - - - - - - - - - - -// Icons | Mask & Background -// - - - - - - - - - - - - - - - - - - - - - -// Icon mask styles -@mixin icon-mask-common-styles( - $inline-size: var(--icon-size), - $block-size: var(--icon-size), - $mask-size: var(--icon-mask-size) -) { - content: ""; - display: block; - inline-size: $inline-size; - block-size: $block-size; - -webkit-mask: no-repeat center / $mask-size var(--icon-path); - background-color: currentColor; -} - -// Icon background styles -@mixin icon-background-common-styles( - $inline-size: var(--icon-size), - $block-size: var(--icon-size), - $background-size: var(--icon-background-size) -) { - content: ""; - display: block; - inline-size: $inline-size; - block-size: $block-size; - background: no-repeat center / $background-size var(--icon-path); -} - -// - - - - - - - - - - - - - - - - - - - - -// Icons | Gap -// - - - - - - - - - - - - - - - - - - - - - -@mixin icon-and-text-styles($gap) { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - gap: $gap; -} - -// - - - - - - - - - - - - - - - - - - - - -// Ellipsis -// - - - - - - - - - - - - - - - - - - - - - -@mixin ellipsis() { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -%ellipsis { - @include ellipsis(); -} - - -// ---------------------- -// Focus -// ---------------------- -@mixin focus-outline() { - outline: var(--focus__outline-width) var(--focus__outline-style) - var(--focus__outline-color); - outline-offset: var(--focus__outline-offset); -} -@mixin focus-border() { - border-color: var(--borders-un-border-color__focused); -} - -// ---------------------- -// Scrollbar Styles -// ---------------------- -@mixin scrollbar-styles() { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb__bg-color) - var(--scrollbar-track__bg-color); - - //scrollbar - &::-webkit-scrollbar { - width: var(--scrollbar__size); - height: var(--scrollbar__size); - } - - // track - &::-webkit-scrollbar-track { - background-color: var(--scrollbar-track__bg-color); - border-radius: var(--scrollbar-track__border-radius); - } - - // thumb - &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb__bg-color); - border-radius: var(--scrollbar-thumb__border-radius); - } - - // corner - &::-webkit-scrollbar-corner { - background: var(--scrollbar-corner__bg); - } -} - -// ---------------------- -// Scrollbar Components -// ---------------------- -@mixin scrollbar-components() { - :host(.ch-scrollable), - .ch-scrollable, - .scrollable { - @include scrollbar-styles(); - } -} - -// ---------------------- -// Control -// ---------------------- - -// Colors -@mixin control-colors-enabled() { - background-color: var(--control__bg-color); - color: var(--control__color); - --ch-placeholder-color: var(--control-placeholder__color); - // enabled border color is defined in control-border() -} -@mixin control-colors-hover() { - --control__border-color: var(--control__border-color--hover); -} -@mixin control-colors-disabled() { - --control__bg-color: var(--control__background-color--disabled); - --control__border-color: var(--control__border-color--disabled); - --control__color: var(--control__color--disabled); - --ch-placeholder-color: var(--control-placeholder__color--disabled); -} -@mixin control-colors-error() { - --control__border-color: var(--control__border-color--error); -} -// Border -@mixin control-border() { - border-width: var(--control__border-width); - border-style: var(--control__border-style); - border-color: var(--control__border-color); - border-radius: var(--control__border-radius); -} -@mixin control-remove-border() { - // This resets the border applied - // (for controls inside the property grid) - --control__border-width: 0; - --control__border-color: transparent; - --control__border-radius: 0; -} -// Height -@mixin control-height-regular() { - block-size: var(--control__height); - // to be removed (TODO) - // fixed block-size comes with some issues. -} -// Padding -@mixin control-padding-inline() { - padding-inline: var(--control__padding-inline); -} -@mixin control-padding-block() { - padding-block: var(--control__padding-block); -} -@mixin control-padding-inline-block() { - padding-block: var(--control__padding-block); - padding-inline: var(--control__padding-inline); -} -// Placeholder -@mixin control-placeholder() { - color: var(--control-placeholder__color); - font-style: var(--control-placeholder__font-style); -} - -// ---------------------- -// Control Tiny -// ---------------------- - -@mixin control-tiny-size() { - block-size: var(--control-tiny__size); - inline-size: var(--control-tiny__size); -} -@mixin control-tiny-border() { - border-width: var(--control__border-width); - border-style: var(--control__border-style); - border-color: var(--control__border-color); - border-radius: var(--control__border-radius); -} -@mixin control-tiny-border-hover() { - --control__border-color: var(--control__border-color--hover); -} -@mixin control-tiny-border-disabled() { - --control__border-color: var(--control__border-color--disabled); -} -@mixin control-tiny-border-error() { - --control__border-color: var(--control__border-color--error); -} - -// ---------------------- -// Items Container -// ---------------------- - -@mixin items-container-border() { - border-style: var(--items-container__border-style); - border-width: var(--items-container__border-width); -} -@mixin items-container-border-radius() { - border-radius: var(--items-container__border-radius); -} -@mixin items-container-colors() { - background-color: var(--items-container__bg-color); - border-color: var(--items-container__border-color); -} -@mixin items-container-padding() { - padding-block: var(--items-container__padding-block); - padding-inline: var(--items-container__padding-inline); -} -@mixin items-container-dropdown() { - box-shadow: var(--items-container__box-shadow); -} -@mixin items-container-gap() { - gap: var(--items-container__gap); -} -@mixin items-container-gap-small() { - gap: var(--items-container__gap--small); -} -@mixin items-container-max-height() { - max-block-size: var(--items-container__max-block-size); -} -@mixin items-container-separator() { - block-size: var(--items-container-separator__block-size); - inline-size: var(--items-container-separator__inline-size); - background-color: var(--items-container-separator__bg-color); -} - -// ------------------------------------ -// Single Item (Every item except grid) -// ------------------------------------ - -@mixin item-colors-enabled() { - background-color: var(--item__bg-color); - border-color: var(--item__border-color); - color: var(--item__color); -} -@mixin item-colors-hover() { - --item__bg-color: var(--item__bg-color--hover); - --item__border-color: var(--item__border-color--hover); - --item__color: var(--item__color--hover); -} -@mixin item-colors-selected() { - --item__bg-color: var(--item__bg-color--selected); - --item__border-color: var(--item__border-color--selected); - --item__color: var(--item__color--selected); -} -@mixin item-colors-selected-hover() { - --item__bg-color: var(--item__bg-color--selected-hover); - --item__border-color: var(--item__border-color--selected-hover); - --item__color: var(--item__color--selected-hover); -} -@mixin item-colors-disabled() { - --item__bg-color: var(--item__bg-color--disabled); - --item__border-color: var(--item__border-color--disabled); - --item__color: var(--item__color--disabled); -} -@mixin item-border() { - border: var(--item__border-width) var(--item__border-style) - var(--item__border-color); -} -@mixin item-border-block-end() { - border-block-end: var(--item__border-width) var(--item__border-style) - var(--item__border-color); -} -@mixin item-border-radius() { - border-radius: var(--item__border-radius); -} -@mixin item-gap() { - gap: var(--item__gap--regular); -} -@mixin item-column-gap() { - column-gap: var(--item__gap--regular); -} -@mixin item-padding() { - padding-block: var(--item__padding-block); - padding-inline: var(--item__padding-inline); -} -@mixin item-padding-block() { - padding-block: var(--item__padding-inline); -} -@mixin item-padding-inline() { - padding-inline: var(--item__padding-inline); -} -@mixin item-height-regular() { - block-size: var(--item__height--regular); -} -@mixin item-height-large() { - block-size: var(--item__height--large); -} - -// --------------------------------- -// Grid Item -// --------------------------------- - -// Row -@mixin grid-row-colors-enabled() { - // Some controls using --item__** variables inside the tabular grid inherit - // unwanted styles. For example, when a row is selected, controls like a - // list-box inherit the selected background color. To prevent this, these - // properties cannot be directly applied to the tabular grid. - --grid-row__bg-color: var(--item__bg-color); - --grid-row__color: var(--item__color); - background-color: var(--grid-row__bg-color); - color: var(--grid-row__color); -} -@mixin grid-row-colors-highlighted() { - --grid-row__bg-color: var(--item__bg-color--hover); - --grid-row__color: var(--item__color--hover); -} -@mixin grid-row-colors-selected() { - --grid-row__bg-color: var(--item__bg-color--selected); - --grid-row__color: var(--item__color--selected); -} -@mixin grid-row-dragging() { - box-shadow: var(--mer-box-shadow--01); -} -@mixin grid-cell-border-inline-block() { - // this mixin uses the box-shadow property, but it looks - // as a border to the user. - box-shadow: var(--grid-cell__box-shadow-inline-block); -} -@mixin grid-cell-padding-inline() { - padding-inline: var(--grid-cell__padding-block); -} -@mixin grid-cell-padding-block() { - padding-block: var(--grid-cell__padding-block); -} -@mixin grid-cell-padding-inline-block() { - padding-block: var(--grid-cell__padding-block); - padding-inline: var(--grid-cell__padding-inline); -} -@mixin grid-cell-remove-padding() { - // we should redefine '--grid-cell__padding-inline' here because when a control - // is inside a a tabular-grid-cell the cell padding-inline value is required to - // be applied on the control padding-inline. - padding-block: 0; - padding-inline: 0; -} -@mixin grid-rowset-legend-padding-block() { - padding-block-start: var(--mer-spacing--xs); - padding-block-end: var(--mer-spacing--xs); -} -@mixin grid-rowset-legend-colors-enabled() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02); - background-color: var(--grid-rowset-legend__bg-color); -} -@mixin grid-rowset-legend-colors-hover() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--03); -} -@mixin grid-rowset-legend-colors-active() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02); -} - -// ---------------------- -// Tab Caption (Button) -// ---------------------- -@mixin tab-button-border-block() { - border-block: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-border-block-end() { - border-block-end: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-border-block-start() { - border-block-start: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-gap() { - gap: var(--tab-caption__gap); -} -@mixin tab-button-colors-enabled() { - background-color: var(--tab-caption__bg-color); - color: var(--tab-caption__color); - border-color: var(--tab-caption__border-color); -} -@mixin tab-button-colors-hover() { - --tab-caption__bg-color: var(--tab-caption__bg-color--hover); - // color remains the same - // border-color remains the same -} -@mixin tab-button-colors-disabled() { - --tab-caption__bg-color: var(--tab-caption__bg-color--disabled); - --tab-caption__color: var(--mer-text__primary--disabled); - --tab-caption__border-color--selected-inline: var( - --mer-border-color__primary--disabled - ); - --tab-caption__border-color--selected-stack: var( - --mer-surface__elevation--02 - ); -} -@mixin tab-button-colors-selected-inline() { - --tab-caption__bg-color: var(--tab-caption__bg-color--selected-inline); - --tab-caption__color: var(--tab-caption__color--selected); - --tab-caption__border-color: var( - --tab-caption__border-color--selected-inline - ); -} -@mixin tab-button-colors-selected-stack() { - --tab-caption__bg-color: var(--tab-caption__bg-color--selected-stack); - --tab-caption__color: var(--tab-caption__color--selected); - --tab-caption__border-color: var(--tab-caption__border-color--selected-stack); -} -@mixin tab-button-padding-inline() { - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); -} -@mixin tab-button-padding-stack() { - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); -} - -// ---------------------- -// Label -// ---------------------- - -@mixin label-gap-block() { - gap: var(--label__gap--block); -} -@mixin label-gap-inline() { - gap: var(--label__gap--inline); -} -@mixin label-color-hover() { - --label__color: var(--label__color--hover); -} -@mixin label-color-disabled() { - --label__color: var(--label__color--disabled); -} - -// ---------------------- -// Window -// ---------------------- - -// TODO: This styles should better be applied on the ch-window ? -%window-styles { - border: var(--window__border); - border-radius: var(--window__border-radius); - padding: var(---window__padding); - background-color: var(--window__bg-color); - box-shadow: var(--mer-box-shadow--01); -} - -// ---------------------- -// Dropdown -// ---------------------- - -@mixin dropdown-styles() { - box-shadow: var(--mer-box-shadow--01); - border-radius: var(--mer-border__radius--sm); -} - -// ---------------------- -// Pseudo Dialog Footer -// ---------------------- - -@mixin control-footer-base() { - --control-footer-justify-content: end; - padding-block-start: var(--mer-spacing--xs); - display: flex; - justify-content: var(--control-footer-justify-content); - align-items: center; -} -@mixin control-footer-border() { - border-block-start: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); -} -@mixin control-footer( - $selector: ".control-footer", - $with-border-selector: ".control-footer-with-border", - $justify-start-selector: ".control-footer-start", - $justify-center-selector: ".control-footer-center", - $justify-space-between-selector: ".control-footer-space-between", - $with-border: true -) { - #{$selector}, - #{$with-border-selector} { - @include control-footer-base(); - } - #{$justify-start-selector} { - --control-footer-justify-content: start; - } - #{$justify-center-selector} { - --control-footer-justify-content: center; - } - #{$justify-space-between-selector} { - --control-footer-justify-content: space-between; - } - @if $with-border { - #{$with-border-selector} { - @include control-footer-border(); - } - } -} - -// ---------------------- -// Pseudo Dialog Header -// ---------------------- - -@mixin control-header-base() { - padding-block-end: var(--mer-spacing--md); -} -@mixin control-header-border() { - border-block-end: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); -} -@mixin control-header( - $selector: ".control-header", - $with-border-selector: ".control-header-with-border", - $with-border: true -) { - #{$selector}, - #{$with-border-selector} { - @include control-header-base(); - } - @if $with-border { - #{$with-border-selector} { - @include control-header-border(); - } - } -} - -// ---------------------- -// Body Spacing -// ---------------------- - -// This custom properties define the block and inline spacing of containers. -// i.e.: dialog, layout, etc.. - -%spacing-body { - padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); - padding-inline: var(--spacing-body-inline-start) - var(--spacing-body-inline-end); -} - -%spacing-body-block { - padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); -} -%spacing-body-block-start { - padding-block-start: var(--spacing-body-block-start); -} -%spacing-body-block-end { - padding-block-end: var(--spacing-body-block-end); -} - -%spacing-body-inline { - padding-inline: var(--spacing-body-inline-start) - var(--spacing-body-inline-end); -} -%spacing-body-inline-start { - padding-inline-start: var(--spacing-body-inline-start); -} -%spacing-body-inline-end { - padding-inline-end: var(--spacing-body-inline-end); -} - -@mixin spacing-body( - $body-selector: ".spacing-body,:host(.spacing-body)", - $body-block-selector: ".spacing-body-block,:host(.spacing-body-block)", - $body-block-start-selector: - ".spacing-body-block-start,:host(.spacing-body-block-start)", - $body-block-end-selector: - ".spacing-body-block-end,:host(.spacing-body-block-end)", - $body-inline-selector: ".spacing-body-inline,:host(.spacing-body-inline)", - $body-inline-start-selector: - ".spacing-body-inline-start,:host(.spacing-body-inline-start)", - $body-inline-end-selector: - ".spacing-body-inline-end,:host(.spacing-body-inline-end)" -) { - #{$body-selector} { - @extend %spacing-body; - } - // block - #{$body-block-selector} { - @extend %spacing-body-block; - } - #{$body-block-start-selector} { - @extend %spacing-body-block-start; - } - #{$body-block-end-selector} { - @extend %spacing-body-block-end; - } - // inline - #{$body-inline-selector} { - @extend %spacing-body-inline; - } - #{$body-inline-start-selector} { - @extend %spacing-body-inline-start; - } - #{$body-inline-end-selector} { - @extend %spacing-body-inline-end; - } -} - -// ---------------------- -// Spinner -// ---------------------- - -@mixin spinner($size, $spinner_color, $track_color) { - $border_thinness: 7; // the higher the thinner - width: $size; - height: $size; - border: calc($size / $border_thinness) solid $track_color; - border-top: calc($size / $border_thinness) solid $spinner_color; - border-radius: 50%; - animation: spin var(--mer-timing--regular) linear infinite; - - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } -} - - -%button-base { - @include button-common-styles(); - @include control-border(); - @include control-padding-inline-block(); - - box-sizing: border-box; - background-color: var(--button-background-color); - color: var(--button-color); - - &--focus-visible { - @include focus-outline(); - } -} - -%button-primary { - @extend %button-base; - @extend %body-semi-bold-m; - - // In primary button, border color matches with background-color. - - --button-background-color: var(--mer-accent__primary); - --control__border-color: var(--button-background-color); - --button-color: var(--mer-text__on-primary); - // for the loader - --button-color--enabled: var( - --mer-text__on-primary - ); // a copy of --button-color - --button-color--active: var(--mer-text__on-primary--active); - - &--hover { - --button-background-color: var(--mer-accent__primary--hover); - --button-color: var(--mer-text__on-primary); - } - - &--active { - --button-background-color: var(--mer-accent__primary--active); - --button-color: var(--button-color--active); - } - - &--disabled { - --button-background-color: var(--mer-accent__primary--disabled); - --button-color: var(--mer-text__on-disabled); - } - - &--destructive { - --button-background-color: var(--mer-accent__primary--destructive); - --button-color: var(--mer-text__on-primary); - - &-hover { - --button-background-color: var(--mer-accent__primary--destructive-hover); - --button-color: var(--mer-text__on-primary); - } - - &-active { - --button-background-color: var(--mer-accent__primary--destructive-active); - --button-color: var(--mer-text__highlighted); - } - } - - &--success { - --button-background-color: var(--accent-success-enabled); - --button-color: var(--mer-text__on-primary); - - &-hover { - --button-background-color: var(--accent-success-hover); - --button-color: var(--mer-text__on-primary); - } - - &-active { - --button-background-color: var(--accent-success-active); - --button-color: var(--mer-text__highlighted); - } - } -} - -%button-secondary { - @extend %button-base; - @extend %body-semi-bold-m; - - // Default styles for the secondary button - --button-background-color: transparent; - --control__border-color: var(--button-color); - --button-color: var(--mer-text__neutral); - // for the loader - --button-color--enabled: var(--mer-text__neutral); // a copy of --button-color - --button-color--active: var(--mer-text__on-primary--active); - - &--hover { - --button-color: var(--mer-text__primary--hover); - } - - &--active { - --control__border-color: var(--mer-border-color__primary--active); - --button-color: var(--button-color--active); - } - - &--disabled { - --button-color: var(--mer-text__on-disabled); - } - - &--destructive { - --button-color: var(--mer-text__highlighted); - --control__border-color: var(--mer-border-color__error); - - &-hover { - --button-color: var(--mer-accent__primary--destructive-hover); - --control__border-color: var(--mer-border-color__error--hover); - } - - &-active { - --button-color: var(--mer-text__highlighted); - --control__border-color: var(--mer-border-color__error--active); - } - } -} - -%button-tertiary { - @extend %button-base; - @extend %body-regular-m; - - // Default styles for the tertiary button - --button-background-color: transparent; - --control__border-color: transparent; - --button-color: var(--mer-text__primary); - - &--hover { - --button-color: var(--mer-text__primary--hover); - } - - &--active { - --button-color: var(--mer-text__primary--active); - } - - &--disabled { - --button-color: var(--mer-text__on-disabled); - } -} - -%buttons-spacer { - display: flex; - gap: var(--mer-spacing--xs); -} - -%button-loader { - &::before { - content: ""; - @include spinner( - var(--loader-size), - var(--loader-spinner-color), - var(--loader-track-color) - ); - } - - &-primary { - --loader-spinner-color: var(--button-color--active); - --loader-track-color: var(--button-color); - - &--active { - --loader-spinner-color: var(--button-color--enabled); - } - } - &-secondary { - --loader-spinner-color: var(--mer-accent__primary--disabled); - --loader-track-color: var(--button-color); - - &--hover { - --loader-spinner-color: var(--mer-accent__primary); - } - &--active { - --loader-spinner-color: var(--mer-accent__primary--disabled); - } - } -} -%button-with-loader { - --loader-size: var(--mer-icon__box--md); - @extend %icon-and-text; -} -%button-loader-only { - --loader-size: 20px; - --control__padding-block: calc( - ( - var(--control__block-size) - var(--loader-size) - - var(--control__border-width) * 2 - ) / 2 - ); -} - -/// @group Button -/// @param {String} $selector [".button-primary"] - -/// @param {String} $destructive-selector [".button-primary-destructive"] - -/// @param {String} $success-selector [".button-primary-success"] - -/// @param {Boolean} $add--disabled [true] - -/// @param {Boolean} $add--destructive [true] - -/// @param {Boolean} $add--success [true] - -/// @param {Boolean} $add--loading [true] - -@mixin button-primary( - $selector: ".button-primary", - $destructive-selector: ".button-primary-destructive", - $success-selector: ".button-primary-success", - $with-loader-selector: ".button-primary-with-loader", - $loader-only-selector: ".button-primary-loader-only", - $add--disabled: true, - $add--destructive: true, - $add--success: true, - $add--loading: true -) { - #{$selector} { - @extend %button-primary; - - &:focus-visible { - @extend %button-base--focus-visible; - } - - &:hover { - @extend %button-primary--hover; - } - - &:active { - @extend %button-primary--active; - } - - @if $add--disabled { - &:disabled { - @extend %button-primary--disabled; - } - } - } - - @if $add--destructive { - #{$destructive-selector} { - @extend %button-primary; - @extend %button-primary--destructive; - - &:focus-visible { - // TODO: avoid duplcation - @extend %button-base--focus-visible; - } - - &:hover { - @extend %button-primary--destructive-hover; - } - - &:active { - @extend %button-primary--destructive-active; - } - - @if $add--disabled { - // TODO: avoid duplcation - &:disabled { - @extend %button-primary--disabled; - } - } - } - } - - @if $add--success { - #{$success-selector} { - @extend %button-primary; - @extend %button-primary--success; - - &:focus-visible { - // TODO: avoid duplcation - @extend %button-base--focus-visible; - } - - &:hover { - @extend %button-primary--success-hover; - } - - &:active { - @extend %button-primary--success-active; - } - - @if $add--disabled { - // TODO: avoid duplcation - &:disabled { - @extend %button-primary--disabled; - } - } - } - } - - @if $add--loading { - #{$with-loader-selector} { - @extend %button-primary; - @extend %button-loader; - @extend %button-loader-primary; - @extend %button-with-loader; - - &:focus-visible { - @extend %button-base--focus-visible; - } - - &:hover { - @extend %button-primary--hover; - } - - &:active { - @extend %button-primary--active; - @extend %button-loader-primary--active; - } - - @if $add--disabled { - &:disabled { - @extend %button-primary--disabled; - } - } - } - - #{$loader-only-selector} { - @extend %button-primary; - @extend %button-loader; - @extend %button-loader-primary; - @extend %button-loader-only; - - &:focus-visible { - @extend %button-base--focus-visible; - } - - &:hover { - @extend %button-primary--hover; - } - - &:active { - @extend %button-primary--active; - @extend %button-loader-primary--active; - } - - @if $add--disabled { - &:disabled { - @extend %button-primary--disabled; - } - } - } - } -} - -/// @group Button -/// @param {String} $selector [".button-secondary"] - -/// @param {Boolean} $add--loading [true] - -@mixin button-secondary( - $selector: ".button-secondary", - $destructive-selector: ".button-secondary-destructive", - $with-loader-selector: ".button-secondary-with-loader", - $loader-only-selector: ".button-secondary-loader-only", - $add--disabled: true, - $add--destructive: true, - $add--loading: true -) { - #{$selector} { - @extend %button-secondary; - - &:focus-visible { - @extend %button-base--focus-visible; - } - - &:hover { - @extend %button-secondary--hover; - } - - &:active { - @extend %button-secondary--active; - } - - @if $add--disabled == true { - &:disabled { - @extend %button-secondary--disabled; - } - } - } - - @if $add--destructive { - #{$destructive-selector} { - @extend %button-secondary; - @extend %button-secondary--destructive; - - &:focus-visible { - // TODO: avoid duplcation - @extend %button-base--focus-visible; - } - - &:hover { - @extend %button-secondary--destructive-hover; - } - - &:active { - @extend %button-secondary--destructive-active; - } - - @if $add--disabled { - // TODO: avoid duplcation - &:disabled { - @extend %button-secondary--disabled; - } - } - } - } - - @if $add--loading { - #{$with-loader-selector} { - @extend %button-secondary; - @extend %button-loader; - @extend %button-loader-secondary; - @extend %button-with-loader; - - &:focus-visible { - @extend %button-base--focus-visible; - } - - &:hover { - @extend %button-secondary--hover; - @extend %button-loader-secondary--hover; - } - - &:active { - @extend %button-secondary--active; - @extend %button-loader-secondary--active; - } - - @if $add--disabled { - &:disabled { - @extend %button-secondary--disabled; - } - } - } - - #{$loader-only-selector} { - @extend %button-secondary; - @extend %button-loader; - @extend %button-loader-secondary; - @extend %button-loader-only; - - &:focus-visible { - @extend %button-base--focus-visible; - } - - &:hover { - @extend %button-secondary--hover; - @extend %button-loader-secondary--hover; - } - - &:active { - @extend %button-secondary--active; - @extend %button-loader-secondary--active; - } - - @if $add--disabled { - &:disabled { - @extend %button-secondary--disabled; - } - } - } - } -} - -/// @group Button -/// @param {String} $selector [".button-tertiary"] - -@mixin button-tertiary($selector: ".button-tertiary", $add--disabled: true) { - #{$selector} { - @extend %button-tertiary; - - &:focus-visible { - @extend %button-base--focus-visible; - } - - &:hover { - @extend %button-tertiary--hover; - } - - &:active { - @extend %button-tertiary--active; - } - - @if $add--disabled == true { - &:disabled, - &--disabled { - @extend %button-tertiary--disabled; - } - } - } -} - -/// @group Button -/// @param {String} $selector [".buttons-spacer"] - -@mixin buttons-spacer($selector: ".buttons-spacer") { - #{$selector} { - @extend %buttons-spacer; - } -} - -@mixin button-classes() { - // Button primary - @include button-primary(); - - // Button secondary - @include button-secondary(); - - // Button tertiary - @include button-tertiary(); - - // Buttons spacer - @include buttons-spacer(); -} - -%field { - display: grid; - - &-group { - --spacing-body-block-start: var(--mer-spacing--md); - --spacing-body-block-end: var(--mer-spacing--md); - --spacing-body-inline-start: var(--mer-spacing--md); - --spacing-body-inline-end: var(--mer-spacing--md); - row-gap: var(--field-group__row-gap); - column-gap: var(--field-group__column-gap); - - &-default { - display: grid; - } - - &-inline { - display: flex; - flex-wrap: wrap; - } - - &-cols-2 { - display: grid; - column-gap: var(--field__column-gap); - row-gap: var(--field-group__row-gap); - grid-template-columns: max-content auto; - } - } - - &-block { - row-gap: var(--field__row-gap); - grid-template-rows: max-content 1fr; - } - - &-inline { - column-gap: var(--field__column-gap); - grid-template-columns: max-content 1fr; - - &__label { - // Make the label vertically aligned with an inline control. - // Also do not look center on taller contro, like a textarea. - margin-block-start: 11px; - } - } -} - -/// @group Field -/// @param {String} $field-group-selector [".field-group"] - -/// @param {String} $field-group-inline-selector [".field-group-inline"] - -/// @param {String} $field-selector [".field"] - -/// @param {String} $field-block-selector [".field-block"] - -/// @param {String} $field-inline-selector [".field-inline"] - -/// @param {String} $field-inline__label-selector [".field-inline .label"] - -/// @param {String} $field-group-cols-2-selector [".field-group-cols-2"] - -/// @param {String} $field-group-cols-2__label-selector [".field-group-cols-2 .label"] - -@mixin field( - $field-group-selector: ".field-group", - $field-group-inline-selector: ".field-group-inline", - $field-selector: ".field", - $field-block-selector: ".field-block", - $field-inline-selector: ".field-inline", - $field-inline__label-selector: ".field-inline > .label", - $field-group-cols-2-selector: ".field-group-cols-2", - $field-group-cols-2__label-selector: ".field-group-cols-2 .label" -) { - #{$field-group-selector} { - @extend %field-group; - @extend %field-group-default; - } - - #{$field-group-inline-selector} { - @extend %field-group; - @extend %field-group-inline; - } - - #{$field-selector} { - @extend %field; - } - - #{$field-block-selector} { - @extend %field-block; - } - - #{$field-inline-selector} { - @extend %field-inline; - } - - #{$field-inline__label-selector} { - @extend %field-inline__label; - } - - #{$field-group-cols-2-selector} { - @extend %field-group-cols-2; - } - - #{$field-group-cols-2__label-selector} { - @extend %field-inline__label; - } -} - -// - - - - - - - - - - - - - - - - - - - - -// Icon Sizes -// - - - - - - - - - - - - - - - - - - - - - -%icon-size--sm { - @include icon-background-common-styles( - $inline-size: var(--mer-icon__box--sm), - $block-size: var(--mer-icon__box--sm), - $background-size: var(--mer-icon__size--sm) - ); -} - -%icon-size--md { - @include icon-background-common-styles( - $inline-size: var(--mer-icon__box--md), - $block-size: var(--mer-icon__box--md), - $background-size: var(--mer-icon__size--md) - ); -} - -/// @group Icon -/// @param {String} $selector [".icon-size-sm"] -@mixin icon-size-sm($selector: ".icon-size-sm") { - #{$selector} { - @extend %icon-size--sm; - } -} - -/// @group Icon -/// @param {String} $selector [".icon-size-md"] - -@mixin icon-size-md($selector: ".icon-size-md") { - #{$selector} { - @extend %icon-size--md; - } -} - -// - - - - - - - - - - - - - - - - - - - - -// Icon and Text -// - - - - - - - - - - - - - - - - - - - - - -%icon-and-text { - @include icon-and-text-styles($gap: var(--control__icon-gap)); -} - -/// @group Icon -/// @param {String} $selector [".icon-and-text"] - -@mixin icon-and-text($selector: ".icon-and-text") { - #{$selector} { - @extend %icon-and-text; - } -} - -%layout { - --spacing-body-block-start: var(--mer-spacing--md); - --spacing-body-block-end: var(--mer-spacing--md); - --spacing-body-inline-start: var(--mer-spacing--lg); - --spacing-body-inline-end: var(--mer-spacing--lg); - - display: grid; - gap: var(--mer-spacing--md); - &__panel { - display: grid; - } - - &--cols-1 { - // Do not add this property in the base class. Otherwise, putting this - // class in the Host of the component will override any grid-template - // property inside the Shadow DOM due to specificity - grid-template-rows: 1fr; - grid-template-columns: 1fr; - } - - &--cols-2 { - grid-template-rows: 1fr; - grid-template-columns: repeat(2, 1fr); - } - - &--cols-3 { - grid-template-rows: 1fr; - grid-template-columns: repeat(3, 1fr); - } - - &--cols-4 { - grid-template-rows: 1fr; - grid-template-columns: repeat(4, 1fr); - } - - &--cols-1-2 { - grid-template-rows: 1fr; - grid-template-columns: 1fr 2fr; - } - - &--cols-2-1 { - grid-template-rows: 1fr; - grid-template-columns: 2fr 1fr; - } -} - -/// @group Layout -/// @param {String} $layout-selector [".layout"] - -/// @param {String} $panel-selector [".layout__panel"] - -/// @param {String} $layout--cols-1-selector [".layout--cols-1"] - -/// @param {String} $layout--cols-2-selector [".layout--cols-2"] - -/// @param {String} $layout--cols-3-selector [".layout--cols-3"] - -/// @param {String} $layout--cols-4-selector [".layout--cols-4"] - -/// @param {String} $layout--cols-1-2-selector [".layout--cols-1-2"] - -/// @param {String} $layout--cols-2-1-selector [".layout--cols-2-1"] - -@mixin layout( - $layout-selector: ".layout", - $panel-selector: ".layout__panel", - $layout--cols-1-selector: ".layout--cols-1", - $layout--cols-2-selector: ".layout--cols-2", - $layout--cols-3-selector: ".layout--cols-3", - $layout--cols-4-selector: ".layout--cols-4", - $layout--cols-1-2-selector: ".layout--cols-1-2", - $layout--cols-2-1-selector: ".layout--cols-2-1" -) { - #{$layout-selector} { - @extend %layout; - } - - #{$panel-selector} { - @extend %layout__panel; - } - - #{$layout--cols-1-selector} { - @extend %layout--cols-1; - } - - #{$layout--cols-2-selector} { - @extend %layout--cols-2; - } - - #{$layout--cols-3-selector} { - @extend %layout--cols-3; - } - - #{$layout--cols-4-selector} { - @extend %layout--cols-4; - } - - #{$layout--cols-1-2-selector} { - @extend %layout--cols-1-2; - } - - #{$layout--cols-2-1-selector} { - @extend %layout--cols-2-1; - } -} - -// heading - -@mixin heading-1() { - @extend %heading; - font-size: var(--font-size-header-h1); -} - -@mixin heading-2() { - @extend %heading; - font-size: var(--font-size-header-h2); -} - -@mixin heading-3() { - @extend %heading; - font-size: var(--font-size-header-h3); -} - -@mixin heading-4() { - @extend %heading; - font-size: var(--font-size-header-h4); -} - -@mixin heading-5() { - @extend %heading; - font-size: var(--font-size-header-h5); -} - -@mixin heading-6() { - @extend %heading; - font-size: var(--font-size-header-h6); -} - -%heading { - font-weight: var(--font-weight-bold); - line-height: var(--line-height-tight); - - &-1 { - @include heading-1(); - } - - &-2 { - @include heading-2(); - } - - &-3 { - @include heading-3(); - } - - &-4 { - @include heading-4(); - } - - &-5 { - @include heading-5(); - } - - &-6 { - @include heading-6(); - } -} - -// subtitle - -// subtitle: regular - -@mixin subtitle-regular-l() { - @extend %subtitle; - @extend %subtitle-regular; - @extend %subtitle-l; -} - -@mixin subtitle-regular-m() { - @extend %subtitle; - @extend %subtitle-regular; - @extend %subtitle-m; -} - -@mixin subtitle-regular-s() { - @extend %subtitle; - @extend %subtitle-regular; - @extend %subtitle-s; -} - -@mixin subtitle-regular-xs() { - @extend %subtitle; - @extend %subtitle-regular; - @extend %subtitle-xs; -} - -// subtitle: semi-bold - -@mixin subtitle-semi-bold-l() { - @extend %subtitle; - @extend %subtitle-semi-bold; - @extend %subtitle-l; -} - -@mixin subtitle-semi-bold-m() { - @extend %subtitle; - @extend %subtitle-semi-bold; - @extend %subtitle-m; -} - -@mixin subtitle-semi-bold-s() { - @extend %subtitle; - @extend %subtitle-semi-bold; - @extend %subtitle-s; -} - -@mixin subtitle-semi-bold-xs() { - @extend %subtitle; - @extend %subtitle-semi-bold; - @extend %subtitle-xs; -} - -%subtitle { - font-family: var(--font-family-header); - - &-l { - font-size: var(--font-size-subtitle-l); - line-height: var(--line-height-regular); - } - - &-m { - font-size: var(--font-size-subtitle-m); - line-height: var(--line-height-regular); - } - - &-s { - font-size: var(--font-size-subtitle-s); - line-height: var(--line-height-tight); - } - - &-xs { - font-size: var(--font-size-subtitle-xs); - line-height: var(--line-height-tight); - } - - &-regular { - font-weight: var(--font-weight-regular); - - &-l { - @include subtitle-regular-l(); - } - - &-m { - @include subtitle-regular-m(); - } - - &-s { - @include subtitle-regular-s(); - } - - &-xs { - @include subtitle-regular-xs(); - } - } - - &-semi-bold { - font-weight: var(--font-weight-semi-bold); - - &-l { - @include subtitle-semi-bold-l(); - } - - &-m { - @include subtitle-semi-bold-m(); - } - - &-s { - @include subtitle-semi-bold-s(); - } - - &-xs { - @include subtitle-semi-bold-xs(); - } - } -} - -// body - -// body: regular - -@mixin body-regular-xl() { - @extend %body; - @extend %body-regular; - @extend %body-xl; -} - -@mixin body-regular-l() { - @extend %body; - @extend %body-regular; - @extend %body-l; -} - -@mixin body-font() { - // "medium" is the body font weight. - font-size: var(--font-size-body-m); - line-height: var(--line-height-tight); - font-weight: var(--font-weight-regular); -} - -@mixin body-regular-s() { - @extend %body; - @extend %body-regular; - @extend %body-s; -} - -@mixin body-regular-xs() { - @extend %body; - @extend %body-regular; - @extend %body-xs; -} - -// body: semi-bold - -@mixin body-semi-bold-xl() { - @extend %body; - @extend %body-semi-bold; - @extend %body-xl; -} - -@mixin body-semi-bold-l() { - @extend %body; - @extend %body-semi-bold; - @extend %body-l; -} - -@mixin body-semi-bold-m() { - @extend %body; - @extend %body-semi-bold; - @extend %body-m; -} - -@mixin body-semi-bold-s() { - @extend %body; - @extend %body-semi-bold; - @extend %body-s; -} - -@mixin body-semi-bold-xs() { - @extend %body; - @extend %body-semi-bold; - @extend %body-xs; -} - -// body: italic - -@mixin body-italic-xl() { - @extend %body; - @extend %body-italic; - @extend %body-xl; -} - -@mixin body-italic-l() { - @extend %body; - @extend %body-italic; - @extend %body-l; -} - -@mixin body-italic-m() { - @extend %body; - @extend %body-italic; - @extend %body-m; -} - -@mixin body-italic-s() { - @extend %body; - @extend %body-italic; - @extend %body-s; -} - -@mixin body-italic-xs() { - @extend %body; - @extend %body-italic; - @extend %body-xs; -} - -%body { - line-height: var(--line-height-tight); - - // sizes - &-xl { - font-size: var(--font-size-body-xl); - } - - &-l { - font-size: var(--font-size-body-l); - } - - &-m { - font-size: var(--font-size-body-m); - } - - &-s { - font-size: var(--font-size-body-s); - } - - &-xs { - font-size: var(--font-size-body-xs); - } - - &-regular { - font-weight: var(--font-weight-regular); - - &-xl { - @include body-regular-xl(); - } - - &-l { - @include body-regular-l(); - } - - &-m { - @include body-font(); - } - - &-s { - @include body-regular-s(); - } - - &-xs { - @include body-regular-xs(); - } - } - - &-semi-bold { - font-weight: var(--font-weight-semi-bold); - - &-xl { - @include body-semi-bold-xl(); - } - - &-l { - @include body-semi-bold-l(); - } - - &-m { - @include body-semi-bold-m(); - } - - &-s { - @include body-semi-bold-s(); - } - - &-xs { - @include body-semi-bold-xs(); - } - } - - &-italic { - font-weight: var(--font-weight-regular); - font-style: italic; - - &-xl { - @include body-italic-xl(); - } - - &-l { - @include body-italic-l(); - } - - &-m { - @include body-italic-m(); - } - - &-s { - @include body-italic-s(); - } - - &-xs { - @include body-italic-xs(); - } - } -} - -// tiny - -// tiny: regular - -@mixin tiny-regular-l() { - @extend %tiny; - @extend %tiny-regular; - @extend %tiny-l; -} - -@mixin tiny-regular-m() { - @extend %tiny; - @extend %tiny-regular; - @extend %tiny-m; -} - -@mixin tiny-regular-s() { - @extend %tiny; - @extend %tiny-regular; - @extend %tiny-s; -} - -@mixin tiny-regular-xs() { - @extend %tiny; - @extend %tiny-regular; - @extend %tiny-xs; -} - -// tiny: semi-bold - -@mixin tiny-semi-bold-l() { - @extend %tiny; - @extend %tiny-semi-bold; - @extend %tiny-l; -} - -@mixin tiny-semi-bold-m() { - @extend %tiny; - @extend %tiny-semi-bold; - @extend %tiny-m; -} - -@mixin tiny-semi-bold-s() { - @extend %tiny; - @extend %tiny-semi-bold; - @extend %tiny-s; -} - -@mixin tiny-semi-bold-xs() { - @extend %tiny; - @extend %tiny-semi-bold; - @extend %tiny-xs; -} - -%tiny { - line-height: var(--line-height-tight); - - &-l { - font-size: var(--font-size-tiny-l); - line-height: var(--line-height-tight); - } - - &-m { - font-size: var(--font-size-tiny-m); - line-height: var(--line-height-tight); - } - - &-s { - font-size: var(--font-size-tiny-s); - line-height: var(--line-height-tight); - } - - &-xs { - font-size: var(--font-size-tiny-xs); - line-height: var(--line-height-tight); - } - - &-regular { - font-weight: var(--font-weight-regular); - &-l { - @include tiny-regular-l(); - } - - &-m { - @include tiny-regular-m(); - } - - &-s { - @include tiny-regular-s(); - } - - &-xs { - @include tiny-regular-xs(); - } - } - - &-semi-bold { - font-weight: var(--font-weight-semi-bold); - &-l { - @include tiny-semi-bold-l(); - } - - &-m { - @include tiny-semi-bold-m(); - } - - &-s { - @include tiny-semi-bold-s(); - } - - &-xs { - @include tiny-semi-bold-xs(); - } - } -} - -/// @group Typography -/// @param {String} $heading-1-selector [".heading-1"] - -/// @param {String} $heading-2-selector [".heading-2"] - -/// @param {String} $heading-3-selector [".heading-3"] - -/// @param {String} $heading-4-selector [".heading-4"] - -/// @param {String} $heading-5-selector [".heading-5"] - -/// @param {String} $heading-6-selector [".heading-6"] - - -/// @param {String} $subtitle-regular-l-selector [".subtitle-regular-l"] - -/// @param {String} $subtitle-regular-m-selector [".subtitle-regular-m"] - -/// @param {String} $subtitle-regular-s-selector [".subtitle-regular-s"] - -/// @param {String} $subtitle-regular-xs-selector [".subtitle-regular-xs"] - - -/// @param {String} $subtitle-bold-l-selector [".subtitle-bold-l"] - -/// @param {String} $subtitle-bold-m-selector [".subtitle-bold-m"] - -/// @param {String} $subtitle-bold-s-selector [".subtitle-bold-s"] - -/// @param {String} $subtitle-bold-xs-selector [".subtitle-bold-xs"] - - -/// @param {String} $body-regular-xl-selector [".body-regular-xl"] - -/// @param {String} $body-regular-l-selector [".body-regular-l"] - -/// @param {String} $body-regular-m-selector [".body-regular-m"] - -/// @param {String} $body-regular-s-selector [".body-regular-s"] - -/// @param {String} $body-regular-xs-selector [".body-regular-xs"] - - -/// @param {String} $body-semi-bold-xl-selector [".body-semi-bold-xl"] - -/// @param {String} $body-semi-bold-l-selector [".body-semi-bold-l"] - -/// @param {String} $body-semi-bold-m-selector [".body-semi-bold-m"] - -/// @param {String} $body-semi-bold-s-selector [".body-semi-bold-s"] - -/// @param {String} $body-semi-bold-xs-selector [".body-semi-bold-xs"] - - -/// @param {String} $body-italic-xl-selector [".body-italic-xl"] - -/// @param {String} $body-italic-l-selector [".body-italic-l"] - -/// @param {String} $body-italic-m-selector [".body-italic-m"] - -/// @param {String} $body-italic-s-selector [".body-italic-s"] - -/// @param {String} $body-italic-xs-selector [".body-italic-xs"] - - -/// @param {String} $tiny-regular-l-selector [".tiny-regular-l"] - -/// @param {String} $tiny-regular-m-selector [".tiny-regular-m"] - -/// @param {String} $tiny-regular-s-selector [".tiny-regular-s"] - -/// @param {String} $tiny-regular-xs-selector [".tiny-regular-xs"] - - -/// @param {String} $tiny-semi-bold-l-selector [".tiny-semi-bold-l"] - -/// @param {String} $tiny-semi-bold-m-selector [".tiny-semi-bold-m"] - -/// @param {String} $tiny-semi-bold-s-selector [".tiny-semi-bold-s"] - -/// @param {String} $tiny-semi-bold-xs-selector [".tiny-semi-bold-xs"] - - -@mixin typography-classes( - $heading-1-selector: ".heading-1", - $heading-2-selector: ".heading-2", - $heading-3-selector: ".heading-3", - $heading-4-selector: ".heading-4", - $heading-5-selector: ".heading-5", - $heading-6-selector: ".heading-6", - - $subtitle-regular-l-selector: ".subtitle-regular-l", - $subtitle-regular-m-selector: ".subtitle-regular-m", - $subtitle-regular-s-selector: ".subtitle-regular-s", - $subtitle-regular-xs-selector: ".subtitle-regular-xs", - - $subtitle-semi-bold-l-selector: ".subtitle-semi-bold-l", - $subtitle-semi-bold-m-selector: ".subtitle-semi-bold-m", - $subtitle-semi-bold-s-selector: ".subtitle-semi-bold-s", - $subtitle-semi-bold-xs-selector: ".subtitle-semi-bold-xs", - - $body-regular-xl-selector: ".body-regular-xl", - $body-regular-l-selector: ".body-regular-l", - $body-regular-m-selector: ".body-regular-m", - $body-regular-s-selector: ".body-regular-s", - $body-regular-xs-selector: ".body-regular-xs", - - $body-semi-bold-xl-selector: ".body-semi-bold-xl", - $body-semi-bold-l-selector: ".body-semi-bold-l", - $body-semi-bold-m-selector: ".body-semi-bold-m", - $body-semi-bold-s-selector: ".body-semi-bold-s", - $body-semi-bold-xs-selector: ".body-semi-bold-xs", - - $body-italic-xl-selector: ".body-italic-xl", - $body-italic-l-selector: ".body-italic-l", - $body-italic-m-selector: ".body-italic-m", - $body-italic-s-selector: ".body-italic-s", - $body-italic-xs-selector: ".body-italic-xs", - - $tiny-regular-l-selector: ".tiny-regular-l", - $tiny-regular-m-selector: ".tiny-regular-m", - $tiny-regular-s-selector: ".tiny-regular-s", - $tiny-regular-xs-selector: ".tiny-regular-xs", - - $tiny-semi-bold-l-selector: ".tiny-semi-bold-l", - $tiny-semi-bold-m-selector: ".tiny-semi-bold-m", - $tiny-semi-bold-s-selector: ".tiny-semi-bold-s", - $tiny-semi-bold-xs-selector: ".tiny-semi-bold-xs" -) { - // Heading: - - #{$heading-1-selector} { - @extend %heading-1; - } - #{$heading-2-selector} { - @extend %heading-2; - } - #{$heading-3-selector} { - @extend %heading-3; - } - #{$heading-4-selector} { - @extend %heading-4; - } - #{$heading-5-selector} { - @extend %heading-5; - } - #{$heading-6-selector} { - @extend %heading-6; - } - - // Subtitle: regular - - #{$subtitle-regular-l-selector} { - @extend %subtitle-regular-l; - } - #{$subtitle-regular-m-selector} { - @extend %subtitle-regular-m; - } - #{$subtitle-regular-s-selector} { - @extend %subtitle-regular-s; - } - #{$subtitle-regular-xs-selector} { - @extend %subtitle-regular-xs; - } - - // Subtitle: bold - - #{$subtitle-semi-bold-l-selector} { - @extend %subtitle-semi-bold-l; - } - #{$subtitle-semi-bold-m-selector} { - @extend %subtitle-semi-bold-m; - } - #{$subtitle-semi-bold-s-selector} { - @extend %subtitle-semi-bold-s; - } - #{$subtitle-semi-bold-xs-selector} { - @extend %subtitle-semi-bold-xs; - } - - // Body: regular - - #{$body-regular-xl-selector} { - @extend %body-regular-xl; - } - #{$body-regular-l-selector} { - @extend %body-regular-l; - } - #{$body-regular-m-selector} { - @extend %body-regular-m; - } - #{$body-regular-s-selector} { - @extend %body-regular-s; - } - #{$body-regular-xs-selector} { - @extend %body-regular-xs; - } - - // Body: semi-bold - - #{$body-semi-bold-xl-selector} { - @extend %body-semi-bold-xl; - } - #{$body-semi-bold-l-selector} { - @extend %body-semi-bold-l; - } - #{$body-semi-bold-m-selector} { - @extend %body-semi-bold-m; - } - #{$body-semi-bold-s-selector} { - @extend %body-semi-bold-s; - } - #{$body-semi-bold-xs-selector} { - @extend %body-semi-bold-xs; - } - - // Body: regular italic - - #{$body-italic-xl-selector} { - @extend %body-italic-xl; - } - #{$body-italic-l-selector} { - @extend %body-italic-l; - } - #{$body-italic-m-selector} { - @extend %body-italic-m; - } - #{$body-italic-s-selector} { - @extend %body-italic-s; - } - #{$body-italic-xs-selector} { - @extend %body-italic-xs; - } - - // Body tiny: regular - - #{$tiny-regular-l-selector} { - @extend %tiny-regular-l; - } - #{$tiny-regular-m-selector} { - @extend %tiny-regular-m; - } - #{$tiny-regular-s-selector} { - @extend %tiny-regular-s; - } - #{$tiny-regular-xs-selector} { - @extend %tiny-regular-xs; - } - - // Body tiny: semi-bold - - #{$tiny-semi-bold-l-selector} { - @extend %tiny-semi-bold-l; - } - #{$tiny-semi-bold-m-selector} { - @extend %tiny-semi-bold-m; - } - #{$tiny-semi-bold-s-selector} { - @extend %tiny-semi-bold-s; - } - #{$tiny-semi-bold-xs-selector} { - @extend %tiny-semi-bold-xs; - } -} - -// link - -%text-link { - color: var(--mer-text__primary); - text-decoration-line: underline; -} - -// property-grid - -%text-edited { - font-weight: var(--font-weight-bold); -} - -%text-readonly { - font-style: italic; - color: var(--item__color--disabled); -} - - -// Icons -%button-icon-only { - padding: calc( - ( - var(--control__block-size) - 2 * var(--control__border-width) - - var(--mer-icon__box--md) - ) / 2 - ); - @include control-border(); -} - -%button-icon-and-text { - @include icon-and-text-styles(var(--mer-spacing--xs)); -} - -@mixin button-icon-only($selector: ".button-icon-only") { - #{$selector} { - @extend %button-icon-only; - } -} - -@mixin button-icon-and-text($selector: ".button-icon-and-text") { - #{$selector} { - @extend %button-icon-and-text; - } -} - - -// Components -@mixin accordion-tokens() { - // chameleon tokens (do not modify names) - --ch-accordion__header-image-size: var(--mer-icon__box--sm); - --ch-accordion__chevron-size: var(--mer-icon__box--sm); - --ch-accordion-expand-collapse-duration: var(--mer-timing--fast); - --ch-accordion-expand-collapse-timing-function: ease-in-out; - - // spacing - --spacing-body-block-start: var(--mer-spacing--xs); - --spacing-body-block-end: var(--mer-spacing--xs); - --spacing-body-inline-start: var(--mer-spacing--sm); - --spacing-body-inline-end: var(--mer-spacing--sm); - - // accordion - --accordion__gap: var(--mer-spacing--2xs); - - // panel - --accordion-panel__border-radius: var(--mer-border__radius--sm); - --accordion-panel__bg-color: var(--mer-surface__elevation--01); - --accordion-panel__bg-color--disabled: var(--mer-surface__elevation--02); - // panel (outlined) - --accordion-panel-outlined__border-color: var(--mer-border-color__on-surface); - --accordion-panel-outlined__border-color--disabled: var( - --mer-border-color__primary--disabled - ); - --accordion-panel-outlined__border-color--disabled: var( - --mer-border-color__primary--disabled - ); - --accordion-panel-outlined__border: var(--mer-border__width--sm) solid - var(--accordion-panel-outlined__border-color); - --accordion-panel-outlined__border-radius: var(--mer-border__radius--sm); - - // header - --accordion-header__padding: var(--mer-spacing--sm); - --accordion-header__gap: var(--mer-spacing--sm); - --accordion-header__color: var(--mer-text__highlighted); - --accordion-header__color--disabled: var(--mer-accent__primary--disabled); - --accordion-header__border-width: var(--mer-border__width--sm); - --accordion-header__border-color: transparent; - --accordion-header__border-radius: var(--accordion-panel__border-radius); - --accordion-header__border-block-end-color: var( - --mer-border-color__on-surface - ); // for expanded - - // section - --accordion-section__border-color: var(--mer-border-color__on-elevation--01); - --accordion-section__margin-block: var(--mer-spacing--sm); - --accordion-section__margin-inline: var(--mer-spacing--sm); - --accordion-section__bg-color: var(--mer-surface__elevation--01); - --accordion-section__border: var(--mer-border__width--sm) solid - var(--accordion-section__border-color); - --accordion-section__border-radius: var(--mer-border__radius--sm); - // section (outlined) - --accordion-section-outlined__border-color: var( - --mer-border-color__on-surface - ); - --accordion-section-outlined__border-color--disabled: var( - --mer-border-color__primary--disabled - ); -} - - -%accordion { - @include accordion-tokens(); - - --spacing-body-block-start: var(--mer-spacing--sm); - --spacing-body-block-end: var(--mer-spacing--sm); - --spacing-body-inline-start: var(--mer-spacing--sm); - --spacing-body-inline-end: var(--mer-spacing--sm); - - gap: var(--accordion__gap); - - &-outlined { - --accordion-section__border-color: var( - --accordion-section-outlined__border-color - ); - --accordion-section__bg-color: transparent; - } -} - -%accordion-header { - @extend %subtitle-semi-bold-xs; - padding: var(--accordion-header__padding); - gap: var(--accordion-header__gap); - color: var(--accordion-header__color); - border: var(--accordion-header__border-width) solid - var(--accordion-header__border-color); - - &--hover { - --accordion-header__border-color: var(--mer-border-color__primary--hover); - } - &--active { - --accordion-header__border-color: var(--mer-border-color__primary--active); - } - - &--hover, - &--active { - --accordion-header__border-block-end-color: var( - --accordion-header__border-color - ); - } - - &--focus-visible { - @include focus-outline(); - } - - &--disabled { - color: var(--mer-accent__primary--disabled); - } - - &-outlined { - &--disabled { - color: var(--mer-accent__primary--disabled); - } - } - - // expanded - &--expanded { - border-block-end-color: var(--accordion-header__border-block-end-color); - - &-disabled { - } - } -} - -%accordion-panel { - border-radius: var(--mer-border__radius--sm); - background-color: var(--accordion-panel__bg-color); - - &--disabled { - --accordion-panel__bg-color: var(--accordion-panel__bg-color--disabled); - } - - &-outlined { - border: var(--accordion-panel-outlined__border); - border-radius: var(--accordion-panel-outlined__border-radius); - - &--disabled { - border-color: var(--accordion-panel-outlined__border-color--disabled); - } - } -} - -%accordion-section { - // "1px" is used to improve the display of the outline when :focus-visible - - &-outlined { - &--disabled { - } - } -} - -@mixin accordion-filled( - $accordion-selector: ".accordion-filled", - $panel-selector: ".accordion-filled::part(panel)", - $panel-disabled-selector: ".accordion-filled::part(panel disabled)", - $header-selector: ".accordion-filled::part(header)", - $header-disabled-selector: ".accordion-filled::part(header disabled)", - $header-expanded-selector: ".accordion-filled::part(header expanded)", - $header-expanded-disabled-selector: - ".accordion-filled::part(header expanded disabled)", - $section-selector: ".accordion-filled::part(section)" -) { - #{$accordion-selector} { - @extend %accordion; - } - - #{$panel-selector} { - @extend %accordion-panel; - } - #{$panel-disabled-selector} { - @extend %accordion-panel--disabled; - } - - #{$header-selector} { - @extend %accordion-header; - - &:hover { - @extend %accordion-header--hover; - } - &:active { - @extend %accordion-header--active; - } - - &:focus-visible { - @extend %accordion-header--focus-visible; - } - } - - #{$header-expanded-selector} { - @extend %accordion-header--expanded; - } - - #{$header-expanded-disabled-selector} { - @extend %accordion-header--expanded-disabled; - } - - #{$section-selector} { - @extend %accordion-section; - } - - #{$header-disabled-selector} { - @extend %accordion-header--disabled; - } -} - -@mixin accordion-outlined( - $accordion-selector: ".accordion-outlined", - $panel-selector: ".accordion-outlined::part(panel)", - $panel-disabled-selector: ".accordion-outlined::part(panel disabled)", - $header-selector: ".accordion-outlined::part(header)", - $header-disabled-selector: ".accordion-outlined::part(header disabled)", - $header-expanded-selector: ".accordion-outlined::part(header expanded)", - $header-expanded-disabled-selector: - ".accordion-outlined::part(header expanded disabled)", - $section-selector: ".accordion-outlined::part(section)", - $section-disabled-selector: ".accordion-outlined::part(section disabled)" -) { - #{$accordion-selector} { - @extend %accordion; - @extend %accordion-outlined; - } - - #{$panel-selector} { - @extend %accordion-panel-outlined; - } - #{$panel-disabled-selector} { - @extend %accordion-panel-outlined--disabled; - } - - #{$header-selector} { - @extend %accordion-header; - - &:hover { - @extend %accordion-header--hover; - } - &:active { - @extend %accordion-header--active; - } - - &:focus-visible { - @extend %accordion-header--focus-visible; - } - } - - #{$header-expanded-selector} { - @extend %accordion-header--expanded; - } - - #{$header-expanded-disabled-selector} { - @extend %accordion-header--expanded-disabled; - } - - #{$section-selector} { - @extend %accordion-section; - } - #{$section-disabled-selector} { - @extend %accordion-section-outlined--disabled; - } - - #{$header-disabled-selector} { - @extend %accordion-header-outlined--disabled; - } -} - -%chat-message-icon { - content: ""; - display: grid; - justify-self: flex-end; - inline-size: 16px; - block-size: 16px; - -webkit-mask: no-repeat center / 100% var(--chat-message-icon); - background-color: var(--chat-message-icon-color); -} - -@mixin chat($chat-selector: ".chat") { - #{$chat-selector} { - --button-block-size: 31px; - --button-margin-block: 16px; - - &::part(content) { - gap: 6px; - } - - &::part(message) { - display: grid; - grid-template-columns: 1fr max-content; - grid-auto-rows: max-content; - padding: var(--mer-spacing--sm); - gap: var(--mer-spacing--sm); - border-radius: var(--mer-border__radius--sm); - overflow: hidden; - } - - &::part(message__role) { - @extend %body-semi-bold-m; - display: inline-grid; - grid-template-columns: max-content max-content; - gap: 6px; - - &::before { - content: ""; - display: grid; - justify-self: flex-end; - inline-size: 4px; - block-size: 4px; - border-radius: 50%; - align-self: center; - background-color: currentColor; - } - } - - &::part(message__role user) { - color: var(--mer-accent__primary); - } - - &::part(message__time) { - @extend %body-italic-m; - color: #828b96; - } - - &::part(message__content) { - @extend %body-regular-m; - color: var(--mer-color__neutral-gray--100); - } - - &::part(message__content user), - &::part(message__content no-error) { - grid-area: 2 / 1 / 2 / 3; - } - - &::part(message user) { - background-color: rgba(91, 167, 255, 0.08); - border-inline-start: 2px solid var(--mer-border-color__primary); - } - - &::part(message assistant) { - background-color: var(--mer-color__neutral-gray--900); - } - - &::part(message assistant waiting) { - @extend %body-italic-s; - background-color: var(--mer-color__neutral-gray--900); - border-radius: unset; - color: #666; - } - - &::part(message assistant complete) { - background-color: var(--mer-surface__elevation--01); - } - - &::part(message assistant warning) { - background-color: rgba(255, 201, 107, 0.05); - border-inline-start: 2px solid var(--mer-border-color__warning); - - &::after { - @extend %chat-message-icon; - --chat-message-icon: var(--icon__system_warning_primary--enabled); - --chat-message-icon-color: var(--mer-icon__warning); - } - } - - &::part(message error) { - background-color: rgba(251, 124, 132, 0.05); - border-inline-start: 2px solid var(--mer-border-color__error); - - &::after { - @extend %chat-message-icon; - --chat-message-icon: var( - --icon__system_warning_primary--enabled - ); // TODO: Add error icon - --chat-message-icon-color: var(--mer-icon__error); - } - } - - &::part(message assistant success) { - background-color: rgba(63, 168, 155, 0.05); - border-inline-start: 2px solid var(--mer-border-color__success); - - &::after { - @extend %chat-message-icon; - --chat-message-icon: var(--icon__system_success_primary--enabled); - --chat-message-icon-color: var(--mer-icon__success); - } - } - - &::part(message__processing) { - color: var(--mer-text__on-surface); - font-size: var(--font-size-body-s); - } - - @include input( - $input-selector: "&::part(send-input)", - $add--disabled: false, - $add--placeholder: false, - $add--error: false - ); - - &::part(stop-generating-answer-button) { - border-radius: var(--control__border-radius); - border: 1px solid var(--mer-border-color__neutral); - color: var(--control__border-style); - font-size: var(--font-size-body-m); - inline-size: 100%; - justify-content: center; - line-height: var(--control__line-height); - padding-block: var(--control__padding-block); - padding-inline: var(--control__padding-inline); - transform: translateY(calc(var(--button-margin-block) / 2)); - } - &::part(stop-generating-answer-button):hover { - border-color: var(--mer-border-color__primary--hover); - color: var(--mer-text__primary--hover); - } - &::part(stop-generating-answer-button):active { - border-color: var(--mer-border-color__primary--active); - color: var(--mer-text__on-primary--active); - } - - &::part(send-input) { - background-color: var(--mer-color__neutral-gray--900); - border-color: var(--mer-color__neutral-gray--900); - --control__padding-block: 10px; - - background-color: var(--mer-surface__elevation--01) !important; - } - - &::part(send-input-wrapper) { - margin-block-start: calc( - var(--button-block-size) + var(--button-margin-block) - ); - } - } -} - -%checkbox { - --ch-checkbox__container-size: var(--control-tiny__size); - --ch-checkbox__option-size: calc(var(--control-tiny__size) / 2); - --ch-checkbox__image-size: var(--mer-icon__box--md); - - @include label-gap-inline(); - - &--hover { - @include control-tiny-border-hover(); - &::part(label) { - @include label-color-hover(); - } - } - - // Input - &__input { - // --checkbox-border-color: var(--control__border-color); - // border-color: var(--checkbox-border-color); - @include control-tiny-border(); - - &--focus { - @include focus-outline(); - } - - &--checked-and-indeterminate { - } - - // Not implemented yet in the control - &--error { - } - } - - // Option - &__option { - background-color: var(--control-tiny-option__color); - - &--checked { - } - - &--indeterminate { - block-size: var(--mer-spacing--3xs); - } - - // Not implemented yet in the control - &--error { - } - - &--disabled { - } - } - - // Label - &__label { - @extend %label-font; - - &--disabled { - @include label-color-disabled(); - } - } -} - -/// @group Checkbox -/// @param {String} $checkbox-selector [".checkbox"] - -/// @param {String} $checkbox--error-selector [".checkbox-error::part(input)"] - -/// @param {String} $checkbox__input-selector [".checkbox::part(input)"] - -/// @param {String} $checkbox__input--disabled-selector [".checkbox::part(input disabled)"] - -/// @param {String} $checkbox__input--checked-selector [".checkbox::part(input checked)"] - -/// @param {String} $checkbox__input--indeterminate-selector [".checkbox::part(input indeterminate)"] - -/// @param {String} $checkbox__input--error-selector [".checkbox::part(input error)"] - -/// @param {String} $checkbox__option--disabled-selector [".checkbox::part(option disabled)"] - -/// @param {String} $checkbox__option--checked-selector [".checkbox::part(option checked)"] - -/// @param {String} $checkbox__option--indeterminate-selector [".checkbox::part(option indeterminate)"] - -/// @param {String} $checkbox__option--error-selector [".checkbox::part(option error)"] - -/// @param {String} $checkbox__label-selector [".checkbox::part(label)"] - -/// @param {String} $checkbox__label--disabled-selector [".checkbox::part(label disabled)"] - -/// @param {Boolean} $add--disabled [true] - -/// @param {Boolean} $add--error [true] - -/// @param {Boolean} $add--label [true] - -@mixin checkbox( - $checkbox-selector: ".checkbox", - $checkbox--error-selector: ".checkbox-error::part(input)", - $checkbox__input-selector: ".checkbox::part(input)", - $checkbox__input--disabled-selector: ".checkbox::part(input disabled)", - $checkbox__input--checked-selector: ".checkbox::part(input checked)", - $checkbox__input--indeterminate-selector: - ".checkbox::part(input indeterminate)", - $checkbox__input--error-selector: ".checkbox::part(input error)", - - $checkbox__option--disabled-selector: ".checkbox::part(option disabled)", - $checkbox__option--checked-selector: ".checkbox::part(option checked)", - $checkbox__option--indeterminate-selector: - ".checkbox::part(option indeterminate)", - $checkbox__option--error-selector: ".checkbox::part(option error)", - - $checkbox__label-selector: ".checkbox::part(label)", - $checkbox__label--disabled-selector: ".checkbox::part(label disabled)", - - $add--disabled: true, - $add--error: true, - $add--label: true -) { - #{$checkbox-selector} { - @extend %checkbox; - - &:hover { - @extend %checkbox--hover; - } - } - - // Input - #{$checkbox__input-selector} { - @extend %checkbox__input; - - &:focus { - @extend %checkbox__input--focus; - } - } - #{$checkbox__input--checked-selector} { - @extend %checkbox__input--checked-and-indeterminate; - } - - #{$checkbox__input--indeterminate-selector} { - @extend %checkbox__input--checked-and-indeterminate; - } - - // Option - #{$checkbox__option--checked-selector} { - @extend %checkbox__option--checked; - } - - #{$checkbox__option--indeterminate-selector} { - @extend %checkbox__option--indeterminate; - } - - // Label - @if $add--label { - #{$checkbox__label-selector} { - @extend %checkbox__label; - } - } - - // Disabled - @if $add--disabled { - // Input - #{$checkbox__input--disabled-selector} { - --control__border-color: var(--control__border-color--disabled); - } - - // Option - #{$checkbox__option--disabled-selector} { - --control__border-color: var(--control__border-color--disabled); - } - - // Label - @if $add--label { - #{$checkbox__label--disabled-selector} { - @extend %checkbox__label--disabled; - } - } - } - - // Error - @if $add--error { - // Option - #{$checkbox--error-selector} { - @include control-colors-error(); - } - } -} - -@mixin code-tokens() { - // TODO: variable names should be updated to something more descriptive - --code__color-base: var(--mer-text__on-surface); - --code__color-blue: var(--mer-color__primary--400); - --code__color-light-blue: var(--mer-color__primary--200); - --code__color-red: var(--mer-color__message-red--200); - --code__color-green: var(--mer-color__message-green--200); - --code__bg-color: var(--mer-surface__elevation--01); - --code__border: var(--mer-border__width--sm) solid - var(--mer-surface__elevation--03); - --code__border-radius: var(--mer-border__radius--sm); - - // TODO: Fix this. It MUST be two separated properties (padding-block and padding-inline) - --code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm); - - --ch-code__doctag: var(--code__color-blue); - --ch-code__keyword: var(--code__color-blue); - --ch-code__meta__keyword: var(--code__color-blue); - --ch-code__template-tag: var(--code__color-blue); - --ch-code__template-variable: var(--code__color-blue); - --ch-code__type: var(--code__color-blue); - --ch-code__variable-language: var(--code__color-blue); - - --ch-code__title: var(--code__color-base); - --ch-code__title-class: var(--code__color-base); - --ch-code__title-class-inherited: var(--code__color-base); - --ch-code__title-function: var(--code__color-base); - - --ch-code__attr: var(--code__color-blue); - --ch-code__attribute: var(--code__color-blue); - --ch-code__literal: var(--code__color-blue); - --ch-code__meta: var(--code__color-blue); - --ch-code__number: var(--code__color-blue); - --ch-code__operator: var(--code__color-blue); - --ch-code__variable: var(--code__color-blue); - --ch-code__selector-attr: var(--code__color-blue); - --ch-code__selector-class: var(--code__color-blue); - --ch-code__selector-id: var(--code__color-blue); - - --ch-code__regexp: var(--code__color-green); - --ch-code__string: var(--code__color-green); - --ch-code__meta__string: var(--code__color-green); - - --ch-code__built-in: var(--code__color-green); - --ch-code__symbol: #e36209; - - --ch-code__comment: var(--code__color-green); - --ch-code__code: var(--code__color-green); - --ch-code__formula: var(--code__color-green); - - --ch-code__name: var(--code__color-light-blue); - --ch-code__quote: var(--code__color-light-blue); - --ch-code__selector-tag: var(--code__color-light-blue); - --ch-code__selector-pseudo: var(--code__color-light-blue); - - --ch-code__subst: #24292e; -} - - -@mixin code($selector: ".code") { - #{$selector} { - @include code-tokens(); - @include scrollbar-styles(); - padding: var(--code__padding); - background-color: var(--code__bg-color); - border: var(--code__border); - border-radius: var(--code__border-radius); - font-size: 13px; - line-height: 1.55em; - overflow: auto; - } -} - -@mixin typography-reset() { - h1, - h2, - h3, - h4, - h5, - h6, - p { - font: unset; - margin: 0; - padding: 0; - color: unset; - } -} - -@mixin button-reset() { - :where(button, a) { - all: unset; - display: inline-flex; - align-items: center; - - // Disallow selecting the text - user-select: none; - - // Avoid zooming on double tap on iOS devices - touch-action: manipulation; - - // Allow user drag - // -webkit-user-drag: element; - - cursor: pointer; - } - - button:disabled { - pointer-events: none; - } -} - -@mixin input-reset() { - input, - select, - textarea { - padding: 0; - margin: 0; - background-color: unset; - border: unset; - color: unset; - font: unset; - outline: unset; - } -} - -@mixin other-reset() { - hr { - block-size: 1px; - margin: unset; - padding: unset; - border: unset; - background-color: currentColor; - } - - fieldset, - legend { - padding: 0; - margin: 0; - } - - img { - display: block; - } -} - -@mixin box-sizing() { - *, - ::after, - ::before { - box-sizing: border-box; - } -} - -@mixin button-common-styles() { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - justify-content: center; -} - -@mixin label-common-styles() { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - grid-template-rows: auto; // Necessary to avoid creating additional rows and then adding additional gap at the bottom of the label - align-items: center; -} - -@mixin document-common-styles() { - display: grid; - grid-template-rows: 1fr; - min-block-size: 100dvh; - margin: 0; -} - -// - - - - - - - - - - - - - - - - - - - - -// Icons | Mask & Background -// - - - - - - - - - - - - - - - - - - - - - -// Icon mask styles -@mixin icon-mask-common-styles( - $inline-size: var(--icon-size), - $block-size: var(--icon-size), - $mask-size: var(--icon-mask-size) -) { - content: ""; - display: block; - inline-size: $inline-size; - block-size: $block-size; - -webkit-mask: no-repeat center / $mask-size var(--icon-path); - background-color: currentColor; -} - -// Icon background styles -@mixin icon-background-common-styles( - $inline-size: var(--icon-size), - $block-size: var(--icon-size), - $background-size: var(--icon-background-size) -) { - content: ""; - display: block; - inline-size: $inline-size; - block-size: $block-size; - background: no-repeat center / $background-size var(--icon-path); -} - -// - - - - - - - - - - - - - - - - - - - - -// Icons | Gap -// - - - - - - - - - - - - - - - - - - - - - -@mixin icon-and-text-styles($gap) { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - gap: $gap; -} - -// - - - - - - - - - - - - - - - - - - - - -// Ellipsis -// - - - - - - - - - - - - - - - - - - - - - -@mixin ellipsis() { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -%ellipsis { - @include ellipsis(); -} - - -// ---------------------- -// Focus -// ---------------------- -@mixin focus-outline() { - outline: var(--focus__outline-width) var(--focus__outline-style) - var(--focus__outline-color); - outline-offset: var(--focus__outline-offset); -} -@mixin focus-border() { - border-color: var(--borders-un-border-color__focused); -} - -// ---------------------- -// Scrollbar Styles -// ---------------------- -@mixin scrollbar-styles() { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb__bg-color) - var(--scrollbar-track__bg-color); - - //scrollbar - &::-webkit-scrollbar { - width: var(--scrollbar__size); - height: var(--scrollbar__size); - } - - // track - &::-webkit-scrollbar-track { - background-color: var(--scrollbar-track__bg-color); - border-radius: var(--scrollbar-track__border-radius); - } - - // thumb - &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb__bg-color); - border-radius: var(--scrollbar-thumb__border-radius); - } - - // corner - &::-webkit-scrollbar-corner { - background: var(--scrollbar-corner__bg); - } -} - -// ---------------------- -// Scrollbar Components -// ---------------------- -@mixin scrollbar-components() { - :host(.ch-scrollable), - .ch-scrollable, - .scrollable { - @include scrollbar-styles(); - } -} - -// ---------------------- -// Control -// ---------------------- - -// Colors -@mixin control-colors-enabled() { - background-color: var(--control__bg-color); - color: var(--control__color); - --ch-placeholder-color: var(--control-placeholder__color); - // enabled border color is defined in control-border() -} -@mixin control-colors-hover() { - --control__border-color: var(--control__border-color--hover); -} -@mixin control-colors-disabled() { - --control__bg-color: var(--control__background-color--disabled); - --control__border-color: var(--control__border-color--disabled); - --control__color: var(--control__color--disabled); - --ch-placeholder-color: var(--control-placeholder__color--disabled); -} -@mixin control-colors-error() { - --control__border-color: var(--control__border-color--error); -} -// Border -@mixin control-border() { - border-width: var(--control__border-width); - border-style: var(--control__border-style); - border-color: var(--control__border-color); - border-radius: var(--control__border-radius); -} -@mixin control-remove-border() { - // This resets the border applied - // (for controls inside the property grid) - --control__border-width: 0; - --control__border-color: transparent; - --control__border-radius: 0; -} -// Height -@mixin control-height-regular() { - block-size: var(--control__height); - // to be removed (TODO) - // fixed block-size comes with some issues. -} -// Padding -@mixin control-padding-inline() { - padding-inline: var(--control__padding-inline); -} -@mixin control-padding-block() { - padding-block: var(--control__padding-block); -} -@mixin control-padding-inline-block() { - padding-block: var(--control__padding-block); - padding-inline: var(--control__padding-inline); -} -// Placeholder -@mixin control-placeholder() { - color: var(--control-placeholder__color); - font-style: var(--control-placeholder__font-style); -} - -// ---------------------- -// Control Tiny -// ---------------------- - -@mixin control-tiny-size() { - block-size: var(--control-tiny__size); - inline-size: var(--control-tiny__size); -} -@mixin control-tiny-border() { - border-width: var(--control__border-width); - border-style: var(--control__border-style); - border-color: var(--control__border-color); - border-radius: var(--control__border-radius); -} -@mixin control-tiny-border-hover() { - --control__border-color: var(--control__border-color--hover); -} -@mixin control-tiny-border-disabled() { - --control__border-color: var(--control__border-color--disabled); -} -@mixin control-tiny-border-error() { - --control__border-color: var(--control__border-color--error); -} - -// ---------------------- -// Items Container -// ---------------------- - -@mixin items-container-border() { - border-style: var(--items-container__border-style); - border-width: var(--items-container__border-width); -} -@mixin items-container-border-radius() { - border-radius: var(--items-container__border-radius); -} -@mixin items-container-colors() { - background-color: var(--items-container__bg-color); - border-color: var(--items-container__border-color); -} -@mixin items-container-padding() { - padding-block: var(--items-container__padding-block); - padding-inline: var(--items-container__padding-inline); -} -@mixin items-container-dropdown() { - box-shadow: var(--items-container__box-shadow); -} -@mixin items-container-gap() { - gap: var(--items-container__gap); -} -@mixin items-container-gap-small() { - gap: var(--items-container__gap--small); -} -@mixin items-container-max-height() { - max-block-size: var(--items-container__max-block-size); -} -@mixin items-container-separator() { - block-size: var(--items-container-separator__block-size); - inline-size: var(--items-container-separator__inline-size); - background-color: var(--items-container-separator__bg-color); -} - -// ------------------------------------ -// Single Item (Every item except grid) -// ------------------------------------ - -@mixin item-colors-enabled() { - background-color: var(--item__bg-color); - border-color: var(--item__border-color); - color: var(--item__color); -} -@mixin item-colors-hover() { - --item__bg-color: var(--item__bg-color--hover); - --item__border-color: var(--item__border-color--hover); - --item__color: var(--item__color--hover); -} -@mixin item-colors-selected() { - --item__bg-color: var(--item__bg-color--selected); - --item__border-color: var(--item__border-color--selected); - --item__color: var(--item__color--selected); -} -@mixin item-colors-selected-hover() { - --item__bg-color: var(--item__bg-color--selected-hover); - --item__border-color: var(--item__border-color--selected-hover); - --item__color: var(--item__color--selected-hover); -} -@mixin item-colors-disabled() { - --item__bg-color: var(--item__bg-color--disabled); - --item__border-color: var(--item__border-color--disabled); - --item__color: var(--item__color--disabled); -} -@mixin item-border() { - border: var(--item__border-width) var(--item__border-style) - var(--item__border-color); -} -@mixin item-border-block-end() { - border-block-end: var(--item__border-width) var(--item__border-style) - var(--item__border-color); -} -@mixin item-border-radius() { - border-radius: var(--item__border-radius); -} -@mixin item-gap() { - gap: var(--item__gap--regular); -} -@mixin item-column-gap() { - column-gap: var(--item__gap--regular); -} -@mixin item-padding() { - padding-block: var(--item__padding-block); - padding-inline: var(--item__padding-inline); -} -@mixin item-padding-block() { - padding-block: var(--item__padding-inline); -} -@mixin item-padding-inline() { - padding-inline: var(--item__padding-inline); -} -@mixin item-height-regular() { - block-size: var(--item__height--regular); -} -@mixin item-height-large() { - block-size: var(--item__height--large); -} - -// --------------------------------- -// Grid Item -// --------------------------------- - -// Row -@mixin grid-row-colors-enabled() { - // Some controls using --item__** variables inside the tabular grid inherit - // unwanted styles. For example, when a row is selected, controls like a - // list-box inherit the selected background color. To prevent this, these - // properties cannot be directly applied to the tabular grid. - --grid-row__bg-color: var(--item__bg-color); - --grid-row__color: var(--item__color); - background-color: var(--grid-row__bg-color); - color: var(--grid-row__color); -} -@mixin grid-row-colors-highlighted() { - --grid-row__bg-color: var(--item__bg-color--hover); - --grid-row__color: var(--item__color--hover); -} -@mixin grid-row-colors-selected() { - --grid-row__bg-color: var(--item__bg-color--selected); - --grid-row__color: var(--item__color--selected); -} -@mixin grid-row-dragging() { - box-shadow: var(--mer-box-shadow--01); -} -@mixin grid-cell-border-inline-block() { - // this mixin uses the box-shadow property, but it looks - // as a border to the user. - box-shadow: var(--grid-cell__box-shadow-inline-block); -} -@mixin grid-cell-padding-inline() { - padding-inline: var(--grid-cell__padding-block); -} -@mixin grid-cell-padding-block() { - padding-block: var(--grid-cell__padding-block); -} -@mixin grid-cell-padding-inline-block() { - padding-block: var(--grid-cell__padding-block); - padding-inline: var(--grid-cell__padding-inline); -} -@mixin grid-cell-remove-padding() { - // we should redefine '--grid-cell__padding-inline' here because when a control - // is inside a a tabular-grid-cell the cell padding-inline value is required to - // be applied on the control padding-inline. - padding-block: 0; - padding-inline: 0; -} -@mixin grid-rowset-legend-padding-block() { - padding-block-start: var(--mer-spacing--xs); - padding-block-end: var(--mer-spacing--xs); -} -@mixin grid-rowset-legend-colors-enabled() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02); - background-color: var(--grid-rowset-legend__bg-color); -} -@mixin grid-rowset-legend-colors-hover() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--03); -} -@mixin grid-rowset-legend-colors-active() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02); -} - -// ---------------------- -// Tab Caption (Button) -// ---------------------- -@mixin tab-button-border-block() { - border-block: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-border-block-end() { - border-block-end: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-border-block-start() { - border-block-start: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-gap() { - gap: var(--tab-caption__gap); -} -@mixin tab-button-colors-enabled() { - background-color: var(--tab-caption__bg-color); - color: var(--tab-caption__color); - border-color: var(--tab-caption__border-color); -} -@mixin tab-button-colors-hover() { - --tab-caption__bg-color: var(--tab-caption__bg-color--hover); - // color remains the same - // border-color remains the same -} -@mixin tab-button-colors-disabled() { - --tab-caption__bg-color: var(--tab-caption__bg-color--disabled); - --tab-caption__color: var(--mer-text__primary--disabled); - --tab-caption__border-color--selected-inline: var( - --mer-border-color__primary--disabled - ); - --tab-caption__border-color--selected-stack: var( - --mer-surface__elevation--02 - ); -} -@mixin tab-button-colors-selected-inline() { - --tab-caption__bg-color: var(--tab-caption__bg-color--selected-inline); - --tab-caption__color: var(--tab-caption__color--selected); - --tab-caption__border-color: var( - --tab-caption__border-color--selected-inline - ); -} -@mixin tab-button-colors-selected-stack() { - --tab-caption__bg-color: var(--tab-caption__bg-color--selected-stack); - --tab-caption__color: var(--tab-caption__color--selected); - --tab-caption__border-color: var(--tab-caption__border-color--selected-stack); -} -@mixin tab-button-padding-inline() { - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); -} -@mixin tab-button-padding-stack() { - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); -} - -// ---------------------- -// Label -// ---------------------- - -@mixin label-gap-block() { - gap: var(--label__gap--block); -} -@mixin label-gap-inline() { - gap: var(--label__gap--inline); -} -@mixin label-color-hover() { - --label__color: var(--label__color--hover); -} -@mixin label-color-disabled() { - --label__color: var(--label__color--disabled); -} - -// ---------------------- -// Window -// ---------------------- - -// TODO: This styles should better be applied on the ch-window ? -%window-styles { - border: var(--window__border); - border-radius: var(--window__border-radius); - padding: var(---window__padding); - background-color: var(--window__bg-color); - box-shadow: var(--mer-box-shadow--01); -} - -// ---------------------- -// Dropdown -// ---------------------- - -@mixin dropdown-styles() { - box-shadow: var(--mer-box-shadow--01); - border-radius: var(--mer-border__radius--sm); -} - -// ---------------------- -// Pseudo Dialog Footer -// ---------------------- - -@mixin control-footer-base() { - --control-footer-justify-content: end; - padding-block-start: var(--mer-spacing--xs); - display: flex; - justify-content: var(--control-footer-justify-content); - align-items: center; -} -@mixin control-footer-border() { - border-block-start: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); -} -@mixin control-footer( - $selector: ".control-footer", - $with-border-selector: ".control-footer-with-border", - $justify-start-selector: ".control-footer-start", - $justify-center-selector: ".control-footer-center", - $justify-space-between-selector: ".control-footer-space-between", - $with-border: true -) { - #{$selector}, - #{$with-border-selector} { - @include control-footer-base(); - } - #{$justify-start-selector} { - --control-footer-justify-content: start; - } - #{$justify-center-selector} { - --control-footer-justify-content: center; - } - #{$justify-space-between-selector} { - --control-footer-justify-content: space-between; - } - @if $with-border { - #{$with-border-selector} { - @include control-footer-border(); - } - } -} - -// ---------------------- -// Pseudo Dialog Header -// ---------------------- - -@mixin control-header-base() { - padding-block-end: var(--mer-spacing--md); -} -@mixin control-header-border() { - border-block-end: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); -} -@mixin control-header( - $selector: ".control-header", - $with-border-selector: ".control-header-with-border", - $with-border: true -) { - #{$selector}, - #{$with-border-selector} { - @include control-header-base(); - } - @if $with-border { - #{$with-border-selector} { - @include control-header-border(); - } - } -} - -// ---------------------- -// Body Spacing -// ---------------------- - -// This custom properties define the block and inline spacing of containers. -// i.e.: dialog, layout, etc.. - -%spacing-body { - padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); - padding-inline: var(--spacing-body-inline-start) - var(--spacing-body-inline-end); -} - -%spacing-body-block { - padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); -} -%spacing-body-block-start { - padding-block-start: var(--spacing-body-block-start); -} -%spacing-body-block-end { - padding-block-end: var(--spacing-body-block-end); -} - -%spacing-body-inline { - padding-inline: var(--spacing-body-inline-start) - var(--spacing-body-inline-end); -} -%spacing-body-inline-start { - padding-inline-start: var(--spacing-body-inline-start); -} -%spacing-body-inline-end { - padding-inline-end: var(--spacing-body-inline-end); -} - -@mixin spacing-body( - $body-selector: ".spacing-body,:host(.spacing-body)", - $body-block-selector: ".spacing-body-block,:host(.spacing-body-block)", - $body-block-start-selector: - ".spacing-body-block-start,:host(.spacing-body-block-start)", - $body-block-end-selector: - ".spacing-body-block-end,:host(.spacing-body-block-end)", - $body-inline-selector: ".spacing-body-inline,:host(.spacing-body-inline)", - $body-inline-start-selector: - ".spacing-body-inline-start,:host(.spacing-body-inline-start)", - $body-inline-end-selector: - ".spacing-body-inline-end,:host(.spacing-body-inline-end)" -) { - #{$body-selector} { - @extend %spacing-body; - } - // block - #{$body-block-selector} { - @extend %spacing-body-block; - } - #{$body-block-start-selector} { - @extend %spacing-body-block-start; - } - #{$body-block-end-selector} { - @extend %spacing-body-block-end; - } - // inline - #{$body-inline-selector} { - @extend %spacing-body-inline; - } - #{$body-inline-start-selector} { - @extend %spacing-body-inline-start; - } - #{$body-inline-end-selector} { - @extend %spacing-body-inline-end; - } -} - -// ---------------------- -// Spinner -// ---------------------- - -@mixin spinner($size, $spinner_color, $track_color) { - $border_thinness: 7; // the higher the thinner - width: $size; - height: $size; - border: calc($size / $border_thinness) solid $track_color; - border-top: calc($size / $border_thinness) solid $spinner_color; - border-radius: 50%; - animation: spin var(--mer-timing--regular) linear infinite; - - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } -} - -// In Mercury, some controls use different font styles than the tabular grid. -// When these controls are inside a tabular grid, they should inherit its styles. -// This ensures visual consistency across the interface. Add relevant selectors -// below, then import this file where needed and apply the selector variable. - -// ie. for the combo-box: @mixin combo-box($combo-box-selector: $combo-box-selector, ... - -$combo-box-selector: ".combo-box"; -$input-selector: ".input"; - -$tree-controls: ($combo-box-selector, $input-selector); - - -%combo-box { - --ch-combo-box-separation-y: var(--mer-spacing--3xs); - --ch-combo-box-item-gap: var(--mer-spacing--xs); - --ch-combo-box-item__image-size: var(--mer-icon__box--md); - --ch-combo-box-item__background-image-size: 100%; - --ch-combo-box-group__expandable-button-size: var(--mer-spacing--md); - --ch-combo-box-group__expandable-button-image-size: var(--mer-spacing--sm); - - @extend %body-regular-m; - - @include control-border(); - @include control-colors-enabled(); - @include control-padding-inline-block(); - - &--hover { - @include control-colors-hover(); - } - - &--focus { - @include focus-border(); - } - - &--disabled { - @include control-colors-disabled(); - } - - &--error { - @include control-colors-error(); - } - - &__window { - @include items-container-border(); - @include items-container-border-radius(); - @include items-container-colors(); - @include items-container-padding(); - @include items-container-gap(); - @include items-container-max-height(); - @include items-container-dropdown(); - } - - &-group__header { - @include item-colors-enabled(); - @include item-padding(); - @extend %body-regular-m; - - &--expandable { - @include item-colors-enabled(); - @include item-padding(); - @include item-border-radius(); - - &-hover { - --item__color: var(--mer-accent__primary); - } - } - - &--disabled { - @include item-colors-disabled(); - } - } - - &-group { - @include items-container-gap(); - - &__content { - @include items-container-gap(); - } - } - - &__item { - @include item-colors-enabled(); - @include item-border(); - @include item-border-radius(); - @include item-padding(); - @extend %body-regular-m; - - &--nested { - padding-inline-start: calc( - calc( - var(--ch-combo-box-item-gap) + - var(--ch-combo-box-group__expandable-button-size) + - var(--item__padding-inline) - ) - ); - } - - &--selected { - @include item-colors-selected(); - } - - &--disabled { - @include item-colors-disabled(); - } - } -} - -/// @group ComboBox -/// @param {String} $combo-box-selector [".combo-box"] - -/// @param {String} $combo-box--disabled-selector [".combo-box[disabled]"] - -/// @param {String} $combo-box--error-selector [".combo-box-error"] - -/// @param {String} $combo-box__placeholder-selector [".combo-box::part(placeholder)"] - -/// @param {String} $window-selector [".combo-box::part(window)"] - -/// @param {String} $group-selector [".combo-box::part(group)"] - -/// @param {String} $group__content-selector [".combo-box::part(group__content)"] - -/// @param {String} $group__header-selector [".combo-box::part(group__header)"] - -/// @param {String} $group__header--disabled-selector [".combo-box::part(group__header disabled)"] - -/// @param {String} $group__header--expandable-selector [".combo-box::part(group__header expandable)"] - -/// @param {String} $item-selector [".combo-box::part(item)"] - -/// @param {String} $item--disabled-selector [".combo-box::part(item disabled)"] - -/// @param {String} $item--nested-selector [".combo-box::part(item nested)"] - -/// @param {String} $item--selected-selector [".combo-box::part(item selected)"] - -/// @param {Boolean} $add--disabled [true] - -/// @param {Boolean} $add--placeholder [true] - -/// @param {Boolean} $add--error [true] - -@mixin combo-box( - $combo-box-selector: $combo-box-selector, - $combo-box--disabled-selector: ".combo-box[disabled]", - $combo-box--error-selector: ".combo-box-error", - $combo-box__placeholder-selector: ".combo-box[part='']", - $window-selector: ".combo-box::part(window)", - $group-selector: ".combo-box::part(group)", - $group__content-selector: ".combo-box::part(group__content)", - $group__header-selector: ".combo-box::part(group__header)", - $group__header--disabled-selector: ".combo-box::part(group__header disabled)", - $group__header--expandable-selector: - ".combo-box::part(group__header expandable)", - $item-selector: ".combo-box::part(item)", - $item--disabled-selector: ".combo-box::part(item disabled)", - $item--nested-selector: ".combo-box::part(item nested)", - $item--selected-selector: ".combo-box::part(item selected)", - $add--disabled: true, - $add--placeholder: true, - $add--error: true -) { - #{$combo-box-selector} { - @extend %combo-box; - - &:hover { - @extend %combo-box--hover; - } - - &:focus { - @extend %combo-box--focus; - } - } - - @if $add--placeholder { - #{$combo-box__placeholder-selector} { - @extend %body-italic-m; - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Window - // - - - - - - - - - - - - - - - - - - - - - #{$window-selector} { - @extend %combo-box__window; - } - - // - - - - - - - - - - - - - - - - - - - - - // Group - // - - - - - - - - - - - - - - - - - - - - - #{$group__header-selector} { - @extend %combo-box-group__header; - } - - #{$group__header--expandable-selector} { - @extend %combo-box-group__header--expandable; - - &:hover { - @extend %combo-box-group__header--expandable-hover; - } - } - - #{$group-selector} { - @extend %combo-box-group; - } - - #{$group__content-selector} { - @extend %combo-box-group__content; - } - - // - - - - - - - - - - - - - - - - - - - - - // Item - // - - - - - - - - - - - - - - - - - - - - - #{$item-selector} { - @extend %combo-box__item; - } - - #{$item--nested-selector} { - @extend %combo-box__item--nested; - } - - #{$item--selected-selector} { - @extend %combo-box__item--selected; - } - - // - - - - - - - - - - - - - - - - - - - - - // Disabled - // - - - - - - - - - - - - - - - - - - - - - @if $add--disabled { - #{$combo-box--disabled-selector} { - @extend %combo-box--disabled; - } - - #{$group__header--disabled-selector} { - @extend %combo-box-group__header--disabled; - } - - #{$item--disabled-selector} { - @extend %combo-box__item--disabled; - } - } - - @if $add--error { - #{$combo-box--error-selector} { - @extend %combo-box--error; - } - } -} - -%dialog { - --spacing-body-block-start: var(--mer-spacing--md); - --spacing-body-block-end: var(--mer-spacing--md); - --spacing-body-inline-start: var(--mer-spacing--sm); - --spacing-body-inline-end: var(--mer-spacing--sm); - --ch-dialog-max-inline-size: 800px; - background-color: var(--mer-surface__elevation--01); - box-shadow: var(--mer-box-shadow--01); - - &__backdrop { - background-color: color-mix( - in srgb, - var(--mer-color__neutral-gray--900) 71%, - transparent 30% - ); - backdrop-filter: blur(15px); - z-index: 108; // TODO: This is a WA to show the backdrop above the button of the dropdown - } - - &__header { - gap: var(--mer-spacing--sm); - padding-block: var(--mer-spacing--md); - padding-inline: var(--mer-spacing--sm); - border-block-end: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); - } - - &__caption { - @extend %subtitle-semi-bold-xs; - word-break: break-word; - } - - &__close { - @extend %icon-size--md; - --icon-path: var(--icon__system_close_primary--enabled); - &--hover { - --icon-path: var(--icon__system_close_primary--hover); - } - &--active { - --icon-path: var(--icon__system_close_primary--active); - } - } - - &__content { - overflow: auto; - } - - &__footer { - padding-block: var(--mer-spacing--xs); - padding-inline: var(--mer-spacing--sm); - } - - // ------------------------------ - // Edges (For dragging) - // ------------------------------ - &__edge { - $edge-border-width: var(--mer-border__width--lg); - $edge-border-style: solid; - $edge-color: var(--mer-color__tinted-primary--20); - border-color: transparent; - transition: var(--mer-timing--fast) border-color; - - &--hover { - border-color: $edge-color; - } - - &-block-start { - border-block-start-width: $edge-border-width; - border-block-start-style: $edge-border-style; - } - - &-inline-end { - border-inline-end-width: $edge-border-width; - border-inline-end-style: $edge-border-style; - } - - &-block-end { - border-block-end-width: $edge-border-width; - border-block-end-style: $edge-border-style; - } - - &-inline-start { - border-inline-start-width: $edge-border-width; - border-inline-start-style: $edge-border-style; - } - } -} - -/// @group Dialog -/// @param {String} $dialog-selector [".dialog::part(dialog)"] - -/// @param {String} $backdrop-selector [".dialog.ch-dialog--modal"] - -/// @param {String} $header-selector [".dialog::part(header)"] - -/// @param {String} $caption-selector [".dialog::part(caption)"] - -/// @param {String} $close-selector [".dialog::part(close-button)"] - -/// @param {String} $content-selector [".dialog::part(content)"] - -/// @param {String} $footer-selector [".dialog::part(footer)"] - -// Edges (For dragging) -/// @param {String} $edge-selector [".dialog::part(edge)"] - -/// @param {String} $edge-block-start-selector [".dialog::part(edge-block-start)"] - -/// @param {String} $edge-inline-end-selector [".dialog::part(edge-inline-end)"] - -/// @param {String} $edge-block-end-selector [".dialog::part(edge-block-end)"] - -/// @param {String} $edge-inline-start-selector [".dialog::part(edge-inline-start)"] - -// Icons -/// @param {String} $icons-path [""] - -@mixin dialog( - $dialog-selector: ".dialog::part(dialog)", - $backdrop-selector: ".dialog.ch-dialog--modal", - $header-selector: ".dialog::part(header)", - $caption-selector: ".dialog::part(caption)", - $close-selector: ".dialog::part(close-button)", - $content-selector: ".dialog::part(content)", - $footer-selector: ".dialog::part(footer)", - $edge-selector: ".dialog::part(edge)", - $edge-block-start-selector: ".dialog::part(edge-block-start)", - $edge-inline-end-selector: ".dialog::part(edge-inline-end)", - $edge-block-end-selector: ".dialog::part(edge-block-end)", - $edge-inline-start-selector: ".dialog::part(edge-inline-start)" -) { - #{$dialog-selector} { - @extend %dialog; - } - - #{$backdrop-selector} { - @extend %dialog__backdrop; - } - - #{$header-selector} { - @extend %dialog__header; - } - - #{$caption-selector} { - @extend %dialog__caption; - } - - #{$close-selector} { - @extend %dialog__close; - &:hover { - @extend %dialog__close--hover; - } - &:active { - @extend %dialog__close--active; - } - } - - #{$content-selector} { - @extend %dialog__content; - } - - #{$footer-selector} { - @extend %dialog__footer; - } - // @include buttons-spacer($footer-selector); - @include control-footer($with-border-selector: $footer-selector); - - // ------------------------------ - // Edges (For dragging) - // ------------------------------ - #{$edge-selector} { - @extend %dialog__edge; - &:hover { - @extend %dialog__edge--hover; - } - } - - #{$edge-block-start-selector} { - @extend %dialog__edge-block-start; - } - - #{$edge-inline-end-selector} { - @extend %dialog__edge-inline-end; - } - - #{$edge-block-end-selector} { - @extend %dialog__edge-block-end; - } - - #{$edge-inline-start-selector} { - @extend %dialog__edge-inline-start; - } -} - -%dropdown-window { - @include items-container-colors(); - @include items-container-padding(); - @include items-container-border(); - @include items-container-dropdown(); - @include items-container-border-radius(); - @include items-container-gap(); -} - -// Primary -%dropdown-item-action { - --ch-dropdown-item__image-size: var(--mer-icon__box--md); - @include item-colors-enabled(); - @include item-border(); - @include item-border-radius(); - @include item-padding(); - @include item-gap(); - @extend %body-regular-m; - - &--focus { - // @include focus-style($outline: true); - @include focus-outline(); - } - - &--hover { - @include item-colors-hover(); - } - - &--active { - @include item-colors-selected(); - } -} - -%dropdown-separator { - margin-block: var(--spacing--s); -} - -%dropdown-expandable-action-chevron { - content: ""; - border-block-start: 4px dashed currentColor; - border-inline: 4px solid transparent; - margin-inline-start: 4px; -} - -%dropdown-header-slot, -%dropdown-footer-slot { - @include item-padding(); -} - -/// @group Dropdown -/// @param {String} $dropdown__expandable-button-selector [".dropdown::part(expandable-button)"] - -/// @param {String} $dropdown__window-selector [".dropdown::part(window)"] - -/// @param {String} $dropdown__action-selector [".dropdown::part(action)"] - -/// @param {String} $dropdown__expandable-action-selector [".dropdown::part(action expandable)"] - -/// @param {String} $dropdown-separator-selector [".dropdown .dropdown-separator"] - -/// @param {String} $dropdown-slot-header-selector [".dropdown::slotted([slot="header"])"] - -/// @param {Boolean} $add-separator [true] - -@mixin dropdown( - $dropdown__expandable-button-selector: ".dropdown::part(expandable-button)", - - $dropdown__window-selector: ".dropdown::part(window)", - - $dropdown__action-selector: ".dropdown::part(action)", - - $dropdown__expandable-action-selector: ".dropdown::part(action expandable)", - - $dropdown-separator-selector: ".dropdown .dropdown-separator", - - $dropdown__slot-header-selector: ".dropdown .header-slot", - - $dropdown__slot-footer-selector: ".dropdown .footer-slot", - - $add-separator: true -) { - // @include button-tertiary( - // $selector: #{$dropdown__expandable-button-selector}, - // $add--disabled: false, - // $add--error: false - // ); - - #{$dropdown__window-selector} { - @extend %dropdown-window; - } - - #{$dropdown__action-selector} { - @extend %dropdown-item-action; - - &:hover { - @extend %dropdown-item-action--hover; - } - - &:active { - @extend %dropdown-item-action--active; - } - - &:focus-visible { - @extend %dropdown-item-action--focus; - } - } - - #{$dropdown__expandable-action-selector}::after { - @extend %dropdown-expandable-action-chevron; - } - - #{$dropdown__slot-header-selector} { - @extend %dropdown-header-slot; - } - #{$dropdown__slot-footer-selector} { - @extend %dropdown-footer-slot; - } - - @if $add-separator { - #{$dropdown-separator-selector} { - @extend %dropdown-separator; - } - } -} - -// @mixin dropdown() { -// /* .action-group::part(more-actions-window), -// .action-group-item::part(window), */ - -// .dropdown::part(window), -// .dropdown .dropdown-item::part(window) { -// @extend %dropdown-window; -// } - -// .dropdown-secondary::part(window), -// .dropdown-secondary .dropdown-item::part(window) { -// @extend %dropdown-window-secondary; -// } - -// .dropdown-item::part(action) { -// @extend %dropdown-item-action; -// } - -// .dropdown-separator { -// @extend %dropdown-separator; -// } - -// /* .dropdown::part(expandable-button) { -// padding-inline: $spacing.inset-m; -// color: $colors.primary; -// font-family: $fonts.primary-semibold; -// font-size: $fontSizes.s; -// letter-spacing: 0.25px; -// } */ - -// .action-group::part(more-actions-button):hover, -// .action-group .action-group-item::part(action):hover, -// .dropdown .dropdown-item::part(action):hover { -// @extend %dropdown-item-action--hover; -// } - -// .action-group::part(more-actions-button):active, -// .action-group .action-group-item::part(action):active, -// .dropdown .dropdown-item::part(action):active { -// @extend %dropdown-item-action--active; -// } - -// .action-group-secondary::part(more-actions-button):hover, -// .action-group-secondary .action-group-item::part(action):hover, -// .dropdown-secondary .dropdown-item::part(action):hover { -// @extend %dropdown-item-action-secondary--hover; -// } - -// .action-group-secondary::part(more-actions-button):active, -// .action-group-secondary .action-group-item::part(action):active, -// .dropdown-secondary .dropdown-item::part(action):active { -// @extend %dropdown-item-action-secondary--active; -// } - -// .action-group::part(more-actions-button):focus-visible, -// .action-group-item::part(action):focus-visible, -// .dropdown::part(expandable-button):focus-visible, -// .dropdown-item::part(action):focus-visible { -// @extend %dropdown-item-action; -// } - -// .action-group-item::part(expandable-action)::after, -// .dropdown-item::part(expandable-action)::after { -// content: ""; -// border-block-start: 4px dashed currentColor; -// border-inline: 4px solid transparent; -// margin-inline-start: 4px; -// } -// } - -%flexible-layout { - --flexible-layout--tab-list-block__background-color: var( - --mer-surface__elevation--01 - ); - --flexible-layout--tab-list-inline__background-color: var( - --mer-surface__elevation--02 - ); - - --flexible-layout--tab-list-inline__inline-size: 48px; - - --flexible-layout--tab-button-block-start__background-color: var( - --flexible-layout--tab-list-block__background-color - ); - --flexible-layout--tab-button-block-end__background-color: var( - --flexible-layout--tab-list-block__background-color - ); - - --flexible-layout--tab-button-inline-start__background-color: var( - --flexible-layout--tab-list-inline__background-color - ); - --flexible-layout--tab-button-inline-end__background-color: var( - --flexible-layout--tab-list-inline__background-color - ); - - --flexible-layout--tab-button-block-start__background-color--selected: var( - --mer-surface - ); - --flexible-layout--tab-button-block-end__background-color--selected: var( - --mer-surface - ); - - &-tab { - --ch-tab-close-button__background-image-size: var(--mer-icon__size--md); - --ch-tab-close-button__image-size: var(--mer-spacing--md); - --ch-tab-image-size: var(--mer-icon__box--md); - - --spacing-body-block-start: var(--mer-spacing--md); - --spacing-body-block-end: var(--mer-spacing--md); - --spacing-body-inline-start: var(--mer-spacing--md); - --spacing-body-inline-end: var(--mer-spacing--md); - } - - &-tab-button-block { - @include tab-button-colors-enabled(); - @include tab-button-gap(); - @extend %body-regular-s; - - padding-inline: var(--tab-caption__padding-inline); - - // Due to border-block-width: 1px; - padding-block: calc(var(--tab-caption__padding-block) - 1px); - - border-block: 1px solid transparent; - } - - &-tab-button-inline { - @include tab-button-colors-enabled(); - @include tab-button-gap(); - @extend %body-regular-s; - - padding-block: var(--tab-caption__padding-block); - - // Due to border-inline-width: 1px; - padding-inline: calc(var(--tab-caption__padding-inline) - 1px); - - border-inline: 1px solid transparent; - } - - // Style for the button of the selected tab - &-tab-button--selected-before { - color: var(--mer-accent__primary); - } - - // Block Start - &-tab-button-block-start { - background-color: var( - --flexible-layout--tab-button-block-start__background-color - ); - } - - &-tab-button-block-start--hover { - @include tab-button-colors-hover(); - } - - &-tab-button-block-start--active { - @include tab-button-colors-hover(); - } - - &-tab-button-block-start--selected { - border-block-start-color: var(--mer-accent__primary); - background-color: var( - --flexible-layout--tab-button-block-start__background-color--selected - ); - } - - // Block End - &-tab-button-block-end { - background-color: var( - --flexible-layout--tab-button-block-end__background-color - ); - } - - &-tab-button-block-end--hover { - @include tab-button-colors-hover(); - } - - &-tab-button-block-end--active { - @include tab-button-colors-hover(); - } - - &-tab-button-block-end--selected { - border-block-end-color: var(--mer-accent__primary); - background-color: var( - --flexible-layout--tab-button-block-end__background-color--selected - ); - } - - // Inline Start - &-tab-button-inline-start { - background-color: var( - --flexible-layout--tab-button-inline-start__background-color - ); - inline-size: var(--flexible-layout--tab-list-inline__inline-size); - } - - &-tab-button-inline-start--hover { - @include tab-button-colors-hover(); - } - - &-tab-button-inline-start--active { - @include tab-button-colors-hover(); - } - - &-tab-button-inline-start--selected { - border-inline-start-color: var(--mer-accent__primary); - color: var(--mer-accent__primary); - } - - // Inline End - &-tab-button-inline-end { - background-color: var( - --flexible-layout--tab-button-inline-end__background-color - ); - inline-size: var(--flexible-layout--tab-list-inline__inline-size); - } - - &-tab-button-inline-end--hover { - @include tab-button-colors-hover(); - } - - &-tab-button-inline-end--active { - @include tab-button-colors-hover(); - } - - &-tab-button-inline-end--selected { - border-inline-end-color: var(--mer-accent__primary); - color: var(--mer-accent__primary); - } - - // Disabled - &-tab-button--disabled { - @include tab-button-colors-disabled(); - } - - &-tab-list--inline { - background-color: var(--flexible-layout--tab-list-inline__background-color); - inline-size: var(--flexible-layout--tab-list-inline__inline-size); - gap: 4px; - } - - &-tab-list--block { - background-color: var(--flexible-layout--tab-list-block__background-color); - overflow: auto; - } - - // Disabled - &-tab-button--disabled { - @include tab-button-colors-disabled(); - } - - &-droppable-area { - background-color: color-mix( - in srgb, - var(--mer-accent__primary) 25%, - transparent - ); - } - - &-bar { - color: var(--mer-border-color__on-surface); - } -} - -@mixin flexible-layout( - $flexible-layout-selector: ".flexible-layout", - $tab-selector: ".flexible-layout::part(leaf)", - - $tab-button-block-start-selector: ".flexible-layout::part(tab block-start)", - $tab-button-block-start--selected-selector: - ".flexible-layout::part(tab block-start selected)", - $tab-button-block-start--disabled-selector: - ".flexible-layout::part(tab block-start disabled)", - - $tab-button-block-end-selector: ".flexible-layout::part(tab block-end)", - $tab-button-block-end--selected-selector: - ".flexible-layout::part(tab block-end selected)", - $tab-button-block-end--disabled-selector: - ".flexible-layout::part(tab block-end disabled)", - - $tab-button-inline-start-selector: ".flexible-layout::part(tab inline-start)", - $tab-button-inline-start--selected-selector: - ".flexible-layout::part(tab inline-start selected)", - $tab-button-inline-start--disabled-selector: - ".flexible-layout::part(tab inline-start disabled)", - - $tab-button-inline-end-selector: ".flexible-layout::part(tab inline-end)", - $tab-button-inline-end--selected-selector: - ".flexible-layout::part(tab inline-end selected)", - $tab-button-inline-end--disabled-selector: - ".flexible-layout::part(tab inline-end disabled)", - - $tab-button-close-button-selector: ".flexible-layout::part(close-button)", - - $tab-list--inline-selector: ".flexible-layout::part(tab-list inline)", - $tab-list--block-selector: ".flexible-layout::part(tab-list block)", - - $bar-selector: ".flexible-layout::part(bar)", - $droppable-area-selector: ".flexible-layout::part(droppable-area)", - $add--tab-button-block-start: true, - $add--tab-button-block-end: true, - $add--tab-button-inline-start: true, - $add--tab-button-inline-end: true, - $add--disabled: true -) { - #{$flexible-layout-selector} { - @extend %flexible-layout; - } - - @include tab( - $tab-button-close-button-selector: #{$tab-button-close-button-selector}, - $add--tab-button-block-start: false, - $add--tab-button-block-end: false, - $add--tab-button-inline-start: false, - $add--tab-button-inline-end: false, - $add--tab: false, - $add--tab-list: false, - $add--disabled: $add--disabled - ); - - #{$tab-selector} { - @extend %flexible-layout-tab; - } - - #{$bar-selector} { - @extend %flexible-layout-bar; - } - - // - - - - - - - - - - - - - - - - - - - - - // Tab Button (block-start) - // - - - - - - - - - - - - - - - - - - - - - @if $add--tab-button-block-start { - #{$tab-button-block-start-selector} { - @extend %flexible-layout-tab-button-block; - @extend %flexible-layout-tab-button-block-start; - - &:hover { - @extend %flexible-layout-tab-button-block-start--hover; - } - - &:active { - @extend %flexible-layout-tab-button-block-start--active; - } - - &:focus-visible { - @extend %tab-button--focus-visible; - } - } - - #{$tab-button-block-start--selected-selector} { - @extend %flexible-layout-tab-button-block-start--selected; - - &::before { - @extend %flexible-layout-tab-button--selected-before; - } - } - - @if $add--disabled { - #{$tab-button-block-start--disabled-selector} { - @extend %flexible-layout-tab-button--disabled; - } - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Tab Button (block-end) - // - - - - - - - - - - - - - - - - - - - - - @if $add--tab-button-block-end { - #{$tab-button-block-end-selector} { - @extend %flexible-layout-tab-button-block; - @extend %flexible-layout-tab-button-block-end; - - &:hover { - @extend %flexible-layout-tab-button-block-end--hover; - } - - &:active { - @extend %flexible-layout-tab-button-block-end--active; - } - - &:focus-visible { - @extend %tab-button--focus-visible; - } - } - - #{$tab-button-block-end--selected-selector} { - @extend %flexible-layout-tab-button-block-end--selected; - - &::before { - @extend %flexible-layout-tab-button--selected-before; - } - } - - @if $add--disabled { - #{$tab-button-block-end--disabled-selector} { - @extend %flexible-layout-tab-button--disabled; - } - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Tab Button (inline-start) - // - - - - - - - - - - - - - - - - - - - - - @if $add--tab-button-inline-start { - #{$tab-button-inline-start-selector} { - @extend %flexible-layout-tab-button-inline; - @extend %flexible-layout-tab-button-inline-start; - - &:hover { - @extend %flexible-layout-tab-button-inline-start--hover; - } - - &:active { - @extend %flexible-layout-tab-button-inline-start--active; - } - - &:focus-visible { - @extend %tab-button--focus-visible; - } - } - - #{$tab-button-inline-start--selected-selector} { - @extend %flexible-layout-tab-button-inline-start--selected; - } - - @if $add--disabled { - #{$tab-button-inline-start--disabled-selector} { - @extend %flexible-layout-tab-button--disabled; - } - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Tab Button (inline-end) - // - - - - - - - - - - - - - - - - - - - - - @if $add--tab-button-inline-end { - #{$tab-button-inline-end-selector} { - @extend %flexible-layout-tab-button-inline; - @extend %flexible-layout-tab-button-inline-end; - - &:hover { - @extend %flexible-layout-tab-button-inline-end--hover; - } - - &:active { - @extend %flexible-layout-tab-button-inline-end--active; - } - - &:focus-visible { - @extend %tab-button--focus-visible; - } - } - - #{$tab-button-inline-end--selected-selector} { - @extend %flexible-layout-tab-button-inline-end--selected; - } - - @if $add--disabled { - #{$tab-button-inline-end--disabled-selector} { - @extend %flexible-layout-tab-button--disabled; - } - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Tab List - // - - - - - - - - - - - - - - - - - - - - - #{$tab-list--inline-selector} { - @extend %flexible-layout-tab-list--inline; - } - - #{$tab-list--block-selector} { - @extend %flexible-layout-tab-list--block; - } - - // - - - - - - - - - - - - - - - - - - - - - // Droppable area - // - - - - - - - - - - - - - - - - - - - - - #{$droppable-area-selector} { - @extend %flexible-layout-droppable-area; - } -} - -%icon { - &--small { - --ch-image-size: var(--mer-icon__box--sm); - --ch-image-background-size: var(--mer-icon__size--sm); - } - &--medium { - --ch-image-size: var(--mer-icon__box--md); - --ch-image-background-size: var(--mer-icon__size--md); - } -} - -/// @group Icon -/// @param {String} $icon-selector--small [".icon-sm"] - -/// @param {String} $icon-selector--medium [".icon-md"] - -@mixin icon( - $icon-selector--small: ".icon-sm", - $icon-selector--medium: ".icon-md" -) { - #{$icon-selector--small} { - @extend %icon--small; - } - #{$icon-selector--medium} { - @extend %icon--medium; - } -} - -// In Mercury, some controls use different font styles than the tabular grid. -// When these controls are inside a tabular grid, they should inherit its styles. -// This ensures visual consistency across the interface. Add relevant selectors -// below, then import this file where needed and apply the selector variable. - -// ie. for the combo-box: @mixin combo-box($combo-box-selector: $combo-box-selector, ... - -$combo-box-selector: ".combo-box"; -$input-selector: ".input"; - -$tree-controls: ($combo-box-selector, $input-selector); - - -%input { - // ch-chameleon custom vars (do not edit their names) - // --ch-edit-auto-fill-background-color: var(); not defined by design yet - --ch-edit-gap: var(--control__icon-gap); - --ch-edit__image-size: var(--mer-icon__box--md); - --ch-placeholder-color: var(--mer-color__neutral-gray--400); - @extend %body-regular-m; - - @include control-border(); - @include control-colors-enabled(); - @include control-padding-inline-block(); - - &--focus { - @include focus-outline(); - } - - &--hover { - @include control-colors-hover(); - } - - &--disabled { - @include control-colors-disabled(); - } -} - -/// @group Form -/// @param {String} $input-selector [".input"] - -/// @param {String} $error-selector [".input-error"] - -/// @param {Boolean} $add--disabled [true] - -/// @param {Boolean} $add--error [true] - -@mixin input( - $input-selector: $input-selector, - $empty-placeholder-selector: ".input[part*='ch-edit--empty-value']", - $error-selector: ".input-error", - $add--disabled: true, - $add--error: true, - $add--placeholder: true -) { - #{$input-selector} { - @extend %input; - - &:focus { - @extend %input--focus; - } - - &:hover { - @extend %input--hover; - } - - @if $add--disabled { - &:disabled { - @extend %input--disabled; - } - } - } - - @if $add--placeholder { - #{$empty-placeholder-selector} { - @extend %body-italic-m; - } - } - - @if $add--error { - #{$error-selector} { - @include control-colors-error(); - } - } -} - -%layout-splitter { - &-bar { - color: var(--mer-border-color__on-surface); - } -} - -@mixin layout-splitter($bar-selector: ".layout-splitter::part(bar)") { - #{$bar-selector} { - @extend %layout-splitter-bar; - } -} - -%list-box { - --ch-action-list-group__expandable-button-image-size: var( - --mer-icon__box--md - ); - --ch-action-list-group__expandable-button-size: var(--mer-icon__box--md); - --ch-action-list-item__background-image-size: var(--mer-icon__size--md); - --ch-action-list-item__image-size: var(--mer-icon__box--md); - - @include items-container-border(); - @include items-container-border-radius(); - @include items-container-colors(); - @include items-container-gap(); - @include items-container-padding(); - - &-item-action { - @include item-colors-enabled(); - @include item-border(); - @include item-border-radius(); - @include item-padding(); - @extend %body-regular-m; - // @include item-column-gap(); // TODO: uncomment when '.action' class on Chameleon fixes the grid-template. - // Explanation: At the time of writting Chameleon is applying a grid-template that consists on three columns. - // As a side effect, if we apply column-gap an inline-start gap will be applied, even tough is not intended. - - &--disabled { - @include item-colors-disabled(); - } - - &--focus-visible { - @include focus-outline(); - } - - &--not-selectable { - &--hover { - @include item-colors-hover(); - } - } - - &--selectable { - &--hover { - @include item-colors-hover(); - } - } - &--selected { - @include item-colors-selected(); - &--hover { - @include item-colors-selected-hover(); - } - } - &--not-selected { - &--hover { - } - } - - &--nested { - margin-inline-start: var(--mer-spacing--lg); - } - &--nested-expandable { - } - } - - &-group { - @include items-container-gap(); - &-action { - @include item-gap(); - &--hover { - @include item-colors-hover(); - border-color: transparent; // WA to hide the border. - // without border the item does not align with the items - // that implement border. - } - } - &-action, - &-caption { - @extend %subtitle-semi-bold-xs; - @include item-colors-enabled(); - } - &-caption { - @include item-padding(); - @include item-border(); - } - &-expandable { - @include items-container-gap(); - } - } - - &-additional-item--image { - // TODO: uncomment when '.action' class on Chameleon fixes the grid-template, and use back item-column-gap() instead. - margin-inline-end: var(--item__gap--regular); - } - &-additional-item--text { - // TODO: uncomment when '.action' class on Chameleon fixes the grid-template, and use back item-column-gap() instead. - margin-inline-start: calc(var(--item__gap--regular) * 2); - font-style: italic; - } - - &-separator { - @include items-container-separator(); - } -} - -@mixin list-box( - $list-box-selector: ".list-box", - - $group-selector: ".list-box::part(group)", - $group-expandable-selector: ".list-box::part(group__expandable)", - - $item-action-selector: ".list-box::part(item__action)", - $group-action-selector: ".list-box::part(group__action)", - $group-caption-selector: ".list-box::part(group__caption)", - - $item-action--nested-selector: ".list-box::part(item__action nested)", - $item-action--nested-expandable-selector: - ".list-box::part(item__action nested-expandable)", - - $item-action-not-selectable-selector: - ".list-box::part(item__action not-selectable)", - $group-action-not-selectable-selector: - ".list-box::part(group__action not-selectable)", - - $item-action-selectable-selector: ".list-box::part(item__action selectable)", - $group-action-selectable-selector: ".list-box::part(group__action selectable)", - - $item-action--selected-selector: - ".list-box::part(item__action selectable selected)", - $group-action--selected-selector: - ".list-box::part(group__action selectable selected)", - - $item-action--not-selected-selector: - ".list-box::part(item__action selectable not-selected)", - $group-action--not-selected-selector: - ".list-box::part(group__action selectable not-selected)", - - $item-action--disabled-selector: ".list-box::part(item__action disabled)", - $group-action--disabled-selector: ".list-box::part(group__action disabled)", - $group-caption--disabled-selector: ".list-box::part(group__caption disabled)", - - $additional-item--image-selector: - ".list-box::part(item__additional-item image)", - $additional-item--action-selector: - ".list-box::part(item__additional-item action)", - $additional-item--text-selector: ".list-box::part(item__additional-item text)", - - $separator-selector: ".list-box::part(separator)", - - $add--disabled: true, - $add--additional-item: true -) { - #{$list-box-selector} { - @extend %list-box; - } - - // - - - - - - - - - - - - - - - - - - - - - // Action - // - - - - - - - - - - - - - - - - - - - - - #{$item-action-selector}, - #{$group-action-selector} { - @extend %list-box-item-action; - } - - #{$group-caption-selector} { - @extend %list-box-group-caption; - } - - #{$item-action-selector}:focus-visible, - #{$group-action-selector}:focus-visible { - @extend %list-box-item-action--focus-visible; - } - - // Not selectable - #{$item-action-not-selectable-selector}:hover, - #{$group-action-not-selectable-selector}:hover { - @extend %list-box-item-action--not-selectable--hover; - } - - // Selectable - #{$item-action-selectable-selector}:hover, - #{$group-action-selectable-selector}:hover { - @extend %list-box-item-action--selectable--hover; - } - - // Selectable Selected - #{$item-action--selected-selector}, - #{$group-action--selected-selector} { - @extend %list-box-item-action--selected; - &:hover { - @extend %list-box-item-action--selected--hover; - } - } - - // Selectable Not Selected - #{$item-action--not-selected-selector}, - #{$group-action--not-selected-selector} { - @extend %list-box-item-action--not-selected; - &:hover { - @extend %list-box-item-action--not-selected--hover; - } - } - - // Nested - #{$item-action--nested-selector} { - @extend %list-box-item-action--nested; - } - #{$item-action--nested-expandable-selector} { - @extend %list-box-item-action--nested-expandable; - } - - // - - - - - - - - - - - - - - - - - - - - - // Group - // - - - - - - - - - - - - - - - - - - - - - #{$group-selector} { - @extend %list-box-group; - } - #{$group-expandable-selector} { - @extend %list-box-group-expandable; - } - - #{$group-action-selector} { - @extend %list-box-group-action; - &:hover { - @extend %list-box-group-action--hover; - } - } - #{$group-caption-selector} { - @extend %list-box-group-caption; - } - - // - - - - - - - - - - - - - - - - - - - - - // Separator - // - - - - - - - - - - - - - - - - - - - - - #{$separator-selector} { - @extend %list-box-separator; - } - - // - - - - - - - - - - - - - - - - - - - - - // Disabled - // - - - - - - - - - - - - - - - - - - - - - @if $add--disabled { - #{$item-action--disabled-selector}, - #{$group-action--disabled-selector}, - #{$group-caption--disabled-selector} { - @extend %list-box-item-action--disabled; - } - } - - @if $add--additional-item { - #{$additional-item--image-selector} { - @extend %list-box-additional-item--image; - } - #{$additional-item--text-selector} { - @extend %list-box-additional-item--text; - } - } -} - -@mixin markdown-viewer() { - :host { - @extend %body-regular-m; - } - - // - - - - - - - - - - - - - - - - - - - - - // Heading - // - - - - - - - - - - - - - - - - - - - - - h1 { - @extend %heading-1; - margin-block: var(--mer-spacing--md) var(--mer-spacing--xs); - padding-block-end: var(--mer-spacing--xs); - } - - h2 { - @extend %heading-2; - margin-block: var(--mer-spacing--sm) 6px; // It does not exists the --spacing--xm value - padding-block-end: 6px; // It does not exists the --spacing--xm value - } - - h3 { - @extend %heading-3; - margin-block: var(--mer-spacing--xs) var(--mer-spacing--2xs); - padding-block-end: var(--mer-spacing--2xs); - } - - h4 { - @extend %heading-4; - margin-block: var(--mer-spacing--2xs) var(--mer-spacing--3xs); - padding-block-end: var(--mer-spacing--3xs); - } - - h5 { - @extend %heading-5; - margin-block: var(--mer-spacing--2xs) var(--mer-spacing--3xs); - padding-block-end: var(--mer-spacing--3xs); - } - - h6 { - @extend %heading-6; - margin-block: var(--mer-spacing--2xs) var(--mer-spacing--3xs); - padding-block-end: var(--mer-spacing--3xs); - } - - h1, - h2, - h3, - h4, - h5, - h6 { - border-block-end: 1px solid var(--mer-border-color__on-surface); - } - - p, - ul, - ol, - table, - ch-code { - margin-block: var(--mer-spacing--xs); - } - - ul, - ol { - padding-inline-start: var(--mer-spacing--xl); - } - - // TODO: Add hyperlink styles - a { - @extend %text-link; - } - - blockquote { - margin-block: var(--mer-spacing--xs); - padding-block: var(--mer-spacing--xs); - padding-inline: calc(var(--mer-spacing--xl) - 4px) var(--mer-spacing--xl); - border-inline-start: 4px solid var(--mer-color__primary--400); - - // First

don't add margin-block-start, because the

adds it - & > p:first-of-type { - margin-block-start: 0; - } - - // Last

don't add margin-block-end, because the

adds it - & > p:last-of-type { - margin-block-end: 0; - } - } - - strong { - font-weight: var(--font-weight-bold); - } - - // - - - - - - - - - - - - - - - - - - - - - // Table - // - - - - - - - - - - - - - - - - - - - - - - // Rows - tr { - border: 1px solid var(--mer-border-color__on-surface); - } - - // Header and body cells - th, - td { - padding: var(--mer-spacing--xs); - border-inline-start: 1px solid var(--mer-border-color__on-surface); - } - - // Remove left border in the first cell of each row - tr > td:first-child, - tr > th:first-child { - border-inline-start: unset; - } - - thead > tr, - tbody > tr:nth-child(2n) { - background-color: var(--mer-color__neutral-gray--700); - } - - // - - - - - - - - - - - - - - - - - - - - - // Code - // - - - - - - - - - - - - - - - - - - - - - .code-block-container { - position: relative; - } - - .code-block-header { - display: grid; - grid-auto-columns: max-content; - grid-auto-flow: column; - justify-content: flex-end; - position: absolute; - inset-block-start: var(--mer-spacing--md); - inset-inline-end: var(--mer-spacing--xs); - padding: 6px; - background-color: var(--mer-surface__elevation--01); - border-radius: var(--mer-border__radius--xs); - } - - .button-copy-code { - inline-size: 18px; - block-size: 18px; - - &::before { - content: ""; - display: grid; - inline-size: 100%; - block-size: 100%; - -webkit-mask: no-repeat center / 100% - var(--icon__system_copy_primary--enabled); - background-color: currentColor; - } - - &:focus-visible { - outline: 1px solid currentColor; - } - } - - // Multiline code - ch-code { - // Override inline border-radius - border: 1px solid var(--mer-border-color__on-surface); - border-radius: 4px; - padding: var(--mer-spacing--md); - - // & > .code-block__header { - // display: grid; - // grid-template-columns: 1fr max-content; - // align-items: center; - // padding-inline: var(--mer-spacing--md); - // padding-block: var(--mer-spacing--xs); - // background-color: var(--surface--alternative); - // } - - // & > .code-block__content { - // // Override inline padding - // - // } - } - - @include code($selector: "ch-code"); - - // Inline code - code { - padding-block: var(--mer-spacing--3xs); - padding-inline: var(--mer-spacing--2xs); - background-color: var(--mer-elevation__bg-color--01); - border-radius: 2px; - font-size: calc(1em - 2px); - } - - img { - display: inline-block; - max-inline-size: 25%; - } - - // Don't add margin-block-start in the first element of the markdown - :host > :first-child, - ch-theme + * { - margin-block-start: 0px; - } - - // Don't add margin-block-end in the last element of the markdown - :host > :last-child { - margin-block-end: 0px; - } -} - -%navigation-list { - --ch-navigation-list-item__tooltip-separation-x: var(--mer-spacing--2xs); - - --ch-navigation-list-item-custom-padding-inline-start: calc( - var(--mer-spacing--xs) - 1px - ); - --ch-navigation-list-item-gap: var(--mer-spacing--xs); - --ch-navigation-list-item-expand-collapse-duration: 200ms; - - --ch-navigation-list-item__image-size: var(--mer-spacing--md); - --ch-navigation-list-item__expandable-button-size: 20px; - --ch-navigation-list-item__expandable-button-image-size: calc( - var(--mer-spacing--md) - var(--mer-spacing--3xs) - ); - - color: var(--item__color); - line-height: var(--mer-spacing--md); - gap: var(--mer-spacing--sm); - - &-item-action { - padding-block: var(--mer-spacing--xs); - padding-inline-end: var(--mer-spacing--xs); - } - - &-item-tooltip { - padding-block: var(--mer-spacing--2xs); - padding-inline: var(--mer-spacing--xs); - background-color: var(--mer-color__neutral-gray--1000); - border-radius: var(--mer-border__radius--sm); - box-shadow: 4px 4px 12px 0px #00000033; - color: var(--mer-color__neutral-gray--300); - @extend %body-regular-m; - } - - &-item-action { - &--focus-visible { - outline: 1px solid; - outline-offset: -1px; - } - } - - &-item-button { - &--hover { - color: var(--item__color--hover); - } - } - - &-item-link { - padding-inline-end: calc(var(--mer-spacing--xs) - 1px); - padding-block: calc(var(--mer-spacing--xs) - 1px); - border: 1px solid transparent; - border-radius: 4px; - - &--selected { - background-color: var(--item__bg-color--selected); - border-color: var(--item__border-color--selected); - color: var(--mer-accent__primary); - } - - &--hover-not-selected { - color: var(--mer-accent__primary); - } - } -} - -@mixin navigation-list( - $navigation-list-selector: ".navigation-list", - $item-action-selector: ".navigation-list::part(item__action)", - $item-button-selector: ".navigation-list::part(item__button)", - $item-link-selector: ".navigation-list::part(item__link)", - $item-link-not-selected-selector: - ".navigation-list::part(item__link not-selected)", - $item-link-selected-selector: ".navigation-list::part(item__link selected)", - $item-tooltip-selector: ".navigation-list::part(item__caption tooltip)" -) { - #{$navigation-list-selector} { - @extend %navigation-list; - } - - #{$item-action-selector} { - @extend %navigation-list-item-action; - - &:focus-visible { - @extend %navigation-list-item-action--focus-visible; - } - } - - #{$item-button-selector}:hover { - @extend %navigation-list-item-button--hover; - } - - #{$item-link-selected-selector} { - @extend %navigation-list-item-link--selected; - } - - #{$item-link-selector} { - @extend %navigation-list-item-link; - } - - #{$item-link-not-selected-selector}:hover { - @extend %navigation-list-item-link--hover-not-selected; - } - - #{$item-tooltip-selector} { - @extend %navigation-list-item-tooltip; - } -} - -@mixin typography-reset() { - h1, - h2, - h3, - h4, - h5, - h6, - p { - font: unset; - margin: 0; - padding: 0; - color: unset; - } -} - -@mixin button-reset() { - :where(button, a) { - all: unset; - display: inline-flex; - align-items: center; - - // Disallow selecting the text - user-select: none; - - // Avoid zooming on double tap on iOS devices - touch-action: manipulation; - - // Allow user drag - // -webkit-user-drag: element; - - cursor: pointer; - } - - button:disabled { - pointer-events: none; - } -} - -@mixin input-reset() { - input, - select, - textarea { - padding: 0; - margin: 0; - background-color: unset; - border: unset; - color: unset; - font: unset; - outline: unset; - } -} - -@mixin other-reset() { - hr { - block-size: 1px; - margin: unset; - padding: unset; - border: unset; - background-color: currentColor; - } - - fieldset, - legend { - padding: 0; - margin: 0; - } - - img { - display: block; - } -} - -@mixin box-sizing() { - *, - ::after, - ::before { - box-sizing: border-box; - } -} - -@mixin button-common-styles() { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - justify-content: center; -} - -@mixin label-common-styles() { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - grid-template-rows: auto; // Necessary to avoid creating additional rows and then adding additional gap at the bottom of the label - align-items: center; -} - -@mixin document-common-styles() { - display: grid; - grid-template-rows: 1fr; - min-block-size: 100dvh; - margin: 0; -} - -// - - - - - - - - - - - - - - - - - - - - -// Icons | Mask & Background -// - - - - - - - - - - - - - - - - - - - - - -// Icon mask styles -@mixin icon-mask-common-styles( - $inline-size: var(--icon-size), - $block-size: var(--icon-size), - $mask-size: var(--icon-mask-size) -) { - content: ""; - display: block; - inline-size: $inline-size; - block-size: $block-size; - -webkit-mask: no-repeat center / $mask-size var(--icon-path); - background-color: currentColor; -} - -// Icon background styles -@mixin icon-background-common-styles( - $inline-size: var(--icon-size), - $block-size: var(--icon-size), - $background-size: var(--icon-background-size) -) { - content: ""; - display: block; - inline-size: $inline-size; - block-size: $block-size; - background: no-repeat center / $background-size var(--icon-path); -} - -// - - - - - - - - - - - - - - - - - - - - -// Icons | Gap -// - - - - - - - - - - - - - - - - - - - - - -@mixin icon-and-text-styles($gap) { - display: inline-grid; - grid-auto-flow: column; - grid-auto-columns: max-content; - gap: $gap; -} - -// - - - - - - - - - - - - - - - - - - - - -// Ellipsis -// - - - - - - - - - - - - - - - - - - - - - -@mixin ellipsis() { - display: block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -%ellipsis { - @include ellipsis(); -} - - -// ---------------------- -// Focus -// ---------------------- -@mixin focus-outline() { - outline: var(--focus__outline-width) var(--focus__outline-style) - var(--focus__outline-color); - outline-offset: var(--focus__outline-offset); -} -@mixin focus-border() { - border-color: var(--borders-un-border-color__focused); -} - -// ---------------------- -// Scrollbar Styles -// ---------------------- -@mixin scrollbar-styles() { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb__bg-color) - var(--scrollbar-track__bg-color); - - //scrollbar - &::-webkit-scrollbar { - width: var(--scrollbar__size); - height: var(--scrollbar__size); - } - - // track - &::-webkit-scrollbar-track { - background-color: var(--scrollbar-track__bg-color); - border-radius: var(--scrollbar-track__border-radius); - } - - // thumb - &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb__bg-color); - border-radius: var(--scrollbar-thumb__border-radius); - } - - // corner - &::-webkit-scrollbar-corner { - background: var(--scrollbar-corner__bg); - } -} - -// ---------------------- -// Scrollbar Components -// ---------------------- -@mixin scrollbar-components() { - :host(.ch-scrollable), - .ch-scrollable, - .scrollable { - @include scrollbar-styles(); - } -} - -// ---------------------- -// Control -// ---------------------- - -// Colors -@mixin control-colors-enabled() { - background-color: var(--control__bg-color); - color: var(--control__color); - --ch-placeholder-color: var(--control-placeholder__color); - // enabled border color is defined in control-border() -} -@mixin control-colors-hover() { - --control__border-color: var(--control__border-color--hover); -} -@mixin control-colors-disabled() { - --control__bg-color: var(--control__background-color--disabled); - --control__border-color: var(--control__border-color--disabled); - --control__color: var(--control__color--disabled); - --ch-placeholder-color: var(--control-placeholder__color--disabled); -} -@mixin control-colors-error() { - --control__border-color: var(--control__border-color--error); -} -// Border -@mixin control-border() { - border-width: var(--control__border-width); - border-style: var(--control__border-style); - border-color: var(--control__border-color); - border-radius: var(--control__border-radius); -} -@mixin control-remove-border() { - // This resets the border applied - // (for controls inside the property grid) - --control__border-width: 0; - --control__border-color: transparent; - --control__border-radius: 0; -} -// Height -@mixin control-height-regular() { - block-size: var(--control__height); - // to be removed (TODO) - // fixed block-size comes with some issues. -} -// Padding -@mixin control-padding-inline() { - padding-inline: var(--control__padding-inline); -} -@mixin control-padding-block() { - padding-block: var(--control__padding-block); -} -@mixin control-padding-inline-block() { - padding-block: var(--control__padding-block); - padding-inline: var(--control__padding-inline); -} -// Placeholder -@mixin control-placeholder() { - color: var(--control-placeholder__color); - font-style: var(--control-placeholder__font-style); -} - -// ---------------------- -// Control Tiny -// ---------------------- - -@mixin control-tiny-size() { - block-size: var(--control-tiny__size); - inline-size: var(--control-tiny__size); -} -@mixin control-tiny-border() { - border-width: var(--control__border-width); - border-style: var(--control__border-style); - border-color: var(--control__border-color); - border-radius: var(--control__border-radius); -} -@mixin control-tiny-border-hover() { - --control__border-color: var(--control__border-color--hover); -} -@mixin control-tiny-border-disabled() { - --control__border-color: var(--control__border-color--disabled); -} -@mixin control-tiny-border-error() { - --control__border-color: var(--control__border-color--error); -} - -// ---------------------- -// Items Container -// ---------------------- - -@mixin items-container-border() { - border-style: var(--items-container__border-style); - border-width: var(--items-container__border-width); -} -@mixin items-container-border-radius() { - border-radius: var(--items-container__border-radius); -} -@mixin items-container-colors() { - background-color: var(--items-container__bg-color); - border-color: var(--items-container__border-color); -} -@mixin items-container-padding() { - padding-block: var(--items-container__padding-block); - padding-inline: var(--items-container__padding-inline); -} -@mixin items-container-dropdown() { - box-shadow: var(--items-container__box-shadow); -} -@mixin items-container-gap() { - gap: var(--items-container__gap); -} -@mixin items-container-gap-small() { - gap: var(--items-container__gap--small); -} -@mixin items-container-max-height() { - max-block-size: var(--items-container__max-block-size); -} -@mixin items-container-separator() { - block-size: var(--items-container-separator__block-size); - inline-size: var(--items-container-separator__inline-size); - background-color: var(--items-container-separator__bg-color); -} - -// ------------------------------------ -// Single Item (Every item except grid) -// ------------------------------------ - -@mixin item-colors-enabled() { - background-color: var(--item__bg-color); - border-color: var(--item__border-color); - color: var(--item__color); -} -@mixin item-colors-hover() { - --item__bg-color: var(--item__bg-color--hover); - --item__border-color: var(--item__border-color--hover); - --item__color: var(--item__color--hover); -} -@mixin item-colors-selected() { - --item__bg-color: var(--item__bg-color--selected); - --item__border-color: var(--item__border-color--selected); - --item__color: var(--item__color--selected); -} -@mixin item-colors-selected-hover() { - --item__bg-color: var(--item__bg-color--selected-hover); - --item__border-color: var(--item__border-color--selected-hover); - --item__color: var(--item__color--selected-hover); -} -@mixin item-colors-disabled() { - --item__bg-color: var(--item__bg-color--disabled); - --item__border-color: var(--item__border-color--disabled); - --item__color: var(--item__color--disabled); -} -@mixin item-border() { - border: var(--item__border-width) var(--item__border-style) - var(--item__border-color); -} -@mixin item-border-block-end() { - border-block-end: var(--item__border-width) var(--item__border-style) - var(--item__border-color); -} -@mixin item-border-radius() { - border-radius: var(--item__border-radius); -} -@mixin item-gap() { - gap: var(--item__gap--regular); -} -@mixin item-column-gap() { - column-gap: var(--item__gap--regular); -} -@mixin item-padding() { - padding-block: var(--item__padding-block); - padding-inline: var(--item__padding-inline); -} -@mixin item-padding-block() { - padding-block: var(--item__padding-inline); -} -@mixin item-padding-inline() { - padding-inline: var(--item__padding-inline); -} -@mixin item-height-regular() { - block-size: var(--item__height--regular); -} -@mixin item-height-large() { - block-size: var(--item__height--large); -} - -// --------------------------------- -// Grid Item -// --------------------------------- - -// Row -@mixin grid-row-colors-enabled() { - // Some controls using --item__** variables inside the tabular grid inherit - // unwanted styles. For example, when a row is selected, controls like a - // list-box inherit the selected background color. To prevent this, these - // properties cannot be directly applied to the tabular grid. - --grid-row__bg-color: var(--item__bg-color); - --grid-row__color: var(--item__color); - background-color: var(--grid-row__bg-color); - color: var(--grid-row__color); -} -@mixin grid-row-colors-highlighted() { - --grid-row__bg-color: var(--item__bg-color--hover); - --grid-row__color: var(--item__color--hover); -} -@mixin grid-row-colors-selected() { - --grid-row__bg-color: var(--item__bg-color--selected); - --grid-row__color: var(--item__color--selected); -} -@mixin grid-row-dragging() { - box-shadow: var(--mer-box-shadow--01); -} -@mixin grid-cell-border-inline-block() { - // this mixin uses the box-shadow property, but it looks - // as a border to the user. - box-shadow: var(--grid-cell__box-shadow-inline-block); -} -@mixin grid-cell-padding-inline() { - padding-inline: var(--grid-cell__padding-block); -} -@mixin grid-cell-padding-block() { - padding-block: var(--grid-cell__padding-block); -} -@mixin grid-cell-padding-inline-block() { - padding-block: var(--grid-cell__padding-block); - padding-inline: var(--grid-cell__padding-inline); -} -@mixin grid-cell-remove-padding() { - // we should redefine '--grid-cell__padding-inline' here because when a control - // is inside a a tabular-grid-cell the cell padding-inline value is required to - // be applied on the control padding-inline. - padding-block: 0; - padding-inline: 0; -} -@mixin grid-rowset-legend-padding-block() { - padding-block-start: var(--mer-spacing--xs); - padding-block-end: var(--mer-spacing--xs); -} -@mixin grid-rowset-legend-colors-enabled() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02); - background-color: var(--grid-rowset-legend__bg-color); -} -@mixin grid-rowset-legend-colors-hover() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--03); -} -@mixin grid-rowset-legend-colors-active() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02); -} - -// ---------------------- -// Tab Caption (Button) -// ---------------------- -@mixin tab-button-border-block() { - border-block: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-border-block-end() { - border-block-end: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-border-block-start() { - border-block-start: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-gap() { - gap: var(--tab-caption__gap); -} -@mixin tab-button-colors-enabled() { - background-color: var(--tab-caption__bg-color); - color: var(--tab-caption__color); - border-color: var(--tab-caption__border-color); -} -@mixin tab-button-colors-hover() { - --tab-caption__bg-color: var(--tab-caption__bg-color--hover); - // color remains the same - // border-color remains the same -} -@mixin tab-button-colors-disabled() { - --tab-caption__bg-color: var(--tab-caption__bg-color--disabled); - --tab-caption__color: var(--mer-text__primary--disabled); - --tab-caption__border-color--selected-inline: var( - --mer-border-color__primary--disabled - ); - --tab-caption__border-color--selected-stack: var( - --mer-surface__elevation--02 - ); -} -@mixin tab-button-colors-selected-inline() { - --tab-caption__bg-color: var(--tab-caption__bg-color--selected-inline); - --tab-caption__color: var(--tab-caption__color--selected); - --tab-caption__border-color: var( - --tab-caption__border-color--selected-inline - ); -} -@mixin tab-button-colors-selected-stack() { - --tab-caption__bg-color: var(--tab-caption__bg-color--selected-stack); - --tab-caption__color: var(--tab-caption__color--selected); - --tab-caption__border-color: var(--tab-caption__border-color--selected-stack); -} -@mixin tab-button-padding-inline() { - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); -} -@mixin tab-button-padding-stack() { - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); -} - -// ---------------------- -// Label -// ---------------------- - -@mixin label-gap-block() { - gap: var(--label__gap--block); -} -@mixin label-gap-inline() { - gap: var(--label__gap--inline); -} -@mixin label-color-hover() { - --label__color: var(--label__color--hover); -} -@mixin label-color-disabled() { - --label__color: var(--label__color--disabled); -} - -// ---------------------- -// Window -// ---------------------- - -// TODO: This styles should better be applied on the ch-window ? -%window-styles { - border: var(--window__border); - border-radius: var(--window__border-radius); - padding: var(---window__padding); - background-color: var(--window__bg-color); - box-shadow: var(--mer-box-shadow--01); -} - -// ---------------------- -// Dropdown -// ---------------------- - -@mixin dropdown-styles() { - box-shadow: var(--mer-box-shadow--01); - border-radius: var(--mer-border__radius--sm); -} - -// ---------------------- -// Pseudo Dialog Footer -// ---------------------- - -@mixin control-footer-base() { - --control-footer-justify-content: end; - padding-block-start: var(--mer-spacing--xs); - display: flex; - justify-content: var(--control-footer-justify-content); - align-items: center; -} -@mixin control-footer-border() { - border-block-start: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); -} -@mixin control-footer( - $selector: ".control-footer", - $with-border-selector: ".control-footer-with-border", - $justify-start-selector: ".control-footer-start", - $justify-center-selector: ".control-footer-center", - $justify-space-between-selector: ".control-footer-space-between", - $with-border: true -) { - #{$selector}, - #{$with-border-selector} { - @include control-footer-base(); - } - #{$justify-start-selector} { - --control-footer-justify-content: start; - } - #{$justify-center-selector} { - --control-footer-justify-content: center; - } - #{$justify-space-between-selector} { - --control-footer-justify-content: space-between; - } - @if $with-border { - #{$with-border-selector} { - @include control-footer-border(); - } - } -} - -// ---------------------- -// Pseudo Dialog Header -// ---------------------- - -@mixin control-header-base() { - padding-block-end: var(--mer-spacing--md); -} -@mixin control-header-border() { - border-block-end: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); -} -@mixin control-header( - $selector: ".control-header", - $with-border-selector: ".control-header-with-border", - $with-border: true -) { - #{$selector}, - #{$with-border-selector} { - @include control-header-base(); - } - @if $with-border { - #{$with-border-selector} { - @include control-header-border(); - } - } -} - -// ---------------------- -// Body Spacing -// ---------------------- - -// This custom properties define the block and inline spacing of containers. -// i.e.: dialog, layout, etc.. - -%spacing-body { - padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); - padding-inline: var(--spacing-body-inline-start) - var(--spacing-body-inline-end); -} - -%spacing-body-block { - padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); -} -%spacing-body-block-start { - padding-block-start: var(--spacing-body-block-start); -} -%spacing-body-block-end { - padding-block-end: var(--spacing-body-block-end); -} - -%spacing-body-inline { - padding-inline: var(--spacing-body-inline-start) - var(--spacing-body-inline-end); -} -%spacing-body-inline-start { - padding-inline-start: var(--spacing-body-inline-start); -} -%spacing-body-inline-end { - padding-inline-end: var(--spacing-body-inline-end); -} - -@mixin spacing-body( - $body-selector: ".spacing-body,:host(.spacing-body)", - $body-block-selector: ".spacing-body-block,:host(.spacing-body-block)", - $body-block-start-selector: - ".spacing-body-block-start,:host(.spacing-body-block-start)", - $body-block-end-selector: - ".spacing-body-block-end,:host(.spacing-body-block-end)", - $body-inline-selector: ".spacing-body-inline,:host(.spacing-body-inline)", - $body-inline-start-selector: - ".spacing-body-inline-start,:host(.spacing-body-inline-start)", - $body-inline-end-selector: - ".spacing-body-inline-end,:host(.spacing-body-inline-end)" -) { - #{$body-selector} { - @extend %spacing-body; - } - // block - #{$body-block-selector} { - @extend %spacing-body-block; - } - #{$body-block-start-selector} { - @extend %spacing-body-block-start; - } - #{$body-block-end-selector} { - @extend %spacing-body-block-end; - } - // inline - #{$body-inline-selector} { - @extend %spacing-body-inline; - } - #{$body-inline-start-selector} { - @extend %spacing-body-inline-start; - } - #{$body-inline-end-selector} { - @extend %spacing-body-inline-end; - } -} - -// ---------------------- -// Spinner -// ---------------------- - -@mixin spinner($size, $spinner_color, $track_color) { - $border_thinness: 7; // the higher the thinner - width: $size; - height: $size; - border: calc($size / $border_thinness) solid $track_color; - border-top: calc($size / $border_thinness) solid $spinner_color; - border-radius: 50%; - animation: spin var(--mer-timing--regular) linear infinite; - - @keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } - } -} - - -%pills__container { - --pills-container__display: flex; - flex-wrap: wrap; - display: var(--pills-container__display); - gap: var(--mer-spacing--md); -} - -%pill { - // chameleon custom vars (do not edit the --ch-* vars names) - --ch-pills-separation-y: var(--mer-spacing--3xs); - --ch-pills-item-gap: var(--mer-spacing--xs); - --ch-pills-item__image-size: var(--mer-spacing--md); - --ch-pills-item__background-image-size: 100%; - --ch-pills-group__expandable-button-size: var(--mer-spacing--md); - --ch-pills-group__expandable-button-image-size: var(--mer-spacing--sm); - - // "control" tokens overrides - --control__border-radius: var(--mer-spacing--md); - --control__padding-inline: var(--mer-spacing--sm); - - @include control-border(); - @include control-colors-enabled(); - @include control-padding-inline-block(); - - @extend %body-semi-bold-m; - - // states - &--enabled { - --control__border-color: var(--mer-border-color__dim); - --control__bg-color: transparent; - --control__color: var(--mer-text__neutral); - } - &--processing { - --control__border-color: var(--mer-color__tinted-primary--50); - --control__bg-color: var(--mer-color__tinted-primary--8); - --control__color: var(--mer-accent__primary); - - // custom processing icon - $size: 12px; - --status-circle-color: transparent; - --status-circle-size: $size; - --status-circle-inset-inline-start: 14px; - - &::before { - // override left - inset-inline-start: 14px; - @include spinner( - $size, - var(--mer-color__primary--300), - var(--mer-color__tinted-primary--50) - ); - } - } - &--success { - --control__border-color: var(--mer-color__tinted-green--60); - --control__bg-color: var(--mer-color__tinted-green--5); - --control__color: var(--mer-text__success); - } - &--warning { - --control__border-color: var(--mer-color__tinted-yellow--60); - --control__bg-color: var(--mer-color__tinted-yellow--5); - --control__color: var(--mer-text__warning); - } - &--error { - --control__border-color: var(--mer-color__tinted-red--60); - --control__bg-color: var(--mer-color__tinted-red--5); - --control__color: var(--mer-text__error); - } - - &--disabled { - @include control-colors-disabled(); - } - - &:focus { - @include focus-outline(); - } - - &:hover { - @include control-colors-hover(); - } - - // items - &__item { - @include item-colors-enabled(); - @include item-border(); - @include item-border-radius(); - @include item-padding(); - - @extend %body-regular-m; - - &--with-icon { - padding-inline-start: var(--mer-spacing--xl); - background-repeat: no-repeat; - background-size: var(--mer-icon__box--md); - background-position: 8px center; - } - - &--enabled { - background-image: var(--icon__states_pill-filled_highlighted--enabled); - } - &--processing { - background-image: var(--icon__states_pill-filled_primary--enabled); - } - &--success { - background-image: var(--icon__states_pill-filled_success--enabled); - } - &--warning { - background-image: var(--icon__states_pill-filled_warning--enabled); - } - &--error { - background-image: var(--icon__states_pill-filled_error--enabled); - } - - &--selected { - @include item-colors-selected(); - } - } -} - -%icon-styles { - // custom icon styles - --status-circle-color: var(--control__color); - --status-circle-size: 6px; - --status-circle-inset-inline-start: 17px; - - position: relative; - padding-inline-start: 36px; - &::before { - content: ""; - position: absolute; - background-color: var(--status-circle-color); - inset-inline-start: var(--status-circle-inset-inline-start); - block-size: var(--status-circle-size); - inline-size: var(--status-circle-size); - display: inline-block; - border-radius: 50%; - } -} - -/// @group Pills -/// @param {String} $pills-container-selector [".pills-container"] -/// @param {String} $pill-selector [".pill"] -/// @param {String} $pill--enabled-selector [".pill[part='enabled']"] -/// @param {String} $pill--processing-selector [".pill[part='processing']"] -/// @param {String} $pill--success-selector [".pill[part='success']"] -/// @param {String} $pill--error-selector [".pill[part='error']"] -/// @param {String} $pill--warning-selector [".pill[part='warning']"] -/// @param {String} $pills__placeholder-selector [".pills::part(placeholder)"] -/// @param {String} $window-selector [".pill::part(window)"] -/// @param {String} $item-selector [".pill::part(item)"] -/// @param {String} $item--enabled-selector [".pill::part(item enabled)"] -/// @param {String} $item--processing-selector [".pill::part(item processing)"] -/// @param {String} $item--success-selector [".pill::part(item success)"] -/// @param {String} $item--error-selector [".pill::part(item error)"] -/// @param {String} $item--warning-selector [".pill::part(item warning)"] -/// @param {String} $item--disabled-selector [".pill::part(item disabled)"] -/// @param {String} $item--selected-selector [".pill::part(item selected)"] -/// @param {Boolean} $add--disabled [true] -/// @param {Boolean} $add--placeholder [true] -/// @param {Boolean} $add--placeholder-var [true] -/// @param {Boolean} $add--error [true] -@mixin pills( - $pills-container-selector: ".pills-container", - $pill-selector: ".pill", - $pill--enabled-selector: ".pill[part='enabled']", - $pill--disabled-selector: ".pill[disabled]", - $pill--processing-selector: ".pill[part='processing']", - $pill--success-selector: ".pill[part='success']", - $pill--error-selector: ".pill[part='error']", - $pill--warning-selector: ".pill[part='warning']", - $pills__placeholder-selector: ".pills::part(placeholder)", - $window-selector: ".pill::part(window)", - $item-selector: ".pill::part(item)", - $item--enabled-selector: ".pill::part(item enabled)", - $item--processing-selector: ".pill::part(item processing)", - $item--success-selector: ".pill::part(item success)", - $item--error-selector: ".pill::part(item error)", - $item--warning-selector: ".pill::part(item warning)", - $item--disabled-selector: ".pill::part(item disabled)", - $item--selected-selector: ".pill::part(item selected)", - $add--icon: true, - $add--disabled: true, - $add--placeholder: true, - $add--placeholder-var: true -) { - #{$pills-container-selector} { - @extend %pills__container; - } - - #{$pill-selector} { - @extend %pill; - } - @if $add--icon { - #{$pill-selector} { - @extend %icon-styles; - } - } - - #{$pill--enabled-selector} { - @extend %pill--enabled; - } - #{$pill--disabled-selector} { - @extend %pill--disabled; - } - #{$pill--processing-selector} { - @extend %pill--processing; - } - #{$pill--success-selector} { - @extend %pill--success; - } - #{$pill--error-selector} { - @extend %pill--error; - } - #{$pill--warning-selector} { - @extend %pill--warning; - } - - @if $add--placeholder { - #{$pills__placeholder-selector} { - @include control-placeholder(); - } - } - - @if $add--disabled { - #{$item--disabled-selector} { - @include item-colors-disabled(); - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Window - // - - - - - - - - - - - - - - - - - - - - - - #{$window-selector} { - @include items-container-colors(); - @include items-container-padding(); - @include items-container-dropdown(); - @include items-container-gap(); - @include items-container-max-height(); - @include items-container-border-radius(); - --items-container__border-radius: var(--mer-border__radius--lg); - // TODO: define a items-container-border-radius-sm() and a - // items-container-border-radius-md(); since container radius - // of the pills is greater than the other containers: - // combo-box, list-box, etc... - } - - // - - - - - - - - - - - - - - - - - - - - - // Item - // - - - - - - - - - - - - - - - - - - - - - - #{$item-selector} { - @extend %pill__item; - } - #{$item--selected-selector} { - @extend %pill__item--selected; - } - - @if $add--icon { - // custom states - #{$item--enabled-selector} { - @extend %pill__item--enabled; - @extend %pill__item--with-icon; - } - #{$item--processing-selector} { - @extend %pill__item--processing; - @extend %pill__item--with-icon; - } - #{$item--success-selector} { - @extend %pill__item--success; - @extend %pill__item--with-icon; - } - #{$item--warning-selector} { - @extend %pill__item--warning; - @extend %pill__item--with-icon; - } - #{$item--error-selector} { - @extend %pill__item--error; - @extend %pill__item--with-icon; - } - } -} - -// node type -@mixin cell-node-type-text() { - @include grid-cell-padding-inline-block(); -} -@mixin cell-node-type-element() { - @include control-remove-border(); - @include grid-cell-remove-padding(); - --control__padding-inline: var(--grid-cell__padding-inline); - // to stretch the control - display: grid; - align-items: stretch; - justify-content: stretch; -} -@mixin cell-node-type-element--hover() { - outline: var(--focus__outline-width) var(--focus__outline-style) - var(--control__border-color--hover); - outline-offset: var(--focus__outline-offset); -} -// cell alignment block -@mixin cell-alignment-block-start() { - align-items: start; -} -@mixin cell-alignment-block-center() { - align-items: center; -} -@mixin cell-alignment-block-end() { - align-items: end; -} -// cell alignment inline -@mixin cell-alignment-inline-start() { - justify-content: start; -} -@mixin cell-alignment-inline-center() { - justify-content: center; -} -@mixin cell-alignment-inline-end() { - justify-content: center; -} -// cell with ellipsis -@mixin cell-ellipsis() { - display: inline-block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/// @group Grid -/// @param {String} $tabular-grid-selector [".tabular-grid"] - -/// @param {("text" | "element")} $tabular-grid-cell-node-type ["text"] - -/// @param {("start" | "center" | "end")} $tabular-grid-cell-block-alignment ["start"] - -/// @param {("start" | "center" | "end")} $tabular-grid-cell-inline-alignment ["start"] - -/// @param {Boolean} $tabular-grid-cell-apply-ellipsis [false] - -/// @param {List} $tabular-grid-affected-columns-nth-list [null] - - -@mixin tabular-grid-cell-layout( - $tabular-grid-selector: ".tabular-grid", - $tabular-grid-cell-node-type: "text", - $tabular-grid-cell-block-alignment: "start", - $tabular-grid-cell-inline-alignment: "start", - $tabular-grid-cell-apply-ellipsis: false, - $tabular-grid-affected-columns-nth-list: null -) { - $selector: null; - $cell-tag-name: "ch-tabular-grid-cell"; - $where-pseudo-class: ":is"; - $where-selector: (); - // the selector varies depending on wether $tabular-grid-affected-columns-nth-list is null or not. - // if it is null, all cells should be affected. - @if $tabular-grid-affected-columns-nth-list != null { - @each $nth in $tabular-grid-affected-columns-nth-list { - $where-selector: append($where-selector, ":nth-child(#{$nth})", comma); - } - $selector: #{$tabular-grid-selector} - #{$cell-tag-name}#{$where-pseudo-class - }(#{$where-selector}); - } @else { - // if no $editable-columns-nth was provided, apply to all cells - $selector: #{$tabular-grid-selector} #{$cell-tag-name}; - } - #{$selector} { - // node type - @if $tabular-grid-cell-node-type == "text" { - @include cell-node-type-text(); - } - @if $tabular-grid-cell-node-type == "element" { - @include cell-node-type-element(); - } - &:hover { - @if $tabular-grid-cell-node-type == "element" { - @include cell-node-type-element--hover(); - } - } - // block alignment (only should apply if $tabular-grid-cell-node-type == "text" - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-block-alignment == - "start" - { - @include cell-alignment-block-start(); - } - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-block-alignment == - "center" - { - @include cell-alignment-block-center(); - } - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-block-alignment == - "end" - { - @include cell-alignment-block-end(); - } - // inline alignment - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-inline-alignment == - "start" - { - @include cell-alignment-inline-start(); - } - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-inline-alignment == - "center" - { - @include cell-alignment-inline-center(); - } - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-inline-alignment == - "end" - { - @include cell-alignment-inline-end(); - } - // ellipsis (only should apply if $tabular-grid-cell-node-type == "text" - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-apply-ellipsis == - true - { - @include cell-ellipsis(); - } - } -} - - -// - - - - - - - - - - - - - - - - - - - - -// ch-property-grid -// - - - - - - - - - - - - - - - - - - - - - -%property-grid { - // shared properties - &__property, - &__value { - @include cell-ellipsis(); - } - - &__property { - &--readonly { - @extend %text-readonly; - } - } - &__value { - &--readonly { - @extend %text-readonly; - } - &--edited { - @extend %text-edited; - } - &--editing { - @include cell-node-type-element(); - &-hover { - @include cell-node-type-element--hover(); - } - } - } - - &-column-set { - display: none; // Property grid should not display the column-set by design - } -} - -/// @group Grid -// ch-property-grid -/// @param {String} $property-grid-selector [".property-grid"] - -/// @param {String} $property-grid__main-selector [".property-grid::part(main)"] - -// ch-property-grid-column-set -/// @param {String} $property-grid-column-set [".property-grid-column-set"] - -// ch-property-grid-column -/// @param {String} $property-grid-column__bar-selector [".property-grid-column::part(bar)"] - -/// @param {String} $property-grid-column__bar-resize-split-selector [".property-grid-column::part(bar-resize-split)"] - -/// @param {String} $property-grid-column__selector-label-selector [".property-grid-column::part(selector-label)"] - -/// @param {String} $property-grid-column__selector-selector [".property-grid-column::part(selector)"] - -/// @param {String} $property-grid-column__selector--checked-selector [".property-grid-column::part(selector checked)"] - -/// @param {String} $property-grid-column__selector--indeterminate-selector [".property-grid-column::part(selector indeterminate)"] - -// ch-property-grid-row -/// @param {String} $property-grid-row-selector [".property-grid-row"] - -/// @param {String} $property-grid-row--focused-selector [".property-grid-row[focused]"] - -/// @param {String} $property-grid-row--highlighted-selector [".property-grid-row[highlighted]"] - -/// @param {String} $property-grid-row--selected-selector [".property-grid-row[selected]"] - -/// @param {String} $property-grid-row--dragging-selector [".property-grid-row[dragging]"] - -/// @param {String} $property-grid-row--highlighted__cell-selector [".property-grid-row[highlighted] > .property-grid-cell"] - -// ch-property-grid-row > cell -/// @param {String} $property-grid-row--selected__cell-selector [".property-grid-row[selected] > .property-grid-cell"] - -// ch-property-grid-rowset -/// @param {String} $property-grid-rowset-selector [".property-grid-rowset"] - -/// @param {String} $property-grid-rowset--collapsed__legend-selector [".property-grid-rowset[collapsed] > .property-grid-rowset-legend"] - -// ch-property-grid-rowset-legend -/// @param {String} $property-grid-rowset-legend-selector [".property-grid-rowset-legend"] - -/// @param {String} $property-grid-rowset-legend__caret-selector--collapsed [".property-grid-rowset[collapsed] > .property-grid-rowset-legend::part(caret)"] - -/// @param {String} $property-grid-rowset-legend__caret-selector--expanded [".property-grid-rowset > .property-grid-rowset-legend::part(caret)"] - -/// @param {String} $property-grid-rowset-legend__selector-label-selector [".property-grid-rowset-legend::part(selector-label)"] - -/// @param {String} $property-grid-rowset-legend__selector-selector [".property-grid-rowset-legend::part(selector)"] - -/// @param {String} $property-grid-rowset-legend__icon-selector [".property-grid-rowset-legend::part(icon)"] - -// ch-property-grid-cell -/// @param {String} $property-grid-cell-selector [".property-grid-cell"] - -/// @param {String} $property-grid-cell--focused-selector [".property-grid-cell[focused]"] - -/// @param {String} $property-grid-cell--selected-selector [".property-grid-cell[selected]"] - -/// @param {String} $property-grid-cell__selector-label-selector [".property-grid-cell::part(selector-label)"] - -/// @param {String} $property-grid-cell__selector-selector [".property-grid-cell::part(selector)"] - -/// @param {String} $property-grid-cell__selector--checked-selector [".property-grid-cell::part(selector checked)"] - -// ch-property-grid-cell (icons) -/// @param {String} $property-grid-cell__actions-icon-selector [".property-grid-cell::part(actions-icon)"] - -/// @param {String} $property-grid-cell__caret-icon-selector--collapsed [".property-grid-row:is( [collapsed], [leaf="false"]:not(:has(> .property-grid-rowset)) ) > .property-grid-cell::part(caret)"] - -/// @param {String} $property-grid-cell__caret-icon-selector--expanded [".property-grid-row > .property-grid-cell::part(caret)"] - -/// @param {String} $property-grid-cell__drag-icon-selector [".property-grid-cell::part(drag-icon)"] - -/// @param {String} $property-grid-cell__node-icon-selector [".property-grid-row:has(> .property-grid-rowset) > .property-grid-cell::part(node-icon)"] - -/// @param {String} $property-grid-cell__node-leaf-icon-selector [".property-grid-cell::part(node-icon)"] - -// row-actions -/// @param {String} $property-grid-row-actions-selector [".property-grid-row-actions"] - -/// @param {String} $property-grid-row-actions__window-selector [".property-grid-row-actions::part(window)"] - -/// @param {String} $property-grid-row-actions__main-selector [".property-grid-row-actions::part(main)"] - -@mixin property-grid( - // ch-property-grid - $property-grid-selector: ".property-grid", - $property-grid__main-selector: ".property-grid::part(main)", - // ch-property-grid-column-set - $property-grid-column-set: ".property-grid-column-set", - // ch-property-grid-column - $property-grid-column__bar-selector: ".property-grid-column::part(bar)", - $property-grid-column__bar-resize-split-selector: - ".property-grid-column::part(bar-resize-split)", - $property-grid-column__selector-label-selector: - ".property-grid-column::part(selector-label)", - $property-grid-column__selector-selector: - ".property-grid-column::part(selector)", - $property-grid-column__selector--checked-selector: - ".property-grid-column::part(selector checked)", - $property-grid-column__selector--indeterminate-selector: - ".property-grid-column::part(selector indeterminate)", - // ch-property-grid-row - $property-grid-row-selector: ".property-grid-row", - // ch-property-grid-row - // interaction states - $property-grid-row--focused-selector: ".property-grid-row[focused]", - $property-grid-row--highlighted-selector: ".property-grid-row[highlighted]", - $property-grid-row--selected-selector: ".property-grid-row[selected]", - $property-grid-row--dragging-selector: ".property-grid-row[dragging]", - $property-grid-row--highlighted__cell-selector: - ".property-grid-row[highlighted] > .property-grid-cell", - $property-grid-row--selected__cell-selector: - ".property-grid-row[selected] > .property-grid-cell", - // functional states (properties and values) - $property-grid__property-selector: - ".property-grid-row > .property-grid-cell:nth-child(1)", - $property-grid__value-selector: - ".property-grid-row > .property-grid-cell:nth-child(2)", - $property-grid__property--readonly-selector: - ".property-grid-property-readonly > .property-grid-cell:nth-child(1)", - $property-grid__value--readonly-selector: - ".property-grid-value-readonly > .property-grid-cell:nth-child(2)", - $property-grid__value--edited-selector: - ".property-grid-value-edited > .property-grid-cell:nth-child(2)", - $property-grid__value--editing-selector: - ".property-grid-value-editing > .property-grid-cell:nth-child(2)", - - // ch-property-grid-rowset - $property-grid-rowset-selector: ".property-grid-rowset", - $property-grid-rowset--collapsed__legend-selector: - ".property-grid-rowset[collapsed] > .property-grid-rowset-legend", - // ch-property-grid-rowset-legend - $property-grid-rowset-legend-selector: ".property-grid-rowset-legend", - $property-grid-rowset-legend__caret-selector--collapsed: - ".property-grid-rowset[collapsed] > .property-grid-rowset-legend::part(caret)", - $property-grid-rowset-legend__caret-selector--expanded: - ".property-grid-rowset > .property-grid-rowset-legend::part(caret)", - $property-grid-rowset-legend__selector-label-selector: - ".property-grid-rowset-legend::part(selector-label)", - $property-grid-rowset-legend__selector-selector: - ".property-grid-rowset-legend::part(selector)", - $property-grid-rowset-legend__icon-selector: - ".property-grid-rowset-legend::part(icon)", - // ch-property-grid-cell - $property-grid-cell-selector: ".property-grid-cell", - $property-grid-cell--focused-selector: ".property-grid-cell[focused]", - $property-grid-cell--selected-selector: ".property-grid-cell[selected]", - $property-grid-cell__selector-label-selector: - ".property-grid-cell::part(selector-label)", - $property-grid-cell__selector-selector: ".property-grid-cell::part(selector)", - $property-grid-cell__selector--checked-selector: - ".property-grid-cell::part(selector checked)", - // ch-property-grid-cell (icons) - $property-grid-cell__actions-icon-selector: - ".property-grid-cell::part(actions-icon)", - $property-grid-cell__caret-icon-selector--collapsed: - ".property-grid-row:is( [collapsed], [leaf='false']:not(:has(> .property-grid-rowset)) ) > .property-grid-cell::part(caret)", - $property-grid-cell__caret-icon-selector--expanded: - ".property-grid-cell::part(caret)", - $property-grid-cell__drag-icon-selector: - ".property-grid-cell::part(drag-icon)", - $property-grid-cell__node-icon-selector: - ".property-grid-row:has(> .property-grid-rowset) > .property-grid-cell::part(node-icon)", - $property-grid-cell__node-leaf-icon-selector: - ".property-grid-cell::part(node-icon)", - // ch-property-grid-row-actions - $property-grid-row-actions-selector: ".property-grid-row-actions", - $property-grid-row-actions__window-selector: - ".property-grid-row-actions::part(window)", - $property-grid-row-actions__main-selector: - ".property-grid-row-actions::part(main)" -) { - // - - - - - - - - - - - - - - - - - - - - - - - - - - // icons that are present in more than one place - // - - - - - - - - - - - - - - - - - - - - - - - - - - - // caret collapsed - #{$property-grid-rowset-legend__caret-selector--collapsed}, - #{$property-grid-cell__caret-icon-selector--collapsed} { - @extend %tabular-grid__icon-size; - @extend %tabular-grid__icon-caret-collapsed--enabled; - &:hover { - @extend %tabular-grid__icon-caret-collapsed--hover; - } - &:active { - @extend %tabular-grid__icon-caret-collapsed--active; - } - } - - // caret expanded - #{$property-grid-rowset-legend__caret-selector--expanded}, - #{$property-grid-cell__caret-icon-selector--expanded} { - @extend %tabular-grid__icon-size; - @extend %tabular-grid__icon-caret-expanded--enabled; - &:hover { - @extend %tabular-grid__icon-caret-expanded--hover; - } - &:active { - @extend %tabular-grid__icon-caret-expanded--active; - } - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-property-grid - // - - - - - - - - - - - - - - - - - - - - - - #{$property-grid-selector} { - @extend %tabular-grid; - &:focus { - outline: none; - } - } - - #{$property-grid__main-selector} { - @extend %tabular-grid__main; - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-property-grid-column-set - // - - - - - - - - - - - - - - - - - - - - - - #{$property-grid-column-set} { - @extend %tabular-grid-column-set; - @extend %property-grid-column-set; - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-property-grid-column - // - - - - - - - - - - - - - - - - - - - - - - #{$property-grid-column__bar-selector} { - @extend %tabular-grid-column__bar; - } - - #{$property-grid-column__bar-resize-split-selector} { - @extend %tabular-grid-column__bar-resize-split; - &:hover { - @extend %tabular-grid-column__bar-resize-split--hover; - } - } - - // checkbox (same styles add cell checkbox) - #{$property-grid-column__selector-label-selector} { - @extend %tabular-grid-cell__selector-label; - } - - #{$property-grid-column__selector-selector} { - @extend %tabular-grid-cell__selector; - - &::before { - @extend %tabular-grid-cell__selector--before; - } - - &::after { - @extend %tabular-grid-cell__selector--after; - } - - &:focus { - outline: none; - } - } - - #{$property-grid-column__selector--checked-selector} { - &::after { - @extend %tabular-grid-cell__selector--after-checked; - } - } - - #{$property-grid-column__selector--indeterminate-selector} { - &::after { - @extend %tabular-grid-cell__selector--after-indeterminate; - } - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-property-grid-row - // - - - - - - - - - - - - - - - - - - - - - - // row - #{$property-grid-row-selector} { - @extend %tabular-grid-row; - } - #{$property-grid-row--focused-selector} { - @extend %tabular-grid-row--focused; - } - #{$property-grid-row--highlighted-selector} { - @extend %tabular-grid-row--highlighted; - } - #{$property-grid-row--selected-selector} { - @extend %tabular-grid-row--selected; - } - #{$property-grid-row--dragging-selector} { - @extend %tabular-grid-row--dragging; - } - - // row[some-state] > cell - #{$property-grid-row--highlighted__cell-selector} { - @extend %tabular-grid-row--highlighted__cell; - } - #{$property-grid-row--selected__cell-selector} { - @extend %tabular-grid-row--selected__cell; - } - - // Functional States - #{$property-grid__property-selector} { - @extend %property-grid__property; - } - #{$property-grid__property--readonly-selector} { - @extend %property-grid__property--readonly; - } - - #{$property-grid__value-selector} { - @extend %property-grid__value; - } - #{$property-grid__value--readonly-selector} { - @extend %property-grid__value--readonly; - } - #{$property-grid__value--edited-selector} { - @extend %property-grid__value--edited; - } - #{$property-grid__value--editing-selector} { - @extend %property-grid__value--editing; - } - #{$property-grid__value--editing-selector}:hover { - @extend %property-grid__value--editing-hover; - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-property-grid-rowset - // - - - - - - - - - - - - - - - - - - - - - - #{$property-grid-rowset-selector} { - @extend %tabular-grid-rowset; - } - #{$property-grid-rowset--collapsed__legend-selector} { - @extend %tabular-grid-rowset--collapsed__legend; - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-property-grid-rowset-legend - // - - - - - - - - - - - - - - - - - - - - - - #{$property-grid-rowset-legend-selector} { - @extend %tabular-grid-rowset-legend; - &:hover { - @extend %tabular-grid-rowset-legend--hover; - } - &:active { - @extend %tabular-grid-rowset-legend--active; - } - } - - #{$property-grid-rowset-legend__selector-label-selector} { - @extend %tabular-grid-rowset-legend__selector-label; - } - - #{$property-grid-rowset-legend__selector-selector} { - @extend %tabular-grid-rowset-legend__selector; - } - - #{$property-grid-rowset-legend__icon-selector} { - @extend %tabular-grid-rowset-legend__icon; - @extend %tabular-grid__icon-size; - --icon-path: var(--icon__gemini-tools_category-group_on-surface--enabled); - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-property-grid-cell - // - - - - - - - - - - - - - - - - - - - - - - #{$property-grid-cell-selector} { - @extend %tabular-grid-cell; - } - - #{$property-grid-cell--focused-selector} { - @extend %tabular-grid-cell--focused; - } - - #{$property-grid-cell--selected-selector} { - @extend %tabular-grid-cell--selected; - } - - // checkbox - #{$property-grid-cell__selector-label-selector} { - @extend %tabular-grid-cell__selector-label; - } - - #{$property-grid-cell__selector-selector} { - @extend %tabular-grid-cell__selector; - &::before { - @extend %tabular-grid-cell__selector--before; - } - - &::after { - @extend %tabular-grid-cell__selector--after; - } - - &:focus { - outline: none; - } - } - - #{$property-grid-cell__selector--checked-selector} { - &::after { - @extend %tabular-grid-cell__selector--after-checked; - } - } - - // Icons - #{$property-grid-cell__actions-icon-selector} { - inline-size: 100%; - @extend %tabular-grid__icon-size; - --icon-path: var( - --icon__gemini-tools_show-more-vertical_on-surface--enabled - ); - border: none; - } - - #{$property-grid-cell__drag-icon-selector} { - @extend %tabular-grid__icon-size; - --icon-path: var(--icon__navigation_drag_on-surface--enabled); - margin-inline-end: var(--grid-common__gap); - } - - #{$property-grid-cell__node-icon-selector} { - @extend %tabular-grid__icon-size; - @extend %tabular-grid__icon-node; - } - - #{$property-grid-cell__node-leaf-icon-selector} { - @extend %tabular-grid__icon-size; - @extend %tabular-grid__icon-node-leaf; - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-property-grid-row-actions - // - - - - - - - - - - - - - - - - - - - - - - #{$property-grid-row-actions-selector} { - &[show-on-row-hover]::part(window) { - margin-inline-end: var(--mer-spacing--xs); - } - } - - #{$property-grid-row-actions__window-selector} { - @extend %tabular-grid-row-actions__window; - } - - #{$property-grid-row-actions__main-selector} { - @extend %tabular-grid-row-actions__main; - } -} - -@mixin radio-group-tokens() { - // Css properties provided by the ch-radio-group-render - --ch-radio-group__radio-container-size: var(--control-tiny__size); - --ch-radio-group__radio-option-size: calc(var(--mer-spacing--2xs) * 1.5); -} - - -%radio-group { - @include radio-group-tokens(); - gap: var(--controls__container-row-gap); -} - -%radio-item { - @include label-gap-inline(); -} - -%radio__container { - border: var(--mer-form-input__border); - flex-shrink: 0; - - &--focus { - @include focus-outline(); - } - - &--disabled { - color: var(--borders-un-border-color__disabled); - } - - &--checked { - color: var(--mer-form-input-check__border-color); - } - - // Not implemented yet in the control - &--error { - background-color: var(--colors-Foundation-un-color__red--100); - color: var(--borders-un-border-color__error); - } -} - -%radio__label { - @extend %label-font; -} - -%radio__label-disabled { - @include label-color-disabled(); -} - -/// @group Radio Group -/// @param {String} $radio-group-selector [".radio-group"] - -/// @param {String} $radio-item-selector [".radio-group::part(radio-item)"] - -/// @param {String} $radio-item__container-selector [".radio-group::part(radio__container)"] - -/// @param {String} $radio-item__container--focus-selector [".radio-group::part(radio__container):focus-within"] - -/// @param {String} $radio-item__container--disabled-selector [".radio-group::part(radio__container disabled)"] - -/// @param {String} $radio-item__container--checked-selector [".radio-group::part(radio__container checked)"] - -/// @param {String} $radio-item__container--error-selector [".radio-group::part(radio__container error)"] - -/// @param {String} $radio-item__label [".radio-group::part(radio__label)"] - -/// @param {String} $radio-item__label--disabled-selector [".radio-group::part(radio__label disabled)"] - -/// @param {Boolean} $add--disabled [true] - -/// @param {Boolean} $add--error [true] - -@mixin radio-group( - $radio-group-selector: ".radio-group", - - $radio-item-selector: ".radio-group::part(radio-item)", - - $radio-item__container-selector: ".radio-group::part(radio__container)", - - $radio-item__container--focus-selector: - ".radio-group::part(radio__container):focus-within", - - $radio-item__container--disabled-selector: - ".radio-group::part(radio__container disabled)", - - $radio-item__container--checked-selector: - ".radio-group::part(radio__container checked)", - - $radio-item__container--error-selector: - ".radio-group::part(radio__container error)", - - $radio-item__label: ".radio-group::part(radio__label)", - - $radio-item__label--disabled-selector: - ".radio-group::part(radio__label disabled)", - - $add--disabled: true, - - $add--error: true -) { - #{$radio-group-selector} { - @extend %radio-group; - } - - #{$radio-item-selector} { - @extend %radio-item; - } - - #{$radio-item__container-selector} { - @extend %radio__container; - } - - #{$radio-item__container--focus-selector} { - @extend %radio__container--focus; - } - - @if $add--disabled { - #{$radio-item__container--disabled-selector} { - @extend %radio__container--disabled; - border-color: var(--mer-border-color__primary--disabled); - } - } - - #{$radio-item__container--checked-selector} { - @extend %radio__container--checked; - border-color: var(--mer-color__neutral-gray--300); - } - - @if $add--error { - #{$radio-item__container--error-selector} { - @extend %radio__container--error; - } - } - - @if $radio-item__label { - #{$radio-item__label} { - @extend %label-font; - } - } - - @if $add--disabled { - #{$radio-item__label--disabled-selector} { - @include label-color-disabled(); - } - } -} - -@mixin shortcuts-tokens() { - //tooltip - --shortcuts-tooltip__padding-inline-start: var(--mer-spacing--2xs); - - //key - --shortcuts-key__color: var(--mer-color__neutral-gray--900); - --shortcuts-key__background-color: var(--mer-color__message-red--600); - --shortcuts-key__border-radius: var(--mer-border__radius--md); - --shortcuts-key__padding: var(--mer-spacing--2xs); - - //slash - --shortcuts-slash__color: var(--mer-color__message-red--100); - --shortcuts-slash__padding: var(--mer-spacing--2xs); - - //element - --shortcuts-element__outline: var(--mer-border__width--md) dotted - var(--mer-color__tinted-yellow--60); - --shortcuts-element__outline-offset: -1px; -} - - -@mixin shortcuts() { - ch-shortcuts { - &::part(tooltip) { - display: flex; - padding-inline-start: var(--shortcuts-tooltip__padding-inline-start); - } - - &::part(key) { - color: var(--shortcuts-key__color); - background-color: var(--shortcuts-key__background-color); - border-radius: var(--shortcuts-key__border-radius); - padding: var(--shortcuts-key__padding); - @extend %body-regular-m; - } - - &::part(slash), - &::part(plus) { - color: var(--shortcuts-slash__color); - padding: var(--shortcuts-slash__padding); - @extend %body-regular-m; - } - - &::part(element) { - outline: var(--shortcuts-element__outline); - outline-offset: var(--shortcuts-element__outline-offset); - } - } -} - -@include button-primary( - $selector: "%segmented-control-item--selected", - $add--disabled: false, - $add--destructive: false -); - -%segmented-control-item-base { - padding-inline: var(--mer-spacing--md); - border-radius: unset; -} - -@include button-secondary( - $selector: "%segmented-control-item--unselected", - $add--disabled: false, - $add--destructive: false -); - -%segmented-control-item--first { - border-start-start-radius: var(--mer-border__radius--xs); - border-end-start-radius: var(--mer-border__radius--xs); - border-inline-end-width: 0; -} - -%segmented-control-item--between { - border-inline-end-width: 0; -} - -%segmented-control-item--last { - border-start-end-radius: var(--mer-border__radius--xs); - border-end-end-radius: var(--mer-border__radius--xs); - border-inline-end-width: 1px; -} - -/// @group Segmented Control -/// @param {String} $selected-item-selector [".segmented-control-item::part(selected)"] - -/// @param {String} $selected-disabled-item-selector [".segmented-control-item::part(selected disabled)"] - -/// @param {String} $unselected-item-selector [".segmented-control-item::part(unselected)"] - -/// @param {String} $unselected-disabled-item-selector [".segmented-control-item::part(unselected disabled)"] - -/// @param {String} $first-item-selector [".segmented-control-item::part(first)"] - -/// @param {String} $between-item-selector [".segmented-control-item::part(between)"] - -/// @param {String} $last-item-selector [".segmented-control-item::part(last)"] - -/// @param {Boolean} $add--disabled [true] - -@mixin segmented-control( - $selected-item-selector: ".segmented-control-item::part(selected)", - - $selected-disabled-item-selector: - ".segmented-control-item::part(selected disabled)", - - $unselected-item-selector: ".segmented-control-item::part(unselected)", - - $unselected-disabled-item-selector: - ".segmented-control-item::part(unselected disabled)", - - $first-item-selector: ".segmented-control-item::part(first)", - - $between-item-selector: ".segmented-control-item::part(between)", - - $last-item-selector: ".segmented-control-item::part(last)", - - $add--disabled: true -) { - #{$selected-item-selector}, - #{$unselected-item-selector} { - @extend %segmented-control-item-base; - } - - @include button-primary( - $selector: #{$selected-item-selector}, - $add--disabled: false - ); - - @include button-secondary( - $selector: #{$unselected-item-selector}, - $add--disabled: false - ); - - @if $add--disabled { - #{$selected-disabled-item-selector} { - @extend %button-primary--disabled; - } - - #{$unselected-disabled-item-selector} { - @extend %button-secondary--disabled; - } - } - - #{$first-item-selector} { - @extend %segmented-control-item--first; - } - - #{$between-item-selector} { - @extend %segmented-control-item--between; - } - - #{$last-item-selector} { - @extend %segmented-control-item--last; - } -} - -%sidebar { - // chameleon tokens (do not modify names) - --ch-sidebar-inline-size--collapsed: 42px; - --ch-sidebar__chevron-size: 24px; - --ch-sidebar__chevron-image-size: var(--mer-spacing--sm); // 12px - --ch-sidebar__chevron-background-image: var( - --icon__system_arrow-right_primary--enabled - ); - - // spacing body tokens - --spacing-body-block-start: var(--mer-spacing--sm); - --spacing-body-block-end: var(--mer-spacing--sm); - --spacing-body-inline-start: var(--mer-spacing--sm); - --spacing-body-inline-end: var(--mer-spacing--sm); - - // sidebar tokens - --sidebar-button-border-width: var(--mer-border__width--sm); - --sidebar-button-margin: calc( - ( - var(--ch-sidebar-inline-size--collapsed) - - ( - var(--ch-sidebar__chevron-size) + var(--sidebar-button-border-width) * - 2 - ) - ) / 2 - ); - - // TODO: Remove this background-color. The elevation must determine the color - background-color: var(--mer-color__neutral-gray--800); - overflow: hidden; - - // Collapsed Hidden - - &-collapsed-hidden { - --ch-sidebar-inline-size--collapsed: 0; - } - - // With Motion - - &-with-motion { - &.ch-sidebar--collapsed { - // WA to win over user "inline-size" property. This allows the transition. - inline-size: var(--ch-sidebar-inline-size--collapsed) !important; - } - transition: var(--mer-timing--super-fast) ease inline-size; - - &--button-before { - transition: var(--mer-timing--super-fast) ease transform; - } - } - - // - - - - - - - - - // Button - // - - - - - - - - - - &-expand-button { - background-color: var(--mer-surface__elevation--02); - border: var(--sidebar-button-border-width) solid - var(--mer-border-color__on-elevation--01); - color: var(--mer-icon__neutral); - inline-size: calc( - var(--ch-sidebar__chevron-size) + var(--sidebar-button-border-width) * 2 - ); - margin: var(--sidebar-button-margin); - - &--before { - transform: rotate(180deg); - } - - &--hover { - background-color: var(--mer-surface__elevation--03); - border-color: var(--mer-border-color__on-elevation--02); - color: var(--mer-icon__highlighted); - } - - &--active { - background-color: var(--mer-surface__elevation--01); - border-color: var(--mer-border-color__on-elevation--01); - } - - &--focus-visible { - @include focus-outline(); - } - - &--collapsed { - &-before { - transform: rotate(0); - } - } - } -} - -@mixin sidebar( - $sidebar-selector: ".sidebar", - $sidebar-collapsed-hidden-selector: ".sidebar-collapsed-hidden", - $sidebar-with-motion-selector: ".sidebar-with-motion", - $sidebar-with-motion-button-selector: - ".sidebar-with-motion::part(expand-button)", - $expand-button-selector: ".sidebar::part(expand-button)", - $expand-button-collapsed-selector: ".sidebar::part(expand-button collapsed)" -) { - #{$sidebar-selector} { - @extend %sidebar; - } - - // Collapsed hidden - #{$sidebar-collapsed-hidden-selector} { - @extend %sidebar-collapsed-hidden; - } - - // With motion - #{$sidebar-with-motion-selector} { - @extend %sidebar-with-motion; - } - #{$sidebar-with-motion-button-selector}::before { - @extend %sidebar-with-motion--button-before; - } - - // - - - - - - - - - // Button - // - - - - - - - - - - // enabled - #{$expand-button-selector} { - @extend %sidebar-expand-button; - } - #{$expand-button-selector}::before { - @extend %sidebar-expand-button--before; - } - // hover - #{$expand-button-selector}:hover { - @extend %sidebar-expand-button--hover; - } - // active - #{$expand-button-selector}:active { - @extend %sidebar-expand-button--active; - } - - #{$expand-button-selector}:focus-visible { - @extend %sidebar-expand-button--focus-visible; - } - - // collapsed - #{$expand-button-collapsed-selector} { - @extend %sidebar-expand-button--collapsed; - } - #{$expand-button-collapsed-selector}::before { - @extend %sidebar-expand-button--collapsed-before; - } -} - -%slider__slider { - // - - - - - - - - - - - - - - - - - - - - - // Chameleon (do not change the name) - // - - - - - - - - - - - - - - - - - - - - - --ch-slider-track-block-size: var(--slider-track__block-size); - - --ch-slider-track__selected-background-color: var( - --slider-track__bg-color--selected - ); - - --ch-slider-track__unselected-background-color: var( - --slider-track__bg-color--unselected - ); - - --ch-slider-thumb-background-color: var(--slider-thumb__bg-color); - - --ch-slider-thumb-size: var(--slider-thumb__size); - - // - - - - - - - - - - - - - - - - - - - - - // Custom Properties - // - - - - - - - - - - - - - - - - - - - - - // track - --slider-track__block-size: var(--mer-spacing--2xs); - --slider-track__bg-color--selected: var(--mer-color__primary--200); - --slider-track__bg-color--unselected: var(--mer-color__neutral-gray--650); - --slider-track__bg-color--selected-disabled: var( - --mer-accent__primary--disabled - ); - --slider-track__bg-color--unselected-disabled: var( - --mer-color__neutral-gray--450 - ); - // thumb - --slider-thumb__bg-color: var(--mer-color__neutral-gray--200); - --slider-thumb__size: var(--mer-spacing--sm); - - &--disabled { - --ch-slider-track__selected-background-color: var( - --slider-track__bg-color--selected-disabled - ); - --ch-slider-track__unselected-background-color: var( - --slider-track__bg-color--unselected-disabled - ); - } -} - -%slider__track { - border-radius: calc(var(--ch-slider-track-block-size) / 2); -} - -%slider__thumb { - &--hover { - --ch-slider-thumb-background-color: var(--mer-color__primary--600); - } - - &--active-focus { - --ch-slider-thumb-background-color: var(--mer-color__primary--600); - @include focus-outline(); - } -} - -/// @group Slider -/// @param {String} $slider-selector [".slider"] - -/// @param {String} $track-selector [".slider::part(track)"] - -/// @param {String} $thumb-selector [".slider::part(thumb)"] - -/// @param {String} $thumb-focus-selector [".slider:focus-visible::part(thumb focus)"] - -/// @example scss - Default case: Using the `.slider` class. -/// SCSS: -/// @include slider(); -/// -/// @example markup -/// HTML/render: -/// -/// -/// @example scss - Advanced case: Style a `ch-slider` control inside a Shadow Root. -/// SCSS: -/// my-component-with-shadow { -/// @include slider( -/// $slider-selector: "&::part(slider)", -/// $track-selector: "&::part(slider__track)", -/// $thumb-selector: "&::part(slider__thumb)", -/// $thumb-focus-selector: "&::part(slider__thumb focus)" -/// ); -/// } -/// -/// @example markup -/// HTML/render: -/// -/// #shadow root (open) -/// | -/// | -/// -/// -@mixin slider( - $slider-selector: ".slider", - $track-selector: ".slider::part(track)", - $thumb-active-selector: ".slider:active::part(thumb)", - $thumb-focus-selector: ".slider:focus::part(thumb)" -) { - #{$slider-selector} { - @extend %slider__slider; - - &:hover { - @extend %slider__thumb--hover; - } - } - - // TODO: TEST THIS - #{$slider-selector}:disabled { - @extend %slider__slider--disabled; - } - - #{$track-selector} { - @extend %slider__track; - } - - #{$thumb-active-selector} { - @extend %slider__thumb--active-focus; - } - - #{$thumb-focus-selector} { - @extend %slider__thumb--active-focus; - } -} - -%tab { - --ch-tab-close-button__background-image-size: var(--mer-icon__size--md); - --ch-tab-close-button__image-size: var(--mer-spacing--md); - --ch-tab-image-size: var(--mer-icon__box--md); - - --spacing-body-block-start: var(--mer-spacing--md); - --spacing-body-block-end: var(--mer-spacing--md); - --spacing-body-inline-start: var(--mer-spacing--md); - --spacing-body-inline-end: var(--mer-spacing--md); - - @include items-container-border(); - @include items-container-colors(); -} - -%tab-button-block { - @include tab-button-colors-enabled(); - @include tab-button-gap(); - @extend %body-regular-s; - - @include tab-button-padding-inline(); - border-block: var(--tab-caption__border-width) - var(--tab-caption__border-style) transparent; - - // TODO: Remove this mixin - // @include tab-button-border-block-end(); -} - -%tab-button-inline { - @include tab-button-colors-enabled(); - @include tab-button-gap(); - @extend %body-regular-s; - - @include tab-button-padding-stack(); - border-inline: var(--tab-caption__border-width) - var(--tab-caption__border-style) transparent; - - // TODO: Remove this mixin - // @include tab-button-border-block(); -} - -// Block Start -%tab-button-block-start--hover { - @include tab-button-colors-hover(); -} - -%tab-button-block-start--active { - // TODO - @include tab-button-colors-hover(); -} - -%tab-button-block-start--selected { - @include tab-button-colors-selected-inline(); - border-block-end-color: var(--tab-caption__border-color); -} - -// Block End -%tab-button-block-end--hover { - @include tab-button-colors-hover(); -} - -%tab-button-block-end--active { - // TODO - @include tab-button-colors-hover(); -} - -%tab-button-block-end--selected { - @include tab-button-colors-selected-inline(); - border-block-start-color: var(--tab-caption__border-color); -} - -// Inline Start -%tab-button-inline-start--hover { - @include tab-button-colors-hover(); -} - -%tab-button-inline-start--active { - // TODO - @include tab-button-colors-hover(); -} - -%tab-button-inline-start--selected { - @include tab-button-colors-selected-stack(); - border-inline-end-color: var(--tab-caption__border-color); -} - -// Inline End -%tab-button-inline-end--hover { - @include tab-button-colors-hover(); -} - -%tab-button-inline-end--active { - // TODO - @include tab-button-colors-hover(); -} - -%tab-button-inline-end--selected { - @include tab-button-colors-selected-stack(); - border-inline-start-color: var(--tab-caption__border-color); -} - -// Focus -%tab-button--focus-visible { - @include focus-outline(); -} - -// Disabled -%tab-button--disabled { - @include tab-button-colors-disabled(); - --tab-button__border-width: 0; -} - -%tab-button-close-button { - margin-inline-start: 4px; - border-radius: 4px; - - &--hover { - background-color: var(--mer-color__tinted-primary--20); - } - - &--focus-visible { - @include focus-outline(); - } -} - -%tab-list { - &--block-start { - border-block-end: var(--items-container__border-width) - var(--items-container__border-style) var(--items-container__border-color); - } - - &--block-end { - border-block-start: var(--items-container__border-width) - var(--items-container__border-style) var(--items-container__border-color); - } - - &--inline-start { - border-inline-end: var(--items-container__border-width) - var(--items-container__border-style) var(--items-container__border-color); - } - - &--inline-end { - border-inline-start: var(--items-container__border-width) - var(--items-container__border-style) var(--items-container__border-color); - } -} - -@mixin tab( - $tab-selector: ".tab", - - $tab-button-block-start-selector: ".tab::part(tab block-start)", - $tab-button-block-start--selected-selector: - ".tab::part(tab block-start selected)", - $tab-button-block-start--disabled-selector: - ".tab::part(tab block-start disabled)", - - $tab-button-block-end-selector: ".tab::part(tab block-end)", - $tab-button-block-end--selected-selector: ".tab::part(tab block-end selected)", - $tab-button-block-end--disabled-selector: ".tab::part(tab block-end disabled)", - - $tab-button-inline-start-selector: ".tab::part(tab inline-start)", - $tab-button-inline-start--selected-selector: - ".tab::part(tab inline-start selected)", - $tab-button-inline-start--disabled-selector: - ".tab::part(tab inline-start disabled)", - - $tab-button-inline-end-selector: ".tab::part(tab inline-end)", - $tab-button-inline-end--selected-selector: - ".tab::part(tab inline-end selected)", - $tab-button-inline-end--disabled-selector: - ".tab::part(tab inline-end disabled)", - - $tab-button--disabled-selector: ".tab::part(tab disabled)", - $tab-button-close-button-selector: ".tab::part(close-button)", - - $tab-list--block-start-selector: ".tab::part(tab-list block-start)", - $tab-list--block-end-selector: ".tab::part(tab-list block-end)", - $tab-list--inline-start-selector: ".tab::part(tab-list inline-start)", - $tab-list--inline-end-selector: ".tab::part(tab-list inline-end)", - - $add--tab: true, - $add--tab-button-block-start: true, - $add--tab-button-block-end: true, - $add--tab-button-inline-start: true, - $add--tab-button-inline-end: true, - $add--tab-list: true, - $add--disabled: true -) { - @if $add--tab { - #{$tab-selector} { - @extend %tab; - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Tab Button (block-start) - // - - - - - - - - - - - - - - - - - - - - - @if ($add--tab-button-block-start) { - #{$tab-button-block-start-selector} { - @extend %tab-button-block; - - &:hover { - @extend %tab-button-block-start--hover; - } - - &:active { - @extend %tab-button-block-start--active; - } - - &:focus-visible { - @extend %tab-button--focus-visible; - } - } - - #{$tab-button-block-start--selected-selector} { - @extend %tab-button-block-start--selected; - } - - @if $add--disabled { - #{$tab-button-block-start--disabled-selector} { - @extend %tab-button--disabled; - } - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Tab Button (block-end) - // - - - - - - - - - - - - - - - - - - - - - @if ($add--tab-button-block-end) { - #{$tab-button-block-end-selector} { - @extend %tab-button-block; - - &:hover { - @extend %tab-button-block-end--hover; - } - - &:active { - @extend %tab-button-block-end--active; - } - - &:focus-visible { - @extend %tab-button--focus-visible; - } - } - - #{$tab-button-block-end--selected-selector} { - @extend %tab-button-block-end--selected; - } - - @if $add--disabled { - #{$tab-button-block-end--disabled-selector} { - @extend %tab-button--disabled; - } - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Tab Button (inline-start) - // - - - - - - - - - - - - - - - - - - - - - @if ($add--tab-button-inline-start) { - #{$tab-button-inline-start-selector} { - @extend %tab-button-inline; - - &:hover { - @extend %tab-button-inline-start--hover; - } - - &:active { - @extend %tab-button-inline-start--active; - } - - &:focus-visible { - @extend %tab-button--focus-visible; - } - } - - #{$tab-button-inline-start--selected-selector} { - @extend %tab-button-inline-start--selected; - } - - @if $add--disabled { - #{$tab-button-inline-start--disabled-selector} { - @extend %tab-button--disabled; - } - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Tab Button (inline-end) - // - - - - - - - - - - - - - - - - - - - - - @if ($add--tab-button-inline-end) { - #{$tab-button-inline-end-selector} { - @extend %tab-button-inline; - - &:hover { - @extend %tab-button-inline-end--hover; - } - - &:active { - @extend %tab-button-inline-end--active; - } - - &:focus-visible { - @extend %tab-button--focus-visible; - } - } - - #{$tab-button-inline-end--selected-selector} { - @extend %tab-button-inline-end--selected; - } - - @if $add--disabled { - #{$tab-button-inline-end--disabled-selector} { - @extend %tab-button--disabled; - } - } - } - - #{$tab-button-close-button-selector} { - @extend %tab-button-close-button; - - &:focus-visible { - @extend %tab-button-close-button--focus-visible; - } - } - - #{$tab-button-close-button-selector} { - @extend %tab-button-close-button; - - &:hover { - @extend %tab-button-close-button--hover; - } - - &:focus-visible { - @extend %tab-button-close-button--focus-visible; - } - } - - @if $add--tab-list { - #{$tab-list--block-start-selector} { - @extend %tab-list--block-start; - } - - #{$tab-list--block-end-selector} { - @extend %tab-list--block-end; - } - - #{$tab-list--inline-start-selector} { - @extend %tab-list--inline-start; - } - - #{$tab-list--inline-end-selector} { - @extend %tab-list--inline-end; - } - } -} - -@mixin tabular-grid-row-tokens() { - /* This style-sheet applies for: - - ch-grid-row - - ch-grid-rowset - - ch-grid-rowset-legend - */ - - --grid-rowset-legend__font-size: var(--grid-base__font-size); - --grid-rowset-legend__color: var(--grid-base__color); - --grid-rowset-legend__color--hover: var(--item__color--hover); - --grid-rowset-legend__padding-inline: var(--item__padding-inline); - --grid-rowset-legend__padding-block: var(--mer-spacing--3xs); - --grid-rowset-legend__indent: var(--mer-spacing--md); - - // ======================================= - // ch-grid-rowset-legend - // ======================================= - - // - - - - - - - - - - - - - - - - - - - - - // Part "caret" - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Part "selector-label" - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Part "selector" - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Part "icon" - // - - - - - - - - - - - - - - - - - - - - - - // ======================================= - // ch-grid-row-actions - // ======================================= - - // - - - - - - - - - - - - - - - - - - - - - // Part "mask" - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Part "window" - // - - - - - - - - - - - - - - - - - - - - - - --grid-row-actions-show-on-row-hover__margin-inline-end: var( - --mer-spacing--xs - ); - - // - - - - - - - - - - - - - - - - - - - - - // Part "main" - // - - - - - - - - - - - - - - - - - - - - -} - -@mixin tabular-grid-column-tokens() { - // ======================================= - // Part "bar" - // ======================================= - - --grid-column-bar__gap: var(--mer-spacing--xs); - --grid-column-bar__bg-color: var(--grid-base__bg-color); - --grid-column-bar__color: var(--mer-text__bright); - --grid-column-bar__padding-inline: var(--mer-spacing--xs); - --grid-column-bar__padding-block: var(--mer-spacing--xs); - --grid-column-bar__font-size: var(--grid-base__font-size); - - // ======================================= - // Part "bar-selector" - // ======================================= - - // - - - - - - - - - - - - - - - - - - - - - // Part "selector-label" - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Part "selector" - // - - - - - - - - - - - - - - - - - - - - - - // ======================================= - // Part "bar-name" - // ======================================= - - // - - - - - - - - - - - - - - - - - - - - - // Part "bar-name-icon" - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Part "bar-name-text" - // - - - - - - - - - - - - - - - - - - - - - - // ======================================= - // Part "bar-sort" - // ======================================= - - // - - - - - - - - - - - - - - - - - - - - - // Part "bar-sort-ascending" - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Part "bar-sort-descending" - // - - - - - - - - - - - - - - - - - - - - - - // ======================================= - // Part "bar-settings" - // ======================================= - - // - - - - - - - - - - - - - - - - - - - - - // Part "bar-settings-button" - // - - - - - - - - - - - - - - - - - - - - - - // ======================================= - // Part "bar-resize" - // ======================================= - - // - - - - - - - - - - - - - - - - - - - - - // Part "bar-resize-split" - // - - - - - - - - - - - - - - - - - - - - - - --grid-bar-resize-split__inline-size: var(--mer-spacing--2xs); - --grid-bar-resize-split__bg-color: transparent; - --grid-bar-resize-split__border-inline-end: var(--mer-border__width--sm) solid - transparent; - --grid-bar-resize-split__border-inline-end-color--hover: var( - --grid-column-bar__color - ); -} - -@mixin tabular-grid-cell-tokens() { - // note: grid-cell is considered an "item", and because of this, the styles are - // applied through "item" @mixins. This ensures consistency across all system - // list items. - - // - - - - - - - - - - - - - - - - - - - - - // Part "drag-icon" - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Part "selector-label" - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Part "selector" - // - - - - - - - - - - - - - - - - - - - - -} - -// --checkbox-check__color: var(--mer-border-color__neutral--active); - -// In Mercury, some controls use different font styles than the tabular grid. -// When these controls are inside a tabular grid, they should inherit its styles. -// This ensures visual consistency across the interface. Add relevant selectors -// below, then import this file where needed and apply the selector variable. - -// ie. for the combo-box: @mixin combo-box($combo-box-selector: $combo-box-selector, ... - -$combo-box-selector: ".combo-box"; -$input-selector: ".input"; - -$tree-controls: ($combo-box-selector, $input-selector); - - -// - - - - - - - - - - - - - - - - - - - - -// general settings -// - - - - - - - - - - - - - - - - - - - - - -%tabular-grid-font-size { - @extend %body-regular-s; -} - -%tabular-grid__icon { - &-size { - @extend %icon-size--md; - margin-inline-end: var(--grid-common__gap); - flex-shrink: 0; // WA - } - &-caret { - // collapsed - &-collapsed--enabled { - --icon-path: var(--icon__gemini-tools_add_neutral--enabled); - cursor: pointer; - } - &-collapsed--hover { - --icon-path: var(--icon__gemini-tools_add_neutral--hover); - } - &-collapsed--active { - --icon-path: var(--icon__gemini-tools_add_neutral--active); - } - // expanded - &-expanded--enabled { - --icon-path: var(--icon__gemini-tools_minus_neutral--enabled); - cursor: pointer; - } - &-expanded--hover { - --icon-path: var(--icon__gemini-tools_minus_neutral--hover); - } - &-expanded--active { - --icon-path: var(--icon__gemini-tools_minus_neutral--active); - } - } - &-node { - --icon-path: var(--icon__gemini-tools_folder_on-surface--enabled); - display: none; // an additional class is required to be displayed. - &-visible { - display: block; - } - &-leaf { - --icon-path: var(--icon__gemini-tools_file_on-surface--enabled); - display: none; // an additional class is required to be displayed. - &-visible { - display: block; - } - } - } -} - -// - - - - - - - - - - - - - - - - - - - - -// ch-tabular-grid -// - - - - - - - - - - - - - - - - - - - - - -%tabular-grid { - --grid-bar-resize-split__bg-color: transparent; - --focus__outline-offset: -2px; // WA since the box-shadow hides the outline-block-end and outline-inline-end. - --grid-label__gap: var(--mer-spacing--xs); - --grid-common__gap: var(--mer-spacing--xs); - max-block-size: 100%; // TODO: This reset must be placed in the control implementation. This property is a WA. - - @extend %tabular-grid-font-size; - - --indent: 16px; - @include items-container-colors(); - - --item__border-color--enabled: var(--mer-surface__elevation--01); - @include tabular-grid-row-tokens(); - @include tabular-grid-column-tokens(); - @include tabular-grid-cell-tokens(); -} - -%tabular-grid__main { -} - -// - - - - - - - - - - - - - - - - - - - - -// ch-tabular-grid-column-set -// - - - - - - - - - - - - - - - - - - - - -%tabular-grid-column-set { - border-block-end: var(--grid-cell__border); - - &--hover { - --grid-bar-resize-split__bg-color: var(--mer-surface__elevation--03); - } -} - -// - - - - - - - - - - - - - - - - - - - - -// ch-tabular-grid-column -// - - - - - - - - - - - - - - - - - - - - - -%tabular-grid-column { - // should equal the tabular-grid background-color - background-color: var(--items-container__bg-color); - @extend %body-semi-bold-s; -} - -%tabular-grid-column__bar { - --grid-label__gap: 0; - @include grid-row-colors-enabled(); - @include grid-cell-padding-inline-block(); - gap: var(--grid-common__gap); - width: 100%; - - &--hover { - --grid-bar-resize-split__bg-color: var(--mer-accent__primary); - } -} - -%tabular-grid-column__bar-resize-split { - background-color: var(--grid-bar-resize-split__bg-color); - inline-size: var(--grid-bar-resize-split__inline-size); - &--hover { - --grid-bar-resize-split__bg-color: var(--mer-accent__primary--hover); - } - &--active { - --grid-bar-resize-split__bg-color: var(--mer-accent__primary--active); - } -} - -// - - - - - - - - - - - - - - - - - - - - -// ch-tabular-grid-row -// - - - - - - - - - - - - - - - - - - - - - -// no styles on ch-tabular-grid-row, since it has "display:contents" -%tabular-grid-row { - &--focused { - } - &--highlighted { - &__cell { - @include grid-row-colors-highlighted(); - } - } - &--selected { - &__cell { - @include grid-row-colors-selected(); - } - } - &--dragging { - @include grid-row-dragging(); - } -} - -// - - - - - - - - - - - - - - - - - - - - -// ch-tabular-grid-rowset -// - - - - - - - - - - - - - - - - - - - - - -%tabular-grid-rowset { - &--collapsed { - &__legend { - border-block-end: var(--grid-cell__border); - } - } -} - -// - - - - - - - - - - - - - - - - - - - - -// ch-tabular-grid-rowset-legend -// - - - - - - - - - - - - - - - - - - - - - -%tabular-grid-rowset-legend { - @include grid-rowset-legend-colors-enabled(); - @include grid-rowset-legend-padding-block(); - display: flex; - align-items: center; - cursor: pointer; - padding-inline-start: var(--grid-common__gap); - box-shadow: calc(var(--indent) * (var(--level) - 1) * -1) 0px 0px 0px - var(--grid-rowset-legend__bg-color); - &--hover { - @include grid-rowset-legend-colors-hover(); - } - &--active { - @include grid-rowset-legend-colors-active(); - } -} - -// Parts -// TODO -%tabular-grid-rowset-legend__caret { - @extend %tabular-grid__icon-size; - --icon-path: var(--icon__gemini-tools_minus_on-surface--enabled); -} -%tabular-grid-rowset-legend__selector-label { -} -%tabular-grid-rowset-legend__selector { -} -%tabular-grid-rowset-legend__icon { -} - -// no styles on ch-tabular-grid-row, since it has "display:contents" -%tabular-grid-row { -} - -// - - - - - - - - - - - - - - - - - - - - -// ch-tabular-grid-cell -// - - - - - - - - - - - - - - - - - - - - - -%tabular-grid-cell { - @include grid-cell-border-inline-block(); - @include grid-cell-padding-inline-block(); - @include grid-row-colors-enabled(); - --item__bg-color: var(--items-container__bg-color); - - // TODO: Check how controls font size's should be redefined inside tabular-grid cell, using the new font styles classes. - - border: 0; // WA - - // make controls inherit tabular-grid font styles - @each $control-selector in $tree-controls { - > #{$control-selector} { - @extend %tabular-grid-font-size; - } - } - - &--focused { - @include focus-outline(); - } - - &--selected { - // to be defined by design - } - - // Alignment - &--align-block-start { - align-items: flex-start; - } - &--align-block-center { - align-items: center; - } - &--align-block-end { - align-items: flex-end; - } - &--align-inline-start { - justify-content: flex-start; - } - &--align-inline-center { - justify-content: center; - } - &--align-inline-end { - justify-content: flex-end; - } -} - -%tabular-grid-cell__selector-label { - margin-inline-end: var(--grid-label__gap); - block-size: var(--control-tiny__size); - inline-size: var(--control-tiny__size); -} - -%tabular-grid-cell__selector { - position: relative; - margin: 0; - width: 0; - height: 0; -} - -// Begin Checkbox - -%tabular-grid-cell__selector--before { - content: ""; - display: inline-block; - width: var(--control-tiny__size); - height: var(--control-tiny__size); - border: var(--mer-form-input__border); - border-radius: var(--control-tiny__border-radius); - box-sizing: border-box; -} - -%tabular-grid-cell__selector--after { - position: absolute; - content: ""; - display: inline-block; - border-color: var(--mer-form-input-check__border-color); - top: calc(var(--control-tiny__size) / 4); - left: calc(var(--control-tiny__size) / 4); -} - -%tabular-grid-cell__selector--after-checked { - inline-size: calc(var(--control-tiny__size) / 2); - block-size: calc(var(--control-tiny__size) / 2); - background-color: currentColor; - pointer-events: none; - -webkit-mask: no-repeat center / 100% - var(--mer-checkbox__option-checked-image); - color: var(--mer-form-input-check__border-color); -} - -%tabular-grid-cell__selector--after-indeterminate { - inline-size: 8px; - block-size: var(--mer-form-input-check__border-width); - border-radius: 2px; - background-color: var(--mer-form-input-check__border-color); - top: calc( - var(--control-tiny__size) / 2 - var(--mer-form-input-check__border-width) / - 2 - ); -} - -// End Checkbox - -// - - - - - - - - - - - - - - - - - - - - -// ch-tabular-grid-row-actions -// - - - - - - - - - - - - - - - - - - - - - -%tabular-grid-row-actions { -} -%tabular-grid-row-actions__window { - @extend %window-styles; -} -%tabular-grid-row-actions__main { - display: flex; - flex-direction: column; - gap: var(--window__gap); -} - -/// @group Grid -// ch-tabular-grid -/// @param {String} $tabular-grid-selector [".tabular-grid"] - -/// @param {String} $tabular-grid__main-selector [".tabular-grid::part(main)"] - -// ch-tabular-grid-column-set -/// @param {String} $tabular-grid-column-set [".tabular-grid-column-set"] - -// ch-tabular-grid-column -/// @param {String} $tabular-grid-column-selector [".tabular-grid-column"] - -/// @param {String} $tabular-grid-column__bar-selector [".tabular-grid-column::part(bar)"] - -/// @param {String} $tabular-grid-column__bar-resize-split-selector [".tabular-grid-column::part(bar-resize-split)"] - -/// @param {String} $tabular-grid-column__selector-label-selector [".tabular-grid-column::part(selector-label)"] - -/// @param {String} $tabular-grid-column__selector-selector [".tabular-grid-column::part(selector)"] - -/// @param {String} $tabular-grid-column__selector--checked-selector [".tabular-grid-column::part(selector checked)"] - -/// @param {String} $tabular-grid-column__selector--indeterminate-selector [".tabular-grid-column::part(selector indeterminate)"] - -// ch-tabular-grid-row -/// @param {String} $tabular-grid-row-selector [".tabular-grid-row"] - -/// @param {String} $tabular-grid-row--focused-selector [".tabular-grid-row[focused]"] - -/// @param {String} $tabular-grid-row--highlighted-selector [".tabular-grid-row[highlighted]"] - -/// @param {String} $tabular-grid-row--selected-selector [".tabular-grid-row[selected]"] - -/// @param {String} $tabular-grid-row--dragging-selector [".tabular-grid-row[dragging]"] - -/// @param {String} $tabular-grid-row--highlighted__cell-selector [".tabular-grid-row[highlighted] > .tabular-grid-cell"] - -// ch-tabular-grid-row > cell -/// @param {String} $tabular-grid-row--selected__cell-selector [".tabular-grid-row[selected] > .tabular-grid-cell"] - -// ch-tabular-grid-rowset -/// @param {String} $tabular-grid-rowset-selector [".tabular-grid-rowset"] - -/// @param {String} $tabular-grid-rowset--collapsed__legend-selector [".tabular-grid-rowset[collapsed] > .tabular-grid-rowset-legend"] - -// ch-tabular-grid-rowset-legend -/// @param {String} $tabular-grid-rowset-legend-selector [".tabular-grid-rowset-legend"] - -/// @param {String} $tabular-grid-rowset-legend__caret-selector--collapsed [".tabular-grid-rowset[collapsed] > .tabular-grid-rowset-legend::part(caret)"] - -/// @param {String} $tabular-grid-rowset-legend__caret-selector--expanded [".tabular-grid-rowset > .tabular-grid-rowset-legend::part(caret)"] - -/// @param {String} $tabular-grid-rowset-legend__selector-label-selector [".tabular-grid-rowset-legend::part(selector-label)"] - -/// @param {String} $tabular-grid-rowset-legend__selector-selector [".tabular-grid-rowset-legend::part(selector)"] - -/// @param {String} $tabular-grid-rowset-legend__icon-selector [".tabular-grid-rowset-legend::part(icon)"] - -// ch-tabular-grid-cell -/// @param {String} $tabular-grid-cell-selector [".tabular-grid-cell"] - -/// @param {String} $tabular-grid-cell--focused-selector [".tabular-grid-cell[focused]"] - -/// @param {String} $tabular-grid-cell--selected-selector [".tabular-grid-cell[selected]"] - -/// @param {String} $tabular-grid-cell__selector-label-selector [".tabular-grid-cell::part(selector-label)"] - -/// @param {String} $tabular-grid-cell__selector-selector [".tabular-grid-cell::part(selector)"] - -/// @param {String} $tabular-grid-cell__selector--checked-selector [".tabular-grid-cell::part(selector checked)"] - -// ch-tabular-grid-cell (icons) -/// @param {String} $tabular-grid-cell__actions-icon-selector [".tabular-grid-cell::part(actions-icon)"] - -/// @param {String} $tabular-grid-cell__caret-icon-selector--collapsed [".tabular-grid-row:is( [collapsed], [leaf="false"]:not(:has(> .tabular-grid-rowset)) ) > .tabular-grid-cell::part(caret)"] - -/// @param {String} $tabular-grid-cell__caret-icon-selector--expanded [".tabular-grid-row > .tabular-grid-cell::part(caret)"] - -/// @param {String} $tabular-grid-cell__drag-icon-selector [".tabular-grid-cell::part(drag-icon)"] - -/// @param {String} $tabular-grid-cell__node-icon-selector [".tabular-grid-row:has(> .tabular-grid-rowset) > .tabular-grid-cell::part(node-icon)"] - -/// @param {String} $tabular-grid-cell__node-leaf-icon-selector [".tabular-grid-cell::part(node-icon)"] - -// ch-tabular-grid-cell (alignment) -/// @param {String} $tabular-grid-align-cells-block-start-selector [".tabular-grid-align-cells-block-start .tabular-grid-cell"] - -/// @param {String} $tabular-grid-align-cells-block-center-selector [".tabular-grid-align-cells-block-center .tabular-grid-cell"] - -/// @param {String} $tabular-grid-align-cells-block-end-selector [".tabular-grid-align-cells-block-end .tabular-grid-cell"] - -/// @param {String} $tabular-grid-align-cells-inline-start-selector [".tabular-grid-align-cells-inline-start .tabular-grid-cell"] - -/// @param {String} $tabular-grid-align-cells-inline-center-selector [".tabular-grid-align-cells-inline-center .tabular-grid-cell"] - -/// @param {String} $tabular-grid-align-cells-inline-end-selector [".tabular-grid-align-cells-inline-end .tabular-grid-cell"] - -// row-actions -/// @param {String} $tabular-grid-row-actions-selector [".tabular-grid-row-actions"] - -/// @param {String} $tabular-grid-row-actions__window-selector [".tabular-grid-row-actions::part(window)"] - -/// @param {String} $tabular-grid-row-actions__main-selector [".tabular-grid-row-actions::part(main)"] - -/// @param {String} $tabular-grid-show-tree-icons-selector:".tabular-grid-show-node-icons .tabular-grid-row:has(> .tabular-grid-rowset) > .tabular-grid-cell::part(node-icon), .tabular-grid-show-node-icons .tabular-grid-cell::part(node-icon)" -@mixin tabular-grid( - // ch-tabular-grid - $tabular-grid-selector: ".tabular-grid", - $tabular-grid__main-selector: ".tabular-grid::part(main)", - // ch-tabular-grid-column-set - $tabular-grid-column-set: ".tabular-grid-column-set", - // ch-tabular-grid-column - $tabular-grid-column-selector: ".tabular-grid-column", - $tabular-grid-column__bar-selector: ".tabular-grid-column::part(bar)", - $tabular-grid-column__bar-resize-split-selector: - ".tabular-grid-column::part(bar-resize-split)", - $tabular-grid-column__selector-label-selector: - ".tabular-grid-column::part(selector-label)", - $tabular-grid-column__selector-selector: - ".tabular-grid-column::part(selector)", - $tabular-grid-column__selector--checked-selector: - ".tabular-grid-column::part(selector checked)", - $tabular-grid-column__selector--indeterminate-selector: - ".tabular-grid-column::part(selector indeterminate)", - // ch-tabular-grid-row - $tabular-grid-row-selector: ".tabular-grid-row", - $tabular-grid-row--focused-selector: ".tabular-grid-row[focused]", - $tabular-grid-row--highlighted-selector: ".tabular-grid-row[highlighted]", - $tabular-grid-row--selected-selector: ".tabular-grid-row[selected]", - $tabular-grid-row--dragging-selector: ".tabular-grid-row[dragging]", - $tabular-grid-row--highlighted__cell-selector: - ".tabular-grid-row[highlighted] > .tabular-grid-cell", - $tabular-grid-row--selected__cell-selector: - ".tabular-grid-row[selected] > .tabular-grid-cell", - // ch-tabular-grid-rowset - $tabular-grid-rowset-selector: ".tabular-grid-rowset", - $tabular-grid-rowset--collapsed__legend-selector: - ".tabular-grid-rowset[collapsed] > .tabular-grid-rowset-legend", - // ch-tabular-grid-rowset-legend - $tabular-grid-rowset-legend-selector: ".tabular-grid-rowset-legend", - $tabular-grid-rowset-legend__caret-selector--collapsed: - ".tabular-grid-rowset[collapsed] > .tabular-grid-rowset-legend::part(caret)", - $tabular-grid-rowset-legend__caret-selector--expanded: - ".tabular-grid-rowset > .tabular-grid-rowset-legend::part(caret)", - $tabular-grid-rowset-legend__selector-label-selector: - ".tabular-grid-rowset-legend::part(selector-label)", - $tabular-grid-rowset-legend__selector-selector: - ".tabular-grid-rowset-legend::part(selector)", - $tabular-grid-rowset-legend__icon-selector: - ".tabular-grid-rowset-legend::part(icon)", - // ch-tabular-grid-cell - $tabular-grid-cell-selector: ".tabular-grid-cell", - $tabular-grid-cell--focused-selector: ".tabular-grid-cell[focused]", - $tabular-grid-cell--selected-selector: ".tabular-grid-cell[selected]", - $tabular-grid-cell__selector-label-selector: - ".tabular-grid-cell::part(selector-label)", - $tabular-grid-cell__selector-selector: ".tabular-grid-cell::part(selector)", - $tabular-grid-cell__selector--checked-selector: - ".tabular-grid-cell::part(selector checked)", - // ch-tabular-grid-cell (icons) - $tabular-grid-cell__actions-icon-selector: - ".tabular-grid-cell::part(actions-icon)", - $tabular-grid-cell__caret-icon-selector--collapsed: - ".tabular-grid-row:is( [collapsed], [leaf='false']:not(:has(> .tabular-grid-rowset)) ) > .tabular-grid-cell::part(caret)", - $tabular-grid-cell__caret-icon-selector--expanded: - ".tabular-grid-cell::part(caret)", - $tabular-grid-cell__drag-icon-selector: ".tabular-grid-cell::part(drag-icon)", - $tabular-grid-cell__node-icon-selector: - ".tabular-grid-row:has(> .tabular-grid-rowset) > .tabular-grid-cell::part(node-icon)", - $tabular-grid-cell__node-leaf-icon-selector: - ".tabular-grid-cell::part(node-icon)", - // ch-tabular-grid-cell (alignment) - $tabular-grid-align-cells-block-start-selector: - ".tabular-grid-align-cells-block-start .tabular-grid-cell", - $tabular-grid-align-cells-block-center-selector: - ".tabular-grid-align-cells-block-center .tabular-grid-cell", - $tabular-grid-align-cells-block-end-selector: - ".tabular-grid-align-cells-block-end .tabular-grid-cell", - $tabular-grid-align-cells-inline-start-selector: - ".tabular-grid-align-cells-inline-start .tabular-grid-cell", - $tabular-grid-align-cells-inline-center-selector: - ".tabular-grid-align-cells-inline-center .tabular-grid-cell", - $tabular-grid-align-cells-inline-end-selector: - ".tabular-grid-align-cells-inline-end .tabular-grid-cell", - // ch-tabular-grid-row-actions - $tabular-grid-row-actions-selector: ".tabular-grid-row-actions", - $tabular-grid-row-actions__window-selector: - ".tabular-grid-row-actions::part(window)", - $tabular-grid-row-actions__main-selector: - ".tabular-grid-row-actions::part(main)", - // additional/utilities selectors - $tabular-grid-show-tree-icons-selector: - ".tabular-grid-show-node-icons .tabular-grid-row:has(> .tabular-grid-rowset) > .tabular-grid-cell::part(node-icon), .tabular-grid-show-node-icons .tabular-grid-cell::part(node-icon)" -) { - // - - - - - - - - - - - - - - - - - - - - - - - - - - // icons that are present in more than one place - // - - - - - - - - - - - - - - - - - - - - - - - - - - - // caret collapsed - #{$tabular-grid-rowset-legend__caret-selector--collapsed}, - #{$tabular-grid-cell__caret-icon-selector--collapsed} { - @extend %tabular-grid__icon-size; - @extend %tabular-grid__icon-caret-collapsed--enabled; - &:hover { - @extend %tabular-grid__icon-caret-collapsed--hover; - } - &:active { - @extend %tabular-grid__icon-caret-collapsed--active; - } - } - - // caret expanded - #{$tabular-grid-rowset-legend__caret-selector--expanded}, - #{$tabular-grid-cell__caret-icon-selector--expanded} { - @extend %tabular-grid__icon-size; - @extend %tabular-grid__icon-caret-expanded--enabled; - &:hover { - @extend %tabular-grid__icon-caret-expanded--hover; - } - &:active { - @extend %tabular-grid__icon-caret-expanded--active; - } - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-tabular-grid - // - - - - - - - - - - - - - - - - - - - - - - #{$tabular-grid-selector} { - @extend %tabular-grid; - - &:focus { - outline: none; - } - } - - #{$tabular-grid__main-selector} { - @extend %tabular-grid__main; - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-tabular-grid-column-set - // - - - - - - - - - - - - - - - - - - - - - - #{$tabular-grid-column-set} { - @extend %tabular-grid-column-set; - - &:hover { - @extend %tabular-grid-column-set--hover; - } - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-tabular-grid-column - // - - - - - - - - - - - - - - - - - - - - - - #{$tabular-grid-column-selector} { - @extend %tabular-grid-column; - } - - #{$tabular-grid-column__bar-selector} { - @extend %tabular-grid-column__bar; - &:hover { - @extend %tabular-grid-column__bar--hover; - } - } - - #{$tabular-grid-column__bar-resize-split-selector} { - @extend %tabular-grid-column__bar-resize-split; - &:hover { - @extend %tabular-grid-column__bar-resize-split--hover; - } - } - - // checkbox (same styles add cell checkbox) - #{$tabular-grid-column__selector-label-selector} { - @extend %tabular-grid-cell__selector-label; - } - - #{$tabular-grid-column__selector-selector} { - @extend %tabular-grid-cell__selector; - - &::before { - @extend %tabular-grid-cell__selector--before; - } - - &::after { - @extend %tabular-grid-cell__selector--after; - } - - &:focus { - outline: none; - } - } - - #{$tabular-grid-column__selector--checked-selector} { - &::after { - @extend %tabular-grid-cell__selector--after-checked; - } - } - - #{$tabular-grid-column__selector--indeterminate-selector} { - &::after { - @extend %tabular-grid-cell__selector--after-indeterminate; - } - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-tabular-grid-row - // - - - - - - - - - - - - - - - - - - - - - - // row - #{$tabular-grid-row-selector} { - @extend %tabular-grid-row; - } - #{$tabular-grid-row--focused-selector} { - @extend %tabular-grid-row--focused; - } - #{$tabular-grid-row--highlighted-selector} { - @extend %tabular-grid-row--highlighted; - } - #{$tabular-grid-row--selected-selector} { - @extend %tabular-grid-row--selected; - } - #{$tabular-grid-row--dragging-selector} { - @extend %tabular-grid-row--dragging; - } - - // row[some-state] > cell - #{$tabular-grid-row--highlighted__cell-selector} { - @extend %tabular-grid-row--highlighted__cell; - } - #{$tabular-grid-row--selected__cell-selector} { - @extend %tabular-grid-row--selected__cell; - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-tabular-grid-rowset - // - - - - - - - - - - - - - - - - - - - - - - #{$tabular-grid-rowset-selector} { - @extend %tabular-grid-rowset; - } - #{$tabular-grid-rowset--collapsed__legend-selector} { - @extend %tabular-grid-rowset--collapsed__legend; - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-tabular-grid-rowset-legend - // - - - - - - - - - - - - - - - - - - - - - - #{$tabular-grid-rowset-legend-selector} { - @extend %tabular-grid-rowset-legend; - &:hover { - @extend %tabular-grid-rowset-legend--hover; - } - &:active { - @extend %tabular-grid-rowset-legend--active; - } - } - - #{$tabular-grid-rowset-legend__selector-label-selector} { - @extend %tabular-grid-rowset-legend__selector-label; - } - - #{$tabular-grid-rowset-legend__selector-selector} { - @extend %tabular-grid-rowset-legend__selector; - } - - #{$tabular-grid-rowset-legend__icon-selector} { - @extend %tabular-grid-rowset-legend__icon; - @extend %tabular-grid__icon-size; - --icon-path: var(--icon__gemini-tools_category-group_on-surface--enabled); - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-tabular-grid-cell - // - - - - - - - - - - - - - - - - - - - - - - #{$tabular-grid-cell-selector} { - @extend %tabular-grid-cell; - } - - #{$tabular-grid-cell--focused-selector} { - @extend %tabular-grid-cell--focused; - } - - #{$tabular-grid-cell--selected-selector} { - @extend %tabular-grid-cell--selected; - } - - // checkbox - #{$tabular-grid-cell__selector-label-selector} { - @extend %tabular-grid-cell__selector-label; - } - - #{$tabular-grid-cell__selector-selector} { - @extend %tabular-grid-cell__selector; - &::before { - @extend %tabular-grid-cell__selector--before; - } - - &::after { - @extend %tabular-grid-cell__selector--after; - } - - &:focus { - outline: none; - } - } - - #{$tabular-grid-cell__selector--checked-selector} { - &::after { - @extend %tabular-grid-cell__selector--after-checked; - } - } - - // Icons - #{$tabular-grid-cell__actions-icon-selector} { - width: 100%; - @extend %tabular-grid__icon-size; - --icon-path: var( - --icon__gemini-tools_show-more-vertical_on-surface--enabled - ); - border: none; - } - - #{$tabular-grid-cell__drag-icon-selector} { - @extend %tabular-grid__icon-size; - --icon-path: var(--icon__navigation_drag_on-surface--enabled); - margin-inline-end: var(--grid-common__gap); - } - - #{$tabular-grid-cell__node-icon-selector} { - @extend %tabular-grid__icon-size; - @extend %tabular-grid__icon-node; - } - - #{$tabular-grid-cell__node-leaf-icon-selector} { - @extend %tabular-grid__icon-size; - @extend %tabular-grid__icon-node-leaf; - } - - // Cells Alignment - #{$tabular-grid-align-cells-block-start-selector} { - @extend %tabular-grid-cell--align-block-start; - } - #{$tabular-grid-align-cells-block-center-selector} { - @extend %tabular-grid-cell--align-block-center; - } - #{$tabular-grid-align-cells-block-end-selector} { - @extend %tabular-grid-cell--align-block-end; - } - #{$tabular-grid-align-cells-inline-start-selector} { - @extend %tabular-grid-cell--align-inline-start; - } - #{$tabular-grid-align-cells-inline-center-selector} { - @extend %tabular-grid-cell--align-inline-center; - } - #{$tabular-grid-align-cells-inline-end-selector} { - @extend %tabular-grid-cell--align-inline-end; - } - - // - - - - - - - - - - - - - - - - - - - - - // ch-tabular-grid-row-actions - // - - - - - - - - - - - - - - - - - - - - - - #{$tabular-grid-row-actions-selector} { - &[show-on-row-hover]::part(window) { - margin-inline-end: var(--mer-spacing--xs); - } - } - - #{$tabular-grid-row-actions__window-selector} { - @extend %tabular-grid-row-actions__window; - } - - #{$tabular-grid-row-actions__main-selector} { - @extend %tabular-grid-row-actions__main; - } - - // - - - - - - - - - - - - - - - - - - - - - // additional/utilities classes - // - - - - - - - - - - - - - - - - - - - - - - // displays "node" and "node-lead" icons on grid "tree" type - #{$tabular-grid-show-tree-icons-selector} { - @extend %tabular-grid__icon-node-visible; - @extend %tabular-grid__icon-node-leaf-visible; - } -} - -// node type -@mixin cell-node-type-text() { - @include grid-cell-padding-inline-block(); -} -@mixin cell-node-type-element() { - @include control-remove-border(); - @include grid-cell-remove-padding(); - --control__padding-inline: var(--grid-cell__padding-inline); - // to stretch the control - display: grid; - align-items: stretch; - justify-content: stretch; -} -@mixin cell-node-type-element--hover() { - outline: var(--focus__outline-width) var(--focus__outline-style) - var(--control__border-color--hover); - outline-offset: var(--focus__outline-offset); -} -// cell alignment block -@mixin cell-alignment-block-start() { - align-items: start; -} -@mixin cell-alignment-block-center() { - align-items: center; -} -@mixin cell-alignment-block-end() { - align-items: end; -} -// cell alignment inline -@mixin cell-alignment-inline-start() { - justify-content: start; -} -@mixin cell-alignment-inline-center() { - justify-content: center; -} -@mixin cell-alignment-inline-end() { - justify-content: center; -} -// cell with ellipsis -@mixin cell-ellipsis() { - display: inline-block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} - -/// @group Grid -/// @param {String} $tabular-grid-selector [".tabular-grid"] - -/// @param {("text" | "element")} $tabular-grid-cell-node-type ["text"] - -/// @param {("start" | "center" | "end")} $tabular-grid-cell-block-alignment ["start"] - -/// @param {("start" | "center" | "end")} $tabular-grid-cell-inline-alignment ["start"] - -/// @param {Boolean} $tabular-grid-cell-apply-ellipsis [false] - -/// @param {List} $tabular-grid-affected-columns-nth-list [null] - - -@mixin tabular-grid-cell-layout( - $tabular-grid-selector: ".tabular-grid", - $tabular-grid-cell-node-type: "text", - $tabular-grid-cell-block-alignment: "start", - $tabular-grid-cell-inline-alignment: "start", - $tabular-grid-cell-apply-ellipsis: false, - $tabular-grid-affected-columns-nth-list: null -) { - $selector: null; - $cell-tag-name: "ch-tabular-grid-cell"; - $where-pseudo-class: ":is"; - $where-selector: (); - // the selector varies depending on wether $tabular-grid-affected-columns-nth-list is null or not. - // if it is null, all cells should be affected. - @if $tabular-grid-affected-columns-nth-list != null { - @each $nth in $tabular-grid-affected-columns-nth-list { - $where-selector: append($where-selector, ":nth-child(#{$nth})", comma); - } - $selector: #{$tabular-grid-selector} - #{$cell-tag-name}#{$where-pseudo-class - }(#{$where-selector}); - } @else { - // if no $editable-columns-nth was provided, apply to all cells - $selector: #{$tabular-grid-selector} #{$cell-tag-name}; - } - #{$selector} { - // node type - @if $tabular-grid-cell-node-type == "text" { - @include cell-node-type-text(); - } - @if $tabular-grid-cell-node-type == "element" { - @include cell-node-type-element(); - } - &:hover { - @if $tabular-grid-cell-node-type == "element" { - @include cell-node-type-element--hover(); - } - } - // block alignment (only should apply if $tabular-grid-cell-node-type == "text" - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-block-alignment == - "start" - { - @include cell-alignment-block-start(); - } - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-block-alignment == - "center" - { - @include cell-alignment-block-center(); - } - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-block-alignment == - "end" - { - @include cell-alignment-block-end(); - } - // inline alignment - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-inline-alignment == - "start" - { - @include cell-alignment-inline-start(); - } - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-inline-alignment == - "center" - { - @include cell-alignment-inline-center(); - } - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-inline-alignment == - "end" - { - @include cell-alignment-inline-end(); - } - // ellipsis (only should apply if $tabular-grid-cell-node-type == "text" - @if $tabular-grid-cell-node-type == - "text" and - $tabular-grid-cell-apply-ellipsis == - true - { - @include cell-ellipsis(); - } - } -} - -%ticket-list { - @extend %tiny-regular-l; - - &-action { - position: relative; - padding-inline: var(--mer-spacing--xs); - padding-block: var(--mer-spacing--md); - - &--hover { - background-color: var(--item__bg-color--hover); - } - - &--focus-visible { - outline: 1px solid var(--focus__outline-color); - outline-offset: -1px; - } - - &--selected { - background-color: var(--item__bg-color--selected-hover); - - &-before { - content: ""; - display: block; - position: absolute; - inset-block: -1px; - inset-inline-start: 0px; - inline-size: 1px; - background-color: var(--mer-accent__primary); - } - } - } - - &-separator { - background-color: var(--mer-border-color__on-elevation--01); - } - - &-caption { - font-weight: var(--font-weight-semi-bold); - } - - &-description { - margin-block-start: 6px; - } - - &-status { - font-weight: var(--font-weight-semi-bold); - margin-block-end: var(--mer-spacing--xs); - gap: var(--mer-spacing--2xs); - - &-open, - &-pending { - color: var(--mer-text__on-surface); - } - - &-processing { - color: var(--mer-accent__primary); - margin-inline-start: var(--mer-spacing--2xs); - } - - &-error { - color: var(--mer-color__message-red--300); - } - - &-closed { - color: var(--mer-color__message-green--200); - } - - &-dot { - content: ""; - display: block; - border-radius: 50%; - inline-size: 4px; - block-size: 4px; - background-color: currentColor; - } - } - - &-priority { - padding-block: calc(var(--mer-spacing--2xs) + var(--mer-spacing--3xs)); - padding-inline: var(--mer-spacing--sm); - gap: var(--mer-spacing--xs); - border: 1px solid var(--mer-color__neutral-gray--500); - border-radius: 30px; - font-weight: var(--font-weight-semi-bold); - - &--selected { - border-color: var(--mer-border-color__primary--focused); - } - } -} - -@mixin ticket-list( - $ticket-list-selector: ".ticket-list", - $action-selector: ".ticket-list::part(item__action)", - $action-selected-selector: ".ticket-list::part(item__action selected)", - $separator-selector: ".ticket-list::part(separator)", - $caption-selector: ".ticket-list::part(item__caption)", - $description-selector: ".ticket-list::part(description)", - - $status-selector: ".ticket-list::part(status)", - $status-dot-selector: ".ticket-list::part(status dot)", - $status-open-selector: ".ticket-list::part(status open)", - $status-pending-selector: ".ticket-list::part(status pending)", - $status-processing-selector: ".ticket-list::part(status processing)", - $status-error-selector: ".ticket-list::part(status error)", - $status-closed-selector: ".ticket-list::part(status closed)", - - $priority-selector: ".ticket-list::part(priority)", - $priority-selected-selector: ".ticket-list::part(priority selected)" -) { - #{$ticket-list-selector} { - @extend %ticket-list; - } - - // - - - - - - - - - - - - - - - - - - - - - // Action - // - - - - - - - - - - - - - - - - - - - - - #{$action-selector} { - @extend %ticket-list-action; - - &:hover { - @extend %ticket-list-action--hover; - } - - &:focus-visible { - @extend %ticket-list-action--focus-visible; - } - } - - #{$action-selected-selector} { - @extend %ticket-list-action--selected; - - &::before { - @extend %ticket-list-action--selected-before; - } - } - - #{$separator-selector} { - @extend %ticket-list-separator; - } - - #{$caption-selector} { - @extend %ticket-list-caption; - } - - #{$description-selector} { - @extend %ticket-list-description; - } - - // - - - - - - - - - - - - - - - - - - - - - // Status - // - - - - - - - - - - - - - - - - - - - - - #{$status-selector} { - @extend %ticket-list-status; - } - - #{$status-dot-selector} { - &::before { - @extend %ticket-list-status-dot; - } - } - - #{$status-open-selector} { - @extend %ticket-list-status-open; - } - - #{$status-pending-selector} { - @extend %ticket-list-status-pending; - } - - #{$status-processing-selector} { - @extend %ticket-list-status-processing; - } - - #{$status-error-selector} { - @extend %ticket-list-status-error; - } - - #{$status-closed-selector} { - @extend %ticket-list-status-closed; - } - - // - - - - - - - - - - - - - - - - - - - - - // Priority - // - - - - - - - - - - - - - - - - - - - - - #{$priority-selector} { - @extend %ticket-list-priority; - } - - #{$priority-selected-selector} { - @extend %ticket-list-priority--selected; - } -} - -%switch-basic { - --ch-switch-track__unchecked-background-color: var( - --mer-color__neutral-gray--650 - ); - --ch-switch-track__checked-background-color: var( - --mer-color__tinted-primary--50 - ); - --ch-switch-thumb__unchecked-background-color: var(--mer-icon__neutral); - --ch-switch-thumb__checked-background-color: var(--mer-icon__neutral); - --ch-switch-thumb__state-transition-duration: 150ms; - - &__track { - border-radius: var(--ch-switch-track-block-size); - margin-inline-end: var(--mer-spacing--xs); - - &--disabled { - --ch-switch-track__unchecked-background-color: var( - --mer-accent__primary--disabled - ); - --ch-switch-track__checked-background-color: var( - --mer-accent__primary--disabled - ); - --ch-switch-thumb__unchecked-background-color: var( - --mer-icon__on-disabled - ); - --ch-switch-thumb__checked-background-color: var(--mer-icon__on-disabled); - } - } - - &__caption { - &--checked { - // Font weight shouldn't change, since it causes a subtle inline-size shift, moving surrounding elements. - } - } -} - -%switch-small { - --ch-switch-track-block-size: 16px; - --ch-switch-track-inline-size: 31px; - --ch-switch-thumb-size: 9px; - @extend %body-regular-s; - - &__thumb { - &--unchecked { - inset-inline-start: 4px; - } - - &--checked { - inset-inline-start: calc(100% - var(--ch-switch-thumb-size) - 4px); - } - } -} - -%switch-large { - --ch-switch-track-block-size: 26px; - --ch-switch-track-inline-size: 50px; - --ch-switch-thumb-size: 16px; - @extend %body-regular-m; - - &__thumb { - &--unchecked { - inset-inline-start: 6px; - } - - &--checked { - inset-inline-start: calc(100% - var(--ch-switch-thumb-size) - 6px); - } - } -} - -@mixin switch-small( - $switch-selector: ".switch-small", - $track-selector: ".switch-small::part(track)", - $track--disabled-selector: ".switch-small::part(track disabled)", - $thumb--unchecked-selector: ".switch-small::part(thumb unchecked)", - $thumb--checked-selector: ".switch-small::part(thumb checked)", - $caption--checked-selector: ".switch-small::part(caption checked)", - $add--disabled: true -) { - #{$switch-selector} { - @extend %switch-basic; - @extend %switch-small; - } - - #{$track-selector} { - @extend %switch-basic__track; - } - - @if $add--disabled { - #{$track--disabled-selector} { - @extend %switch-basic__track--disabled; - } - } - - #{$thumb--unchecked-selector} { - @extend %switch-small__thumb--unchecked; - } - - #{$thumb--checked-selector} { - @extend %switch-small__thumb--checked; - } - - #{$caption--checked-selector} { - @extend %switch-basic__caption--checked; - } -} - -@mixin switch-large( - $switch-selector: ".switch-large", - $track-selector: ".switch-large::part(track)", - $track--disabled-selector: ".switch-large::part(track disabled)", - $thumb--unchecked-selector: ".switch-large::part(thumb unchecked)", - $thumb--checked-selector: ".switch-large::part(thumb checked)", - $caption--checked-selector: ".switch-large::part(caption checked)", - $add--disabled: true -) { - #{$switch-selector} { - @extend %switch-basic; - @extend %switch-large; - } - - #{$track-selector} { - @extend %switch-basic__track; - } - - @if $add--disabled { - #{$track--disabled-selector} { - @extend %switch-basic__track--disabled; - } - } - - #{$thumb--unchecked-selector} { - @extend %switch-large__thumb--unchecked; - } - - #{$thumb--checked-selector} { - @extend %switch-large__thumb--checked; - } - - #{$caption--checked-selector} { - @extend %switch-basic__caption--checked; - } -} - -@mixin tooltip-tokens() { - --tooltip__background-color: var(--mer-color__neutral-gray--1000); - --tooltip__border-radius: var(--mer-border__radius--sm); - --tooltip__color: var(--mer-text__on-surface); - --tooltip__padding-block: var(--mer-spacing--xs); - --tooltip__padding-inline: var(--mer-spacing--xs); - - // chameleon tokens - --ch-tooltip-separation: var(--mer-spacing--2xs); - --ch-tooltip-separation-x: var(--mer-spacing--2xs); - --ch-tooltip-separation-y: var(--mer-spacing--2xs); -} - - -%tooltip { - @include tooltip-tokens(); - - background-color: var(--tooltip__background-color); - border-radius: var(--tooltip__border-radius); - color: var(--tooltip__color); - padding-block: var(--tooltip__padding-block); - padding-inline: var(--tooltip__padding-inline); - @extend %body-regular-s; -} - -/// @group Tooltip -/// @param {String} $selector [".tooltip"] - -@mixin tooltip($selector: ".tooltip::part(window)") { - #{$selector} { - @extend %tooltip; - } -} - -@mixin tree-view-tokens() { - // - - - - - - - - - - - - - - - - - - - - - // Tree View - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Item (Provided by the ch-tree) - // - - - - - - - - - - - - - - - - - - - - - --ch-tree-view-item-custom-padding-inline-start: var(--mer-spacing--xs); - --ch-tree-view-item-gap: var(--mer-spacing--xs); - --ch-tree-view-item__checkbox-size: var(--mer-spacing--md); - --ch-tree-view-item__expandable-button-size: var(--mer-spacing--md); - --ch-tree-view-item__image-size: var(--mer-spacing--md); - --ch-tree-view-item__background-image-size: var(--mer-icon__box--md); - --ch-tree-view-item__line--inset-inline-end: 4px; - - // - - - - - - - - - - - - - - - - - - - - - // Item (Custom css properties) - // - - - - - - - - - - - - - - - - - - - - - - --tree-view__min-inline-size: max-content; - --tree-view-item-custom__padding-inline-end: var(--mer-spacing--2xs); - - // - - - - - - - - - - - - - - - - - - - - - // Item states - // - - - - - - - - - - - - - - - - - - - - - // Hover - // --tree-view-item__color--hover: var(--item__color--hover); - // --tree-view-item__bg-color--hover: var(--item__bg-color--hover); - - // Selected - // --tree-view-item__color--selected: var(--item__color--selected); - // --tree-view-item__bg-color--selected: var(--item__bg-color--selected); - - // - - - - - - - - - - - - - - - - - - - - - // Item line - // - - - - - - - - - - - - - - - - - - - - - --tree-view-item-dashed-line__border-color: var(--mer-text__on-surface); - --tree-view-item-dashed-line__opacity: 0.3; - - // - - - - - - - - - - - - - - - - - - - - - // Item header - // - - - - - - - - - - - - - - - - - - - - - --tree-view-item-header__padding-block: calc(var(--mer-spacing--3xs)); - - // - - - - - - - - - - - - - - - - - - - - - // Item downloading - // - - - - - - - - - - - - - - - - - - - - - --tree-view-item-downloading__inline-size: var(--mer-spacing--sm); - --tree-view-item-downloading__block-size: var(--mer-spacing--sm); - --tree-view-item-downloading__border: var(--mer-border__width--md) solid - var(--mer-accent__primary--active); - - // TODO: pending commit - // --tree-view-item-pending-commit__bg-color: var(--mer-accent__primary); -} - - -%tree-view { - @include tree-view-tokens(); - line-height: var(--tree-view-item__line-height); - min-inline-size: var(--tree-view__min-inline-size); - @extend %body-regular-s; -} - -// TODO: Improve this -%tree-view--drag-preview { - padding-inline: 8px; - background-color: var(--mer-surface__elevation--01); - border-radius: 10px; - box-shadow: var(--mer-elevation__box-shadow--03); - @extend %tiny-semi-bold-xs; -} - -%tree-view-item--drag-enter { - background-color: var(--tree-view-item__bg-color--hover); - @include focus-outline(); -} - -%tree-view-drop--after { - background-color: var(--mer-color__primary--200); -} - -%tree-view-item__group { - @include items-container-gap-small(); -} - -%tree-view-item__header { - min-inline-size: var(--tree-view__min-inline-size); - @include item-colors-enabled(); - @include item-border-radius(); - @include item-border(); - - &--focus-visible { - @include focus-outline(); - } - - &--not-selected-hover { - @include item-colors-hover(); - } - - &--selected { - @include item-colors-selected(); - &-hover { - @include item-colors-selected-hover(); - } - } -} - -%tree-view-item__action { - padding-block: var(--tree-view-item-header__padding-block); -} - -%tree-view-item__line { - border-color: var(--tree-view-item-dashed-line__border-color); - opacity: var(--tree-view-item-dashed-line__opacity); -} - -%tree-view-item__downloading { - inline-size: var(--tree-view-item-downloading__inline-size); - block-size: var(--tree-view-item-downloading__block-size); - border: var(--tree-view-item-downloading__border); - border-inline-start-color: transparent; -} - -/// @group Tree View -/// @param {String} $tree-view-selector [".tree-view"] - -/// @param {String} $drag-preview-selector [".tree-view::part(drag-preview)"] - -/// @param {String} $drop-selector [".tree-view::part(drop)"] - -/// @param {String} $item--drag-enter-selector [".tree-view::part(item drag-enter)"] - -/// @param {String} $item__group-selector [".tree-view::part(item__group)"] - -/// @param {String} $item__header-selector [".tree-view::part(item__header)"] - -/// @param {String} $item__header--not-selected-selector [".tree-view::part(item__header not-selected)"] - -/// @param {String} $item__header--selected-selector [".tree-view::part(item__header selected)"] - -/// @param {String} $item__action-selector [".tree-view::part(item__action)"] - -/// @param {String} $item__downloading-selector [".tree-view::part(item__downloading)"] - -/// @param {String} $item__line-selector [".tree-view::part(item__line)"] - -/// @param {String} $item__checkbox-selector [".tree-view::part(item__checkbox)"] - -/// @param {String} $item__checkbox-input-selector [".tree-view::part(item__checkbox-input)"] - -/// @param {String} $item__checkbox-input--disabled-selector [".tree-view::part(item__checkbox-input disabled)"] - -/// @param {String} $item__checkbox-input--checked-selector [".tree-view::part(item__checkbox-input checked)"] - -/// @param {String} $item__checkbox-input--indeterminate-selector [".tree-view::part(item__checkbox-input indeterminate)"] - -/// @param {String} $item__checkbox-option--disabled-selector [".tree-view::part(item__checkbox-option disabled)"] - -/// @param {String} $item__checkbox-option--checked-selector [".tree-view::part(item__checkbox-option checked)"] - -/// @param {String} $item__checkbox-option--indeterminate-selector [".tree-view::part(item__checkbox-option indeterminate)"] - -/// @param {Boolean} $add--disabled [true] - -/// @example scss - Default case: Using the `.tree-view` class. -/// SCSS: -/// @include tree-view(); -/// -/// @example markup -/// HTML/render: -/// -/// -/// -/// @example scss - Advanced case: Style a `ch-tree-view-render` control inside a Shadow Root. -/// SCSS: -/// my-component-with-shadow { -/// @include tree-view( -/// // TODO -/// ); -/// } -/// -/// @example markup -/// HTML/render: -/// -/// #shadow root (open) -/// | -/// | -/// -/// -@mixin tree-view( - $tree-view-selector: ".tree-view", - - // Drag preview - $drag-preview-selector: ".tree-view::part(drag-preview)", - - // Drag enter on item - $item--drag-enter-selector: ".tree-view::part(item drag-enter)", - - // Drop - $drop-selector: ".tree-view::part(drop)", - - // - - - - - - - - - - - - - - - - - - - - - // Item - // - - - - - - - - - - - - - - - - - - - - - $item__header-selector: ".tree-view::part(item__header)", - $item__group-selector: ".tree-view::part(item__group)", - $item__header--not-selected-selector: - ".tree-view::part(item__header not-selected)", - $item__header--selected-selector: ".tree-view::part(item__header selected)", - - $item__action-selector: ".tree-view::part(item__action)", - $item__icon-path-selector: ".tree-view::part(uses-icon-path)", - - $item__downloading-selector: ".tree-view::part(item__downloading)", - - $item__line-selector: ".tree-view::part(item__line)", - - $item__checkbox-selector: ".tree-view::part(item__checkbox)", - $item__checkbox-input-selector: ".tree-view::part(item__checkbox-input)", - $item__checkbox-input--disabled-selector: - ".tree-view::part(item__checkbox-input disabled)", - $item__checkbox-input--checked-selector: - ".tree-view::part(item__checkbox-input checked)", - $item__checkbox-input--indeterminate-selector: - ".tree-view::part(item__checkbox-input indeterminate)", - $item__checkbox-option--disabled-selector: - ".tree-view::part(item__checkbox-option disabled)", - $item__checkbox-option--checked-selector: - ".tree-view::part(item__checkbox-option checked)", - $item__checkbox-option--indeterminate-selector: - ".tree-view::part(item__checkbox-option indeterminate)", - - $add--disabled: true -) { - // Base style - #{$tree-view-selector} { - @extend %tree-view; - @include scrollbar-styles(); - } - - // - - - - - - - - - - - - - - - - - - - - - // Drag preview - // - - - - - - - - - - - - - - - - - - - - - #{$drag-preview-selector} { - @extend %tree-view--drag-preview; - } - - // - - - - - - - - - - - - - - - - - - - - - // Drop - // - - - - - - - - - - - - - - - - - - - - - // WA to improve the style of the drops before and after - #{$drop-selector}::after { - @extend %tree-view-drop--after; - } - - // - - - - - - - - - - - - - - - - - - - - - // Item - // - - - - - - - - - - - - - - - - - - - - - - // Drag enter - #{$item--drag-enter-selector} { - @extend %tree-view-item--drag-enter; - } - - #{$item__header-selector} { - @extend %tree-view-item__header; - - &:focus-visible { - @extend %tree-view-item__header--focus-visible; - } - } - - // Group - #{$item__group-selector} { - @extend %tree-view-item__group; - } - - // Header - - #{$item__header-selector} { - @extend %tree-view-item__header; - - &:focus-visible { - @extend %tree-view-item__header--focus-visible; - } - } - - // Item not selected with hover - #{$item__header--not-selected-selector}:hover { - @extend %tree-view-item__header--not-selected-hover; - } - - // Item selected and item with active - #{$item__header--selected-selector} { - @extend %tree-view-item__header--selected; - } - #{$item__header--selected-selector}:hover { - @extend %tree-view-item__header--selected-hover; - } - - // - - - - - - - - - - - - - - - - - - - - - // Action - // - - - - - - - - - - - - - - - - - - - - - #{$item__action-selector} { - @extend %tree-view-item__action; - } - - // - - - - - - - - - - - - - - - - - - - - - // Downloading - // - - - - - - - - - - - - - - - - - - - - - #{$item__downloading-selector} { - @extend %tree-view-item__downloading; - } - - // - - - - - - - - - - - - - - - - - - - - - // Line - // - - - - - - - - - - - - - - - - - - - - - #{$item__line-selector} { - @extend %tree-view-item__line; - } - - // - - - - - - - - - - - - - - - - - - - - - // Checkbox - // - - - - - - - - - - - - - - - - - - - - - @include checkbox( - $checkbox-selector: #{$item__checkbox-selector}, - - // input - $checkbox__input-selector: #{$item__checkbox-input-selector}, - - $checkbox__input--disabled-selector: #{$item__checkbox-input--disabled-selector}, - - $checkbox__input--checked-selector: #{$item__checkbox-input--checked-selector}, - - $checkbox__input--indeterminate-selector: #{$item__checkbox-input--indeterminate-selector}, - - // option - $checkbox__option--disabled-selector: #{$item__checkbox-option--disabled-selector}, - - $checkbox__option--checked-selector: #{$item__checkbox-option--checked-selector}, - - $checkbox__option--indeterminate-selector: #{$item__checkbox-option--indeterminate-selector}, - - $add--disabled: $add--disabled, - $add--error: false, - $add--label: false - ); -} - -%widget { - --spacing-body-block-start: var(--mer-spacing--sm); - --spacing-body-block-end: var(--mer-spacing--sm); - --spacing-body-inline-start: var(--mer-spacing--sm); - --spacing-body-inline-end: var(--mer-spacing--sm); -} - -/// @group Widget -/// @param {String} $selector [".widget,:host(.widget)"] - -@mixin widget($selector: ".widget,:host(.widget)") { - #{$selector} { - @extend %widget; - } -} - - -@mixin mercury( - // Resets - $resets: true, - $box-sizing-reset: true, - $button-reset: true, - $input-reset: true, - $other-reset: true, - $typography-reset: true, - - // body - $body: true, - - // Theme - $dark-theme: true, - $light-theme: true, - $prefers-color-scheme-dark: false, - $prefers-color-scheme-light: false, - $globant-colors: false, - - // Tokens - $tokens: true, - $border: true, - $colors: true, - $font: true, - $spacing: true, - $timing: true, - - // Icons - $icons-path: "./assets/icons/", - $icons-variables: true, - - // Font face - $font-face: true, - $font-face-path: "./assets/fonts/", - - // Base - $base-classes: true, - $button-classes: true, - $form-controls-classes: true, - $icon-classes: true, - $layout-classes: true, - $spacing-classes: true, - $typography-classes: true, - $scrollbar-components: true, - $utility-classes: true, - - // Components - $components: true, - $accordion: true, - $chat: true, - $checkbox: true, - $code: true, - $combo-box: true, - $dialog: true, - $dropdown: true, - $edit: true, - $flexible-layout: true, - $icon: true, - $layout-splitter: true, - $list-box: true, - $markdown-viewer: true, - $navigation-list: true, - $pills: true, - $radio-group: true, - $segmented-control: true, - $sidebar: true, - $slider: true, - $tab: true, - $tabular-grid: true, - $ticket-list: true, - $switch: true, - $tooltip: true, - $tree-view: true, - $widget: true -) { - // - - - - - - - - - - - - - - - - - - - - - // Icons - // - - - - - - - - - - - - - - - - - - - - - @if $icons-variables { - -/*multicolor lists*/ - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*patterns-default-associated*/ - --icon__patterns-default-associated_synchronized--enabled: url('#{$icons-path}patterns-default-associated/light/synchronized.svg#enabled'); - --icon__patterns-default-associated_synchronized--hover: url('#{$icons-path}patterns-default-associated/light/synchronized.svg#hover'); - --icon__patterns-default-associated_synchronized--active: url('#{$icons-path}patterns-default-associated/light/synchronized.svg#active'); - --icon__patterns-default-associated_synchronized--disabled: url('#{$icons-path}patterns-default-associated/light/synchronized.svg#disabled'); - --icon__patterns-default-associated_modified--enabled: url('#{$icons-path}patterns-default-associated/light/modified.svg#enabled'); - --icon__patterns-default-associated_modified--hover: url('#{$icons-path}patterns-default-associated/light/modified.svg#hover'); - --icon__patterns-default-associated_modified--active: url('#{$icons-path}patterns-default-associated/light/modified.svg#active'); - --icon__patterns-default-associated_modified--disabled: url('#{$icons-path}patterns-default-associated/light/modified.svg#disabled'); - --icon__patterns-default-associated_default-associated--enabled: url('#{$icons-path}patterns-default-associated/light/default-associated.svg#enabled'); - --icon__patterns-default-associated_default-associated--hover: url('#{$icons-path}patterns-default-associated/light/default-associated.svg#hover'); - --icon__patterns-default-associated_default-associated--active: url('#{$icons-path}patterns-default-associated/light/default-associated.svg#active'); - --icon__patterns-default-associated_default-associated--disabled: url('#{$icons-path}patterns-default-associated/light/default-associated.svg#disabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*patterns-default-associated*/ - --icon__patterns-default-associated_synchronized--enabled: url('#{$icons-path}patterns-default-associated/dark/synchronized.svg#enabled'); - --icon__patterns-default-associated_synchronized--hover: url('#{$icons-path}patterns-default-associated/dark/synchronized.svg#hover'); - --icon__patterns-default-associated_synchronized--active: url('#{$icons-path}patterns-default-associated/dark/synchronized.svg#active'); - --icon__patterns-default-associated_synchronized--disabled: url('#{$icons-path}patterns-default-associated/dark/synchronized.svg#disabled'); - --icon__patterns-default-associated_modified--enabled: url('#{$icons-path}patterns-default-associated/dark/modified.svg#enabled'); - --icon__patterns-default-associated_modified--hover: url('#{$icons-path}patterns-default-associated/dark/modified.svg#hover'); - --icon__patterns-default-associated_modified--active: url('#{$icons-path}patterns-default-associated/dark/modified.svg#active'); - --icon__patterns-default-associated_modified--disabled: url('#{$icons-path}patterns-default-associated/dark/modified.svg#disabled'); - --icon__patterns-default-associated_default-associated--enabled: url('#{$icons-path}patterns-default-associated/dark/default-associated.svg#enabled'); - --icon__patterns-default-associated_default-associated--hover: url('#{$icons-path}patterns-default-associated/dark/default-associated.svg#hover'); - --icon__patterns-default-associated_default-associated--active: url('#{$icons-path}patterns-default-associated/dark/default-associated.svg#active'); - --icon__patterns-default-associated_default-associated--disabled: url('#{$icons-path}patterns-default-associated/dark/default-associated.svg#disabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*patterns*/ - --icon__patterns_workwith-for-sd--enabled: url('#{$icons-path}patterns/light/workwith-for-sd.svg#enabled'); - --icon__patterns_workwith-for-sd--hover: url('#{$icons-path}patterns/light/workwith-for-sd.svg#hover'); - --icon__patterns_workwith-for-sd--active: url('#{$icons-path}patterns/light/workwith-for-sd.svg#active'); - --icon__patterns_workwith-for-sd--disabled: url('#{$icons-path}patterns/light/workwith-for-sd.svg#disabled'); - --icon__patterns_work-with-web--enabled: url('#{$icons-path}patterns/light/work-with-web.svg#enabled'); - --icon__patterns_work-with-web--hover: url('#{$icons-path}patterns/light/work-with-web.svg#hover'); - --icon__patterns_work-with-web--active: url('#{$icons-path}patterns/light/work-with-web.svg#active'); - --icon__patterns_work-with-web--disabled: url('#{$icons-path}patterns/light/work-with-web.svg#disabled'); - --icon__patterns_tabs--enabled: url('#{$icons-path}patterns/light/tabs.svg#enabled'); - --icon__patterns_tabs--hover: url('#{$icons-path}patterns/light/tabs.svg#hover'); - --icon__patterns_tabs--active: url('#{$icons-path}patterns/light/tabs.svg#active'); - --icon__patterns_tabs--disabled: url('#{$icons-path}patterns/light/tabs.svg#disabled'); - --icon__patterns_tab--enabled: url('#{$icons-path}patterns/light/tab.svg#enabled'); - --icon__patterns_tab--hover: url('#{$icons-path}patterns/light/tab.svg#hover'); - --icon__patterns_tab--active: url('#{$icons-path}patterns/light/tab.svg#active'); - --icon__patterns_tab--disabled: url('#{$icons-path}patterns/light/tab.svg#disabled'); - --icon__patterns_structure--enabled: url('#{$icons-path}patterns/light/structure.svg#enabled'); - --icon__patterns_structure--hover: url('#{$icons-path}patterns/light/structure.svg#hover'); - --icon__patterns_structure--active: url('#{$icons-path}patterns/light/structure.svg#active'); - --icon__patterns_structure--disabled: url('#{$icons-path}patterns/light/structure.svg#disabled'); - --icon__patterns_row--enabled: url('#{$icons-path}patterns/light/row.svg#enabled'); - --icon__patterns_row--hover: url('#{$icons-path}patterns/light/row.svg#hover'); - --icon__patterns_row--active: url('#{$icons-path}patterns/light/row.svg#active'); - --icon__patterns_row--disabled: url('#{$icons-path}patterns/light/row.svg#disabled'); - --icon__patterns_pattern-category--enabled: url('#{$icons-path}patterns/light/pattern-category.svg#enabled'); - --icon__patterns_pattern-category--hover: url('#{$icons-path}patterns/light/pattern-category.svg#hover'); - --icon__patterns_pattern-category--active: url('#{$icons-path}patterns/light/pattern-category.svg#active'); - --icon__patterns_pattern-category--disabled: url('#{$icons-path}patterns/light/pattern-category.svg#disabled'); - --icon__patterns_parameters--enabled: url('#{$icons-path}patterns/light/parameters.svg#enabled'); - --icon__patterns_parameters--hover: url('#{$icons-path}patterns/light/parameters.svg#hover'); - --icon__patterns_parameters--active: url('#{$icons-path}patterns/light/parameters.svg#active'); - --icon__patterns_parameters--disabled: url('#{$icons-path}patterns/light/parameters.svg#disabled'); - --icon__patterns_parameter--enabled: url('#{$icons-path}patterns/light/parameter.svg#enabled'); - --icon__patterns_parameter--hover: url('#{$icons-path}patterns/light/parameter.svg#hover'); - --icon__patterns_parameter--active: url('#{$icons-path}patterns/light/parameter.svg#active'); - --icon__patterns_parameter--disabled: url('#{$icons-path}patterns/light/parameter.svg#disabled'); - --icon__patterns_orders--enabled: url('#{$icons-path}patterns/light/orders.svg#enabled'); - --icon__patterns_orders--hover: url('#{$icons-path}patterns/light/orders.svg#hover'); - --icon__patterns_orders--active: url('#{$icons-path}patterns/light/orders.svg#active'); - --icon__patterns_orders--disabled: url('#{$icons-path}patterns/light/orders.svg#disabled'); - --icon__patterns_list--enabled: url('#{$icons-path}patterns/light/list.svg#enabled'); - --icon__patterns_list--hover: url('#{$icons-path}patterns/light/list.svg#hover'); - --icon__patterns_list--active: url('#{$icons-path}patterns/light/list.svg#active'); - --icon__patterns_list--disabled: url('#{$icons-path}patterns/light/list.svg#disabled'); - --icon__patterns_fixed-data--enabled: url('#{$icons-path}patterns/light/fixed-data.svg#enabled'); - --icon__patterns_fixed-data--hover: url('#{$icons-path}patterns/light/fixed-data.svg#hover'); - --icon__patterns_fixed-data--active: url('#{$icons-path}patterns/light/fixed-data.svg#active'); - --icon__patterns_fixed-data--disabled: url('#{$icons-path}patterns/light/fixed-data.svg#disabled'); - --icon__patterns_filters--enabled: url('#{$icons-path}patterns/light/filters.svg#enabled'); - --icon__patterns_filters--hover: url('#{$icons-path}patterns/light/filters.svg#hover'); - --icon__patterns_filters--active: url('#{$icons-path}patterns/light/filters.svg#active'); - --icon__patterns_filters--disabled: url('#{$icons-path}patterns/light/filters.svg#disabled'); - --icon__patterns_events--enabled: url('#{$icons-path}patterns/light/events.svg#enabled'); - --icon__patterns_events--hover: url('#{$icons-path}patterns/light/events.svg#hover'); - --icon__patterns_events--active: url('#{$icons-path}patterns/light/events.svg#active'); - --icon__patterns_events--disabled: url('#{$icons-path}patterns/light/events.svg#disabled'); - --icon__patterns_documentation--enabled: url('#{$icons-path}patterns/light/documentation.svg#enabled'); - --icon__patterns_documentation--hover: url('#{$icons-path}patterns/light/documentation.svg#hover'); - --icon__patterns_documentation--active: url('#{$icons-path}patterns/light/documentation.svg#active'); - --icon__patterns_documentation--disabled: url('#{$icons-path}patterns/light/documentation.svg#disabled'); - --icon__patterns_detail--enabled: url('#{$icons-path}patterns/light/detail.svg#enabled'); - --icon__patterns_detail--hover: url('#{$icons-path}patterns/light/detail.svg#hover'); - --icon__patterns_detail--active: url('#{$icons-path}patterns/light/detail.svg#active'); - --icon__patterns_detail--disabled: url('#{$icons-path}patterns/light/detail.svg#disabled'); - --icon__patterns_cell--enabled: url('#{$icons-path}patterns/light/cell.svg#enabled'); - --icon__patterns_cell--hover: url('#{$icons-path}patterns/light/cell.svg#hover'); - --icon__patterns_cell--active: url('#{$icons-path}patterns/light/cell.svg#active'); - --icon__patterns_cell--disabled: url('#{$icons-path}patterns/light/cell.svg#disabled'); - --icon__patterns_attributes--enabled: url('#{$icons-path}patterns/light/attributes.svg#enabled'); - --icon__patterns_attributes--hover: url('#{$icons-path}patterns/light/attributes.svg#hover'); - --icon__patterns_attributes--active: url('#{$icons-path}patterns/light/attributes.svg#active'); - --icon__patterns_attributes--disabled: url('#{$icons-path}patterns/light/attributes.svg#disabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*patterns*/ - --icon__patterns_workwith-for-sd--enabled: url('#{$icons-path}patterns/dark/workwith-for-sd.svg#enabled'); - --icon__patterns_workwith-for-sd--hover: url('#{$icons-path}patterns/dark/workwith-for-sd.svg#hover'); - --icon__patterns_workwith-for-sd--active: url('#{$icons-path}patterns/dark/workwith-for-sd.svg#active'); - --icon__patterns_workwith-for-sd--disabled: url('#{$icons-path}patterns/dark/workwith-for-sd.svg#disabled'); - --icon__patterns_work-with-web--enabled: url('#{$icons-path}patterns/dark/work-with-web.svg#enabled'); - --icon__patterns_work-with-web--hover: url('#{$icons-path}patterns/dark/work-with-web.svg#hover'); - --icon__patterns_work-with-web--active: url('#{$icons-path}patterns/dark/work-with-web.svg#active'); - --icon__patterns_work-with-web--disabled: url('#{$icons-path}patterns/dark/work-with-web.svg#disabled'); - --icon__patterns_tabs--enabled: url('#{$icons-path}patterns/dark/tabs.svg#enabled'); - --icon__patterns_tabs--hover: url('#{$icons-path}patterns/dark/tabs.svg#hover'); - --icon__patterns_tabs--active: url('#{$icons-path}patterns/dark/tabs.svg#active'); - --icon__patterns_tabs--disabled: url('#{$icons-path}patterns/dark/tabs.svg#disabled'); - --icon__patterns_tab--enabled: url('#{$icons-path}patterns/dark/tab.svg#enabled'); - --icon__patterns_tab--hover: url('#{$icons-path}patterns/dark/tab.svg#hover'); - --icon__patterns_tab--active: url('#{$icons-path}patterns/dark/tab.svg#active'); - --icon__patterns_tab--disabled: url('#{$icons-path}patterns/dark/tab.svg#disabled'); - --icon__patterns_structure--enabled: url('#{$icons-path}patterns/dark/structure.svg#enabled'); - --icon__patterns_structure--hover: url('#{$icons-path}patterns/dark/structure.svg#hover'); - --icon__patterns_structure--active: url('#{$icons-path}patterns/dark/structure.svg#active'); - --icon__patterns_structure--disabled: url('#{$icons-path}patterns/dark/structure.svg#disabled'); - --icon__patterns_row--enabled: url('#{$icons-path}patterns/dark/row.svg#enabled'); - --icon__patterns_row--hover: url('#{$icons-path}patterns/dark/row.svg#hover'); - --icon__patterns_row--active: url('#{$icons-path}patterns/dark/row.svg#active'); - --icon__patterns_row--disabled: url('#{$icons-path}patterns/dark/row.svg#disabled'); - --icon__patterns_pattern-category--enabled: url('#{$icons-path}patterns/dark/pattern-category.svg#enabled'); - --icon__patterns_pattern-category--hover: url('#{$icons-path}patterns/dark/pattern-category.svg#hover'); - --icon__patterns_pattern-category--active: url('#{$icons-path}patterns/dark/pattern-category.svg#active'); - --icon__patterns_pattern-category--disabled: url('#{$icons-path}patterns/dark/pattern-category.svg#disabled'); - --icon__patterns_parameters--enabled: url('#{$icons-path}patterns/dark/parameters.svg#enabled'); - --icon__patterns_parameters--hover: url('#{$icons-path}patterns/dark/parameters.svg#hover'); - --icon__patterns_parameters--active: url('#{$icons-path}patterns/dark/parameters.svg#active'); - --icon__patterns_parameters--disabled: url('#{$icons-path}patterns/dark/parameters.svg#disabled'); - --icon__patterns_parameter--enabled: url('#{$icons-path}patterns/dark/parameter.svg#enabled'); - --icon__patterns_parameter--hover: url('#{$icons-path}patterns/dark/parameter.svg#hover'); - --icon__patterns_parameter--active: url('#{$icons-path}patterns/dark/parameter.svg#active'); - --icon__patterns_parameter--disabled: url('#{$icons-path}patterns/dark/parameter.svg#disabled'); - --icon__patterns_orders--enabled: url('#{$icons-path}patterns/dark/orders.svg#enabled'); - --icon__patterns_orders--hover: url('#{$icons-path}patterns/dark/orders.svg#hover'); - --icon__patterns_orders--active: url('#{$icons-path}patterns/dark/orders.svg#active'); - --icon__patterns_orders--disabled: url('#{$icons-path}patterns/dark/orders.svg#disabled'); - --icon__patterns_list--enabled: url('#{$icons-path}patterns/dark/list.svg#enabled'); - --icon__patterns_list--hover: url('#{$icons-path}patterns/dark/list.svg#hover'); - --icon__patterns_list--active: url('#{$icons-path}patterns/dark/list.svg#active'); - --icon__patterns_list--disabled: url('#{$icons-path}patterns/dark/list.svg#disabled'); - --icon__patterns_fixed-data--enabled: url('#{$icons-path}patterns/dark/fixed-data.svg#enabled'); - --icon__patterns_fixed-data--hover: url('#{$icons-path}patterns/dark/fixed-data.svg#hover'); - --icon__patterns_fixed-data--active: url('#{$icons-path}patterns/dark/fixed-data.svg#active'); - --icon__patterns_fixed-data--disabled: url('#{$icons-path}patterns/dark/fixed-data.svg#disabled'); - --icon__patterns_filters--enabled: url('#{$icons-path}patterns/dark/filters.svg#enabled'); - --icon__patterns_filters--hover: url('#{$icons-path}patterns/dark/filters.svg#hover'); - --icon__patterns_filters--active: url('#{$icons-path}patterns/dark/filters.svg#active'); - --icon__patterns_filters--disabled: url('#{$icons-path}patterns/dark/filters.svg#disabled'); - --icon__patterns_events--enabled: url('#{$icons-path}patterns/dark/events.svg#enabled'); - --icon__patterns_events--hover: url('#{$icons-path}patterns/dark/events.svg#hover'); - --icon__patterns_events--active: url('#{$icons-path}patterns/dark/events.svg#active'); - --icon__patterns_events--disabled: url('#{$icons-path}patterns/dark/events.svg#disabled'); - --icon__patterns_documentation--enabled: url('#{$icons-path}patterns/dark/documentation.svg#enabled'); - --icon__patterns_documentation--hover: url('#{$icons-path}patterns/dark/documentation.svg#hover'); - --icon__patterns_documentation--active: url('#{$icons-path}patterns/dark/documentation.svg#active'); - --icon__patterns_documentation--disabled: url('#{$icons-path}patterns/dark/documentation.svg#disabled'); - --icon__patterns_detail--enabled: url('#{$icons-path}patterns/dark/detail.svg#enabled'); - --icon__patterns_detail--hover: url('#{$icons-path}patterns/dark/detail.svg#hover'); - --icon__patterns_detail--active: url('#{$icons-path}patterns/dark/detail.svg#active'); - --icon__patterns_detail--disabled: url('#{$icons-path}patterns/dark/detail.svg#disabled'); - --icon__patterns_cell--enabled: url('#{$icons-path}patterns/dark/cell.svg#enabled'); - --icon__patterns_cell--hover: url('#{$icons-path}patterns/dark/cell.svg#hover'); - --icon__patterns_cell--active: url('#{$icons-path}patterns/dark/cell.svg#active'); - --icon__patterns_cell--disabled: url('#{$icons-path}patterns/dark/cell.svg#disabled'); - --icon__patterns_attributes--enabled: url('#{$icons-path}patterns/dark/attributes.svg#enabled'); - --icon__patterns_attributes--hover: url('#{$icons-path}patterns/dark/attributes.svg#hover'); - --icon__patterns_attributes--active: url('#{$icons-path}patterns/dark/attributes.svg#active'); - --icon__patterns_attributes--disabled: url('#{$icons-path}patterns/dark/attributes.svg#disabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*objects-parts*/ - --icon__objects-parts_variables--enabled: url('#{$icons-path}objects-parts/light/variables.svg#enabled'); - --icon__objects-parts_variables--hover: url('#{$icons-path}objects-parts/light/variables.svg#hover'); - --icon__objects-parts_variables--active: url('#{$icons-path}objects-parts/light/variables.svg#active'); - --icon__objects-parts_variables--disabled: url('#{$icons-path}objects-parts/light/variables.svg#disabled'); - --icon__objects-parts_rules--enabled: url('#{$icons-path}objects-parts/light/rules.svg#enabled'); - --icon__objects-parts_rules--hover: url('#{$icons-path}objects-parts/light/rules.svg#hover'); - --icon__objects-parts_rules--active: url('#{$icons-path}objects-parts/light/rules.svg#active'); - --icon__objects-parts_rules--disabled: url('#{$icons-path}objects-parts/light/rules.svg#disabled'); - --icon__objects-parts_events--enabled: url('#{$icons-path}objects-parts/light/events.svg#enabled'); - --icon__objects-parts_events--hover: url('#{$icons-path}objects-parts/light/events.svg#hover'); - --icon__objects-parts_events--active: url('#{$icons-path}objects-parts/light/events.svg#active'); - --icon__objects-parts_events--disabled: url('#{$icons-path}objects-parts/light/events.svg#disabled'); - --icon__objects-parts_conditions--enabled: url('#{$icons-path}objects-parts/light/conditions.svg#enabled'); - --icon__objects-parts_conditions--hover: url('#{$icons-path}objects-parts/light/conditions.svg#hover'); - --icon__objects-parts_conditions--active: url('#{$icons-path}objects-parts/light/conditions.svg#active'); - --icon__objects-parts_conditions--disabled: url('#{$icons-path}objects-parts/light/conditions.svg#disabled'); - --icon__objects-parts_condition--enabled: url('#{$icons-path}objects-parts/light/condition.svg#enabled'); - --icon__objects-parts_condition--hover: url('#{$icons-path}objects-parts/light/condition.svg#hover'); - --icon__objects-parts_condition--active: url('#{$icons-path}objects-parts/light/condition.svg#active'); - --icon__objects-parts_condition--disabled: url('#{$icons-path}objects-parts/light/condition.svg#disabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*objects-parts*/ - --icon__objects-parts_variables--enabled: url('#{$icons-path}objects-parts/dark/variables.svg#enabled'); - --icon__objects-parts_variables--hover: url('#{$icons-path}objects-parts/dark/variables.svg#hover'); - --icon__objects-parts_variables--active: url('#{$icons-path}objects-parts/dark/variables.svg#active'); - --icon__objects-parts_variables--disabled: url('#{$icons-path}objects-parts/dark/variables.svg#disabled'); - --icon__objects-parts_rules--enabled: url('#{$icons-path}objects-parts/dark/rules.svg#enabled'); - --icon__objects-parts_rules--hover: url('#{$icons-path}objects-parts/dark/rules.svg#hover'); - --icon__objects-parts_rules--active: url('#{$icons-path}objects-parts/dark/rules.svg#active'); - --icon__objects-parts_rules--disabled: url('#{$icons-path}objects-parts/dark/rules.svg#disabled'); - --icon__objects-parts_events--enabled: url('#{$icons-path}objects-parts/dark/events.svg#enabled'); - --icon__objects-parts_events--hover: url('#{$icons-path}objects-parts/dark/events.svg#hover'); - --icon__objects-parts_events--active: url('#{$icons-path}objects-parts/dark/events.svg#active'); - --icon__objects-parts_events--disabled: url('#{$icons-path}objects-parts/dark/events.svg#disabled'); - --icon__objects-parts_conditions--enabled: url('#{$icons-path}objects-parts/dark/conditions.svg#enabled'); - --icon__objects-parts_conditions--hover: url('#{$icons-path}objects-parts/dark/conditions.svg#hover'); - --icon__objects-parts_conditions--active: url('#{$icons-path}objects-parts/dark/conditions.svg#active'); - --icon__objects-parts_conditions--disabled: url('#{$icons-path}objects-parts/dark/conditions.svg#disabled'); - --icon__objects-parts_condition--enabled: url('#{$icons-path}objects-parts/dark/condition.svg#enabled'); - --icon__objects-parts_condition--hover: url('#{$icons-path}objects-parts/dark/condition.svg#hover'); - --icon__objects-parts_condition--active: url('#{$icons-path}objects-parts/dark/condition.svg#active'); - --icon__objects-parts_condition--disabled: url('#{$icons-path}objects-parts/dark/condition.svg#disabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*objects*/ - --icon__objects_workflow--enabled: url('#{$icons-path}objects/light/workflow.svg#enabled'); - --icon__objects_workflow--hover: url('#{$icons-path}objects/light/workflow.svg#hover'); - --icon__objects_workflow--active: url('#{$icons-path}objects/light/workflow.svg#active'); - --icon__objects_workflow--disabled: url('#{$icons-path}objects/light/workflow.svg#disabled'); - --icon__objects_work-panel--enabled: url('#{$icons-path}objects/light/work-panel.svg#enabled'); - --icon__objects_work-panel--hover: url('#{$icons-path}objects/light/work-panel.svg#hover'); - --icon__objects_work-panel--active: url('#{$icons-path}objects/light/work-panel.svg#active'); - --icon__objects_work-panel--disabled: url('#{$icons-path}objects/light/work-panel.svg#disabled'); - --icon__objects_webpanel--enabled: url('#{$icons-path}objects/light/webpanel.svg#enabled'); - --icon__objects_webpanel--hover: url('#{$icons-path}objects/light/webpanel.svg#hover'); - --icon__objects_webpanel--active: url('#{$icons-path}objects/light/webpanel.svg#active'); - --icon__objects_webpanel--disabled: url('#{$icons-path}objects/light/webpanel.svg#disabled'); - --icon__objects_web-component--enabled: url('#{$icons-path}objects/light/web-component.svg#enabled'); - --icon__objects_web-component--hover: url('#{$icons-path}objects/light/web-component.svg#hover'); - --icon__objects_web-component--active: url('#{$icons-path}objects/light/web-component.svg#active'); - --icon__objects_web-component--disabled: url('#{$icons-path}objects/light/web-component.svg#disabled'); - --icon__objects_version--enabled: url('#{$icons-path}objects/light/version.svg#enabled'); - --icon__objects_version--hover: url('#{$icons-path}objects/light/version.svg#hover'); - --icon__objects_version--active: url('#{$icons-path}objects/light/version.svg#active'); - --icon__objects_version--disabled: url('#{$icons-path}objects/light/version.svg#disabled'); - --icon__objects_url-rewrite--enabled: url('#{$icons-path}objects/light/url-rewrite.svg#enabled'); - --icon__objects_url-rewrite--hover: url('#{$icons-path}objects/light/url-rewrite.svg#hover'); - --icon__objects_url-rewrite--active: url('#{$icons-path}objects/light/url-rewrite.svg#active'); - --icon__objects_url-rewrite--disabled: url('#{$icons-path}objects/light/url-rewrite.svg#disabled'); - --icon__objects_transaction--enabled: url('#{$icons-path}objects/light/transaction.svg#enabled'); - --icon__objects_transaction--hover: url('#{$icons-path}objects/light/transaction.svg#hover'); - --icon__objects_transaction--active: url('#{$icons-path}objects/light/transaction.svg#active'); - --icon__objects_transaction--disabled: url('#{$icons-path}objects/light/transaction.svg#disabled'); - --icon__objects_to-be-defined--enabled: url('#{$icons-path}objects/light/to-be-defined.svg#enabled'); - --icon__objects_to-be-defined--hover: url('#{$icons-path}objects/light/to-be-defined.svg#hover'); - --icon__objects_to-be-defined--active: url('#{$icons-path}objects/light/to-be-defined.svg#active'); - --icon__objects_to-be-defined--disabled: url('#{$icons-path}objects/light/to-be-defined.svg#disabled'); - --icon__objects_theme--enabled: url('#{$icons-path}objects/light/theme.svg#enabled'); - --icon__objects_theme--hover: url('#{$icons-path}objects/light/theme.svg#hover'); - --icon__objects_theme--active: url('#{$icons-path}objects/light/theme.svg#active'); - --icon__objects_theme--disabled: url('#{$icons-path}objects/light/theme.svg#disabled'); - --icon__objects_theme-web--enabled: url('#{$icons-path}objects/light/theme-web.svg#enabled'); - --icon__objects_theme-web--hover: url('#{$icons-path}objects/light/theme-web.svg#hover'); - --icon__objects_theme-web--active: url('#{$icons-path}objects/light/theme-web.svg#active'); - --icon__objects_theme-web--disabled: url('#{$icons-path}objects/light/theme-web.svg#disabled'); - --icon__objects_theme-for-sd--enabled: url('#{$icons-path}objects/light/theme-for-sd.svg#enabled'); - --icon__objects_theme-for-sd--hover: url('#{$icons-path}objects/light/theme-for-sd.svg#hover'); - --icon__objects_theme-for-sd--active: url('#{$icons-path}objects/light/theme-for-sd.svg#active'); - --icon__objects_theme-for-sd--disabled: url('#{$icons-path}objects/light/theme-for-sd.svg#disabled'); - --icon__objects_table--enabled: url('#{$icons-path}objects/light/table.svg#enabled'); - --icon__objects_table--hover: url('#{$icons-path}objects/light/table.svg#hover'); - --icon__objects_table--active: url('#{$icons-path}objects/light/table.svg#active'); - --icon__objects_table--disabled: url('#{$icons-path}objects/light/table.svg#disabled'); - --icon__objects_super-app--enabled: url('#{$icons-path}objects/light/super-app.svg#enabled'); - --icon__objects_super-app--hover: url('#{$icons-path}objects/light/super-app.svg#hover'); - --icon__objects_super-app--active: url('#{$icons-path}objects/light/super-app.svg#active'); - --icon__objects_super-app--disabled: url('#{$icons-path}objects/light/super-app.svg#disabled'); - --icon__objects_subtype-group--enabled: url('#{$icons-path}objects/light/subtype-group.svg#enabled'); - --icon__objects_subtype-group--hover: url('#{$icons-path}objects/light/subtype-group.svg#hover'); - --icon__objects_subtype-group--active: url('#{$icons-path}objects/light/subtype-group.svg#active'); - --icon__objects_subtype-group--disabled: url('#{$icons-path}objects/light/subtype-group.svg#disabled'); - --icon__objects_structured-data-type--enabled: url('#{$icons-path}objects/light/structured-data-type.svg#enabled'); - --icon__objects_structured-data-type--hover: url('#{$icons-path}objects/light/structured-data-type.svg#hover'); - --icon__objects_structured-data-type--active: url('#{$icons-path}objects/light/structured-data-type.svg#active'); - --icon__objects_structured-data-type--disabled: url('#{$icons-path}objects/light/structured-data-type.svg#disabled'); - --icon__objects_stencil--enabled: url('#{$icons-path}objects/light/stencil.svg#enabled'); - --icon__objects_stencil--hover: url('#{$icons-path}objects/light/stencil.svg#hover'); - --icon__objects_stencil--active: url('#{$icons-path}objects/light/stencil.svg#active'); - --icon__objects_stencil--disabled: url('#{$icons-path}objects/light/stencil.svg#disabled'); - --icon__objects_roles--enabled: url('#{$icons-path}objects/light/roles.svg#enabled'); - --icon__objects_roles--hover: url('#{$icons-path}objects/light/roles.svg#hover'); - --icon__objects_roles--active: url('#{$icons-path}objects/light/roles.svg#active'); - --icon__objects_roles--disabled: url('#{$icons-path}objects/light/roles.svg#disabled'); - --icon__objects_report--enabled: url('#{$icons-path}objects/light/report.svg#enabled'); - --icon__objects_report--hover: url('#{$icons-path}objects/light/report.svg#hover'); - --icon__objects_report--active: url('#{$icons-path}objects/light/report.svg#active'); - --icon__objects_report--disabled: url('#{$icons-path}objects/light/report.svg#disabled'); - --icon__objects_references--enabled: url('#{$icons-path}objects/light/references.svg#enabled'); - --icon__objects_references--hover: url('#{$icons-path}objects/light/references.svg#hover'); - --icon__objects_references--active: url('#{$icons-path}objects/light/references.svg#active'); - --icon__objects_references--disabled: url('#{$icons-path}objects/light/references.svg#disabled'); - --icon__objects_query--enabled: url('#{$icons-path}objects/light/query.svg#enabled'); - --icon__objects_query--hover: url('#{$icons-path}objects/light/query.svg#hover'); - --icon__objects_query--active: url('#{$icons-path}objects/light/query.svg#active'); - --icon__objects_query--disabled: url('#{$icons-path}objects/light/query.svg#disabled'); - --icon__objects_procedure--enabled: url('#{$icons-path}objects/light/procedure.svg#enabled'); - --icon__objects_procedure--hover: url('#{$icons-path}objects/light/procedure.svg#hover'); - --icon__objects_procedure--active: url('#{$icons-path}objects/light/procedure.svg#active'); - --icon__objects_procedure--disabled: url('#{$icons-path}objects/light/procedure.svg#disabled'); - --icon__objects_patterns--enabled: url('#{$icons-path}objects/light/patterns.svg#enabled'); - --icon__objects_patterns--hover: url('#{$icons-path}objects/light/patterns.svg#hover'); - --icon__objects_patterns--active: url('#{$icons-path}objects/light/patterns.svg#active'); - --icon__objects_patterns--disabled: url('#{$icons-path}objects/light/patterns.svg#disabled'); - --icon__objects_panel-for-sd--enabled: url('#{$icons-path}objects/light/panel-for-sd.svg#enabled'); - --icon__objects_panel-for-sd--hover: url('#{$icons-path}objects/light/panel-for-sd.svg#hover'); - --icon__objects_panel-for-sd--active: url('#{$icons-path}objects/light/panel-for-sd.svg#active'); - --icon__objects_panel-for-sd--disabled: url('#{$icons-path}objects/light/panel-for-sd.svg#disabled'); - --icon__objects_orphant-document--enabled: url('#{$icons-path}objects/light/orphant-document.svg#enabled'); - --icon__objects_orphant-document--hover: url('#{$icons-path}objects/light/orphant-document.svg#hover'); - --icon__objects_orphant-document--active: url('#{$icons-path}objects/light/orphant-document.svg#active'); - --icon__objects_orphant-document--disabled: url('#{$icons-path}objects/light/orphant-document.svg#disabled'); - --icon__objects_offline-database--enabled: url('#{$icons-path}objects/light/offline-database.svg#enabled'); - --icon__objects_offline-database--hover: url('#{$icons-path}objects/light/offline-database.svg#hover'); - --icon__objects_offline-database--active: url('#{$icons-path}objects/light/offline-database.svg#active'); - --icon__objects_offline-database--disabled: url('#{$icons-path}objects/light/offline-database.svg#disabled'); - --icon__objects_object--enabled: url('#{$icons-path}objects/light/object.svg#enabled'); - --icon__objects_object--hover: url('#{$icons-path}objects/light/object.svg#hover'); - --icon__objects_object--active: url('#{$icons-path}objects/light/object.svg#active'); - --icon__objects_object--disabled: url('#{$icons-path}objects/light/object.svg#disabled'); - --icon__objects_notification-templates--enabled: url('#{$icons-path}objects/light/notification-templates.svg#enabled'); - --icon__objects_notification-templates--hover: url('#{$icons-path}objects/light/notification-templates.svg#hover'); - --icon__objects_notification-templates--active: url('#{$icons-path}objects/light/notification-templates.svg#active'); - --icon__objects_notification-templates--disabled: url('#{$icons-path}objects/light/notification-templates.svg#disabled'); - --icon__objects_module--enabled: url('#{$icons-path}objects/light/module.svg#enabled'); - --icon__objects_module--hover: url('#{$icons-path}objects/light/module.svg#hover'); - --icon__objects_module--active: url('#{$icons-path}objects/light/module.svg#active'); - --icon__objects_module--disabled: url('#{$icons-path}objects/light/module.svg#disabled'); - --icon__objects_module-open--enabled: url('#{$icons-path}objects/light/module-open.svg#enabled'); - --icon__objects_module-open--hover: url('#{$icons-path}objects/light/module-open.svg#hover'); - --icon__objects_module-open--active: url('#{$icons-path}objects/light/module-open.svg#active'); - --icon__objects_module-open--disabled: url('#{$icons-path}objects/light/module-open.svg#disabled'); - --icon__objects_mini-app--enabled: url('#{$icons-path}objects/light/mini-app.svg#enabled'); - --icon__objects_mini-app--hover: url('#{$icons-path}objects/light/mini-app.svg#hover'); - --icon__objects_mini-app--active: url('#{$icons-path}objects/light/mini-app.svg#active'); - --icon__objects_mini-app--disabled: url('#{$icons-path}objects/light/mini-app.svg#disabled'); - --icon__objects_menubar--enabled: url('#{$icons-path}objects/light/menubar.svg#enabled'); - --icon__objects_menubar--hover: url('#{$icons-path}objects/light/menubar.svg#hover'); - --icon__objects_menubar--active: url('#{$icons-path}objects/light/menubar.svg#active'); - --icon__objects_menubar--disabled: url('#{$icons-path}objects/light/menubar.svg#disabled'); - --icon__objects_menu--enabled: url('#{$icons-path}objects/light/menu.svg#enabled'); - --icon__objects_menu--hover: url('#{$icons-path}objects/light/menu.svg#hover'); - --icon__objects_menu--active: url('#{$icons-path}objects/light/menu.svg#active'); - --icon__objects_menu--disabled: url('#{$icons-path}objects/light/menu.svg#disabled'); - --icon__objects_masterpage--enabled: url('#{$icons-path}objects/light/masterpage.svg#enabled'); - --icon__objects_masterpage--hover: url('#{$icons-path}objects/light/masterpage.svg#hover'); - --icon__objects_masterpage--active: url('#{$icons-path}objects/light/masterpage.svg#active'); - --icon__objects_masterpage--disabled: url('#{$icons-path}objects/light/masterpage.svg#disabled'); - --icon__objects_main-object--enabled: url('#{$icons-path}objects/light/main-object.svg#enabled'); - --icon__objects_main-object--hover: url('#{$icons-path}objects/light/main-object.svg#hover'); - --icon__objects_main-object--active: url('#{$icons-path}objects/light/main-object.svg#active'); - --icon__objects_main-object--disabled: url('#{$icons-path}objects/light/main-object.svg#disabled'); - --icon__objects_language--enabled: url('#{$icons-path}objects/light/language.svg#enabled'); - --icon__objects_language--hover: url('#{$icons-path}objects/light/language.svg#hover'); - --icon__objects_language--active: url('#{$icons-path}objects/light/language.svg#active'); - --icon__objects_language--disabled: url('#{$icons-path}objects/light/language.svg#disabled'); - --icon__objects_knowledge-base--enabled: url('#{$icons-path}objects/light/knowledge-base.svg#enabled'); - --icon__objects_knowledge-base--hover: url('#{$icons-path}objects/light/knowledge-base.svg#hover'); - --icon__objects_knowledge-base--active: url('#{$icons-path}objects/light/knowledge-base.svg#active'); - --icon__objects_knowledge-base--disabled: url('#{$icons-path}objects/light/knowledge-base.svg#disabled'); - --icon__objects_image--enabled: url('#{$icons-path}objects/light/image.svg#enabled'); - --icon__objects_image--hover: url('#{$icons-path}objects/light/image.svg#hover'); - --icon__objects_image--active: url('#{$icons-path}objects/light/image.svg#active'); - --icon__objects_image--disabled: url('#{$icons-path}objects/light/image.svg#disabled'); - --icon__objects_generator--enabled: url('#{$icons-path}objects/light/generator.svg#enabled'); - --icon__objects_generator--hover: url('#{$icons-path}objects/light/generator.svg#hover'); - --icon__objects_generator--active: url('#{$icons-path}objects/light/generator.svg#active'); - --icon__objects_generator--disabled: url('#{$icons-path}objects/light/generator.svg#disabled'); - --icon__objects_generator-category--enabled: url('#{$icons-path}objects/light/generator-category.svg#enabled'); - --icon__objects_generator-category--hover: url('#{$icons-path}objects/light/generator-category.svg#hover'); - --icon__objects_generator-category--active: url('#{$icons-path}objects/light/generator-category.svg#active'); - --icon__objects_generator-category--disabled: url('#{$icons-path}objects/light/generator-category.svg#disabled'); - --icon__objects_folder--enabled: url('#{$icons-path}objects/light/folder.svg#enabled'); - --icon__objects_folder--hover: url('#{$icons-path}objects/light/folder.svg#hover'); - --icon__objects_folder--active: url('#{$icons-path}objects/light/folder.svg#active'); - --icon__objects_folder--disabled: url('#{$icons-path}objects/light/folder.svg#disabled'); - --icon__objects_folder-open--enabled: url('#{$icons-path}objects/light/folder-open.svg#enabled'); - --icon__objects_folder-open--hover: url('#{$icons-path}objects/light/folder-open.svg#hover'); - --icon__objects_folder-open--active: url('#{$icons-path}objects/light/folder-open.svg#active'); - --icon__objects_folder-open--disabled: url('#{$icons-path}objects/light/folder-open.svg#disabled'); - --icon__objects_file--enabled: url('#{$icons-path}objects/light/file.svg#enabled'); - --icon__objects_file--hover: url('#{$icons-path}objects/light/file.svg#hover'); - --icon__objects_file--active: url('#{$icons-path}objects/light/file.svg#active'); - --icon__objects_file--disabled: url('#{$icons-path}objects/light/file.svg#disabled'); - --icon__objects_external-object--enabled: url('#{$icons-path}objects/light/external-object.svg#enabled'); - --icon__objects_external-object--hover: url('#{$icons-path}objects/light/external-object.svg#hover'); - --icon__objects_external-object--active: url('#{$icons-path}objects/light/external-object.svg#active'); - --icon__objects_external-object--disabled: url('#{$icons-path}objects/light/external-object.svg#disabled'); - --icon__objects_environment-select--enabled: url('#{$icons-path}objects/light/environment-select.svg#enabled'); - --icon__objects_environment-select--hover: url('#{$icons-path}objects/light/environment-select.svg#hover'); - --icon__objects_environment-select--active: url('#{$icons-path}objects/light/environment-select.svg#active'); - --icon__objects_environment-select--disabled: url('#{$icons-path}objects/light/environment-select.svg#disabled'); - --icon__objects_environment-no-select--enabled: url('#{$icons-path}objects/light/environment-no-select.svg#enabled'); - --icon__objects_environment-no-select--hover: url('#{$icons-path}objects/light/environment-no-select.svg#hover'); - --icon__objects_environment-no-select--active: url('#{$icons-path}objects/light/environment-no-select.svg#active'); - --icon__objects_environment-no-select--disabled: url('#{$icons-path}objects/light/environment-no-select.svg#disabled'); - --icon__objects_dso--enabled: url('#{$icons-path}objects/light/dso.svg#enabled'); - --icon__objects_dso--hover: url('#{$icons-path}objects/light/dso.svg#hover'); - --icon__objects_dso--active: url('#{$icons-path}objects/light/dso.svg#active'); - --icon__objects_dso--disabled: url('#{$icons-path}objects/light/dso.svg#disabled'); - --icon__objects_domain--enabled: url('#{$icons-path}objects/light/domain.svg#enabled'); - --icon__objects_domain--hover: url('#{$icons-path}objects/light/domain.svg#hover'); - --icon__objects_domain--active: url('#{$icons-path}objects/light/domain.svg#active'); - --icon__objects_domain--disabled: url('#{$icons-path}objects/light/domain.svg#disabled'); - --icon__objects_document--enabled: url('#{$icons-path}objects/light/document.svg#enabled'); - --icon__objects_document--hover: url('#{$icons-path}objects/light/document.svg#hover'); - --icon__objects_document--active: url('#{$icons-path}objects/light/document.svg#active'); - --icon__objects_document--disabled: url('#{$icons-path}objects/light/document.svg#disabled'); - --icon__objects_document-workflow--enabled: url('#{$icons-path}objects/light/document-workflow.svg#enabled'); - --icon__objects_document-workflow--hover: url('#{$icons-path}objects/light/document-workflow.svg#hover'); - --icon__objects_document-workflow--active: url('#{$icons-path}objects/light/document-workflow.svg#active'); - --icon__objects_document-workflow--disabled: url('#{$icons-path}objects/light/document-workflow.svg#disabled'); - --icon__objects_diagram--enabled: url('#{$icons-path}objects/light/diagram.svg#enabled'); - --icon__objects_diagram--hover: url('#{$icons-path}objects/light/diagram.svg#hover'); - --icon__objects_diagram--active: url('#{$icons-path}objects/light/diagram.svg#active'); - --icon__objects_diagram--disabled: url('#{$icons-path}objects/light/diagram.svg#disabled'); - --icon__objects_design--enabled: url('#{$icons-path}objects/light/design.svg#enabled'); - --icon__objects_design--hover: url('#{$icons-path}objects/light/design.svg#hover'); - --icon__objects_design--active: url('#{$icons-path}objects/light/design.svg#active'); - --icon__objects_design--disabled: url('#{$icons-path}objects/light/design.svg#disabled'); - --icon__objects_deployment-unit--enabled: url('#{$icons-path}objects/light/deployment-unit.svg#enabled'); - --icon__objects_deployment-unit--hover: url('#{$icons-path}objects/light/deployment-unit.svg#hover'); - --icon__objects_deployment-unit--active: url('#{$icons-path}objects/light/deployment-unit.svg#active'); - --icon__objects_deployment-unit--disabled: url('#{$icons-path}objects/light/deployment-unit.svg#disabled'); - --icon__objects_dataview-index--enabled: url('#{$icons-path}objects/light/dataview-index.svg#enabled'); - --icon__objects_dataview-index--hover: url('#{$icons-path}objects/light/dataview-index.svg#hover'); - --icon__objects_dataview-index--active: url('#{$icons-path}objects/light/dataview-index.svg#active'); - --icon__objects_dataview-index--disabled: url('#{$icons-path}objects/light/dataview-index.svg#disabled'); - --icon__objects_datastore--enabled: url('#{$icons-path}objects/light/datastore.svg#enabled'); - --icon__objects_datastore--hover: url('#{$icons-path}objects/light/datastore.svg#hover'); - --icon__objects_datastore--active: url('#{$icons-path}objects/light/datastore.svg#active'); - --icon__objects_datastore--disabled: url('#{$icons-path}objects/light/datastore.svg#disabled'); - --icon__objects_datastore-category--enabled: url('#{$icons-path}objects/light/datastore-category.svg#enabled'); - --icon__objects_datastore-category--hover: url('#{$icons-path}objects/light/datastore-category.svg#hover'); - --icon__objects_datastore-category--active: url('#{$icons-path}objects/light/datastore-category.svg#active'); - --icon__objects_datastore-category--disabled: url('#{$icons-path}objects/light/datastore-category.svg#disabled'); - --icon__objects_data-view--enabled: url('#{$icons-path}objects/light/data-view.svg#enabled'); - --icon__objects_data-view--hover: url('#{$icons-path}objects/light/data-view.svg#hover'); - --icon__objects_data-view--active: url('#{$icons-path}objects/light/data-view.svg#active'); - --icon__objects_data-view--disabled: url('#{$icons-path}objects/light/data-view.svg#disabled'); - --icon__objects_data-selector--enabled: url('#{$icons-path}objects/light/data-selector.svg#enabled'); - --icon__objects_data-selector--hover: url('#{$icons-path}objects/light/data-selector.svg#hover'); - --icon__objects_data-selector--active: url('#{$icons-path}objects/light/data-selector.svg#active'); - --icon__objects_data-selector--disabled: url('#{$icons-path}objects/light/data-selector.svg#disabled'); - --icon__objects_data-provider--enabled: url('#{$icons-path}objects/light/data-provider.svg#enabled'); - --icon__objects_data-provider--hover: url('#{$icons-path}objects/light/data-provider.svg#hover'); - --icon__objects_data-provider--active: url('#{$icons-path}objects/light/data-provider.svg#active'); - --icon__objects_data-provider--disabled: url('#{$icons-path}objects/light/data-provider.svg#disabled'); - --icon__objects_dashboard--enabled: url('#{$icons-path}objects/light/dashboard.svg#enabled'); - --icon__objects_dashboard--hover: url('#{$icons-path}objects/light/dashboard.svg#hover'); - --icon__objects_dashboard--active: url('#{$icons-path}objects/light/dashboard.svg#active'); - --icon__objects_dashboard--disabled: url('#{$icons-path}objects/light/dashboard.svg#disabled'); - --icon__objects_customization--enabled: url('#{$icons-path}objects/light/customization.svg#enabled'); - --icon__objects_customization--hover: url('#{$icons-path}objects/light/customization.svg#hover'); - --icon__objects_customization--active: url('#{$icons-path}objects/light/customization.svg#active'); - --icon__objects_customization--disabled: url('#{$icons-path}objects/light/customization.svg#disabled'); - --icon__objects_conversational-flows--enabled: url('#{$icons-path}objects/light/conversational-flows.svg#enabled'); - --icon__objects_conversational-flows--hover: url('#{$icons-path}objects/light/conversational-flows.svg#hover'); - --icon__objects_conversational-flows--active: url('#{$icons-path}objects/light/conversational-flows.svg#active'); - --icon__objects_conversational-flows--disabled: url('#{$icons-path}objects/light/conversational-flows.svg#disabled'); - --icon__objects_category--enabled: url('#{$icons-path}objects/light/category.svg#enabled'); - --icon__objects_category--hover: url('#{$icons-path}objects/light/category.svg#hover'); - --icon__objects_category--active: url('#{$icons-path}objects/light/category.svg#active'); - --icon__objects_category--disabled: url('#{$icons-path}objects/light/category.svg#disabled'); - --icon__objects_calendars--enabled: url('#{$icons-path}objects/light/calendars.svg#enabled'); - --icon__objects_calendars--hover: url('#{$icons-path}objects/light/calendars.svg#hover'); - --icon__objects_calendars--active: url('#{$icons-path}objects/light/calendars.svg#active'); - --icon__objects_calendars--disabled: url('#{$icons-path}objects/light/calendars.svg#disabled'); - --icon__objects_business-process-diagram--enabled: url('#{$icons-path}objects/light/business-process-diagram.svg#enabled'); - --icon__objects_business-process-diagram--hover: url('#{$icons-path}objects/light/business-process-diagram.svg#hover'); - --icon__objects_business-process-diagram--active: url('#{$icons-path}objects/light/business-process-diagram.svg#active'); - --icon__objects_business-process-diagram--disabled: url('#{$icons-path}objects/light/business-process-diagram.svg#disabled'); - --icon__objects_bg-color--enabled: url('#{$icons-path}objects/light/bg-color.svg#enabled'); - --icon__objects_bg-color--hover: url('#{$icons-path}objects/light/bg-color.svg#hover'); - --icon__objects_bg-color--active: url('#{$icons-path}objects/light/bg-color.svg#active'); - --icon__objects_bg-color--disabled: url('#{$icons-path}objects/light/bg-color.svg#disabled'); - --icon__objects_attribute--enabled: url('#{$icons-path}objects/light/attribute.svg#enabled'); - --icon__objects_attribute--hover: url('#{$icons-path}objects/light/attribute.svg#hover'); - --icon__objects_attribute--active: url('#{$icons-path}objects/light/attribute.svg#active'); - --icon__objects_attribute--disabled: url('#{$icons-path}objects/light/attribute.svg#disabled'); - --icon__objects_api--enabled: url('#{$icons-path}objects/light/api.svg#enabled'); - --icon__objects_api--hover: url('#{$icons-path}objects/light/api.svg#hover'); - --icon__objects_api--active: url('#{$icons-path}objects/light/api.svg#active'); - --icon__objects_api--disabled: url('#{$icons-path}objects/light/api.svg#disabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*objects*/ - --icon__objects_workflow--enabled: url('#{$icons-path}objects/dark/workflow.svg#enabled'); - --icon__objects_workflow--hover: url('#{$icons-path}objects/dark/workflow.svg#hover'); - --icon__objects_workflow--active: url('#{$icons-path}objects/dark/workflow.svg#active'); - --icon__objects_workflow--disabled: url('#{$icons-path}objects/dark/workflow.svg#disabled'); - --icon__objects_work-panel--enabled: url('#{$icons-path}objects/dark/work-panel.svg#enabled'); - --icon__objects_work-panel--hover: url('#{$icons-path}objects/dark/work-panel.svg#hover'); - --icon__objects_work-panel--active: url('#{$icons-path}objects/dark/work-panel.svg#active'); - --icon__objects_work-panel--disabled: url('#{$icons-path}objects/dark/work-panel.svg#disabled'); - --icon__objects_webpanel--enabled: url('#{$icons-path}objects/dark/webpanel.svg#enabled'); - --icon__objects_webpanel--hover: url('#{$icons-path}objects/dark/webpanel.svg#hover'); - --icon__objects_webpanel--active: url('#{$icons-path}objects/dark/webpanel.svg#active'); - --icon__objects_webpanel--disabled: url('#{$icons-path}objects/dark/webpanel.svg#disabled'); - --icon__objects_web-component--enabled: url('#{$icons-path}objects/dark/web-component.svg#enabled'); - --icon__objects_web-component--hover: url('#{$icons-path}objects/dark/web-component.svg#hover'); - --icon__objects_web-component--active: url('#{$icons-path}objects/dark/web-component.svg#active'); - --icon__objects_web-component--disabled: url('#{$icons-path}objects/dark/web-component.svg#disabled'); - --icon__objects_version--enabled: url('#{$icons-path}objects/dark/version.svg#enabled'); - --icon__objects_version--hover: url('#{$icons-path}objects/dark/version.svg#hover'); - --icon__objects_version--active: url('#{$icons-path}objects/dark/version.svg#active'); - --icon__objects_version--disabled: url('#{$icons-path}objects/dark/version.svg#disabled'); - --icon__objects_url-rewrite--enabled: url('#{$icons-path}objects/dark/url-rewrite.svg#enabled'); - --icon__objects_url-rewrite--hover: url('#{$icons-path}objects/dark/url-rewrite.svg#hover'); - --icon__objects_url-rewrite--active: url('#{$icons-path}objects/dark/url-rewrite.svg#active'); - --icon__objects_url-rewrite--disabled: url('#{$icons-path}objects/dark/url-rewrite.svg#disabled'); - --icon__objects_transaction--enabled: url('#{$icons-path}objects/dark/transaction.svg#enabled'); - --icon__objects_transaction--hover: url('#{$icons-path}objects/dark/transaction.svg#hover'); - --icon__objects_transaction--active: url('#{$icons-path}objects/dark/transaction.svg#active'); - --icon__objects_transaction--disabled: url('#{$icons-path}objects/dark/transaction.svg#disabled'); - --icon__objects_to-be-defined--enabled: url('#{$icons-path}objects/dark/to-be-defined.svg#enabled'); - --icon__objects_to-be-defined--hover: url('#{$icons-path}objects/dark/to-be-defined.svg#hover'); - --icon__objects_to-be-defined--active: url('#{$icons-path}objects/dark/to-be-defined.svg#active'); - --icon__objects_to-be-defined--disabled: url('#{$icons-path}objects/dark/to-be-defined.svg#disabled'); - --icon__objects_theme--enabled: url('#{$icons-path}objects/dark/theme.svg#enabled'); - --icon__objects_theme--hover: url('#{$icons-path}objects/dark/theme.svg#hover'); - --icon__objects_theme--active: url('#{$icons-path}objects/dark/theme.svg#active'); - --icon__objects_theme--disabled: url('#{$icons-path}objects/dark/theme.svg#disabled'); - --icon__objects_theme-web--enabled: url('#{$icons-path}objects/dark/theme-web.svg#enabled'); - --icon__objects_theme-web--hover: url('#{$icons-path}objects/dark/theme-web.svg#hover'); - --icon__objects_theme-web--active: url('#{$icons-path}objects/dark/theme-web.svg#active'); - --icon__objects_theme-web--disabled: url('#{$icons-path}objects/dark/theme-web.svg#disabled'); - --icon__objects_theme-for-sd--enabled: url('#{$icons-path}objects/dark/theme-for-sd.svg#enabled'); - --icon__objects_theme-for-sd--hover: url('#{$icons-path}objects/dark/theme-for-sd.svg#hover'); - --icon__objects_theme-for-sd--active: url('#{$icons-path}objects/dark/theme-for-sd.svg#active'); - --icon__objects_theme-for-sd--disabled: url('#{$icons-path}objects/dark/theme-for-sd.svg#disabled'); - --icon__objects_table--enabled: url('#{$icons-path}objects/dark/table.svg#enabled'); - --icon__objects_table--hover: url('#{$icons-path}objects/dark/table.svg#hover'); - --icon__objects_table--active: url('#{$icons-path}objects/dark/table.svg#active'); - --icon__objects_table--disabled: url('#{$icons-path}objects/dark/table.svg#disabled'); - --icon__objects_super-app--enabled: url('#{$icons-path}objects/dark/super-app.svg#enabled'); - --icon__objects_super-app--hover: url('#{$icons-path}objects/dark/super-app.svg#hover'); - --icon__objects_super-app--active: url('#{$icons-path}objects/dark/super-app.svg#active'); - --icon__objects_super-app--disabled: url('#{$icons-path}objects/dark/super-app.svg#disabled'); - --icon__objects_subtype-group--enabled: url('#{$icons-path}objects/dark/subtype-group.svg#enabled'); - --icon__objects_subtype-group--hover: url('#{$icons-path}objects/dark/subtype-group.svg#hover'); - --icon__objects_subtype-group--active: url('#{$icons-path}objects/dark/subtype-group.svg#active'); - --icon__objects_subtype-group--disabled: url('#{$icons-path}objects/dark/subtype-group.svg#disabled'); - --icon__objects_structured-data-type--enabled: url('#{$icons-path}objects/dark/structured-data-type.svg#enabled'); - --icon__objects_structured-data-type--hover: url('#{$icons-path}objects/dark/structured-data-type.svg#hover'); - --icon__objects_structured-data-type--active: url('#{$icons-path}objects/dark/structured-data-type.svg#active'); - --icon__objects_structured-data-type--disabled: url('#{$icons-path}objects/dark/structured-data-type.svg#disabled'); - --icon__objects_stencil--enabled: url('#{$icons-path}objects/dark/stencil.svg#enabled'); - --icon__objects_stencil--hover: url('#{$icons-path}objects/dark/stencil.svg#hover'); - --icon__objects_stencil--active: url('#{$icons-path}objects/dark/stencil.svg#active'); - --icon__objects_stencil--disabled: url('#{$icons-path}objects/dark/stencil.svg#disabled'); - --icon__objects_roles--enabled: url('#{$icons-path}objects/dark/roles.svg#enabled'); - --icon__objects_roles--hover: url('#{$icons-path}objects/dark/roles.svg#hover'); - --icon__objects_roles--active: url('#{$icons-path}objects/dark/roles.svg#active'); - --icon__objects_roles--disabled: url('#{$icons-path}objects/dark/roles.svg#disabled'); - --icon__objects_report--enabled: url('#{$icons-path}objects/dark/report.svg#enabled'); - --icon__objects_report--hover: url('#{$icons-path}objects/dark/report.svg#hover'); - --icon__objects_report--active: url('#{$icons-path}objects/dark/report.svg#active'); - --icon__objects_report--disabled: url('#{$icons-path}objects/dark/report.svg#disabled'); - --icon__objects_references--enabled: url('#{$icons-path}objects/dark/references.svg#enabled'); - --icon__objects_references--hover: url('#{$icons-path}objects/dark/references.svg#hover'); - --icon__objects_references--active: url('#{$icons-path}objects/dark/references.svg#active'); - --icon__objects_references--disabled: url('#{$icons-path}objects/dark/references.svg#disabled'); - --icon__objects_query--enabled: url('#{$icons-path}objects/dark/query.svg#enabled'); - --icon__objects_query--hover: url('#{$icons-path}objects/dark/query.svg#hover'); - --icon__objects_query--active: url('#{$icons-path}objects/dark/query.svg#active'); - --icon__objects_query--disabled: url('#{$icons-path}objects/dark/query.svg#disabled'); - --icon__objects_procedure--enabled: url('#{$icons-path}objects/dark/procedure.svg#enabled'); - --icon__objects_procedure--hover: url('#{$icons-path}objects/dark/procedure.svg#hover'); - --icon__objects_procedure--active: url('#{$icons-path}objects/dark/procedure.svg#active'); - --icon__objects_procedure--disabled: url('#{$icons-path}objects/dark/procedure.svg#disabled'); - --icon__objects_patterns--enabled: url('#{$icons-path}objects/dark/patterns.svg#enabled'); - --icon__objects_patterns--hover: url('#{$icons-path}objects/dark/patterns.svg#hover'); - --icon__objects_patterns--active: url('#{$icons-path}objects/dark/patterns.svg#active'); - --icon__objects_patterns--disabled: url('#{$icons-path}objects/dark/patterns.svg#disabled'); - --icon__objects_panel-for-sd--enabled: url('#{$icons-path}objects/dark/panel-for-sd.svg#enabled'); - --icon__objects_panel-for-sd--hover: url('#{$icons-path}objects/dark/panel-for-sd.svg#hover'); - --icon__objects_panel-for-sd--active: url('#{$icons-path}objects/dark/panel-for-sd.svg#active'); - --icon__objects_panel-for-sd--disabled: url('#{$icons-path}objects/dark/panel-for-sd.svg#disabled'); - --icon__objects_orphant-document--enabled: url('#{$icons-path}objects/dark/orphant-document.svg#enabled'); - --icon__objects_orphant-document--hover: url('#{$icons-path}objects/dark/orphant-document.svg#hover'); - --icon__objects_orphant-document--active: url('#{$icons-path}objects/dark/orphant-document.svg#active'); - --icon__objects_orphant-document--disabled: url('#{$icons-path}objects/dark/orphant-document.svg#disabled'); - --icon__objects_offline-database--enabled: url('#{$icons-path}objects/dark/offline-database.svg#enabled'); - --icon__objects_offline-database--hover: url('#{$icons-path}objects/dark/offline-database.svg#hover'); - --icon__objects_offline-database--active: url('#{$icons-path}objects/dark/offline-database.svg#active'); - --icon__objects_offline-database--disabled: url('#{$icons-path}objects/dark/offline-database.svg#disabled'); - --icon__objects_object--enabled: url('#{$icons-path}objects/dark/object.svg#enabled'); - --icon__objects_object--hover: url('#{$icons-path}objects/dark/object.svg#hover'); - --icon__objects_object--active: url('#{$icons-path}objects/dark/object.svg#active'); - --icon__objects_object--disabled: url('#{$icons-path}objects/dark/object.svg#disabled'); - --icon__objects_notification-templates--enabled: url('#{$icons-path}objects/dark/notification-templates.svg#enabled'); - --icon__objects_notification-templates--hover: url('#{$icons-path}objects/dark/notification-templates.svg#hover'); - --icon__objects_notification-templates--active: url('#{$icons-path}objects/dark/notification-templates.svg#active'); - --icon__objects_notification-templates--disabled: url('#{$icons-path}objects/dark/notification-templates.svg#disabled'); - --icon__objects_module--enabled: url('#{$icons-path}objects/dark/module.svg#enabled'); - --icon__objects_module--hover: url('#{$icons-path}objects/dark/module.svg#hover'); - --icon__objects_module--active: url('#{$icons-path}objects/dark/module.svg#active'); - --icon__objects_module--disabled: url('#{$icons-path}objects/dark/module.svg#disabled'); - --icon__objects_module-open--enabled: url('#{$icons-path}objects/dark/module-open.svg#enabled'); - --icon__objects_module-open--hover: url('#{$icons-path}objects/dark/module-open.svg#hover'); - --icon__objects_module-open--active: url('#{$icons-path}objects/dark/module-open.svg#active'); - --icon__objects_module-open--disabled: url('#{$icons-path}objects/dark/module-open.svg#disabled'); - --icon__objects_mini-app--enabled: url('#{$icons-path}objects/dark/mini-app.svg#enabled'); - --icon__objects_mini-app--hover: url('#{$icons-path}objects/dark/mini-app.svg#hover'); - --icon__objects_mini-app--active: url('#{$icons-path}objects/dark/mini-app.svg#active'); - --icon__objects_mini-app--disabled: url('#{$icons-path}objects/dark/mini-app.svg#disabled'); - --icon__objects_menubar--enabled: url('#{$icons-path}objects/dark/menubar.svg#enabled'); - --icon__objects_menubar--hover: url('#{$icons-path}objects/dark/menubar.svg#hover'); - --icon__objects_menubar--active: url('#{$icons-path}objects/dark/menubar.svg#active'); - --icon__objects_menubar--disabled: url('#{$icons-path}objects/dark/menubar.svg#disabled'); - --icon__objects_menu--enabled: url('#{$icons-path}objects/dark/menu.svg#enabled'); - --icon__objects_menu--hover: url('#{$icons-path}objects/dark/menu.svg#hover'); - --icon__objects_menu--active: url('#{$icons-path}objects/dark/menu.svg#active'); - --icon__objects_menu--disabled: url('#{$icons-path}objects/dark/menu.svg#disabled'); - --icon__objects_masterpage--enabled: url('#{$icons-path}objects/dark/masterpage.svg#enabled'); - --icon__objects_masterpage--hover: url('#{$icons-path}objects/dark/masterpage.svg#hover'); - --icon__objects_masterpage--active: url('#{$icons-path}objects/dark/masterpage.svg#active'); - --icon__objects_masterpage--disabled: url('#{$icons-path}objects/dark/masterpage.svg#disabled'); - --icon__objects_main-object--enabled: url('#{$icons-path}objects/dark/main-object.svg#enabled'); - --icon__objects_main-object--hover: url('#{$icons-path}objects/dark/main-object.svg#hover'); - --icon__objects_main-object--active: url('#{$icons-path}objects/dark/main-object.svg#active'); - --icon__objects_main-object--disabled: url('#{$icons-path}objects/dark/main-object.svg#disabled'); - --icon__objects_language--enabled: url('#{$icons-path}objects/dark/language.svg#enabled'); - --icon__objects_language--hover: url('#{$icons-path}objects/dark/language.svg#hover'); - --icon__objects_language--active: url('#{$icons-path}objects/dark/language.svg#active'); - --icon__objects_language--disabled: url('#{$icons-path}objects/dark/language.svg#disabled'); - --icon__objects_knowledge-base--enabled: url('#{$icons-path}objects/dark/knowledge-base.svg#enabled'); - --icon__objects_knowledge-base--hover: url('#{$icons-path}objects/dark/knowledge-base.svg#hover'); - --icon__objects_knowledge-base--active: url('#{$icons-path}objects/dark/knowledge-base.svg#active'); - --icon__objects_knowledge-base--disabled: url('#{$icons-path}objects/dark/knowledge-base.svg#disabled'); - --icon__objects_image--enabled: url('#{$icons-path}objects/dark/image.svg#enabled'); - --icon__objects_image--hover: url('#{$icons-path}objects/dark/image.svg#hover'); - --icon__objects_image--active: url('#{$icons-path}objects/dark/image.svg#active'); - --icon__objects_image--disabled: url('#{$icons-path}objects/dark/image.svg#disabled'); - --icon__objects_generator--enabled: url('#{$icons-path}objects/dark/generator.svg#enabled'); - --icon__objects_generator--hover: url('#{$icons-path}objects/dark/generator.svg#hover'); - --icon__objects_generator--active: url('#{$icons-path}objects/dark/generator.svg#active'); - --icon__objects_generator--disabled: url('#{$icons-path}objects/dark/generator.svg#disabled'); - --icon__objects_generator-category--enabled: url('#{$icons-path}objects/dark/generator-category.svg#enabled'); - --icon__objects_generator-category--hover: url('#{$icons-path}objects/dark/generator-category.svg#hover'); - --icon__objects_generator-category--active: url('#{$icons-path}objects/dark/generator-category.svg#active'); - --icon__objects_generator-category--disabled: url('#{$icons-path}objects/dark/generator-category.svg#disabled'); - --icon__objects_folder--enabled: url('#{$icons-path}objects/dark/folder.svg#enabled'); - --icon__objects_folder--hover: url('#{$icons-path}objects/dark/folder.svg#hover'); - --icon__objects_folder--active: url('#{$icons-path}objects/dark/folder.svg#active'); - --icon__objects_folder--disabled: url('#{$icons-path}objects/dark/folder.svg#disabled'); - --icon__objects_folder-open--enabled: url('#{$icons-path}objects/dark/folder-open.svg#enabled'); - --icon__objects_folder-open--hover: url('#{$icons-path}objects/dark/folder-open.svg#hover'); - --icon__objects_folder-open--active: url('#{$icons-path}objects/dark/folder-open.svg#active'); - --icon__objects_folder-open--disabled: url('#{$icons-path}objects/dark/folder-open.svg#disabled'); - --icon__objects_file--enabled: url('#{$icons-path}objects/dark/file.svg#enabled'); - --icon__objects_file--hover: url('#{$icons-path}objects/dark/file.svg#hover'); - --icon__objects_file--active: url('#{$icons-path}objects/dark/file.svg#active'); - --icon__objects_file--disabled: url('#{$icons-path}objects/dark/file.svg#disabled'); - --icon__objects_external-object--enabled: url('#{$icons-path}objects/dark/external-object.svg#enabled'); - --icon__objects_external-object--hover: url('#{$icons-path}objects/dark/external-object.svg#hover'); - --icon__objects_external-object--active: url('#{$icons-path}objects/dark/external-object.svg#active'); - --icon__objects_external-object--disabled: url('#{$icons-path}objects/dark/external-object.svg#disabled'); - --icon__objects_environment-select--enabled: url('#{$icons-path}objects/dark/environment-select.svg#enabled'); - --icon__objects_environment-select--hover: url('#{$icons-path}objects/dark/environment-select.svg#hover'); - --icon__objects_environment-select--active: url('#{$icons-path}objects/dark/environment-select.svg#active'); - --icon__objects_environment-select--disabled: url('#{$icons-path}objects/dark/environment-select.svg#disabled'); - --icon__objects_environment-no-select--enabled: url('#{$icons-path}objects/dark/environment-no-select.svg#enabled'); - --icon__objects_environment-no-select--hover: url('#{$icons-path}objects/dark/environment-no-select.svg#hover'); - --icon__objects_environment-no-select--active: url('#{$icons-path}objects/dark/environment-no-select.svg#active'); - --icon__objects_environment-no-select--disabled: url('#{$icons-path}objects/dark/environment-no-select.svg#disabled'); - --icon__objects_dso--enabled: url('#{$icons-path}objects/dark/dso.svg#enabled'); - --icon__objects_dso--hover: url('#{$icons-path}objects/dark/dso.svg#hover'); - --icon__objects_dso--active: url('#{$icons-path}objects/dark/dso.svg#active'); - --icon__objects_dso--disabled: url('#{$icons-path}objects/dark/dso.svg#disabled'); - --icon__objects_domain--enabled: url('#{$icons-path}objects/dark/domain.svg#enabled'); - --icon__objects_domain--hover: url('#{$icons-path}objects/dark/domain.svg#hover'); - --icon__objects_domain--active: url('#{$icons-path}objects/dark/domain.svg#active'); - --icon__objects_domain--disabled: url('#{$icons-path}objects/dark/domain.svg#disabled'); - --icon__objects_document--enabled: url('#{$icons-path}objects/dark/document.svg#enabled'); - --icon__objects_document--hover: url('#{$icons-path}objects/dark/document.svg#hover'); - --icon__objects_document--active: url('#{$icons-path}objects/dark/document.svg#active'); - --icon__objects_document--disabled: url('#{$icons-path}objects/dark/document.svg#disabled'); - --icon__objects_document-workflow--enabled: url('#{$icons-path}objects/dark/document-workflow.svg#enabled'); - --icon__objects_document-workflow--hover: url('#{$icons-path}objects/dark/document-workflow.svg#hover'); - --icon__objects_document-workflow--active: url('#{$icons-path}objects/dark/document-workflow.svg#active'); - --icon__objects_document-workflow--disabled: url('#{$icons-path}objects/dark/document-workflow.svg#disabled'); - --icon__objects_diagram--enabled: url('#{$icons-path}objects/dark/diagram.svg#enabled'); - --icon__objects_diagram--hover: url('#{$icons-path}objects/dark/diagram.svg#hover'); - --icon__objects_diagram--active: url('#{$icons-path}objects/dark/diagram.svg#active'); - --icon__objects_diagram--disabled: url('#{$icons-path}objects/dark/diagram.svg#disabled'); - --icon__objects_design--enabled: url('#{$icons-path}objects/dark/design.svg#enabled'); - --icon__objects_design--hover: url('#{$icons-path}objects/dark/design.svg#hover'); - --icon__objects_design--active: url('#{$icons-path}objects/dark/design.svg#active'); - --icon__objects_design--disabled: url('#{$icons-path}objects/dark/design.svg#disabled'); - --icon__objects_deployment-unit--enabled: url('#{$icons-path}objects/dark/deployment-unit.svg#enabled'); - --icon__objects_deployment-unit--hover: url('#{$icons-path}objects/dark/deployment-unit.svg#hover'); - --icon__objects_deployment-unit--active: url('#{$icons-path}objects/dark/deployment-unit.svg#active'); - --icon__objects_deployment-unit--disabled: url('#{$icons-path}objects/dark/deployment-unit.svg#disabled'); - --icon__objects_dataview-index--enabled: url('#{$icons-path}objects/dark/dataview-index.svg#enabled'); - --icon__objects_dataview-index--hover: url('#{$icons-path}objects/dark/dataview-index.svg#hover'); - --icon__objects_dataview-index--active: url('#{$icons-path}objects/dark/dataview-index.svg#active'); - --icon__objects_dataview-index--disabled: url('#{$icons-path}objects/dark/dataview-index.svg#disabled'); - --icon__objects_datastore--enabled: url('#{$icons-path}objects/dark/datastore.svg#enabled'); - --icon__objects_datastore--hover: url('#{$icons-path}objects/dark/datastore.svg#hover'); - --icon__objects_datastore--active: url('#{$icons-path}objects/dark/datastore.svg#active'); - --icon__objects_datastore--disabled: url('#{$icons-path}objects/dark/datastore.svg#disabled'); - --icon__objects_datastore-category--enabled: url('#{$icons-path}objects/dark/datastore-category.svg#enabled'); - --icon__objects_datastore-category--hover: url('#{$icons-path}objects/dark/datastore-category.svg#hover'); - --icon__objects_datastore-category--active: url('#{$icons-path}objects/dark/datastore-category.svg#active'); - --icon__objects_datastore-category--disabled: url('#{$icons-path}objects/dark/datastore-category.svg#disabled'); - --icon__objects_data-view--enabled: url('#{$icons-path}objects/dark/data-view.svg#enabled'); - --icon__objects_data-view--hover: url('#{$icons-path}objects/dark/data-view.svg#hover'); - --icon__objects_data-view--active: url('#{$icons-path}objects/dark/data-view.svg#active'); - --icon__objects_data-view--disabled: url('#{$icons-path}objects/dark/data-view.svg#disabled'); - --icon__objects_data-selector--enabled: url('#{$icons-path}objects/dark/data-selector.svg#enabled'); - --icon__objects_data-selector--hover: url('#{$icons-path}objects/dark/data-selector.svg#hover'); - --icon__objects_data-selector--active: url('#{$icons-path}objects/dark/data-selector.svg#active'); - --icon__objects_data-selector--disabled: url('#{$icons-path}objects/dark/data-selector.svg#disabled'); - --icon__objects_data-provider--enabled: url('#{$icons-path}objects/dark/data-provider.svg#enabled'); - --icon__objects_data-provider--hover: url('#{$icons-path}objects/dark/data-provider.svg#hover'); - --icon__objects_data-provider--active: url('#{$icons-path}objects/dark/data-provider.svg#active'); - --icon__objects_data-provider--disabled: url('#{$icons-path}objects/dark/data-provider.svg#disabled'); - --icon__objects_dashboard--enabled: url('#{$icons-path}objects/dark/dashboard.svg#enabled'); - --icon__objects_dashboard--hover: url('#{$icons-path}objects/dark/dashboard.svg#hover'); - --icon__objects_dashboard--active: url('#{$icons-path}objects/dark/dashboard.svg#active'); - --icon__objects_dashboard--disabled: url('#{$icons-path}objects/dark/dashboard.svg#disabled'); - --icon__objects_customization--enabled: url('#{$icons-path}objects/dark/customization.svg#enabled'); - --icon__objects_customization--hover: url('#{$icons-path}objects/dark/customization.svg#hover'); - --icon__objects_customization--active: url('#{$icons-path}objects/dark/customization.svg#active'); - --icon__objects_customization--disabled: url('#{$icons-path}objects/dark/customization.svg#disabled'); - --icon__objects_conversational-flows--enabled: url('#{$icons-path}objects/dark/conversational-flows.svg#enabled'); - --icon__objects_conversational-flows--hover: url('#{$icons-path}objects/dark/conversational-flows.svg#hover'); - --icon__objects_conversational-flows--active: url('#{$icons-path}objects/dark/conversational-flows.svg#active'); - --icon__objects_conversational-flows--disabled: url('#{$icons-path}objects/dark/conversational-flows.svg#disabled'); - --icon__objects_category--enabled: url('#{$icons-path}objects/dark/category.svg#enabled'); - --icon__objects_category--hover: url('#{$icons-path}objects/dark/category.svg#hover'); - --icon__objects_category--active: url('#{$icons-path}objects/dark/category.svg#active'); - --icon__objects_category--disabled: url('#{$icons-path}objects/dark/category.svg#disabled'); - --icon__objects_calendars--enabled: url('#{$icons-path}objects/dark/calendars.svg#enabled'); - --icon__objects_calendars--hover: url('#{$icons-path}objects/dark/calendars.svg#hover'); - --icon__objects_calendars--active: url('#{$icons-path}objects/dark/calendars.svg#active'); - --icon__objects_calendars--disabled: url('#{$icons-path}objects/dark/calendars.svg#disabled'); - --icon__objects_business-process-diagram--enabled: url('#{$icons-path}objects/dark/business-process-diagram.svg#enabled'); - --icon__objects_business-process-diagram--hover: url('#{$icons-path}objects/dark/business-process-diagram.svg#hover'); - --icon__objects_business-process-diagram--active: url('#{$icons-path}objects/dark/business-process-diagram.svg#active'); - --icon__objects_business-process-diagram--disabled: url('#{$icons-path}objects/dark/business-process-diagram.svg#disabled'); - --icon__objects_bg-color--enabled: url('#{$icons-path}objects/dark/bg-color.svg#enabled'); - --icon__objects_bg-color--hover: url('#{$icons-path}objects/dark/bg-color.svg#hover'); - --icon__objects_bg-color--active: url('#{$icons-path}objects/dark/bg-color.svg#active'); - --icon__objects_bg-color--disabled: url('#{$icons-path}objects/dark/bg-color.svg#disabled'); - --icon__objects_attribute--enabled: url('#{$icons-path}objects/dark/attribute.svg#enabled'); - --icon__objects_attribute--hover: url('#{$icons-path}objects/dark/attribute.svg#hover'); - --icon__objects_attribute--active: url('#{$icons-path}objects/dark/attribute.svg#active'); - --icon__objects_attribute--disabled: url('#{$icons-path}objects/dark/attribute.svg#disabled'); - --icon__objects_api--enabled: url('#{$icons-path}objects/dark/api.svg#enabled'); - --icon__objects_api--hover: url('#{$icons-path}objects/dark/api.svg#hover'); - --icon__objects_api--active: url('#{$icons-path}objects/dark/api.svg#active'); - --icon__objects_api--disabled: url('#{$icons-path}objects/dark/api.svg#disabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*gx-test*/ - --icon__gx-test_unit-test--enabled: url('#{$icons-path}gx-test/light/unit-test.svg#enabled'); - --icon__gx-test_unit-test--hover: url('#{$icons-path}gx-test/light/unit-test.svg#hover'); - --icon__gx-test_unit-test--active: url('#{$icons-path}gx-test/light/unit-test.svg#active'); - --icon__gx-test_unit-test--disabled: url('#{$icons-path}gx-test/light/unit-test.svg#disabled'); - --icon__gx-test_unit-test-db--enabled: url('#{$icons-path}gx-test/light/unit-test-db.svg#enabled'); - --icon__gx-test_unit-test-db--hover: url('#{$icons-path}gx-test/light/unit-test-db.svg#hover'); - --icon__gx-test_unit-test-db--active: url('#{$icons-path}gx-test/light/unit-test-db.svg#active'); - --icon__gx-test_unit-test-db--disabled: url('#{$icons-path}gx-test/light/unit-test-db.svg#disabled'); - --icon__gx-test_ui-test-web--enabled: url('#{$icons-path}gx-test/light/ui-test-web.svg#enabled'); - --icon__gx-test_ui-test-web--hover: url('#{$icons-path}gx-test/light/ui-test-web.svg#hover'); - --icon__gx-test_ui-test-web--active: url('#{$icons-path}gx-test/light/ui-test-web.svg#active'); - --icon__gx-test_ui-test-web--disabled: url('#{$icons-path}gx-test/light/ui-test-web.svg#disabled'); - --icon__gx-test_ui-test-sd--enabled: url('#{$icons-path}gx-test/light/ui-test-sd.svg#enabled'); - --icon__gx-test_ui-test-sd--hover: url('#{$icons-path}gx-test/light/ui-test-sd.svg#hover'); - --icon__gx-test_ui-test-sd--active: url('#{$icons-path}gx-test/light/ui-test-sd.svg#active'); - --icon__gx-test_ui-test-sd--disabled: url('#{$icons-path}gx-test/light/ui-test-sd.svg#disabled'); - --icon__gx-test_test-suite--enabled: url('#{$icons-path}gx-test/light/test-suite.svg#enabled'); - --icon__gx-test_test-suite--hover: url('#{$icons-path}gx-test/light/test-suite.svg#hover'); - --icon__gx-test_test-suite--active: url('#{$icons-path}gx-test/light/test-suite.svg#active'); - --icon__gx-test_test-suite--disabled: url('#{$icons-path}gx-test/light/test-suite.svg#disabled'); - --icon__gx-test_test-results--enabled: url('#{$icons-path}gx-test/light/test-results.svg#enabled'); - --icon__gx-test_test-results--hover: url('#{$icons-path}gx-test/light/test-results.svg#hover'); - --icon__gx-test_test-results--active: url('#{$icons-path}gx-test/light/test-results.svg#active'); - --icon__gx-test_test-results--disabled: url('#{$icons-path}gx-test/light/test-results.svg#disabled'); - --icon__gx-test_test-folder--enabled: url('#{$icons-path}gx-test/light/test-folder.svg#enabled'); - --icon__gx-test_test-folder--hover: url('#{$icons-path}gx-test/light/test-folder.svg#hover'); - --icon__gx-test_test-folder--active: url('#{$icons-path}gx-test/light/test-folder.svg#active'); - --icon__gx-test_test-folder--disabled: url('#{$icons-path}gx-test/light/test-folder.svg#disabled'); - --icon__gx-test_test-folder-open--enabled: url('#{$icons-path}gx-test/light/test-folder-open.svg#enabled'); - --icon__gx-test_test-folder-open--hover: url('#{$icons-path}gx-test/light/test-folder-open.svg#hover'); - --icon__gx-test_test-folder-open--active: url('#{$icons-path}gx-test/light/test-folder-open.svg#active'); - --icon__gx-test_test-folder-open--disabled: url('#{$icons-path}gx-test/light/test-folder-open.svg#disabled'); - --icon__gx-test_screenshot-viewer--enabled: url('#{$icons-path}gx-test/light/screenshot-viewer.svg#enabled'); - --icon__gx-test_screenshot-viewer--hover: url('#{$icons-path}gx-test/light/screenshot-viewer.svg#hover'); - --icon__gx-test_screenshot-viewer--active: url('#{$icons-path}gx-test/light/screenshot-viewer.svg#active'); - --icon__gx-test_screenshot-viewer--disabled: url('#{$icons-path}gx-test/light/screenshot-viewer.svg#disabled'); - --icon__gx-test_run-unit-test--enabled: url('#{$icons-path}gx-test/light/run-unit-test.svg#enabled'); - --icon__gx-test_run-unit-test--hover: url('#{$icons-path}gx-test/light/run-unit-test.svg#hover'); - --icon__gx-test_run-unit-test--active: url('#{$icons-path}gx-test/light/run-unit-test.svg#active'); - --icon__gx-test_run-unit-test--disabled: url('#{$icons-path}gx-test/light/run-unit-test.svg#disabled'); - --icon__gx-test_run-ui-test-web--enabled: url('#{$icons-path}gx-test/light/run-ui-test-web.svg#enabled'); - --icon__gx-test_run-ui-test-web--hover: url('#{$icons-path}gx-test/light/run-ui-test-web.svg#hover'); - --icon__gx-test_run-ui-test-web--active: url('#{$icons-path}gx-test/light/run-ui-test-web.svg#active'); - --icon__gx-test_run-ui-test-web--disabled: url('#{$icons-path}gx-test/light/run-ui-test-web.svg#disabled'); - --icon__gx-test_run-ui-test-sd--enabled: url('#{$icons-path}gx-test/light/run-ui-test-sd.svg#enabled'); - --icon__gx-test_run-ui-test-sd--hover: url('#{$icons-path}gx-test/light/run-ui-test-sd.svg#hover'); - --icon__gx-test_run-ui-test-sd--active: url('#{$icons-path}gx-test/light/run-ui-test-sd.svg#active'); - --icon__gx-test_run-ui-test-sd--disabled: url('#{$icons-path}gx-test/light/run-ui-test-sd.svg#disabled'); - --icon__gx-test_run-tests--enabled: url('#{$icons-path}gx-test/light/run-tests.svg#enabled'); - --icon__gx-test_run-tests--hover: url('#{$icons-path}gx-test/light/run-tests.svg#hover'); - --icon__gx-test_run-tests--active: url('#{$icons-path}gx-test/light/run-tests.svg#active'); - --icon__gx-test_run-tests--disabled: url('#{$icons-path}gx-test/light/run-tests.svg#disabled'); - --icon__gx-test_run-test-suite--enabled: url('#{$icons-path}gx-test/light/run-test-suite.svg#enabled'); - --icon__gx-test_run-test-suite--hover: url('#{$icons-path}gx-test/light/run-test-suite.svg#hover'); - --icon__gx-test_run-test-suite--active: url('#{$icons-path}gx-test/light/run-test-suite.svg#active'); - --icon__gx-test_run-test-suite--disabled: url('#{$icons-path}gx-test/light/run-test-suite.svg#disabled'); - --icon__gx-test_run-test-cancel--enabled: url('#{$icons-path}gx-test/light/run-test-cancel.svg#enabled'); - --icon__gx-test_run-test-cancel--hover: url('#{$icons-path}gx-test/light/run-test-cancel.svg#hover'); - --icon__gx-test_run-test-cancel--active: url('#{$icons-path}gx-test/light/run-test-cancel.svg#active'); - --icon__gx-test_run-test-cancel--disabled: url('#{$icons-path}gx-test/light/run-test-cancel.svg#disabled'); - --icon__gx-test_result-warning--enabled: url('#{$icons-path}gx-test/light/result-warning.svg#enabled'); - --icon__gx-test_result-warning--hover: url('#{$icons-path}gx-test/light/result-warning.svg#hover'); - --icon__gx-test_result-warning--active: url('#{$icons-path}gx-test/light/result-warning.svg#active'); - --icon__gx-test_result-warning--disabled: url('#{$icons-path}gx-test/light/result-warning.svg#disabled'); - --icon__gx-test_result-skipped--enabled: url('#{$icons-path}gx-test/light/result-skipped.svg#enabled'); - --icon__gx-test_result-skipped--hover: url('#{$icons-path}gx-test/light/result-skipped.svg#hover'); - --icon__gx-test_result-skipped--active: url('#{$icons-path}gx-test/light/result-skipped.svg#active'); - --icon__gx-test_result-skipped--disabled: url('#{$icons-path}gx-test/light/result-skipped.svg#disabled'); - --icon__gx-test_result-ok--enabled: url('#{$icons-path}gx-test/light/result-ok.svg#enabled'); - --icon__gx-test_result-ok--hover: url('#{$icons-path}gx-test/light/result-ok.svg#hover'); - --icon__gx-test_result-ok--active: url('#{$icons-path}gx-test/light/result-ok.svg#active'); - --icon__gx-test_result-ok--disabled: url('#{$icons-path}gx-test/light/result-ok.svg#disabled'); - --icon__gx-test_result-exception--enabled: url('#{$icons-path}gx-test/light/result-exception.svg#enabled'); - --icon__gx-test_result-exception--hover: url('#{$icons-path}gx-test/light/result-exception.svg#hover'); - --icon__gx-test_result-exception--active: url('#{$icons-path}gx-test/light/result-exception.svg#active'); - --icon__gx-test_result-exception--disabled: url('#{$icons-path}gx-test/light/result-exception.svg#disabled'); - --icon__gx-test_result-error--enabled: url('#{$icons-path}gx-test/light/result-error.svg#enabled'); - --icon__gx-test_result-error--hover: url('#{$icons-path}gx-test/light/result-error.svg#hover'); - --icon__gx-test_result-error--active: url('#{$icons-path}gx-test/light/result-error.svg#active'); - --icon__gx-test_result-error--disabled: url('#{$icons-path}gx-test/light/result-error.svg#disabled'); - --icon__gx-test_record-mock--enabled: url('#{$icons-path}gx-test/light/record-mock.svg#enabled'); - --icon__gx-test_record-mock--hover: url('#{$icons-path}gx-test/light/record-mock.svg#hover'); - --icon__gx-test_record-mock--active: url('#{$icons-path}gx-test/light/record-mock.svg#active'); - --icon__gx-test_record-mock--disabled: url('#{$icons-path}gx-test/light/record-mock.svg#disabled'); - --icon__gx-test_plus--enabled: url('#{$icons-path}gx-test/light/plus.svg#enabled'); - --icon__gx-test_plus--hover: url('#{$icons-path}gx-test/light/plus.svg#hover'); - --icon__gx-test_plus--active: url('#{$icons-path}gx-test/light/plus.svg#active'); - --icon__gx-test_plus--disabled: url('#{$icons-path}gx-test/light/plus.svg#disabled'); - --icon__gx-test_image--enabled: url('#{$icons-path}gx-test/light/image.svg#enabled'); - --icon__gx-test_image--hover: url('#{$icons-path}gx-test/light/image.svg#hover'); - --icon__gx-test_image--active: url('#{$icons-path}gx-test/light/image.svg#active'); - --icon__gx-test_image--disabled: url('#{$icons-path}gx-test/light/image.svg#disabled'); - --icon__gx-test_explorer--enabled: url('#{$icons-path}gx-test/light/explorer.svg#enabled'); - --icon__gx-test_explorer--hover: url('#{$icons-path}gx-test/light/explorer.svg#hover'); - --icon__gx-test_explorer--active: url('#{$icons-path}gx-test/light/explorer.svg#active'); - --icon__gx-test_explorer--disabled: url('#{$icons-path}gx-test/light/explorer.svg#disabled'); - --icon__gx-test_cutfo--enabled: url('#{$icons-path}gx-test/light/cutfo.svg#enabled'); - --icon__gx-test_cutfo--hover: url('#{$icons-path}gx-test/light/cutfo.svg#hover'); - --icon__gx-test_cutfo--active: url('#{$icons-path}gx-test/light/cutfo.svg#active'); - --icon__gx-test_cutfo--disabled: url('#{$icons-path}gx-test/light/cutfo.svg#disabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*gx-test*/ - --icon__gx-test_unit-test--enabled: url('#{$icons-path}gx-test/dark/unit-test.svg#enabled'); - --icon__gx-test_unit-test--hover: url('#{$icons-path}gx-test/dark/unit-test.svg#hover'); - --icon__gx-test_unit-test--active: url('#{$icons-path}gx-test/dark/unit-test.svg#active'); - --icon__gx-test_unit-test--disabled: url('#{$icons-path}gx-test/dark/unit-test.svg#disabled'); - --icon__gx-test_unit-test-db--enabled: url('#{$icons-path}gx-test/dark/unit-test-db.svg#enabled'); - --icon__gx-test_unit-test-db--hover: url('#{$icons-path}gx-test/dark/unit-test-db.svg#hover'); - --icon__gx-test_unit-test-db--active: url('#{$icons-path}gx-test/dark/unit-test-db.svg#active'); - --icon__gx-test_unit-test-db--disabled: url('#{$icons-path}gx-test/dark/unit-test-db.svg#disabled'); - --icon__gx-test_ui-test-web--enabled: url('#{$icons-path}gx-test/dark/ui-test-web.svg#enabled'); - --icon__gx-test_ui-test-web--hover: url('#{$icons-path}gx-test/dark/ui-test-web.svg#hover'); - --icon__gx-test_ui-test-web--active: url('#{$icons-path}gx-test/dark/ui-test-web.svg#active'); - --icon__gx-test_ui-test-web--disabled: url('#{$icons-path}gx-test/dark/ui-test-web.svg#disabled'); - --icon__gx-test_ui-test-sd--enabled: url('#{$icons-path}gx-test/dark/ui-test-sd.svg#enabled'); - --icon__gx-test_ui-test-sd--hover: url('#{$icons-path}gx-test/dark/ui-test-sd.svg#hover'); - --icon__gx-test_ui-test-sd--active: url('#{$icons-path}gx-test/dark/ui-test-sd.svg#active'); - --icon__gx-test_ui-test-sd--disabled: url('#{$icons-path}gx-test/dark/ui-test-sd.svg#disabled'); - --icon__gx-test_test-suite--enabled: url('#{$icons-path}gx-test/dark/test-suite.svg#enabled'); - --icon__gx-test_test-suite--hover: url('#{$icons-path}gx-test/dark/test-suite.svg#hover'); - --icon__gx-test_test-suite--active: url('#{$icons-path}gx-test/dark/test-suite.svg#active'); - --icon__gx-test_test-suite--disabled: url('#{$icons-path}gx-test/dark/test-suite.svg#disabled'); - --icon__gx-test_test-results--enabled: url('#{$icons-path}gx-test/dark/test-results.svg#enabled'); - --icon__gx-test_test-results--hover: url('#{$icons-path}gx-test/dark/test-results.svg#hover'); - --icon__gx-test_test-results--active: url('#{$icons-path}gx-test/dark/test-results.svg#active'); - --icon__gx-test_test-results--disabled: url('#{$icons-path}gx-test/dark/test-results.svg#disabled'); - --icon__gx-test_test-folder--enabled: url('#{$icons-path}gx-test/dark/test-folder.svg#enabled'); - --icon__gx-test_test-folder--hover: url('#{$icons-path}gx-test/dark/test-folder.svg#hover'); - --icon__gx-test_test-folder--active: url('#{$icons-path}gx-test/dark/test-folder.svg#active'); - --icon__gx-test_test-folder--disabled: url('#{$icons-path}gx-test/dark/test-folder.svg#disabled'); - --icon__gx-test_test-folder-open--enabled: url('#{$icons-path}gx-test/dark/test-folder-open.svg#enabled'); - --icon__gx-test_test-folder-open--hover: url('#{$icons-path}gx-test/dark/test-folder-open.svg#hover'); - --icon__gx-test_test-folder-open--active: url('#{$icons-path}gx-test/dark/test-folder-open.svg#active'); - --icon__gx-test_test-folder-open--disabled: url('#{$icons-path}gx-test/dark/test-folder-open.svg#disabled'); - --icon__gx-test_screenshot-viewer--enabled: url('#{$icons-path}gx-test/dark/screenshot-viewer.svg#enabled'); - --icon__gx-test_screenshot-viewer--hover: url('#{$icons-path}gx-test/dark/screenshot-viewer.svg#hover'); - --icon__gx-test_screenshot-viewer--active: url('#{$icons-path}gx-test/dark/screenshot-viewer.svg#active'); - --icon__gx-test_screenshot-viewer--disabled: url('#{$icons-path}gx-test/dark/screenshot-viewer.svg#disabled'); - --icon__gx-test_run-unit-test--enabled: url('#{$icons-path}gx-test/dark/run-unit-test.svg#enabled'); - --icon__gx-test_run-unit-test--hover: url('#{$icons-path}gx-test/dark/run-unit-test.svg#hover'); - --icon__gx-test_run-unit-test--active: url('#{$icons-path}gx-test/dark/run-unit-test.svg#active'); - --icon__gx-test_run-unit-test--disabled: url('#{$icons-path}gx-test/dark/run-unit-test.svg#disabled'); - --icon__gx-test_run-ui-test-web--enabled: url('#{$icons-path}gx-test/dark/run-ui-test-web.svg#enabled'); - --icon__gx-test_run-ui-test-web--hover: url('#{$icons-path}gx-test/dark/run-ui-test-web.svg#hover'); - --icon__gx-test_run-ui-test-web--active: url('#{$icons-path}gx-test/dark/run-ui-test-web.svg#active'); - --icon__gx-test_run-ui-test-web--disabled: url('#{$icons-path}gx-test/dark/run-ui-test-web.svg#disabled'); - --icon__gx-test_run-ui-test-sd--enabled: url('#{$icons-path}gx-test/dark/run-ui-test-sd.svg#enabled'); - --icon__gx-test_run-ui-test-sd--hover: url('#{$icons-path}gx-test/dark/run-ui-test-sd.svg#hover'); - --icon__gx-test_run-ui-test-sd--active: url('#{$icons-path}gx-test/dark/run-ui-test-sd.svg#active'); - --icon__gx-test_run-ui-test-sd--disabled: url('#{$icons-path}gx-test/dark/run-ui-test-sd.svg#disabled'); - --icon__gx-test_run-tests--enabled: url('#{$icons-path}gx-test/dark/run-tests.svg#enabled'); - --icon__gx-test_run-tests--hover: url('#{$icons-path}gx-test/dark/run-tests.svg#hover'); - --icon__gx-test_run-tests--active: url('#{$icons-path}gx-test/dark/run-tests.svg#active'); - --icon__gx-test_run-tests--disabled: url('#{$icons-path}gx-test/dark/run-tests.svg#disabled'); - --icon__gx-test_run-test-suite--enabled: url('#{$icons-path}gx-test/dark/run-test-suite.svg#enabled'); - --icon__gx-test_run-test-suite--hover: url('#{$icons-path}gx-test/dark/run-test-suite.svg#hover'); - --icon__gx-test_run-test-suite--active: url('#{$icons-path}gx-test/dark/run-test-suite.svg#active'); - --icon__gx-test_run-test-suite--disabled: url('#{$icons-path}gx-test/dark/run-test-suite.svg#disabled'); - --icon__gx-test_run-test-cancel--enabled: url('#{$icons-path}gx-test/dark/run-test-cancel.svg#enabled'); - --icon__gx-test_run-test-cancel--hover: url('#{$icons-path}gx-test/dark/run-test-cancel.svg#hover'); - --icon__gx-test_run-test-cancel--active: url('#{$icons-path}gx-test/dark/run-test-cancel.svg#active'); - --icon__gx-test_run-test-cancel--disabled: url('#{$icons-path}gx-test/dark/run-test-cancel.svg#disabled'); - --icon__gx-test_result-warning--enabled: url('#{$icons-path}gx-test/dark/result-warning.svg#enabled'); - --icon__gx-test_result-warning--hover: url('#{$icons-path}gx-test/dark/result-warning.svg#hover'); - --icon__gx-test_result-warning--active: url('#{$icons-path}gx-test/dark/result-warning.svg#active'); - --icon__gx-test_result-warning--disabled: url('#{$icons-path}gx-test/dark/result-warning.svg#disabled'); - --icon__gx-test_result-skipped--enabled: url('#{$icons-path}gx-test/dark/result-skipped.svg#enabled'); - --icon__gx-test_result-skipped--hover: url('#{$icons-path}gx-test/dark/result-skipped.svg#hover'); - --icon__gx-test_result-skipped--active: url('#{$icons-path}gx-test/dark/result-skipped.svg#active'); - --icon__gx-test_result-skipped--disabled: url('#{$icons-path}gx-test/dark/result-skipped.svg#disabled'); - --icon__gx-test_result-ok--enabled: url('#{$icons-path}gx-test/dark/result-ok.svg#enabled'); - --icon__gx-test_result-ok--hover: url('#{$icons-path}gx-test/dark/result-ok.svg#hover'); - --icon__gx-test_result-ok--active: url('#{$icons-path}gx-test/dark/result-ok.svg#active'); - --icon__gx-test_result-ok--disabled: url('#{$icons-path}gx-test/dark/result-ok.svg#disabled'); - --icon__gx-test_result-exception--enabled: url('#{$icons-path}gx-test/dark/result-exception.svg#enabled'); - --icon__gx-test_result-exception--hover: url('#{$icons-path}gx-test/dark/result-exception.svg#hover'); - --icon__gx-test_result-exception--active: url('#{$icons-path}gx-test/dark/result-exception.svg#active'); - --icon__gx-test_result-exception--disabled: url('#{$icons-path}gx-test/dark/result-exception.svg#disabled'); - --icon__gx-test_result-error--enabled: url('#{$icons-path}gx-test/dark/result-error.svg#enabled'); - --icon__gx-test_result-error--hover: url('#{$icons-path}gx-test/dark/result-error.svg#hover'); - --icon__gx-test_result-error--active: url('#{$icons-path}gx-test/dark/result-error.svg#active'); - --icon__gx-test_result-error--disabled: url('#{$icons-path}gx-test/dark/result-error.svg#disabled'); - --icon__gx-test_record-mock--enabled: url('#{$icons-path}gx-test/dark/record-mock.svg#enabled'); - --icon__gx-test_record-mock--hover: url('#{$icons-path}gx-test/dark/record-mock.svg#hover'); - --icon__gx-test_record-mock--active: url('#{$icons-path}gx-test/dark/record-mock.svg#active'); - --icon__gx-test_record-mock--disabled: url('#{$icons-path}gx-test/dark/record-mock.svg#disabled'); - --icon__gx-test_plus--enabled: url('#{$icons-path}gx-test/dark/plus.svg#enabled'); - --icon__gx-test_plus--hover: url('#{$icons-path}gx-test/dark/plus.svg#hover'); - --icon__gx-test_plus--active: url('#{$icons-path}gx-test/dark/plus.svg#active'); - --icon__gx-test_plus--disabled: url('#{$icons-path}gx-test/dark/plus.svg#disabled'); - --icon__gx-test_image--enabled: url('#{$icons-path}gx-test/dark/image.svg#enabled'); - --icon__gx-test_image--hover: url('#{$icons-path}gx-test/dark/image.svg#hover'); - --icon__gx-test_image--active: url('#{$icons-path}gx-test/dark/image.svg#active'); - --icon__gx-test_image--disabled: url('#{$icons-path}gx-test/dark/image.svg#disabled'); - --icon__gx-test_explorer--enabled: url('#{$icons-path}gx-test/dark/explorer.svg#enabled'); - --icon__gx-test_explorer--hover: url('#{$icons-path}gx-test/dark/explorer.svg#hover'); - --icon__gx-test_explorer--active: url('#{$icons-path}gx-test/dark/explorer.svg#active'); - --icon__gx-test_explorer--disabled: url('#{$icons-path}gx-test/dark/explorer.svg#disabled'); - --icon__gx-test_cutfo--enabled: url('#{$icons-path}gx-test/dark/cutfo.svg#enabled'); - --icon__gx-test_cutfo--hover: url('#{$icons-path}gx-test/dark/cutfo.svg#hover'); - --icon__gx-test_cutfo--active: url('#{$icons-path}gx-test/dark/cutfo.svg#active'); - --icon__gx-test_cutfo--disabled: url('#{$icons-path}gx-test/dark/cutfo.svg#disabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*gx-server*/ - --icon__gx-server_public--enabled: url('#{$icons-path}gx-server/light/public.svg#enabled'); - --icon__gx-server_public--hover: url('#{$icons-path}gx-server/light/public.svg#hover'); - --icon__gx-server_public--active: url('#{$icons-path}gx-server/light/public.svg#active'); - --icon__gx-server_public--disabled: url('#{$icons-path}gx-server/light/public.svg#disabled'); - --icon__gx-server_private--enabled: url('#{$icons-path}gx-server/light/private.svg#enabled'); - --icon__gx-server_private--hover: url('#{$icons-path}gx-server/light/private.svg#hover'); - --icon__gx-server_private--active: url('#{$icons-path}gx-server/light/private.svg#active'); - --icon__gx-server_private--disabled: url('#{$icons-path}gx-server/light/private.svg#disabled'); - --icon__gx-server_new--enabled: url('#{$icons-path}gx-server/light/new.svg#enabled'); - --icon__gx-server_new--hover: url('#{$icons-path}gx-server/light/new.svg#hover'); - --icon__gx-server_new--active: url('#{$icons-path}gx-server/light/new.svg#active'); - --icon__gx-server_new--disabled: url('#{$icons-path}gx-server/light/new.svg#disabled'); - --icon__gx-server_lock-without-changes--enabled: url('#{$icons-path}gx-server/light/lock-without-changes.svg#enabled'); - --icon__gx-server_lock-without-changes--hover: url('#{$icons-path}gx-server/light/lock-without-changes.svg#hover'); - --icon__gx-server_lock-without-changes--active: url('#{$icons-path}gx-server/light/lock-without-changes.svg#active'); - --icon__gx-server_lock-without-changes--disabled: url('#{$icons-path}gx-server/light/lock-without-changes.svg#disabled'); - --icon__gx-server_lock-by-user-reserve--enabled: url('#{$icons-path}gx-server/light/lock-by-user-reserve.svg#enabled'); - --icon__gx-server_lock-by-user-reserve--hover: url('#{$icons-path}gx-server/light/lock-by-user-reserve.svg#hover'); - --icon__gx-server_lock-by-user-reserve--active: url('#{$icons-path}gx-server/light/lock-by-user-reserve.svg#active'); - --icon__gx-server_lock-by-user-reserve--disabled: url('#{$icons-path}gx-server/light/lock-by-user-reserve.svg#disabled'); - --icon__gx-server_lock-by-user-changes--enabled: url('#{$icons-path}gx-server/light/lock-by-user-changes.svg#enabled'); - --icon__gx-server_lock-by-user-changes--hover: url('#{$icons-path}gx-server/light/lock-by-user-changes.svg#hover'); - --icon__gx-server_lock-by-user-changes--active: url('#{$icons-path}gx-server/light/lock-by-user-changes.svg#active'); - --icon__gx-server_lock-by-user-changes--disabled: url('#{$icons-path}gx-server/light/lock-by-user-changes.svg#disabled'); - --icon__gx-server_internal--enabled: url('#{$icons-path}gx-server/light/internal.svg#enabled'); - --icon__gx-server_internal--hover: url('#{$icons-path}gx-server/light/internal.svg#hover'); - --icon__gx-server_internal--active: url('#{$icons-path}gx-server/light/internal.svg#active'); - --icon__gx-server_internal--disabled: url('#{$icons-path}gx-server/light/internal.svg#disabled'); - --icon__gx-server_delete--enabled: url('#{$icons-path}gx-server/light/delete.svg#enabled'); - --icon__gx-server_delete--hover: url('#{$icons-path}gx-server/light/delete.svg#hover'); - --icon__gx-server_delete--active: url('#{$icons-path}gx-server/light/delete.svg#active'); - --icon__gx-server_delete--disabled: url('#{$icons-path}gx-server/light/delete.svg#disabled'); - --icon__gx-server_conflict--enabled: url('#{$icons-path}gx-server/light/conflict.svg#enabled'); - --icon__gx-server_conflict--hover: url('#{$icons-path}gx-server/light/conflict.svg#hover'); - --icon__gx-server_conflict--active: url('#{$icons-path}gx-server/light/conflict.svg#active'); - --icon__gx-server_conflict--disabled: url('#{$icons-path}gx-server/light/conflict.svg#disabled'); - --icon__gx-server_changes-commit-pending--enabled: url('#{$icons-path}gx-server/light/changes-commit-pending.svg#enabled'); - --icon__gx-server_changes-commit-pending--hover: url('#{$icons-path}gx-server/light/changes-commit-pending.svg#hover'); - --icon__gx-server_changes-commit-pending--active: url('#{$icons-path}gx-server/light/changes-commit-pending.svg#active'); - --icon__gx-server_changes-commit-pending--disabled: url('#{$icons-path}gx-server/light/changes-commit-pending.svg#disabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*gx-server*/ - --icon__gx-server_public--enabled: url('#{$icons-path}gx-server/dark/public.svg#enabled'); - --icon__gx-server_public--hover: url('#{$icons-path}gx-server/dark/public.svg#hover'); - --icon__gx-server_public--active: url('#{$icons-path}gx-server/dark/public.svg#active'); - --icon__gx-server_public--disabled: url('#{$icons-path}gx-server/dark/public.svg#disabled'); - --icon__gx-server_private--enabled: url('#{$icons-path}gx-server/dark/private.svg#enabled'); - --icon__gx-server_private--hover: url('#{$icons-path}gx-server/dark/private.svg#hover'); - --icon__gx-server_private--active: url('#{$icons-path}gx-server/dark/private.svg#active'); - --icon__gx-server_private--disabled: url('#{$icons-path}gx-server/dark/private.svg#disabled'); - --icon__gx-server_new--enabled: url('#{$icons-path}gx-server/dark/new.svg#enabled'); - --icon__gx-server_new--hover: url('#{$icons-path}gx-server/dark/new.svg#hover'); - --icon__gx-server_new--active: url('#{$icons-path}gx-server/dark/new.svg#active'); - --icon__gx-server_new--disabled: url('#{$icons-path}gx-server/dark/new.svg#disabled'); - --icon__gx-server_lock-without-changes--enabled: url('#{$icons-path}gx-server/dark/lock-without-changes.svg#enabled'); - --icon__gx-server_lock-without-changes--hover: url('#{$icons-path}gx-server/dark/lock-without-changes.svg#hover'); - --icon__gx-server_lock-without-changes--active: url('#{$icons-path}gx-server/dark/lock-without-changes.svg#active'); - --icon__gx-server_lock-without-changes--disabled: url('#{$icons-path}gx-server/dark/lock-without-changes.svg#disabled'); - --icon__gx-server_lock-by-user-reserve--enabled: url('#{$icons-path}gx-server/dark/lock-by-user-reserve.svg#enabled'); - --icon__gx-server_lock-by-user-reserve--hover: url('#{$icons-path}gx-server/dark/lock-by-user-reserve.svg#hover'); - --icon__gx-server_lock-by-user-reserve--active: url('#{$icons-path}gx-server/dark/lock-by-user-reserve.svg#active'); - --icon__gx-server_lock-by-user-reserve--disabled: url('#{$icons-path}gx-server/dark/lock-by-user-reserve.svg#disabled'); - --icon__gx-server_lock-by-user-changes--enabled: url('#{$icons-path}gx-server/dark/lock-by-user-changes.svg#enabled'); - --icon__gx-server_lock-by-user-changes--hover: url('#{$icons-path}gx-server/dark/lock-by-user-changes.svg#hover'); - --icon__gx-server_lock-by-user-changes--active: url('#{$icons-path}gx-server/dark/lock-by-user-changes.svg#active'); - --icon__gx-server_lock-by-user-changes--disabled: url('#{$icons-path}gx-server/dark/lock-by-user-changes.svg#disabled'); - --icon__gx-server_internal--enabled: url('#{$icons-path}gx-server/dark/internal.svg#enabled'); - --icon__gx-server_internal--hover: url('#{$icons-path}gx-server/dark/internal.svg#hover'); - --icon__gx-server_internal--active: url('#{$icons-path}gx-server/dark/internal.svg#active'); - --icon__gx-server_internal--disabled: url('#{$icons-path}gx-server/dark/internal.svg#disabled'); - --icon__gx-server_delete--enabled: url('#{$icons-path}gx-server/dark/delete.svg#enabled'); - --icon__gx-server_delete--hover: url('#{$icons-path}gx-server/dark/delete.svg#hover'); - --icon__gx-server_delete--active: url('#{$icons-path}gx-server/dark/delete.svg#active'); - --icon__gx-server_delete--disabled: url('#{$icons-path}gx-server/dark/delete.svg#disabled'); - --icon__gx-server_conflict--enabled: url('#{$icons-path}gx-server/dark/conflict.svg#enabled'); - --icon__gx-server_conflict--hover: url('#{$icons-path}gx-server/dark/conflict.svg#hover'); - --icon__gx-server_conflict--active: url('#{$icons-path}gx-server/dark/conflict.svg#active'); - --icon__gx-server_conflict--disabled: url('#{$icons-path}gx-server/dark/conflict.svg#disabled'); - --icon__gx-server_changes-commit-pending--enabled: url('#{$icons-path}gx-server/dark/changes-commit-pending.svg#enabled'); - --icon__gx-server_changes-commit-pending--hover: url('#{$icons-path}gx-server/dark/changes-commit-pending.svg#hover'); - --icon__gx-server_changes-commit-pending--active: url('#{$icons-path}gx-server/dark/changes-commit-pending.svg#active'); - --icon__gx-server_changes-commit-pending--disabled: url('#{$icons-path}gx-server/dark/changes-commit-pending.svg#disabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*general*/ - --icon__general_version--enabled: url('#{$icons-path}general/light/version.svg#enabled'); - --icon__general_version--hover: url('#{$icons-path}general/light/version.svg#hover'); - --icon__general_version--active: url('#{$icons-path}general/light/version.svg#active'); - --icon__general_version--disabled: url('#{$icons-path}general/light/version.svg#disabled'); - --icon__general_swift--enabled: url('#{$icons-path}general/light/swift.svg#enabled'); - --icon__general_swift--hover: url('#{$icons-path}general/light/swift.svg#hover'); - --icon__general_swift--active: url('#{$icons-path}general/light/swift.svg#active'); - --icon__general_swift--disabled: url('#{$icons-path}general/light/swift.svg#disabled'); - --icon__general_sql-server--enabled: url('#{$icons-path}general/light/sql-server.svg#enabled'); - --icon__general_sql-server--hover: url('#{$icons-path}general/light/sql-server.svg#hover'); - --icon__general_sql-server--active: url('#{$icons-path}general/light/sql-server.svg#active'); - --icon__general_sql-server--disabled: url('#{$icons-path}general/light/sql-server.svg#disabled'); - --icon__general_services--enabled: url('#{$icons-path}general/light/services.svg#enabled'); - --icon__general_services--hover: url('#{$icons-path}general/light/services.svg#hover'); - --icon__general_services--active: url('#{$icons-path}general/light/services.svg#active'); - --icon__general_services--disabled: url('#{$icons-path}general/light/services.svg#disabled'); - --icon__general_sd--enabled: url('#{$icons-path}general/light/sd.svg#enabled'); - --icon__general_sd--hover: url('#{$icons-path}general/light/sd.svg#hover'); - --icon__general_sd--active: url('#{$icons-path}general/light/sd.svg#active'); - --icon__general_sd--disabled: url('#{$icons-path}general/light/sd.svg#disabled'); - --icon__general_sd-web--enabled: url('#{$icons-path}general/light/sd-web.svg#enabled'); - --icon__general_sd-web--hover: url('#{$icons-path}general/light/sd-web.svg#hover'); - --icon__general_sd-web--active: url('#{$icons-path}general/light/sd-web.svg#active'); - --icon__general_sd-web--disabled: url('#{$icons-path}general/light/sd-web.svg#disabled'); - --icon__general_sap-hana--enabled: url('#{$icons-path}general/light/sap-hana.svg#enabled'); - --icon__general_sap-hana--hover: url('#{$icons-path}general/light/sap-hana.svg#hover'); - --icon__general_sap-hana--active: url('#{$icons-path}general/light/sap-hana.svg#active'); - --icon__general_sap-hana--disabled: url('#{$icons-path}general/light/sap-hana.svg#disabled'); - --icon__general_references--enabled: url('#{$icons-path}general/light/references.svg#enabled'); - --icon__general_references--hover: url('#{$icons-path}general/light/references.svg#hover'); - --icon__general_references--active: url('#{$icons-path}general/light/references.svg#active'); - --icon__general_references--disabled: url('#{$icons-path}general/light/references.svg#disabled'); - --icon__general_qr-code--enabled: url('#{$icons-path}general/light/qr-code.svg#enabled'); - --icon__general_qr-code--hover: url('#{$icons-path}general/light/qr-code.svg#hover'); - --icon__general_qr-code--active: url('#{$icons-path}general/light/qr-code.svg#active'); - --icon__general_qr-code--disabled: url('#{$icons-path}general/light/qr-code.svg#disabled'); - --icon__general_postgre-sql--enabled: url('#{$icons-path}general/light/postgre-sql.svg#enabled'); - --icon__general_postgre-sql--hover: url('#{$icons-path}general/light/postgre-sql.svg#hover'); - --icon__general_postgre-sql--active: url('#{$icons-path}general/light/postgre-sql.svg#active'); - --icon__general_postgre-sql--disabled: url('#{$icons-path}general/light/postgre-sql.svg#disabled'); - --icon__general_patterns--enabled: url('#{$icons-path}general/light/patterns.svg#enabled'); - --icon__general_patterns--hover: url('#{$icons-path}general/light/patterns.svg#hover'); - --icon__general_patterns--active: url('#{$icons-path}general/light/patterns.svg#active'); - --icon__general_patterns--disabled: url('#{$icons-path}general/light/patterns.svg#disabled'); - --icon__general_oracle--enabled: url('#{$icons-path}general/light/oracle.svg#enabled'); - --icon__general_oracle--hover: url('#{$icons-path}general/light/oracle.svg#hover'); - --icon__general_oracle--active: url('#{$icons-path}general/light/oracle.svg#active'); - --icon__general_oracle--disabled: url('#{$icons-path}general/light/oracle.svg#disabled'); - --icon__general_mysql--enabled: url('#{$icons-path}general/light/mysql.svg#enabled'); - --icon__general_mysql--hover: url('#{$icons-path}general/light/mysql.svg#hover'); - --icon__general_mysql--active: url('#{$icons-path}general/light/mysql.svg#active'); - --icon__general_mysql--disabled: url('#{$icons-path}general/light/mysql.svg#disabled'); - --icon__general_launchpad--enabled: url('#{$icons-path}general/light/launchpad.svg#enabled'); - --icon__general_launchpad--hover: url('#{$icons-path}general/light/launchpad.svg#hover'); - --icon__general_launchpad--active: url('#{$icons-path}general/light/launchpad.svg#active'); - --icon__general_launchpad--disabled: url('#{$icons-path}general/light/launchpad.svg#disabled'); - --icon__general_knowledge-base--enabled: url('#{$icons-path}general/light/knowledge-base.svg#enabled'); - --icon__general_knowledge-base--hover: url('#{$icons-path}general/light/knowledge-base.svg#hover'); - --icon__general_knowledge-base--active: url('#{$icons-path}general/light/knowledge-base.svg#active'); - --icon__general_knowledge-base--disabled: url('#{$icons-path}general/light/knowledge-base.svg#disabled'); - --icon__general_java--enabled: url('#{$icons-path}general/light/java.svg#enabled'); - --icon__general_java--hover: url('#{$icons-path}general/light/java.svg#hover'); - --icon__general_java--active: url('#{$icons-path}general/light/java.svg#active'); - --icon__general_java--disabled: url('#{$icons-path}general/light/java.svg#disabled'); - --icon__general_informix--enabled: url('#{$icons-path}general/light/informix.svg#enabled'); - --icon__general_informix--hover: url('#{$icons-path}general/light/informix.svg#hover'); - --icon__general_informix--active: url('#{$icons-path}general/light/informix.svg#active'); - --icon__general_informix--disabled: url('#{$icons-path}general/light/informix.svg#disabled'); - --icon__general_generator--enabled: url('#{$icons-path}general/light/generator.svg#enabled'); - --icon__general_generator--hover: url('#{$icons-path}general/light/generator.svg#hover'); - --icon__general_generator--active: url('#{$icons-path}general/light/generator.svg#active'); - --icon__general_generator--disabled: url('#{$icons-path}general/light/generator.svg#disabled'); - --icon__general_environment-select--enabled: url('#{$icons-path}general/light/environment-select.svg#enabled'); - --icon__general_environment-select--hover: url('#{$icons-path}general/light/environment-select.svg#hover'); - --icon__general_environment-select--active: url('#{$icons-path}general/light/environment-select.svg#active'); - --icon__general_environment-select--disabled: url('#{$icons-path}general/light/environment-select.svg#disabled'); - --icon__general_environment-no-select--enabled: url('#{$icons-path}general/light/environment-no-select.svg#enabled'); - --icon__general_environment-no-select--hover: url('#{$icons-path}general/light/environment-no-select.svg#hover'); - --icon__general_environment-no-select--active: url('#{$icons-path}general/light/environment-no-select.svg#active'); - --icon__general_environment-no-select--disabled: url('#{$icons-path}general/light/environment-no-select.svg#disabled'); - --icon__general_db2--enabled: url('#{$icons-path}general/light/db2.svg#enabled'); - --icon__general_db2--hover: url('#{$icons-path}general/light/db2.svg#hover'); - --icon__general_db2--active: url('#{$icons-path}general/light/db2.svg#active'); - --icon__general_db2--disabled: url('#{$icons-path}general/light/db2.svg#disabled'); - --icon__general_datastore--enabled: url('#{$icons-path}general/light/datastore.svg#enabled'); - --icon__general_datastore--hover: url('#{$icons-path}general/light/datastore.svg#hover'); - --icon__general_datastore--active: url('#{$icons-path}general/light/datastore.svg#active'); - --icon__general_datastore--disabled: url('#{$icons-path}general/light/datastore.svg#disabled'); - --icon__general_customization--enabled: url('#{$icons-path}general/light/customization.svg#enabled'); - --icon__general_customization--hover: url('#{$icons-path}general/light/customization.svg#hover'); - --icon__general_customization--active: url('#{$icons-path}general/light/customization.svg#active'); - --icon__general_customization--disabled: url('#{$icons-path}general/light/customization.svg#disabled'); - --icon__general_csharp--enabled: url('#{$icons-path}general/light/csharp.svg#enabled'); - --icon__general_csharp--hover: url('#{$icons-path}general/light/csharp.svg#hover'); - --icon__general_csharp--active: url('#{$icons-path}general/light/csharp.svg#active'); - --icon__general_csharp--disabled: url('#{$icons-path}general/light/csharp.svg#disabled'); - --icon__general_apple--enabled: url('#{$icons-path}general/light/apple.svg#enabled'); - --icon__general_apple--hover: url('#{$icons-path}general/light/apple.svg#hover'); - --icon__general_apple--active: url('#{$icons-path}general/light/apple.svg#active'); - --icon__general_apple--disabled: url('#{$icons-path}general/light/apple.svg#disabled'); - --icon__general_angular--enabled: url('#{$icons-path}general/light/angular.svg#enabled'); - --icon__general_angular--hover: url('#{$icons-path}general/light/angular.svg#hover'); - --icon__general_angular--active: url('#{$icons-path}general/light/angular.svg#active'); - --icon__general_angular--disabled: url('#{$icons-path}general/light/angular.svg#disabled'); - --icon__general_android--enabled: url('#{$icons-path}general/light/android.svg#enabled'); - --icon__general_android--hover: url('#{$icons-path}general/light/android.svg#hover'); - --icon__general_android--active: url('#{$icons-path}general/light/android.svg#active'); - --icon__general_android--disabled: url('#{$icons-path}general/light/android.svg#disabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*general*/ - --icon__general_version--enabled: url('#{$icons-path}general/dark/version.svg#enabled'); - --icon__general_version--hover: url('#{$icons-path}general/dark/version.svg#hover'); - --icon__general_version--active: url('#{$icons-path}general/dark/version.svg#active'); - --icon__general_version--disabled: url('#{$icons-path}general/dark/version.svg#disabled'); - --icon__general_swift--enabled: url('#{$icons-path}general/dark/swift.svg#enabled'); - --icon__general_swift--hover: url('#{$icons-path}general/dark/swift.svg#hover'); - --icon__general_swift--active: url('#{$icons-path}general/dark/swift.svg#active'); - --icon__general_swift--disabled: url('#{$icons-path}general/dark/swift.svg#disabled'); - --icon__general_sql-server--enabled: url('#{$icons-path}general/dark/sql-server.svg#enabled'); - --icon__general_sql-server--hover: url('#{$icons-path}general/dark/sql-server.svg#hover'); - --icon__general_sql-server--active: url('#{$icons-path}general/dark/sql-server.svg#active'); - --icon__general_sql-server--disabled: url('#{$icons-path}general/dark/sql-server.svg#disabled'); - --icon__general_services--enabled: url('#{$icons-path}general/dark/services.svg#enabled'); - --icon__general_services--hover: url('#{$icons-path}general/dark/services.svg#hover'); - --icon__general_services--active: url('#{$icons-path}general/dark/services.svg#active'); - --icon__general_services--disabled: url('#{$icons-path}general/dark/services.svg#disabled'); - --icon__general_sd--enabled: url('#{$icons-path}general/dark/sd.svg#enabled'); - --icon__general_sd--hover: url('#{$icons-path}general/dark/sd.svg#hover'); - --icon__general_sd--active: url('#{$icons-path}general/dark/sd.svg#active'); - --icon__general_sd--disabled: url('#{$icons-path}general/dark/sd.svg#disabled'); - --icon__general_sd-web--enabled: url('#{$icons-path}general/dark/sd-web.svg#enabled'); - --icon__general_sd-web--hover: url('#{$icons-path}general/dark/sd-web.svg#hover'); - --icon__general_sd-web--active: url('#{$icons-path}general/dark/sd-web.svg#active'); - --icon__general_sd-web--disabled: url('#{$icons-path}general/dark/sd-web.svg#disabled'); - --icon__general_sap-hana--enabled: url('#{$icons-path}general/dark/sap-hana.svg#enabled'); - --icon__general_sap-hana--hover: url('#{$icons-path}general/dark/sap-hana.svg#hover'); - --icon__general_sap-hana--active: url('#{$icons-path}general/dark/sap-hana.svg#active'); - --icon__general_sap-hana--disabled: url('#{$icons-path}general/dark/sap-hana.svg#disabled'); - --icon__general_references--enabled: url('#{$icons-path}general/dark/references.svg#enabled'); - --icon__general_references--hover: url('#{$icons-path}general/dark/references.svg#hover'); - --icon__general_references--active: url('#{$icons-path}general/dark/references.svg#active'); - --icon__general_references--disabled: url('#{$icons-path}general/dark/references.svg#disabled'); - --icon__general_qr-code--enabled: url('#{$icons-path}general/dark/qr-code.svg#enabled'); - --icon__general_qr-code--hover: url('#{$icons-path}general/dark/qr-code.svg#hover'); - --icon__general_qr-code--active: url('#{$icons-path}general/dark/qr-code.svg#active'); - --icon__general_qr-code--disabled: url('#{$icons-path}general/dark/qr-code.svg#disabled'); - --icon__general_postgre-sql--enabled: url('#{$icons-path}general/dark/postgre-sql.svg#enabled'); - --icon__general_postgre-sql--hover: url('#{$icons-path}general/dark/postgre-sql.svg#hover'); - --icon__general_postgre-sql--active: url('#{$icons-path}general/dark/postgre-sql.svg#active'); - --icon__general_postgre-sql--disabled: url('#{$icons-path}general/dark/postgre-sql.svg#disabled'); - --icon__general_patterns--enabled: url('#{$icons-path}general/dark/patterns.svg#enabled'); - --icon__general_patterns--hover: url('#{$icons-path}general/dark/patterns.svg#hover'); - --icon__general_patterns--active: url('#{$icons-path}general/dark/patterns.svg#active'); - --icon__general_patterns--disabled: url('#{$icons-path}general/dark/patterns.svg#disabled'); - --icon__general_oracle--enabled: url('#{$icons-path}general/dark/oracle.svg#enabled'); - --icon__general_oracle--hover: url('#{$icons-path}general/dark/oracle.svg#hover'); - --icon__general_oracle--active: url('#{$icons-path}general/dark/oracle.svg#active'); - --icon__general_oracle--disabled: url('#{$icons-path}general/dark/oracle.svg#disabled'); - --icon__general_mysql--enabled: url('#{$icons-path}general/dark/mysql.svg#enabled'); - --icon__general_mysql--hover: url('#{$icons-path}general/dark/mysql.svg#hover'); - --icon__general_mysql--active: url('#{$icons-path}general/dark/mysql.svg#active'); - --icon__general_mysql--disabled: url('#{$icons-path}general/dark/mysql.svg#disabled'); - --icon__general_launchpad--enabled: url('#{$icons-path}general/dark/launchpad.svg#enabled'); - --icon__general_launchpad--hover: url('#{$icons-path}general/dark/launchpad.svg#hover'); - --icon__general_launchpad--active: url('#{$icons-path}general/dark/launchpad.svg#active'); - --icon__general_launchpad--disabled: url('#{$icons-path}general/dark/launchpad.svg#disabled'); - --icon__general_knowledge-base--enabled: url('#{$icons-path}general/dark/knowledge-base.svg#enabled'); - --icon__general_knowledge-base--hover: url('#{$icons-path}general/dark/knowledge-base.svg#hover'); - --icon__general_knowledge-base--active: url('#{$icons-path}general/dark/knowledge-base.svg#active'); - --icon__general_knowledge-base--disabled: url('#{$icons-path}general/dark/knowledge-base.svg#disabled'); - --icon__general_java--enabled: url('#{$icons-path}general/dark/java.svg#enabled'); - --icon__general_java--hover: url('#{$icons-path}general/dark/java.svg#hover'); - --icon__general_java--active: url('#{$icons-path}general/dark/java.svg#active'); - --icon__general_java--disabled: url('#{$icons-path}general/dark/java.svg#disabled'); - --icon__general_informix--enabled: url('#{$icons-path}general/dark/informix.svg#enabled'); - --icon__general_informix--hover: url('#{$icons-path}general/dark/informix.svg#hover'); - --icon__general_informix--active: url('#{$icons-path}general/dark/informix.svg#active'); - --icon__general_informix--disabled: url('#{$icons-path}general/dark/informix.svg#disabled'); - --icon__general_generator--enabled: url('#{$icons-path}general/dark/generator.svg#enabled'); - --icon__general_generator--hover: url('#{$icons-path}general/dark/generator.svg#hover'); - --icon__general_generator--active: url('#{$icons-path}general/dark/generator.svg#active'); - --icon__general_generator--disabled: url('#{$icons-path}general/dark/generator.svg#disabled'); - --icon__general_environment-select--enabled: url('#{$icons-path}general/dark/environment-select.svg#enabled'); - --icon__general_environment-select--hover: url('#{$icons-path}general/dark/environment-select.svg#hover'); - --icon__general_environment-select--active: url('#{$icons-path}general/dark/environment-select.svg#active'); - --icon__general_environment-select--disabled: url('#{$icons-path}general/dark/environment-select.svg#disabled'); - --icon__general_environment-no-select--enabled: url('#{$icons-path}general/dark/environment-no-select.svg#enabled'); - --icon__general_environment-no-select--hover: url('#{$icons-path}general/dark/environment-no-select.svg#hover'); - --icon__general_environment-no-select--active: url('#{$icons-path}general/dark/environment-no-select.svg#active'); - --icon__general_environment-no-select--disabled: url('#{$icons-path}general/dark/environment-no-select.svg#disabled'); - --icon__general_db2--enabled: url('#{$icons-path}general/dark/db2.svg#enabled'); - --icon__general_db2--hover: url('#{$icons-path}general/dark/db2.svg#hover'); - --icon__general_db2--active: url('#{$icons-path}general/dark/db2.svg#active'); - --icon__general_db2--disabled: url('#{$icons-path}general/dark/db2.svg#disabled'); - --icon__general_datastore--enabled: url('#{$icons-path}general/dark/datastore.svg#enabled'); - --icon__general_datastore--hover: url('#{$icons-path}general/dark/datastore.svg#hover'); - --icon__general_datastore--active: url('#{$icons-path}general/dark/datastore.svg#active'); - --icon__general_datastore--disabled: url('#{$icons-path}general/dark/datastore.svg#disabled'); - --icon__general_customization--enabled: url('#{$icons-path}general/dark/customization.svg#enabled'); - --icon__general_customization--hover: url('#{$icons-path}general/dark/customization.svg#hover'); - --icon__general_customization--active: url('#{$icons-path}general/dark/customization.svg#active'); - --icon__general_customization--disabled: url('#{$icons-path}general/dark/customization.svg#disabled'); - --icon__general_csharp--enabled: url('#{$icons-path}general/dark/csharp.svg#enabled'); - --icon__general_csharp--hover: url('#{$icons-path}general/dark/csharp.svg#hover'); - --icon__general_csharp--active: url('#{$icons-path}general/dark/csharp.svg#active'); - --icon__general_csharp--disabled: url('#{$icons-path}general/dark/csharp.svg#disabled'); - --icon__general_apple--enabled: url('#{$icons-path}general/dark/apple.svg#enabled'); - --icon__general_apple--hover: url('#{$icons-path}general/dark/apple.svg#hover'); - --icon__general_apple--active: url('#{$icons-path}general/dark/apple.svg#active'); - --icon__general_apple--disabled: url('#{$icons-path}general/dark/apple.svg#disabled'); - --icon__general_angular--enabled: url('#{$icons-path}general/dark/angular.svg#enabled'); - --icon__general_angular--hover: url('#{$icons-path}general/dark/angular.svg#hover'); - --icon__general_angular--active: url('#{$icons-path}general/dark/angular.svg#active'); - --icon__general_angular--disabled: url('#{$icons-path}general/dark/angular.svg#disabled'); - --icon__general_android--enabled: url('#{$icons-path}general/dark/android.svg#enabled'); - --icon__general_android--hover: url('#{$icons-path}general/dark/android.svg#hover'); - --icon__general_android--active: url('#{$icons-path}general/dark/android.svg#active'); - --icon__general_android--disabled: url('#{$icons-path}general/dark/android.svg#disabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*editing-structures*/ - --icon__editing-structures_user-index--enabled: url('#{$icons-path}editing-structures/light/user-index.svg#enabled'); - --icon__editing-structures_user-index--hover: url('#{$icons-path}editing-structures/light/user-index.svg#hover'); - --icon__editing-structures_user-index--active: url('#{$icons-path}editing-structures/light/user-index.svg#active'); - --icon__editing-structures_user-index--disabled: url('#{$icons-path}editing-structures/light/user-index.svg#disabled'); - --icon__editing-structures_system-index--enabled: url('#{$icons-path}editing-structures/light/system-index.svg#enabled'); - --icon__editing-structures_system-index--hover: url('#{$icons-path}editing-structures/light/system-index.svg#hover'); - --icon__editing-structures_system-index--active: url('#{$icons-path}editing-structures/light/system-index.svg#active'); - --icon__editing-structures_system-index--disabled: url('#{$icons-path}editing-structures/light/system-index.svg#disabled'); - --icon__editing-structures_redundant-attribute--enabled: url('#{$icons-path}editing-structures/light/redundant-attribute.svg#enabled'); - --icon__editing-structures_redundant-attribute--hover: url('#{$icons-path}editing-structures/light/redundant-attribute.svg#hover'); - --icon__editing-structures_redundant-attribute--active: url('#{$icons-path}editing-structures/light/redundant-attribute.svg#active'); - --icon__editing-structures_redundant-attribute--disabled: url('#{$icons-path}editing-structures/light/redundant-attribute.svg#disabled'); - --icon__editing-structures_platforms--enabled: url('#{$icons-path}editing-structures/light/platforms.svg#enabled'); - --icon__editing-structures_platforms--hover: url('#{$icons-path}editing-structures/light/platforms.svg#hover'); - --icon__editing-structures_platforms--active: url('#{$icons-path}editing-structures/light/platforms.svg#active'); - --icon__editing-structures_platforms--disabled: url('#{$icons-path}editing-structures/light/platforms.svg#disabled'); - --icon__editing-structures_logical-attributes--enabled: url('#{$icons-path}editing-structures/light/logical-attributes.svg#enabled'); - --icon__editing-structures_logical-attributes--hover: url('#{$icons-path}editing-structures/light/logical-attributes.svg#hover'); - --icon__editing-structures_logical-attributes--active: url('#{$icons-path}editing-structures/light/logical-attributes.svg#active'); - --icon__editing-structures_logical-attributes--disabled: url('#{$icons-path}editing-structures/light/logical-attributes.svg#disabled'); - --icon__editing-structures_formula-redundant--enabled: url('#{$icons-path}editing-structures/light/formula-redundant.svg#enabled'); - --icon__editing-structures_formula-redundant--hover: url('#{$icons-path}editing-structures/light/formula-redundant.svg#hover'); - --icon__editing-structures_formula-redundant--active: url('#{$icons-path}editing-structures/light/formula-redundant.svg#active'); - --icon__editing-structures_formula-redundant--disabled: url('#{$icons-path}editing-structures/light/formula-redundant.svg#disabled'); - --icon__editing-structures_default--enabled: url('#{$icons-path}editing-structures/light/default.svg#enabled'); - --icon__editing-structures_default--hover: url('#{$icons-path}editing-structures/light/default.svg#hover'); - --icon__editing-structures_default--active: url('#{$icons-path}editing-structures/light/default.svg#active'); - --icon__editing-structures_default--disabled: url('#{$icons-path}editing-structures/light/default.svg#disabled'); - --icon__editing-structures_attribute-key--enabled: url('#{$icons-path}editing-structures/light/attribute-key.svg#enabled'); - --icon__editing-structures_attribute-key--hover: url('#{$icons-path}editing-structures/light/attribute-key.svg#hover'); - --icon__editing-structures_attribute-key--active: url('#{$icons-path}editing-structures/light/attribute-key.svg#active'); - --icon__editing-structures_attribute-key--disabled: url('#{$icons-path}editing-structures/light/attribute-key.svg#disabled'); - --icon__editing-structures_attribute-formula--enabled: url('#{$icons-path}editing-structures/light/attribute-formula.svg#enabled'); - --icon__editing-structures_attribute-formula--hover: url('#{$icons-path}editing-structures/light/attribute-formula.svg#hover'); - --icon__editing-structures_attribute-formula--active: url('#{$icons-path}editing-structures/light/attribute-formula.svg#active'); - --icon__editing-structures_attribute-formula--disabled: url('#{$icons-path}editing-structures/light/attribute-formula.svg#disabled'); - --icon__editing-structures_attribute-description--enabled: url('#{$icons-path}editing-structures/light/attribute-description.svg#enabled'); - --icon__editing-structures_attribute-description--hover: url('#{$icons-path}editing-structures/light/attribute-description.svg#hover'); - --icon__editing-structures_attribute-description--active: url('#{$icons-path}editing-structures/light/attribute-description.svg#active'); - --icon__editing-structures_attribute-description--disabled: url('#{$icons-path}editing-structures/light/attribute-description.svg#disabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*editing-structures*/ - --icon__editing-structures_user-index--enabled: url('#{$icons-path}editing-structures/dark/user-index.svg#enabled'); - --icon__editing-structures_user-index--hover: url('#{$icons-path}editing-structures/dark/user-index.svg#hover'); - --icon__editing-structures_user-index--active: url('#{$icons-path}editing-structures/dark/user-index.svg#active'); - --icon__editing-structures_user-index--disabled: url('#{$icons-path}editing-structures/dark/user-index.svg#disabled'); - --icon__editing-structures_system-index--enabled: url('#{$icons-path}editing-structures/dark/system-index.svg#enabled'); - --icon__editing-structures_system-index--hover: url('#{$icons-path}editing-structures/dark/system-index.svg#hover'); - --icon__editing-structures_system-index--active: url('#{$icons-path}editing-structures/dark/system-index.svg#active'); - --icon__editing-structures_system-index--disabled: url('#{$icons-path}editing-structures/dark/system-index.svg#disabled'); - --icon__editing-structures_redundant-attribute--enabled: url('#{$icons-path}editing-structures/dark/redundant-attribute.svg#enabled'); - --icon__editing-structures_redundant-attribute--hover: url('#{$icons-path}editing-structures/dark/redundant-attribute.svg#hover'); - --icon__editing-structures_redundant-attribute--active: url('#{$icons-path}editing-structures/dark/redundant-attribute.svg#active'); - --icon__editing-structures_redundant-attribute--disabled: url('#{$icons-path}editing-structures/dark/redundant-attribute.svg#disabled'); - --icon__editing-structures_platforms--enabled: url('#{$icons-path}editing-structures/dark/platforms.svg#enabled'); - --icon__editing-structures_platforms--hover: url('#{$icons-path}editing-structures/dark/platforms.svg#hover'); - --icon__editing-structures_platforms--active: url('#{$icons-path}editing-structures/dark/platforms.svg#active'); - --icon__editing-structures_platforms--disabled: url('#{$icons-path}editing-structures/dark/platforms.svg#disabled'); - --icon__editing-structures_logical-attributes--enabled: url('#{$icons-path}editing-structures/dark/logical-attributes.svg#enabled'); - --icon__editing-structures_logical-attributes--hover: url('#{$icons-path}editing-structures/dark/logical-attributes.svg#hover'); - --icon__editing-structures_logical-attributes--active: url('#{$icons-path}editing-structures/dark/logical-attributes.svg#active'); - --icon__editing-structures_logical-attributes--disabled: url('#{$icons-path}editing-structures/dark/logical-attributes.svg#disabled'); - --icon__editing-structures_formula-redundant--enabled: url('#{$icons-path}editing-structures/dark/formula-redundant.svg#enabled'); - --icon__editing-structures_formula-redundant--hover: url('#{$icons-path}editing-structures/dark/formula-redundant.svg#hover'); - --icon__editing-structures_formula-redundant--active: url('#{$icons-path}editing-structures/dark/formula-redundant.svg#active'); - --icon__editing-structures_formula-redundant--disabled: url('#{$icons-path}editing-structures/dark/formula-redundant.svg#disabled'); - --icon__editing-structures_default--enabled: url('#{$icons-path}editing-structures/dark/default.svg#enabled'); - --icon__editing-structures_default--hover: url('#{$icons-path}editing-structures/dark/default.svg#hover'); - --icon__editing-structures_default--active: url('#{$icons-path}editing-structures/dark/default.svg#active'); - --icon__editing-structures_default--disabled: url('#{$icons-path}editing-structures/dark/default.svg#disabled'); - --icon__editing-structures_attribute-key--enabled: url('#{$icons-path}editing-structures/dark/attribute-key.svg#enabled'); - --icon__editing-structures_attribute-key--hover: url('#{$icons-path}editing-structures/dark/attribute-key.svg#hover'); - --icon__editing-structures_attribute-key--active: url('#{$icons-path}editing-structures/dark/attribute-key.svg#active'); - --icon__editing-structures_attribute-key--disabled: url('#{$icons-path}editing-structures/dark/attribute-key.svg#disabled'); - --icon__editing-structures_attribute-formula--enabled: url('#{$icons-path}editing-structures/dark/attribute-formula.svg#enabled'); - --icon__editing-structures_attribute-formula--hover: url('#{$icons-path}editing-structures/dark/attribute-formula.svg#hover'); - --icon__editing-structures_attribute-formula--active: url('#{$icons-path}editing-structures/dark/attribute-formula.svg#active'); - --icon__editing-structures_attribute-formula--disabled: url('#{$icons-path}editing-structures/dark/attribute-formula.svg#disabled'); - --icon__editing-structures_attribute-description--enabled: url('#{$icons-path}editing-structures/dark/attribute-description.svg#enabled'); - --icon__editing-structures_attribute-description--hover: url('#{$icons-path}editing-structures/dark/attribute-description.svg#hover'); - --icon__editing-structures_attribute-description--active: url('#{$icons-path}editing-structures/dark/attribute-description.svg#active'); - --icon__editing-structures_attribute-description--disabled: url('#{$icons-path}editing-structures/dark/attribute-description.svg#disabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*controls*/ - --icon__controls_variable--enabled: url('#{$icons-path}controls/light/variable.svg#enabled'); - --icon__controls_variable--hover: url('#{$icons-path}controls/light/variable.svg#hover'); - --icon__controls_variable--active: url('#{$icons-path}controls/light/variable.svg#active'); - --icon__controls_variable--disabled: url('#{$icons-path}controls/light/variable.svg#disabled'); - --icon__controls_treeview--enabled: url('#{$icons-path}controls/light/treeview.svg#enabled'); - --icon__controls_treeview--hover: url('#{$icons-path}controls/light/treeview.svg#hover'); - --icon__controls_treeview--active: url('#{$icons-path}controls/light/treeview.svg#active'); - --icon__controls_treeview--disabled: url('#{$icons-path}controls/light/treeview.svg#disabled'); - --icon__controls_text-block--enabled: url('#{$icons-path}controls/light/text-block.svg#enabled'); - --icon__controls_text-block--hover: url('#{$icons-path}controls/light/text-block.svg#hover'); - --icon__controls_text-block--active: url('#{$icons-path}controls/light/text-block.svg#active'); - --icon__controls_text-block--disabled: url('#{$icons-path}controls/light/text-block.svg#disabled'); - --icon__controls_tag-html--enabled: url('#{$icons-path}controls/light/tag-html.svg#enabled'); - --icon__controls_tag-html--hover: url('#{$icons-path}controls/light/tag-html.svg#hover'); - --icon__controls_tag-html--active: url('#{$icons-path}controls/light/tag-html.svg#active'); - --icon__controls_tag-html--disabled: url('#{$icons-path}controls/light/tag-html.svg#disabled'); - --icon__controls_table--enabled: url('#{$icons-path}controls/light/table.svg#enabled'); - --icon__controls_table--hover: url('#{$icons-path}controls/light/table.svg#hover'); - --icon__controls_table--active: url('#{$icons-path}controls/light/table.svg#active'); - --icon__controls_table--disabled: url('#{$icons-path}controls/light/table.svg#disabled'); - --icon__controls_table-row--enabled: url('#{$icons-path}controls/light/table-row.svg#enabled'); - --icon__controls_table-row--hover: url('#{$icons-path}controls/light/table-row.svg#hover'); - --icon__controls_table-row--active: url('#{$icons-path}controls/light/table-row.svg#active'); - --icon__controls_table-row--disabled: url('#{$icons-path}controls/light/table-row.svg#disabled'); - --icon__controls_table-column--enabled: url('#{$icons-path}controls/light/table-column.svg#enabled'); - --icon__controls_table-column--hover: url('#{$icons-path}controls/light/table-column.svg#hover'); - --icon__controls_table-column--active: url('#{$icons-path}controls/light/table-column.svg#active'); - --icon__controls_table-column--disabled: url('#{$icons-path}controls/light/table-column.svg#disabled'); - --icon__controls_table-cell--enabled: url('#{$icons-path}controls/light/table-cell.svg#enabled'); - --icon__controls_table-cell--hover: url('#{$icons-path}controls/light/table-cell.svg#hover'); - --icon__controls_table-cell--active: url('#{$icons-path}controls/light/table-cell.svg#active'); - --icon__controls_table-cell--disabled: url('#{$icons-path}controls/light/table-cell.svg#disabled'); - --icon__controls_tab--enabled: url('#{$icons-path}controls/light/tab.svg#enabled'); - --icon__controls_tab--hover: url('#{$icons-path}controls/light/tab.svg#hover'); - --icon__controls_tab--active: url('#{$icons-path}controls/light/tab.svg#active'); - --icon__controls_tab--disabled: url('#{$icons-path}controls/light/tab.svg#disabled'); - --icon__controls_tab-page--enabled: url('#{$icons-path}controls/light/tab-page.svg#enabled'); - --icon__controls_tab-page--hover: url('#{$icons-path}controls/light/tab-page.svg#hover'); - --icon__controls_tab-page--active: url('#{$icons-path}controls/light/tab-page.svg#active'); - --icon__controls_tab-page--disabled: url('#{$icons-path}controls/light/tab-page.svg#disabled'); - --icon__controls_snippet--enabled: url('#{$icons-path}controls/light/snippet.svg#enabled'); - --icon__controls_snippet--hover: url('#{$icons-path}controls/light/snippet.svg#hover'); - --icon__controls_snippet--active: url('#{$icons-path}controls/light/snippet.svg#active'); - --icon__controls_snippet--disabled: url('#{$icons-path}controls/light/snippet.svg#disabled'); - --icon__controls_smart-table--enabled: url('#{$icons-path}controls/light/smart-table.svg#enabled'); - --icon__controls_smart-table--hover: url('#{$icons-path}controls/light/smart-table.svg#hover'); - --icon__controls_smart-table--active: url('#{$icons-path}controls/light/smart-table.svg#active'); - --icon__controls_smart-table--disabled: url('#{$icons-path}controls/light/smart-table.svg#disabled'); - --icon__controls_section--enabled: url('#{$icons-path}controls/light/section.svg#enabled'); - --icon__controls_section--hover: url('#{$icons-path}controls/light/section.svg#hover'); - --icon__controls_section--active: url('#{$icons-path}controls/light/section.svg#active'); - --icon__controls_section--disabled: url('#{$icons-path}controls/light/section.svg#disabled'); - --icon__controls_pop-up--enabled: url('#{$icons-path}controls/light/pop-up.svg#enabled'); - --icon__controls_pop-up--hover: url('#{$icons-path}controls/light/pop-up.svg#hover'); - --icon__controls_pop-up--active: url('#{$icons-path}controls/light/pop-up.svg#active'); - --icon__controls_pop-up--disabled: url('#{$icons-path}controls/light/pop-up.svg#disabled'); - --icon__controls_messages--enabled: url('#{$icons-path}controls/light/messages.svg#enabled'); - --icon__controls_messages--hover: url('#{$icons-path}controls/light/messages.svg#hover'); - --icon__controls_messages--active: url('#{$icons-path}controls/light/messages.svg#active'); - --icon__controls_messages--disabled: url('#{$icons-path}controls/light/messages.svg#disabled'); - --icon__controls_media-player--enabled: url('#{$icons-path}controls/light/media-player.svg#enabled'); - --icon__controls_media-player--hover: url('#{$icons-path}controls/light/media-player.svg#hover'); - --icon__controls_media-player--active: url('#{$icons-path}controls/light/media-player.svg#active'); - --icon__controls_media-player--disabled: url('#{$icons-path}controls/light/media-player.svg#disabled'); - --icon__controls_id-html--enabled: url('#{$icons-path}controls/light/id-html.svg#enabled'); - --icon__controls_id-html--hover: url('#{$icons-path}controls/light/id-html.svg#hover'); - --icon__controls_id-html--active: url('#{$icons-path}controls/light/id-html.svg#active'); - --icon__controls_id-html--disabled: url('#{$icons-path}controls/light/id-html.svg#disabled'); - --icon__controls_hyperlink--enabled: url('#{$icons-path}controls/light/hyperlink.svg#enabled'); - --icon__controls_hyperlink--hover: url('#{$icons-path}controls/light/hyperlink.svg#hover'); - --icon__controls_hyperlink--active: url('#{$icons-path}controls/light/hyperlink.svg#active'); - --icon__controls_hyperlink--disabled: url('#{$icons-path}controls/light/hyperlink.svg#disabled'); - --icon__controls_html--enabled: url('#{$icons-path}controls/light/html.svg#enabled'); - --icon__controls_html--hover: url('#{$icons-path}controls/light/html.svg#hover'); - --icon__controls_html--active: url('#{$icons-path}controls/light/html.svg#active'); - --icon__controls_html--disabled: url('#{$icons-path}controls/light/html.svg#disabled'); - --icon__controls_horizontal-line--enabled: url('#{$icons-path}controls/light/horizontal-line.svg#enabled'); - --icon__controls_horizontal-line--hover: url('#{$icons-path}controls/light/horizontal-line.svg#hover'); - --icon__controls_horizontal-line--active: url('#{$icons-path}controls/light/horizontal-line.svg#active'); - --icon__controls_horizontal-line--disabled: url('#{$icons-path}controls/light/horizontal-line.svg#disabled'); - --icon__controls_history-manager--enabled: url('#{$icons-path}controls/light/history-manager.svg#enabled'); - --icon__controls_history-manager--hover: url('#{$icons-path}controls/light/history-manager.svg#hover'); - --icon__controls_history-manager--active: url('#{$icons-path}controls/light/history-manager.svg#active'); - --icon__controls_history-manager--disabled: url('#{$icons-path}controls/light/history-manager.svg#disabled'); - --icon__controls_gx-scheduler--enabled: url('#{$icons-path}controls/light/gx-scheduler.svg#enabled'); - --icon__controls_gx-scheduler--hover: url('#{$icons-path}controls/light/gx-scheduler.svg#hover'); - --icon__controls_gx-scheduler--active: url('#{$icons-path}controls/light/gx-scheduler.svg#active'); - --icon__controls_gx-scheduler--disabled: url('#{$icons-path}controls/light/gx-scheduler.svg#disabled'); - --icon__controls_group--enabled: url('#{$icons-path}controls/light/group.svg#enabled'); - --icon__controls_group--hover: url('#{$icons-path}controls/light/group.svg#hover'); - --icon__controls_group--active: url('#{$icons-path}controls/light/group.svg#active'); - --icon__controls_group--disabled: url('#{$icons-path}controls/light/group.svg#disabled'); - --icon__controls_grid--enabled: url('#{$icons-path}controls/light/grid.svg#enabled'); - --icon__controls_grid--hover: url('#{$icons-path}controls/light/grid.svg#hover'); - --icon__controls_grid--active: url('#{$icons-path}controls/light/grid.svg#active'); - --icon__controls_grid--disabled: url('#{$icons-path}controls/light/grid.svg#disabled'); - --icon__controls_google-geomap--enabled: url('#{$icons-path}controls/light/google-geomap.svg#enabled'); - --icon__controls_google-geomap--hover: url('#{$icons-path}controls/light/google-geomap.svg#hover'); - --icon__controls_google-geomap--active: url('#{$icons-path}controls/light/google-geomap.svg#active'); - --icon__controls_google-geomap--disabled: url('#{$icons-path}controls/light/google-geomap.svg#disabled'); - --icon__controls_google-charts--enabled: url('#{$icons-path}controls/light/google-charts.svg#enabled'); - --icon__controls_google-charts--hover: url('#{$icons-path}controls/light/google-charts.svg#hover'); - --icon__controls_google-charts--active: url('#{$icons-path}controls/light/google-charts.svg#active'); - --icon__controls_google-charts--disabled: url('#{$icons-path}controls/light/google-charts.svg#disabled'); - --icon__controls_google-annotated-tmeline--enabled: url('#{$icons-path}controls/light/google-annotated-tmeline.svg#enabled'); - --icon__controls_google-annotated-tmeline--hover: url('#{$icons-path}controls/light/google-annotated-tmeline.svg#hover'); - --icon__controls_google-annotated-tmeline--active: url('#{$icons-path}controls/light/google-annotated-tmeline.svg#active'); - --icon__controls_google-annotated-tmeline--disabled: url('#{$icons-path}controls/light/google-annotated-tmeline.svg#disabled'); - --icon__controls_google-analytics--enabled: url('#{$icons-path}controls/light/google-analytics.svg#enabled'); - --icon__controls_google-analytics--hover: url('#{$icons-path}controls/light/google-analytics.svg#hover'); - --icon__controls_google-analytics--active: url('#{$icons-path}controls/light/google-analytics.svg#active'); - --icon__controls_google-analytics--disabled: url('#{$icons-path}controls/light/google-analytics.svg#disabled'); - --icon__controls_free-style-grid--enabled: url('#{$icons-path}controls/light/free-style-grid.svg#enabled'); - --icon__controls_free-style-grid--hover: url('#{$icons-path}controls/light/free-style-grid.svg#hover'); - --icon__controls_free-style-grid--active: url('#{$icons-path}controls/light/free-style-grid.svg#active'); - --icon__controls_free-style-grid--disabled: url('#{$icons-path}controls/light/free-style-grid.svg#disabled'); - --icon__controls_font--enabled: url('#{$icons-path}controls/light/font.svg#enabled'); - --icon__controls_font--hover: url('#{$icons-path}controls/light/font.svg#hover'); - --icon__controls_font--active: url('#{$icons-path}controls/light/font.svg#active'); - --icon__controls_font--disabled: url('#{$icons-path}controls/light/font.svg#disabled'); - --icon__controls_flex--enabled: url('#{$icons-path}controls/light/flex.svg#enabled'); - --icon__controls_flex--hover: url('#{$icons-path}controls/light/flex.svg#hover'); - --icon__controls_flex--active: url('#{$icons-path}controls/light/flex.svg#active'); - --icon__controls_flex--disabled: url('#{$icons-path}controls/light/flex.svg#disabled'); - --icon__controls_file-upload--enabled: url('#{$icons-path}controls/light/file-upload.svg#enabled'); - --icon__controls_file-upload--hover: url('#{$icons-path}controls/light/file-upload.svg#hover'); - --icon__controls_file-upload--active: url('#{$icons-path}controls/light/file-upload.svg#active'); - --icon__controls_file-upload--disabled: url('#{$icons-path}controls/light/file-upload.svg#disabled'); - --icon__controls_error-viewer--enabled: url('#{$icons-path}controls/light/error-viewer.svg#enabled'); - --icon__controls_error-viewer--hover: url('#{$icons-path}controls/light/error-viewer.svg#hover'); - --icon__controls_error-viewer--active: url('#{$icons-path}controls/light/error-viewer.svg#active'); - --icon__controls_error-viewer--disabled: url('#{$icons-path}controls/light/error-viewer.svg#disabled'); - --icon__controls_embedded-page--enabled: url('#{$icons-path}controls/light/embedded-page.svg#enabled'); - --icon__controls_embedded-page--hover: url('#{$icons-path}controls/light/embedded-page.svg#hover'); - --icon__controls_embedded-page--active: url('#{$icons-path}controls/light/embedded-page.svg#active'); - --icon__controls_embedded-page--disabled: url('#{$icons-path}controls/light/embedded-page.svg#disabled'); - --icon__controls_default--enabled: url('#{$icons-path}controls/light/default.svg#enabled'); - --icon__controls_default--hover: url('#{$icons-path}controls/light/default.svg#hover'); - --icon__controls_default--active: url('#{$icons-path}controls/light/default.svg#active'); - --icon__controls_default--disabled: url('#{$icons-path}controls/light/default.svg#disabled'); - --icon__controls_component--enabled: url('#{$icons-path}controls/light/component.svg#enabled'); - --icon__controls_component--hover: url('#{$icons-path}controls/light/component.svg#hover'); - --icon__controls_component--active: url('#{$icons-path}controls/light/component.svg#active'); - --icon__controls_component--disabled: url('#{$icons-path}controls/light/component.svg#disabled'); - --icon__controls_class-html--enabled: url('#{$icons-path}controls/light/class-html.svg#enabled'); - --icon__controls_class-html--hover: url('#{$icons-path}controls/light/class-html.svg#hover'); - --icon__controls_class-html--active: url('#{$icons-path}controls/light/class-html.svg#active'); - --icon__controls_class-html--disabled: url('#{$icons-path}controls/light/class-html.svg#disabled'); - --icon__controls_canva--enabled: url('#{$icons-path}controls/light/canva.svg#enabled'); - --icon__controls_canva--hover: url('#{$icons-path}controls/light/canva.svg#hover'); - --icon__controls_canva--active: url('#{$icons-path}controls/light/canva.svg#active'); - --icon__controls_canva--disabled: url('#{$icons-path}controls/light/canva.svg#disabled'); - --icon__controls_call-target--enabled: url('#{$icons-path}controls/light/call-target.svg#enabled'); - --icon__controls_call-target--hover: url('#{$icons-path}controls/light/call-target.svg#hover'); - --icon__controls_call-target--active: url('#{$icons-path}controls/light/call-target.svg#active'); - --icon__controls_call-target--disabled: url('#{$icons-path}controls/light/call-target.svg#disabled'); - --icon__controls_button--enabled: url('#{$icons-path}controls/light/button.svg#enabled'); - --icon__controls_button--hover: url('#{$icons-path}controls/light/button.svg#hover'); - --icon__controls_button--active: url('#{$icons-path}controls/light/button.svg#active'); - --icon__controls_button--disabled: url('#{$icons-path}controls/light/button.svg#disabled'); - --icon__controls_button-group--enabled: url('#{$icons-path}controls/light/button-group.svg#enabled'); - --icon__controls_button-group--hover: url('#{$icons-path}controls/light/button-group.svg#hover'); - --icon__controls_button-group--active: url('#{$icons-path}controls/light/button-group.svg#active'); - --icon__controls_button-group--disabled: url('#{$icons-path}controls/light/button-group.svg#disabled'); - --icon__controls_action-group--enabled: url('#{$icons-path}controls/light/action-group.svg#enabled'); - --icon__controls_action-group--hover: url('#{$icons-path}controls/light/action-group.svg#hover'); - --icon__controls_action-group--active: url('#{$icons-path}controls/light/action-group.svg#active'); - --icon__controls_action-group--disabled: url('#{$icons-path}controls/light/action-group.svg#disabled'); - --icon__controls_action-group-item--enabled: url('#{$icons-path}controls/light/action-group-item.svg#enabled'); - --icon__controls_action-group-item--hover: url('#{$icons-path}controls/light/action-group-item.svg#hover'); - --icon__controls_action-group-item--active: url('#{$icons-path}controls/light/action-group-item.svg#active'); - --icon__controls_action-group-item--disabled: url('#{$icons-path}controls/light/action-group-item.svg#disabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*controls*/ - --icon__controls_variable--enabled: url('#{$icons-path}controls/dark/variable.svg#enabled'); - --icon__controls_variable--hover: url('#{$icons-path}controls/dark/variable.svg#hover'); - --icon__controls_variable--active: url('#{$icons-path}controls/dark/variable.svg#active'); - --icon__controls_variable--disabled: url('#{$icons-path}controls/dark/variable.svg#disabled'); - --icon__controls_treeview--enabled: url('#{$icons-path}controls/dark/treeview.svg#enabled'); - --icon__controls_treeview--hover: url('#{$icons-path}controls/dark/treeview.svg#hover'); - --icon__controls_treeview--active: url('#{$icons-path}controls/dark/treeview.svg#active'); - --icon__controls_treeview--disabled: url('#{$icons-path}controls/dark/treeview.svg#disabled'); - --icon__controls_text-block--enabled: url('#{$icons-path}controls/dark/text-block.svg#enabled'); - --icon__controls_text-block--hover: url('#{$icons-path}controls/dark/text-block.svg#hover'); - --icon__controls_text-block--active: url('#{$icons-path}controls/dark/text-block.svg#active'); - --icon__controls_text-block--disabled: url('#{$icons-path}controls/dark/text-block.svg#disabled'); - --icon__controls_tag-html--enabled: url('#{$icons-path}controls/dark/tag-html.svg#enabled'); - --icon__controls_tag-html--hover: url('#{$icons-path}controls/dark/tag-html.svg#hover'); - --icon__controls_tag-html--active: url('#{$icons-path}controls/dark/tag-html.svg#active'); - --icon__controls_tag-html--disabled: url('#{$icons-path}controls/dark/tag-html.svg#disabled'); - --icon__controls_table--enabled: url('#{$icons-path}controls/dark/table.svg#enabled'); - --icon__controls_table--hover: url('#{$icons-path}controls/dark/table.svg#hover'); - --icon__controls_table--active: url('#{$icons-path}controls/dark/table.svg#active'); - --icon__controls_table--disabled: url('#{$icons-path}controls/dark/table.svg#disabled'); - --icon__controls_table-row--enabled: url('#{$icons-path}controls/dark/table-row.svg#enabled'); - --icon__controls_table-row--hover: url('#{$icons-path}controls/dark/table-row.svg#hover'); - --icon__controls_table-row--active: url('#{$icons-path}controls/dark/table-row.svg#active'); - --icon__controls_table-row--disabled: url('#{$icons-path}controls/dark/table-row.svg#disabled'); - --icon__controls_table-column--enabled: url('#{$icons-path}controls/dark/table-column.svg#enabled'); - --icon__controls_table-column--hover: url('#{$icons-path}controls/dark/table-column.svg#hover'); - --icon__controls_table-column--active: url('#{$icons-path}controls/dark/table-column.svg#active'); - --icon__controls_table-column--disabled: url('#{$icons-path}controls/dark/table-column.svg#disabled'); - --icon__controls_table-cell--enabled: url('#{$icons-path}controls/dark/table-cell.svg#enabled'); - --icon__controls_table-cell--hover: url('#{$icons-path}controls/dark/table-cell.svg#hover'); - --icon__controls_table-cell--active: url('#{$icons-path}controls/dark/table-cell.svg#active'); - --icon__controls_table-cell--disabled: url('#{$icons-path}controls/dark/table-cell.svg#disabled'); - --icon__controls_tab--enabled: url('#{$icons-path}controls/dark/tab.svg#enabled'); - --icon__controls_tab--hover: url('#{$icons-path}controls/dark/tab.svg#hover'); - --icon__controls_tab--active: url('#{$icons-path}controls/dark/tab.svg#active'); - --icon__controls_tab--disabled: url('#{$icons-path}controls/dark/tab.svg#disabled'); - --icon__controls_tab-page--enabled: url('#{$icons-path}controls/dark/tab-page.svg#enabled'); - --icon__controls_tab-page--hover: url('#{$icons-path}controls/dark/tab-page.svg#hover'); - --icon__controls_tab-page--active: url('#{$icons-path}controls/dark/tab-page.svg#active'); - --icon__controls_tab-page--disabled: url('#{$icons-path}controls/dark/tab-page.svg#disabled'); - --icon__controls_snippet--enabled: url('#{$icons-path}controls/dark/snippet.svg#enabled'); - --icon__controls_snippet--hover: url('#{$icons-path}controls/dark/snippet.svg#hover'); - --icon__controls_snippet--active: url('#{$icons-path}controls/dark/snippet.svg#active'); - --icon__controls_snippet--disabled: url('#{$icons-path}controls/dark/snippet.svg#disabled'); - --icon__controls_smart-table--enabled: url('#{$icons-path}controls/dark/smart-table.svg#enabled'); - --icon__controls_smart-table--hover: url('#{$icons-path}controls/dark/smart-table.svg#hover'); - --icon__controls_smart-table--active: url('#{$icons-path}controls/dark/smart-table.svg#active'); - --icon__controls_smart-table--disabled: url('#{$icons-path}controls/dark/smart-table.svg#disabled'); - --icon__controls_section--enabled: url('#{$icons-path}controls/dark/section.svg#enabled'); - --icon__controls_section--hover: url('#{$icons-path}controls/dark/section.svg#hover'); - --icon__controls_section--active: url('#{$icons-path}controls/dark/section.svg#active'); - --icon__controls_section--disabled: url('#{$icons-path}controls/dark/section.svg#disabled'); - --icon__controls_pop-up--enabled: url('#{$icons-path}controls/dark/pop-up.svg#enabled'); - --icon__controls_pop-up--hover: url('#{$icons-path}controls/dark/pop-up.svg#hover'); - --icon__controls_pop-up--active: url('#{$icons-path}controls/dark/pop-up.svg#active'); - --icon__controls_pop-up--disabled: url('#{$icons-path}controls/dark/pop-up.svg#disabled'); - --icon__controls_messages--enabled: url('#{$icons-path}controls/dark/messages.svg#enabled'); - --icon__controls_messages--hover: url('#{$icons-path}controls/dark/messages.svg#hover'); - --icon__controls_messages--active: url('#{$icons-path}controls/dark/messages.svg#active'); - --icon__controls_messages--disabled: url('#{$icons-path}controls/dark/messages.svg#disabled'); - --icon__controls_media-player--enabled: url('#{$icons-path}controls/dark/media-player.svg#enabled'); - --icon__controls_media-player--hover: url('#{$icons-path}controls/dark/media-player.svg#hover'); - --icon__controls_media-player--active: url('#{$icons-path}controls/dark/media-player.svg#active'); - --icon__controls_media-player--disabled: url('#{$icons-path}controls/dark/media-player.svg#disabled'); - --icon__controls_id-html--enabled: url('#{$icons-path}controls/dark/id-html.svg#enabled'); - --icon__controls_id-html--hover: url('#{$icons-path}controls/dark/id-html.svg#hover'); - --icon__controls_id-html--active: url('#{$icons-path}controls/dark/id-html.svg#active'); - --icon__controls_id-html--disabled: url('#{$icons-path}controls/dark/id-html.svg#disabled'); - --icon__controls_hyperlink--enabled: url('#{$icons-path}controls/dark/hyperlink.svg#enabled'); - --icon__controls_hyperlink--hover: url('#{$icons-path}controls/dark/hyperlink.svg#hover'); - --icon__controls_hyperlink--active: url('#{$icons-path}controls/dark/hyperlink.svg#active'); - --icon__controls_hyperlink--disabled: url('#{$icons-path}controls/dark/hyperlink.svg#disabled'); - --icon__controls_html--enabled: url('#{$icons-path}controls/dark/html.svg#enabled'); - --icon__controls_html--hover: url('#{$icons-path}controls/dark/html.svg#hover'); - --icon__controls_html--active: url('#{$icons-path}controls/dark/html.svg#active'); - --icon__controls_html--disabled: url('#{$icons-path}controls/dark/html.svg#disabled'); - --icon__controls_horizontal-line--enabled: url('#{$icons-path}controls/dark/horizontal-line.svg#enabled'); - --icon__controls_horizontal-line--hover: url('#{$icons-path}controls/dark/horizontal-line.svg#hover'); - --icon__controls_horizontal-line--active: url('#{$icons-path}controls/dark/horizontal-line.svg#active'); - --icon__controls_horizontal-line--disabled: url('#{$icons-path}controls/dark/horizontal-line.svg#disabled'); - --icon__controls_history-manager--enabled: url('#{$icons-path}controls/dark/history-manager.svg#enabled'); - --icon__controls_history-manager--hover: url('#{$icons-path}controls/dark/history-manager.svg#hover'); - --icon__controls_history-manager--active: url('#{$icons-path}controls/dark/history-manager.svg#active'); - --icon__controls_history-manager--disabled: url('#{$icons-path}controls/dark/history-manager.svg#disabled'); - --icon__controls_gx-scheduler--enabled: url('#{$icons-path}controls/dark/gx-scheduler.svg#enabled'); - --icon__controls_gx-scheduler--hover: url('#{$icons-path}controls/dark/gx-scheduler.svg#hover'); - --icon__controls_gx-scheduler--active: url('#{$icons-path}controls/dark/gx-scheduler.svg#active'); - --icon__controls_gx-scheduler--disabled: url('#{$icons-path}controls/dark/gx-scheduler.svg#disabled'); - --icon__controls_group--enabled: url('#{$icons-path}controls/dark/group.svg#enabled'); - --icon__controls_group--hover: url('#{$icons-path}controls/dark/group.svg#hover'); - --icon__controls_group--active: url('#{$icons-path}controls/dark/group.svg#active'); - --icon__controls_group--disabled: url('#{$icons-path}controls/dark/group.svg#disabled'); - --icon__controls_grid--enabled: url('#{$icons-path}controls/dark/grid.svg#enabled'); - --icon__controls_grid--hover: url('#{$icons-path}controls/dark/grid.svg#hover'); - --icon__controls_grid--active: url('#{$icons-path}controls/dark/grid.svg#active'); - --icon__controls_grid--disabled: url('#{$icons-path}controls/dark/grid.svg#disabled'); - --icon__controls_google-geomap--enabled: url('#{$icons-path}controls/dark/google-geomap.svg#enabled'); - --icon__controls_google-geomap--hover: url('#{$icons-path}controls/dark/google-geomap.svg#hover'); - --icon__controls_google-geomap--active: url('#{$icons-path}controls/dark/google-geomap.svg#active'); - --icon__controls_google-geomap--disabled: url('#{$icons-path}controls/dark/google-geomap.svg#disabled'); - --icon__controls_google-charts--enabled: url('#{$icons-path}controls/dark/google-charts.svg#enabled'); - --icon__controls_google-charts--hover: url('#{$icons-path}controls/dark/google-charts.svg#hover'); - --icon__controls_google-charts--active: url('#{$icons-path}controls/dark/google-charts.svg#active'); - --icon__controls_google-charts--disabled: url('#{$icons-path}controls/dark/google-charts.svg#disabled'); - --icon__controls_google-annotated-tmeline--enabled: url('#{$icons-path}controls/dark/google-annotated-tmeline.svg#enabled'); - --icon__controls_google-annotated-tmeline--hover: url('#{$icons-path}controls/dark/google-annotated-tmeline.svg#hover'); - --icon__controls_google-annotated-tmeline--active: url('#{$icons-path}controls/dark/google-annotated-tmeline.svg#active'); - --icon__controls_google-annotated-tmeline--disabled: url('#{$icons-path}controls/dark/google-annotated-tmeline.svg#disabled'); - --icon__controls_google-analytics--enabled: url('#{$icons-path}controls/dark/google-analytics.svg#enabled'); - --icon__controls_google-analytics--hover: url('#{$icons-path}controls/dark/google-analytics.svg#hover'); - --icon__controls_google-analytics--active: url('#{$icons-path}controls/dark/google-analytics.svg#active'); - --icon__controls_google-analytics--disabled: url('#{$icons-path}controls/dark/google-analytics.svg#disabled'); - --icon__controls_free-style-grid--enabled: url('#{$icons-path}controls/dark/free-style-grid.svg#enabled'); - --icon__controls_free-style-grid--hover: url('#{$icons-path}controls/dark/free-style-grid.svg#hover'); - --icon__controls_free-style-grid--active: url('#{$icons-path}controls/dark/free-style-grid.svg#active'); - --icon__controls_free-style-grid--disabled: url('#{$icons-path}controls/dark/free-style-grid.svg#disabled'); - --icon__controls_font--enabled: url('#{$icons-path}controls/dark/font.svg#enabled'); - --icon__controls_font--hover: url('#{$icons-path}controls/dark/font.svg#hover'); - --icon__controls_font--active: url('#{$icons-path}controls/dark/font.svg#active'); - --icon__controls_font--disabled: url('#{$icons-path}controls/dark/font.svg#disabled'); - --icon__controls_flex--enabled: url('#{$icons-path}controls/dark/flex.svg#enabled'); - --icon__controls_flex--hover: url('#{$icons-path}controls/dark/flex.svg#hover'); - --icon__controls_flex--active: url('#{$icons-path}controls/dark/flex.svg#active'); - --icon__controls_flex--disabled: url('#{$icons-path}controls/dark/flex.svg#disabled'); - --icon__controls_file-upload--enabled: url('#{$icons-path}controls/dark/file-upload.svg#enabled'); - --icon__controls_file-upload--hover: url('#{$icons-path}controls/dark/file-upload.svg#hover'); - --icon__controls_file-upload--active: url('#{$icons-path}controls/dark/file-upload.svg#active'); - --icon__controls_file-upload--disabled: url('#{$icons-path}controls/dark/file-upload.svg#disabled'); - --icon__controls_error-viewer--enabled: url('#{$icons-path}controls/dark/error-viewer.svg#enabled'); - --icon__controls_error-viewer--hover: url('#{$icons-path}controls/dark/error-viewer.svg#hover'); - --icon__controls_error-viewer--active: url('#{$icons-path}controls/dark/error-viewer.svg#active'); - --icon__controls_error-viewer--disabled: url('#{$icons-path}controls/dark/error-viewer.svg#disabled'); - --icon__controls_embedded-page--enabled: url('#{$icons-path}controls/dark/embedded-page.svg#enabled'); - --icon__controls_embedded-page--hover: url('#{$icons-path}controls/dark/embedded-page.svg#hover'); - --icon__controls_embedded-page--active: url('#{$icons-path}controls/dark/embedded-page.svg#active'); - --icon__controls_embedded-page--disabled: url('#{$icons-path}controls/dark/embedded-page.svg#disabled'); - --icon__controls_default--enabled: url('#{$icons-path}controls/dark/default.svg#enabled'); - --icon__controls_default--hover: url('#{$icons-path}controls/dark/default.svg#hover'); - --icon__controls_default--active: url('#{$icons-path}controls/dark/default.svg#active'); - --icon__controls_default--disabled: url('#{$icons-path}controls/dark/default.svg#disabled'); - --icon__controls_component--enabled: url('#{$icons-path}controls/dark/component.svg#enabled'); - --icon__controls_component--hover: url('#{$icons-path}controls/dark/component.svg#hover'); - --icon__controls_component--active: url('#{$icons-path}controls/dark/component.svg#active'); - --icon__controls_component--disabled: url('#{$icons-path}controls/dark/component.svg#disabled'); - --icon__controls_class-html--enabled: url('#{$icons-path}controls/dark/class-html.svg#enabled'); - --icon__controls_class-html--hover: url('#{$icons-path}controls/dark/class-html.svg#hover'); - --icon__controls_class-html--active: url('#{$icons-path}controls/dark/class-html.svg#active'); - --icon__controls_class-html--disabled: url('#{$icons-path}controls/dark/class-html.svg#disabled'); - --icon__controls_canva--enabled: url('#{$icons-path}controls/dark/canva.svg#enabled'); - --icon__controls_canva--hover: url('#{$icons-path}controls/dark/canva.svg#hover'); - --icon__controls_canva--active: url('#{$icons-path}controls/dark/canva.svg#active'); - --icon__controls_canva--disabled: url('#{$icons-path}controls/dark/canva.svg#disabled'); - --icon__controls_call-target--enabled: url('#{$icons-path}controls/dark/call-target.svg#enabled'); - --icon__controls_call-target--hover: url('#{$icons-path}controls/dark/call-target.svg#hover'); - --icon__controls_call-target--active: url('#{$icons-path}controls/dark/call-target.svg#active'); - --icon__controls_call-target--disabled: url('#{$icons-path}controls/dark/call-target.svg#disabled'); - --icon__controls_button--enabled: url('#{$icons-path}controls/dark/button.svg#enabled'); - --icon__controls_button--hover: url('#{$icons-path}controls/dark/button.svg#hover'); - --icon__controls_button--active: url('#{$icons-path}controls/dark/button.svg#active'); - --icon__controls_button--disabled: url('#{$icons-path}controls/dark/button.svg#disabled'); - --icon__controls_button-group--enabled: url('#{$icons-path}controls/dark/button-group.svg#enabled'); - --icon__controls_button-group--hover: url('#{$icons-path}controls/dark/button-group.svg#hover'); - --icon__controls_button-group--active: url('#{$icons-path}controls/dark/button-group.svg#active'); - --icon__controls_button-group--disabled: url('#{$icons-path}controls/dark/button-group.svg#disabled'); - --icon__controls_action-group--enabled: url('#{$icons-path}controls/dark/action-group.svg#enabled'); - --icon__controls_action-group--hover: url('#{$icons-path}controls/dark/action-group.svg#hover'); - --icon__controls_action-group--active: url('#{$icons-path}controls/dark/action-group.svg#active'); - --icon__controls_action-group--disabled: url('#{$icons-path}controls/dark/action-group.svg#disabled'); - --icon__controls_action-group-item--enabled: url('#{$icons-path}controls/dark/action-group-item.svg#enabled'); - --icon__controls_action-group-item--hover: url('#{$icons-path}controls/dark/action-group-item.svg#hover'); - --icon__controls_action-group-item--active: url('#{$icons-path}controls/dark/action-group-item.svg#active'); - --icon__controls_action-group-item--disabled: url('#{$icons-path}controls/dark/action-group-item.svg#disabled'); - - } - - -/*monochrome lists*/ - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*window-tools*/ - --icon__window-tools_workflow_on-surface--enabled: url('#{$icons-path}window-tools/light/workflow.svg#on-surface--enabled'); - --icon__window-tools_workflow_on-surface--hover: url('#{$icons-path}window-tools/light/workflow.svg#on-surface--hover'); - --icon__window-tools_workflow_on-surface--active: url('#{$icons-path}window-tools/light/workflow.svg#on-surface--active'); - --icon__window-tools_workflow_on-surface--disabled: url('#{$icons-path}window-tools/light/workflow.svg#on-surface--disabled'); - --icon__window-tools_workflow_on-primary--enabled: url('#{$icons-path}window-tools/light/workflow.svg#on-primary--enabled'); - --icon__window-tools_workflow_on-primary--hover: url('#{$icons-path}window-tools/light/workflow.svg#on-primary--hover'); - --icon__window-tools_workflow_on-primary--active: url('#{$icons-path}window-tools/light/workflow.svg#on-primary--active'); - --icon__window-tools_workflow_on-primary--disabled: url('#{$icons-path}window-tools/light/workflow.svg#on-primary--disabled'); - --icon__window-tools_workflow_on-disabled--enabled: url('#{$icons-path}window-tools/light/workflow.svg#on-disabled--enabled'); - --icon__window-tools_workflow_on-message--enabled: url('#{$icons-path}window-tools/light/workflow.svg#on-message--enabled'); - --icon__window-tools_workflow_on-elevation--enabled: url('#{$icons-path}window-tools/light/workflow.svg#on-elevation--enabled'); - --icon__window-tools_workflow_primary--enabled: url('#{$icons-path}window-tools/light/workflow.svg#primary--enabled'); - --icon__window-tools_workflow_primary--hover: url('#{$icons-path}window-tools/light/workflow.svg#primary--hover'); - --icon__window-tools_workflow_primary--active: url('#{$icons-path}window-tools/light/workflow.svg#primary--active'); - --icon__window-tools_workflow_primary--disabled: url('#{$icons-path}window-tools/light/workflow.svg#primary--disabled'); - --icon__window-tools_workflow_neutral--enabled: url('#{$icons-path}window-tools/light/workflow.svg#neutral--enabled'); - --icon__window-tools_workflow_neutral--hover: url('#{$icons-path}window-tools/light/workflow.svg#neutral--hover'); - --icon__window-tools_workflow_neutral--active: url('#{$icons-path}window-tools/light/workflow.svg#neutral--active'); - --icon__window-tools_workflow_neutral--disabled: url('#{$icons-path}window-tools/light/workflow.svg#neutral--disabled'); - --icon__window-tools_workflow_highlighted--enabled: url('#{$icons-path}window-tools/light/workflow.svg#highlighted--enabled'); - --icon__window-tools_workflow_bright--enabled: url('#{$icons-path}window-tools/light/workflow.svg#bright--enabled'); - --icon__window-tools_workflow-settings_on-surface--enabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#on-surface--enabled'); - --icon__window-tools_workflow-settings_on-surface--hover: url('#{$icons-path}window-tools/light/workflow-settings.svg#on-surface--hover'); - --icon__window-tools_workflow-settings_on-surface--active: url('#{$icons-path}window-tools/light/workflow-settings.svg#on-surface--active'); - --icon__window-tools_workflow-settings_on-surface--disabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#on-surface--disabled'); - --icon__window-tools_workflow-settings_on-primary--enabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#on-primary--enabled'); - --icon__window-tools_workflow-settings_on-primary--hover: url('#{$icons-path}window-tools/light/workflow-settings.svg#on-primary--hover'); - --icon__window-tools_workflow-settings_on-primary--active: url('#{$icons-path}window-tools/light/workflow-settings.svg#on-primary--active'); - --icon__window-tools_workflow-settings_on-primary--disabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#on-primary--disabled'); - --icon__window-tools_workflow-settings_on-disabled--enabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#on-disabled--enabled'); - --icon__window-tools_workflow-settings_on-message--enabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#on-message--enabled'); - --icon__window-tools_workflow-settings_on-elevation--enabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#on-elevation--enabled'); - --icon__window-tools_workflow-settings_primary--enabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#primary--enabled'); - --icon__window-tools_workflow-settings_primary--hover: url('#{$icons-path}window-tools/light/workflow-settings.svg#primary--hover'); - --icon__window-tools_workflow-settings_primary--active: url('#{$icons-path}window-tools/light/workflow-settings.svg#primary--active'); - --icon__window-tools_workflow-settings_primary--disabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#primary--disabled'); - --icon__window-tools_workflow-settings_neutral--enabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#neutral--enabled'); - --icon__window-tools_workflow-settings_neutral--hover: url('#{$icons-path}window-tools/light/workflow-settings.svg#neutral--hover'); - --icon__window-tools_workflow-settings_neutral--active: url('#{$icons-path}window-tools/light/workflow-settings.svg#neutral--active'); - --icon__window-tools_workflow-settings_neutral--disabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#neutral--disabled'); - --icon__window-tools_workflow-settings_highlighted--enabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#highlighted--enabled'); - --icon__window-tools_workflow-settings_bright--enabled: url('#{$icons-path}window-tools/light/workflow-settings.svg#bright--enabled'); - --icon__window-tools_work-with-attributes_on-surface--enabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#on-surface--enabled'); - --icon__window-tools_work-with-attributes_on-surface--hover: url('#{$icons-path}window-tools/light/work-with-attributes.svg#on-surface--hover'); - --icon__window-tools_work-with-attributes_on-surface--active: url('#{$icons-path}window-tools/light/work-with-attributes.svg#on-surface--active'); - --icon__window-tools_work-with-attributes_on-surface--disabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#on-surface--disabled'); - --icon__window-tools_work-with-attributes_on-primary--enabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#on-primary--enabled'); - --icon__window-tools_work-with-attributes_on-primary--hover: url('#{$icons-path}window-tools/light/work-with-attributes.svg#on-primary--hover'); - --icon__window-tools_work-with-attributes_on-primary--active: url('#{$icons-path}window-tools/light/work-with-attributes.svg#on-primary--active'); - --icon__window-tools_work-with-attributes_on-primary--disabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#on-primary--disabled'); - --icon__window-tools_work-with-attributes_on-disabled--enabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#on-disabled--enabled'); - --icon__window-tools_work-with-attributes_on-message--enabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#on-message--enabled'); - --icon__window-tools_work-with-attributes_on-elevation--enabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#on-elevation--enabled'); - --icon__window-tools_work-with-attributes_primary--enabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#primary--enabled'); - --icon__window-tools_work-with-attributes_primary--hover: url('#{$icons-path}window-tools/light/work-with-attributes.svg#primary--hover'); - --icon__window-tools_work-with-attributes_primary--active: url('#{$icons-path}window-tools/light/work-with-attributes.svg#primary--active'); - --icon__window-tools_work-with-attributes_primary--disabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#primary--disabled'); - --icon__window-tools_work-with-attributes_neutral--enabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#neutral--enabled'); - --icon__window-tools_work-with-attributes_neutral--hover: url('#{$icons-path}window-tools/light/work-with-attributes.svg#neutral--hover'); - --icon__window-tools_work-with-attributes_neutral--active: url('#{$icons-path}window-tools/light/work-with-attributes.svg#neutral--active'); - --icon__window-tools_work-with-attributes_neutral--disabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#neutral--disabled'); - --icon__window-tools_work-with-attributes_highlighted--enabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#highlighted--enabled'); - --icon__window-tools_work-with-attributes_bright--enabled: url('#{$icons-path}window-tools/light/work-with-attributes.svg#bright--enabled'); - --icon__window-tools_watch_on-surface--enabled: url('#{$icons-path}window-tools/light/watch.svg#on-surface--enabled'); - --icon__window-tools_watch_on-surface--hover: url('#{$icons-path}window-tools/light/watch.svg#on-surface--hover'); - --icon__window-tools_watch_on-surface--active: url('#{$icons-path}window-tools/light/watch.svg#on-surface--active'); - --icon__window-tools_watch_on-surface--disabled: url('#{$icons-path}window-tools/light/watch.svg#on-surface--disabled'); - --icon__window-tools_watch_on-primary--enabled: url('#{$icons-path}window-tools/light/watch.svg#on-primary--enabled'); - --icon__window-tools_watch_on-primary--hover: url('#{$icons-path}window-tools/light/watch.svg#on-primary--hover'); - --icon__window-tools_watch_on-primary--active: url('#{$icons-path}window-tools/light/watch.svg#on-primary--active'); - --icon__window-tools_watch_on-primary--disabled: url('#{$icons-path}window-tools/light/watch.svg#on-primary--disabled'); - --icon__window-tools_watch_on-disabled--enabled: url('#{$icons-path}window-tools/light/watch.svg#on-disabled--enabled'); - --icon__window-tools_watch_on-message--enabled: url('#{$icons-path}window-tools/light/watch.svg#on-message--enabled'); - --icon__window-tools_watch_on-elevation--enabled: url('#{$icons-path}window-tools/light/watch.svg#on-elevation--enabled'); - --icon__window-tools_watch_primary--enabled: url('#{$icons-path}window-tools/light/watch.svg#primary--enabled'); - --icon__window-tools_watch_primary--hover: url('#{$icons-path}window-tools/light/watch.svg#primary--hover'); - --icon__window-tools_watch_primary--active: url('#{$icons-path}window-tools/light/watch.svg#primary--active'); - --icon__window-tools_watch_primary--disabled: url('#{$icons-path}window-tools/light/watch.svg#primary--disabled'); - --icon__window-tools_watch_neutral--enabled: url('#{$icons-path}window-tools/light/watch.svg#neutral--enabled'); - --icon__window-tools_watch_neutral--hover: url('#{$icons-path}window-tools/light/watch.svg#neutral--hover'); - --icon__window-tools_watch_neutral--active: url('#{$icons-path}window-tools/light/watch.svg#neutral--active'); - --icon__window-tools_watch_neutral--disabled: url('#{$icons-path}window-tools/light/watch.svg#neutral--disabled'); - --icon__window-tools_watch_highlighted--enabled: url('#{$icons-path}window-tools/light/watch.svg#highlighted--enabled'); - --icon__window-tools_watch_bright--enabled: url('#{$icons-path}window-tools/light/watch.svg#bright--enabled'); - --icon__window-tools_toolbox_on-surface--enabled: url('#{$icons-path}window-tools/light/toolbox.svg#on-surface--enabled'); - --icon__window-tools_toolbox_on-surface--hover: url('#{$icons-path}window-tools/light/toolbox.svg#on-surface--hover'); - --icon__window-tools_toolbox_on-surface--active: url('#{$icons-path}window-tools/light/toolbox.svg#on-surface--active'); - --icon__window-tools_toolbox_on-surface--disabled: url('#{$icons-path}window-tools/light/toolbox.svg#on-surface--disabled'); - --icon__window-tools_toolbox_on-primary--enabled: url('#{$icons-path}window-tools/light/toolbox.svg#on-primary--enabled'); - --icon__window-tools_toolbox_on-primary--hover: url('#{$icons-path}window-tools/light/toolbox.svg#on-primary--hover'); - --icon__window-tools_toolbox_on-primary--active: url('#{$icons-path}window-tools/light/toolbox.svg#on-primary--active'); - --icon__window-tools_toolbox_on-primary--disabled: url('#{$icons-path}window-tools/light/toolbox.svg#on-primary--disabled'); - --icon__window-tools_toolbox_on-disabled--enabled: url('#{$icons-path}window-tools/light/toolbox.svg#on-disabled--enabled'); - --icon__window-tools_toolbox_on-message--enabled: url('#{$icons-path}window-tools/light/toolbox.svg#on-message--enabled'); - --icon__window-tools_toolbox_on-elevation--enabled: url('#{$icons-path}window-tools/light/toolbox.svg#on-elevation--enabled'); - --icon__window-tools_toolbox_primary--enabled: url('#{$icons-path}window-tools/light/toolbox.svg#primary--enabled'); - --icon__window-tools_toolbox_primary--hover: url('#{$icons-path}window-tools/light/toolbox.svg#primary--hover'); - --icon__window-tools_toolbox_primary--active: url('#{$icons-path}window-tools/light/toolbox.svg#primary--active'); - --icon__window-tools_toolbox_primary--disabled: url('#{$icons-path}window-tools/light/toolbox.svg#primary--disabled'); - --icon__window-tools_toolbox_neutral--enabled: url('#{$icons-path}window-tools/light/toolbox.svg#neutral--enabled'); - --icon__window-tools_toolbox_neutral--hover: url('#{$icons-path}window-tools/light/toolbox.svg#neutral--hover'); - --icon__window-tools_toolbox_neutral--active: url('#{$icons-path}window-tools/light/toolbox.svg#neutral--active'); - --icon__window-tools_toolbox_neutral--disabled: url('#{$icons-path}window-tools/light/toolbox.svg#neutral--disabled'); - --icon__window-tools_toolbox_highlighted--enabled: url('#{$icons-path}window-tools/light/toolbox.svg#highlighted--enabled'); - --icon__window-tools_toolbox_bright--enabled: url('#{$icons-path}window-tools/light/toolbox.svg#bright--enabled'); - --icon__window-tools_teamdev_on-surface--enabled: url('#{$icons-path}window-tools/light/teamdev.svg#on-surface--enabled'); - --icon__window-tools_teamdev_on-surface--hover: url('#{$icons-path}window-tools/light/teamdev.svg#on-surface--hover'); - --icon__window-tools_teamdev_on-surface--active: url('#{$icons-path}window-tools/light/teamdev.svg#on-surface--active'); - --icon__window-tools_teamdev_on-surface--disabled: url('#{$icons-path}window-tools/light/teamdev.svg#on-surface--disabled'); - --icon__window-tools_teamdev_on-primary--enabled: url('#{$icons-path}window-tools/light/teamdev.svg#on-primary--enabled'); - --icon__window-tools_teamdev_on-primary--hover: url('#{$icons-path}window-tools/light/teamdev.svg#on-primary--hover'); - --icon__window-tools_teamdev_on-primary--active: url('#{$icons-path}window-tools/light/teamdev.svg#on-primary--active'); - --icon__window-tools_teamdev_on-primary--disabled: url('#{$icons-path}window-tools/light/teamdev.svg#on-primary--disabled'); - --icon__window-tools_teamdev_on-disabled--enabled: url('#{$icons-path}window-tools/light/teamdev.svg#on-disabled--enabled'); - --icon__window-tools_teamdev_on-message--enabled: url('#{$icons-path}window-tools/light/teamdev.svg#on-message--enabled'); - --icon__window-tools_teamdev_on-elevation--enabled: url('#{$icons-path}window-tools/light/teamdev.svg#on-elevation--enabled'); - --icon__window-tools_teamdev_primary--enabled: url('#{$icons-path}window-tools/light/teamdev.svg#primary--enabled'); - --icon__window-tools_teamdev_primary--hover: url('#{$icons-path}window-tools/light/teamdev.svg#primary--hover'); - --icon__window-tools_teamdev_primary--active: url('#{$icons-path}window-tools/light/teamdev.svg#primary--active'); - --icon__window-tools_teamdev_primary--disabled: url('#{$icons-path}window-tools/light/teamdev.svg#primary--disabled'); - --icon__window-tools_teamdev_neutral--enabled: url('#{$icons-path}window-tools/light/teamdev.svg#neutral--enabled'); - --icon__window-tools_teamdev_neutral--hover: url('#{$icons-path}window-tools/light/teamdev.svg#neutral--hover'); - --icon__window-tools_teamdev_neutral--active: url('#{$icons-path}window-tools/light/teamdev.svg#neutral--active'); - --icon__window-tools_teamdev_neutral--disabled: url('#{$icons-path}window-tools/light/teamdev.svg#neutral--disabled'); - --icon__window-tools_teamdev_highlighted--enabled: url('#{$icons-path}window-tools/light/teamdev.svg#highlighted--enabled'); - --icon__window-tools_teamdev_bright--enabled: url('#{$icons-path}window-tools/light/teamdev.svg#bright--enabled'); - --icon__window-tools_services_on-surface--enabled: url('#{$icons-path}window-tools/light/services.svg#on-surface--enabled'); - --icon__window-tools_services_on-surface--hover: url('#{$icons-path}window-tools/light/services.svg#on-surface--hover'); - --icon__window-tools_services_on-surface--active: url('#{$icons-path}window-tools/light/services.svg#on-surface--active'); - --icon__window-tools_services_on-surface--disabled: url('#{$icons-path}window-tools/light/services.svg#on-surface--disabled'); - --icon__window-tools_services_on-primary--enabled: url('#{$icons-path}window-tools/light/services.svg#on-primary--enabled'); - --icon__window-tools_services_on-primary--hover: url('#{$icons-path}window-tools/light/services.svg#on-primary--hover'); - --icon__window-tools_services_on-primary--active: url('#{$icons-path}window-tools/light/services.svg#on-primary--active'); - --icon__window-tools_services_on-primary--disabled: url('#{$icons-path}window-tools/light/services.svg#on-primary--disabled'); - --icon__window-tools_services_on-disabled--enabled: url('#{$icons-path}window-tools/light/services.svg#on-disabled--enabled'); - --icon__window-tools_services_on-message--enabled: url('#{$icons-path}window-tools/light/services.svg#on-message--enabled'); - --icon__window-tools_services_on-elevation--enabled: url('#{$icons-path}window-tools/light/services.svg#on-elevation--enabled'); - --icon__window-tools_services_primary--enabled: url('#{$icons-path}window-tools/light/services.svg#primary--enabled'); - --icon__window-tools_services_primary--hover: url('#{$icons-path}window-tools/light/services.svg#primary--hover'); - --icon__window-tools_services_primary--active: url('#{$icons-path}window-tools/light/services.svg#primary--active'); - --icon__window-tools_services_primary--disabled: url('#{$icons-path}window-tools/light/services.svg#primary--disabled'); - --icon__window-tools_services_neutral--enabled: url('#{$icons-path}window-tools/light/services.svg#neutral--enabled'); - --icon__window-tools_services_neutral--hover: url('#{$icons-path}window-tools/light/services.svg#neutral--hover'); - --icon__window-tools_services_neutral--active: url('#{$icons-path}window-tools/light/services.svg#neutral--active'); - --icon__window-tools_services_neutral--disabled: url('#{$icons-path}window-tools/light/services.svg#neutral--disabled'); - --icon__window-tools_services_highlighted--enabled: url('#{$icons-path}window-tools/light/services.svg#highlighted--enabled'); - --icon__window-tools_services_bright--enabled: url('#{$icons-path}window-tools/light/services.svg#bright--enabled'); - --icon__window-tools_roles_on-surface--enabled: url('#{$icons-path}window-tools/light/roles.svg#on-surface--enabled'); - --icon__window-tools_roles_on-surface--hover: url('#{$icons-path}window-tools/light/roles.svg#on-surface--hover'); - --icon__window-tools_roles_on-surface--active: url('#{$icons-path}window-tools/light/roles.svg#on-surface--active'); - --icon__window-tools_roles_on-surface--disabled: url('#{$icons-path}window-tools/light/roles.svg#on-surface--disabled'); - --icon__window-tools_roles_on-primary--enabled: url('#{$icons-path}window-tools/light/roles.svg#on-primary--enabled'); - --icon__window-tools_roles_on-primary--hover: url('#{$icons-path}window-tools/light/roles.svg#on-primary--hover'); - --icon__window-tools_roles_on-primary--active: url('#{$icons-path}window-tools/light/roles.svg#on-primary--active'); - --icon__window-tools_roles_on-primary--disabled: url('#{$icons-path}window-tools/light/roles.svg#on-primary--disabled'); - --icon__window-tools_roles_on-disabled--enabled: url('#{$icons-path}window-tools/light/roles.svg#on-disabled--enabled'); - --icon__window-tools_roles_on-message--enabled: url('#{$icons-path}window-tools/light/roles.svg#on-message--enabled'); - --icon__window-tools_roles_on-elevation--enabled: url('#{$icons-path}window-tools/light/roles.svg#on-elevation--enabled'); - --icon__window-tools_roles_primary--enabled: url('#{$icons-path}window-tools/light/roles.svg#primary--enabled'); - --icon__window-tools_roles_primary--hover: url('#{$icons-path}window-tools/light/roles.svg#primary--hover'); - --icon__window-tools_roles_primary--active: url('#{$icons-path}window-tools/light/roles.svg#primary--active'); - --icon__window-tools_roles_primary--disabled: url('#{$icons-path}window-tools/light/roles.svg#primary--disabled'); - --icon__window-tools_roles_neutral--enabled: url('#{$icons-path}window-tools/light/roles.svg#neutral--enabled'); - --icon__window-tools_roles_neutral--hover: url('#{$icons-path}window-tools/light/roles.svg#neutral--hover'); - --icon__window-tools_roles_neutral--active: url('#{$icons-path}window-tools/light/roles.svg#neutral--active'); - --icon__window-tools_roles_neutral--disabled: url('#{$icons-path}window-tools/light/roles.svg#neutral--disabled'); - --icon__window-tools_roles_highlighted--enabled: url('#{$icons-path}window-tools/light/roles.svg#highlighted--enabled'); - --icon__window-tools_roles_bright--enabled: url('#{$icons-path}window-tools/light/roles.svg#bright--enabled'); - --icon__window-tools_rol_on-surface--enabled: url('#{$icons-path}window-tools/light/rol.svg#on-surface--enabled'); - --icon__window-tools_rol_on-surface--hover: url('#{$icons-path}window-tools/light/rol.svg#on-surface--hover'); - --icon__window-tools_rol_on-surface--active: url('#{$icons-path}window-tools/light/rol.svg#on-surface--active'); - --icon__window-tools_rol_on-surface--disabled: url('#{$icons-path}window-tools/light/rol.svg#on-surface--disabled'); - --icon__window-tools_rol_on-primary--enabled: url('#{$icons-path}window-tools/light/rol.svg#on-primary--enabled'); - --icon__window-tools_rol_on-primary--hover: url('#{$icons-path}window-tools/light/rol.svg#on-primary--hover'); - --icon__window-tools_rol_on-primary--active: url('#{$icons-path}window-tools/light/rol.svg#on-primary--active'); - --icon__window-tools_rol_on-primary--disabled: url('#{$icons-path}window-tools/light/rol.svg#on-primary--disabled'); - --icon__window-tools_rol_on-disabled--enabled: url('#{$icons-path}window-tools/light/rol.svg#on-disabled--enabled'); - --icon__window-tools_rol_on-message--enabled: url('#{$icons-path}window-tools/light/rol.svg#on-message--enabled'); - --icon__window-tools_rol_on-elevation--enabled: url('#{$icons-path}window-tools/light/rol.svg#on-elevation--enabled'); - --icon__window-tools_rol_primary--enabled: url('#{$icons-path}window-tools/light/rol.svg#primary--enabled'); - --icon__window-tools_rol_primary--hover: url('#{$icons-path}window-tools/light/rol.svg#primary--hover'); - --icon__window-tools_rol_primary--active: url('#{$icons-path}window-tools/light/rol.svg#primary--active'); - --icon__window-tools_rol_primary--disabled: url('#{$icons-path}window-tools/light/rol.svg#primary--disabled'); - --icon__window-tools_rol_neutral--enabled: url('#{$icons-path}window-tools/light/rol.svg#neutral--enabled'); - --icon__window-tools_rol_neutral--hover: url('#{$icons-path}window-tools/light/rol.svg#neutral--hover'); - --icon__window-tools_rol_neutral--active: url('#{$icons-path}window-tools/light/rol.svg#neutral--active'); - --icon__window-tools_rol_neutral--disabled: url('#{$icons-path}window-tools/light/rol.svg#neutral--disabled'); - --icon__window-tools_rol_highlighted--enabled: url('#{$icons-path}window-tools/light/rol.svg#highlighted--enabled'); - --icon__window-tools_rol_bright--enabled: url('#{$icons-path}window-tools/light/rol.svg#bright--enabled'); - --icon__window-tools_responsive-sizes_on-surface--enabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#on-surface--enabled'); - --icon__window-tools_responsive-sizes_on-surface--hover: url('#{$icons-path}window-tools/light/responsive-sizes.svg#on-surface--hover'); - --icon__window-tools_responsive-sizes_on-surface--active: url('#{$icons-path}window-tools/light/responsive-sizes.svg#on-surface--active'); - --icon__window-tools_responsive-sizes_on-surface--disabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#on-surface--disabled'); - --icon__window-tools_responsive-sizes_on-primary--enabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#on-primary--enabled'); - --icon__window-tools_responsive-sizes_on-primary--hover: url('#{$icons-path}window-tools/light/responsive-sizes.svg#on-primary--hover'); - --icon__window-tools_responsive-sizes_on-primary--active: url('#{$icons-path}window-tools/light/responsive-sizes.svg#on-primary--active'); - --icon__window-tools_responsive-sizes_on-primary--disabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#on-primary--disabled'); - --icon__window-tools_responsive-sizes_on-disabled--enabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#on-disabled--enabled'); - --icon__window-tools_responsive-sizes_on-message--enabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#on-message--enabled'); - --icon__window-tools_responsive-sizes_on-elevation--enabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#on-elevation--enabled'); - --icon__window-tools_responsive-sizes_primary--enabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#primary--enabled'); - --icon__window-tools_responsive-sizes_primary--hover: url('#{$icons-path}window-tools/light/responsive-sizes.svg#primary--hover'); - --icon__window-tools_responsive-sizes_primary--active: url('#{$icons-path}window-tools/light/responsive-sizes.svg#primary--active'); - --icon__window-tools_responsive-sizes_primary--disabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#primary--disabled'); - --icon__window-tools_responsive-sizes_neutral--enabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#neutral--enabled'); - --icon__window-tools_responsive-sizes_neutral--hover: url('#{$icons-path}window-tools/light/responsive-sizes.svg#neutral--hover'); - --icon__window-tools_responsive-sizes_neutral--active: url('#{$icons-path}window-tools/light/responsive-sizes.svg#neutral--active'); - --icon__window-tools_responsive-sizes_neutral--disabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#neutral--disabled'); - --icon__window-tools_responsive-sizes_highlighted--enabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#highlighted--enabled'); - --icon__window-tools_responsive-sizes_bright--enabled: url('#{$icons-path}window-tools/light/responsive-sizes.svg#bright--enabled'); - --icon__window-tools_references_on-surface--enabled: url('#{$icons-path}window-tools/light/references.svg#on-surface--enabled'); - --icon__window-tools_references_on-surface--hover: url('#{$icons-path}window-tools/light/references.svg#on-surface--hover'); - --icon__window-tools_references_on-surface--active: url('#{$icons-path}window-tools/light/references.svg#on-surface--active'); - --icon__window-tools_references_on-surface--disabled: url('#{$icons-path}window-tools/light/references.svg#on-surface--disabled'); - --icon__window-tools_references_on-primary--enabled: url('#{$icons-path}window-tools/light/references.svg#on-primary--enabled'); - --icon__window-tools_references_on-primary--hover: url('#{$icons-path}window-tools/light/references.svg#on-primary--hover'); - --icon__window-tools_references_on-primary--active: url('#{$icons-path}window-tools/light/references.svg#on-primary--active'); - --icon__window-tools_references_on-primary--disabled: url('#{$icons-path}window-tools/light/references.svg#on-primary--disabled'); - --icon__window-tools_references_on-disabled--enabled: url('#{$icons-path}window-tools/light/references.svg#on-disabled--enabled'); - --icon__window-tools_references_on-message--enabled: url('#{$icons-path}window-tools/light/references.svg#on-message--enabled'); - --icon__window-tools_references_on-elevation--enabled: url('#{$icons-path}window-tools/light/references.svg#on-elevation--enabled'); - --icon__window-tools_references_primary--enabled: url('#{$icons-path}window-tools/light/references.svg#primary--enabled'); - --icon__window-tools_references_primary--hover: url('#{$icons-path}window-tools/light/references.svg#primary--hover'); - --icon__window-tools_references_primary--active: url('#{$icons-path}window-tools/light/references.svg#primary--active'); - --icon__window-tools_references_primary--disabled: url('#{$icons-path}window-tools/light/references.svg#primary--disabled'); - --icon__window-tools_references_neutral--enabled: url('#{$icons-path}window-tools/light/references.svg#neutral--enabled'); - --icon__window-tools_references_neutral--hover: url('#{$icons-path}window-tools/light/references.svg#neutral--hover'); - --icon__window-tools_references_neutral--active: url('#{$icons-path}window-tools/light/references.svg#neutral--active'); - --icon__window-tools_references_neutral--disabled: url('#{$icons-path}window-tools/light/references.svg#neutral--disabled'); - --icon__window-tools_references_highlighted--enabled: url('#{$icons-path}window-tools/light/references.svg#highlighted--enabled'); - --icon__window-tools_references_bright--enabled: url('#{$icons-path}window-tools/light/references.svg#bright--enabled'); - --icon__window-tools_properties_on-surface--enabled: url('#{$icons-path}window-tools/light/properties.svg#on-surface--enabled'); - --icon__window-tools_properties_on-surface--hover: url('#{$icons-path}window-tools/light/properties.svg#on-surface--hover'); - --icon__window-tools_properties_on-surface--active: url('#{$icons-path}window-tools/light/properties.svg#on-surface--active'); - --icon__window-tools_properties_on-surface--disabled: url('#{$icons-path}window-tools/light/properties.svg#on-surface--disabled'); - --icon__window-tools_properties_on-primary--enabled: url('#{$icons-path}window-tools/light/properties.svg#on-primary--enabled'); - --icon__window-tools_properties_on-primary--hover: url('#{$icons-path}window-tools/light/properties.svg#on-primary--hover'); - --icon__window-tools_properties_on-primary--active: url('#{$icons-path}window-tools/light/properties.svg#on-primary--active'); - --icon__window-tools_properties_on-primary--disabled: url('#{$icons-path}window-tools/light/properties.svg#on-primary--disabled'); - --icon__window-tools_properties_on-disabled--enabled: url('#{$icons-path}window-tools/light/properties.svg#on-disabled--enabled'); - --icon__window-tools_properties_on-message--enabled: url('#{$icons-path}window-tools/light/properties.svg#on-message--enabled'); - --icon__window-tools_properties_on-elevation--enabled: url('#{$icons-path}window-tools/light/properties.svg#on-elevation--enabled'); - --icon__window-tools_properties_primary--enabled: url('#{$icons-path}window-tools/light/properties.svg#primary--enabled'); - --icon__window-tools_properties_primary--hover: url('#{$icons-path}window-tools/light/properties.svg#primary--hover'); - --icon__window-tools_properties_primary--active: url('#{$icons-path}window-tools/light/properties.svg#primary--active'); - --icon__window-tools_properties_primary--disabled: url('#{$icons-path}window-tools/light/properties.svg#primary--disabled'); - --icon__window-tools_properties_neutral--enabled: url('#{$icons-path}window-tools/light/properties.svg#neutral--enabled'); - --icon__window-tools_properties_neutral--hover: url('#{$icons-path}window-tools/light/properties.svg#neutral--hover'); - --icon__window-tools_properties_neutral--active: url('#{$icons-path}window-tools/light/properties.svg#neutral--active'); - --icon__window-tools_properties_neutral--disabled: url('#{$icons-path}window-tools/light/properties.svg#neutral--disabled'); - --icon__window-tools_properties_highlighted--enabled: url('#{$icons-path}window-tools/light/properties.svg#highlighted--enabled'); - --icon__window-tools_properties_bright--enabled: url('#{$icons-path}window-tools/light/properties.svg#bright--enabled'); - --icon__window-tools_preferences_on-surface--enabled: url('#{$icons-path}window-tools/light/preferences.svg#on-surface--enabled'); - --icon__window-tools_preferences_on-surface--hover: url('#{$icons-path}window-tools/light/preferences.svg#on-surface--hover'); - --icon__window-tools_preferences_on-surface--active: url('#{$icons-path}window-tools/light/preferences.svg#on-surface--active'); - --icon__window-tools_preferences_on-surface--disabled: url('#{$icons-path}window-tools/light/preferences.svg#on-surface--disabled'); - --icon__window-tools_preferences_on-primary--enabled: url('#{$icons-path}window-tools/light/preferences.svg#on-primary--enabled'); - --icon__window-tools_preferences_on-primary--hover: url('#{$icons-path}window-tools/light/preferences.svg#on-primary--hover'); - --icon__window-tools_preferences_on-primary--active: url('#{$icons-path}window-tools/light/preferences.svg#on-primary--active'); - --icon__window-tools_preferences_on-primary--disabled: url('#{$icons-path}window-tools/light/preferences.svg#on-primary--disabled'); - --icon__window-tools_preferences_on-disabled--enabled: url('#{$icons-path}window-tools/light/preferences.svg#on-disabled--enabled'); - --icon__window-tools_preferences_on-message--enabled: url('#{$icons-path}window-tools/light/preferences.svg#on-message--enabled'); - --icon__window-tools_preferences_on-elevation--enabled: url('#{$icons-path}window-tools/light/preferences.svg#on-elevation--enabled'); - --icon__window-tools_preferences_primary--enabled: url('#{$icons-path}window-tools/light/preferences.svg#primary--enabled'); - --icon__window-tools_preferences_primary--hover: url('#{$icons-path}window-tools/light/preferences.svg#primary--hover'); - --icon__window-tools_preferences_primary--active: url('#{$icons-path}window-tools/light/preferences.svg#primary--active'); - --icon__window-tools_preferences_primary--disabled: url('#{$icons-path}window-tools/light/preferences.svg#primary--disabled'); - --icon__window-tools_preferences_neutral--enabled: url('#{$icons-path}window-tools/light/preferences.svg#neutral--enabled'); - --icon__window-tools_preferences_neutral--hover: url('#{$icons-path}window-tools/light/preferences.svg#neutral--hover'); - --icon__window-tools_preferences_neutral--active: url('#{$icons-path}window-tools/light/preferences.svg#neutral--active'); - --icon__window-tools_preferences_neutral--disabled: url('#{$icons-path}window-tools/light/preferences.svg#neutral--disabled'); - --icon__window-tools_preferences_highlighted--enabled: url('#{$icons-path}window-tools/light/preferences.svg#highlighted--enabled'); - --icon__window-tools_preferences_bright--enabled: url('#{$icons-path}window-tools/light/preferences.svg#bright--enabled'); - --icon__window-tools_performance-test-objects_on-surface--enabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#on-surface--enabled'); - --icon__window-tools_performance-test-objects_on-surface--hover: url('#{$icons-path}window-tools/light/performance-test-objects.svg#on-surface--hover'); - --icon__window-tools_performance-test-objects_on-surface--active: url('#{$icons-path}window-tools/light/performance-test-objects.svg#on-surface--active'); - --icon__window-tools_performance-test-objects_on-surface--disabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#on-surface--disabled'); - --icon__window-tools_performance-test-objects_on-primary--enabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#on-primary--enabled'); - --icon__window-tools_performance-test-objects_on-primary--hover: url('#{$icons-path}window-tools/light/performance-test-objects.svg#on-primary--hover'); - --icon__window-tools_performance-test-objects_on-primary--active: url('#{$icons-path}window-tools/light/performance-test-objects.svg#on-primary--active'); - --icon__window-tools_performance-test-objects_on-primary--disabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#on-primary--disabled'); - --icon__window-tools_performance-test-objects_on-disabled--enabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#on-disabled--enabled'); - --icon__window-tools_performance-test-objects_on-message--enabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#on-message--enabled'); - --icon__window-tools_performance-test-objects_on-elevation--enabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#on-elevation--enabled'); - --icon__window-tools_performance-test-objects_primary--enabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#primary--enabled'); - --icon__window-tools_performance-test-objects_primary--hover: url('#{$icons-path}window-tools/light/performance-test-objects.svg#primary--hover'); - --icon__window-tools_performance-test-objects_primary--active: url('#{$icons-path}window-tools/light/performance-test-objects.svg#primary--active'); - --icon__window-tools_performance-test-objects_primary--disabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#primary--disabled'); - --icon__window-tools_performance-test-objects_neutral--enabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#neutral--enabled'); - --icon__window-tools_performance-test-objects_neutral--hover: url('#{$icons-path}window-tools/light/performance-test-objects.svg#neutral--hover'); - --icon__window-tools_performance-test-objects_neutral--active: url('#{$icons-path}window-tools/light/performance-test-objects.svg#neutral--active'); - --icon__window-tools_performance-test-objects_neutral--disabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#neutral--disabled'); - --icon__window-tools_performance-test-objects_highlighted--enabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#highlighted--enabled'); - --icon__window-tools_performance-test-objects_bright--enabled: url('#{$icons-path}window-tools/light/performance-test-objects.svg#bright--enabled'); - --icon__window-tools_output_on-surface--enabled: url('#{$icons-path}window-tools/light/output.svg#on-surface--enabled'); - --icon__window-tools_output_on-surface--hover: url('#{$icons-path}window-tools/light/output.svg#on-surface--hover'); - --icon__window-tools_output_on-surface--active: url('#{$icons-path}window-tools/light/output.svg#on-surface--active'); - --icon__window-tools_output_on-surface--disabled: url('#{$icons-path}window-tools/light/output.svg#on-surface--disabled'); - --icon__window-tools_output_on-primary--enabled: url('#{$icons-path}window-tools/light/output.svg#on-primary--enabled'); - --icon__window-tools_output_on-primary--hover: url('#{$icons-path}window-tools/light/output.svg#on-primary--hover'); - --icon__window-tools_output_on-primary--active: url('#{$icons-path}window-tools/light/output.svg#on-primary--active'); - --icon__window-tools_output_on-primary--disabled: url('#{$icons-path}window-tools/light/output.svg#on-primary--disabled'); - --icon__window-tools_output_on-disabled--enabled: url('#{$icons-path}window-tools/light/output.svg#on-disabled--enabled'); - --icon__window-tools_output_on-message--enabled: url('#{$icons-path}window-tools/light/output.svg#on-message--enabled'); - --icon__window-tools_output_on-elevation--enabled: url('#{$icons-path}window-tools/light/output.svg#on-elevation--enabled'); - --icon__window-tools_output_primary--enabled: url('#{$icons-path}window-tools/light/output.svg#primary--enabled'); - --icon__window-tools_output_primary--hover: url('#{$icons-path}window-tools/light/output.svg#primary--hover'); - --icon__window-tools_output_primary--active: url('#{$icons-path}window-tools/light/output.svg#primary--active'); - --icon__window-tools_output_primary--disabled: url('#{$icons-path}window-tools/light/output.svg#primary--disabled'); - --icon__window-tools_output_neutral--enabled: url('#{$icons-path}window-tools/light/output.svg#neutral--enabled'); - --icon__window-tools_output_neutral--hover: url('#{$icons-path}window-tools/light/output.svg#neutral--hover'); - --icon__window-tools_output_neutral--active: url('#{$icons-path}window-tools/light/output.svg#neutral--active'); - --icon__window-tools_output_neutral--disabled: url('#{$icons-path}window-tools/light/output.svg#neutral--disabled'); - --icon__window-tools_output_highlighted--enabled: url('#{$icons-path}window-tools/light/output.svg#highlighted--enabled'); - --icon__window-tools_output_bright--enabled: url('#{$icons-path}window-tools/light/output.svg#bright--enabled'); - --icon__window-tools_logout_on-surface--enabled: url('#{$icons-path}window-tools/light/logout.svg#on-surface--enabled'); - --icon__window-tools_logout_on-surface--hover: url('#{$icons-path}window-tools/light/logout.svg#on-surface--hover'); - --icon__window-tools_logout_on-surface--active: url('#{$icons-path}window-tools/light/logout.svg#on-surface--active'); - --icon__window-tools_logout_on-surface--disabled: url('#{$icons-path}window-tools/light/logout.svg#on-surface--disabled'); - --icon__window-tools_logout_on-primary--enabled: url('#{$icons-path}window-tools/light/logout.svg#on-primary--enabled'); - --icon__window-tools_logout_on-primary--hover: url('#{$icons-path}window-tools/light/logout.svg#on-primary--hover'); - --icon__window-tools_logout_on-primary--active: url('#{$icons-path}window-tools/light/logout.svg#on-primary--active'); - --icon__window-tools_logout_on-primary--disabled: url('#{$icons-path}window-tools/light/logout.svg#on-primary--disabled'); - --icon__window-tools_logout_on-disabled--enabled: url('#{$icons-path}window-tools/light/logout.svg#on-disabled--enabled'); - --icon__window-tools_logout_on-message--enabled: url('#{$icons-path}window-tools/light/logout.svg#on-message--enabled'); - --icon__window-tools_logout_on-elevation--enabled: url('#{$icons-path}window-tools/light/logout.svg#on-elevation--enabled'); - --icon__window-tools_logout_primary--enabled: url('#{$icons-path}window-tools/light/logout.svg#primary--enabled'); - --icon__window-tools_logout_primary--hover: url('#{$icons-path}window-tools/light/logout.svg#primary--hover'); - --icon__window-tools_logout_primary--active: url('#{$icons-path}window-tools/light/logout.svg#primary--active'); - --icon__window-tools_logout_primary--disabled: url('#{$icons-path}window-tools/light/logout.svg#primary--disabled'); - --icon__window-tools_logout_neutral--enabled: url('#{$icons-path}window-tools/light/logout.svg#neutral--enabled'); - --icon__window-tools_logout_neutral--hover: url('#{$icons-path}window-tools/light/logout.svg#neutral--hover'); - --icon__window-tools_logout_neutral--active: url('#{$icons-path}window-tools/light/logout.svg#neutral--active'); - --icon__window-tools_logout_neutral--disabled: url('#{$icons-path}window-tools/light/logout.svg#neutral--disabled'); - --icon__window-tools_logout_highlighted--enabled: url('#{$icons-path}window-tools/light/logout.svg#highlighted--enabled'); - --icon__window-tools_logout_bright--enabled: url('#{$icons-path}window-tools/light/logout.svg#bright--enabled'); - --icon__window-tools_last-changes-view_on-surface--enabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#on-surface--enabled'); - --icon__window-tools_last-changes-view_on-surface--hover: url('#{$icons-path}window-tools/light/last-changes-view.svg#on-surface--hover'); - --icon__window-tools_last-changes-view_on-surface--active: url('#{$icons-path}window-tools/light/last-changes-view.svg#on-surface--active'); - --icon__window-tools_last-changes-view_on-surface--disabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#on-surface--disabled'); - --icon__window-tools_last-changes-view_on-primary--enabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#on-primary--enabled'); - --icon__window-tools_last-changes-view_on-primary--hover: url('#{$icons-path}window-tools/light/last-changes-view.svg#on-primary--hover'); - --icon__window-tools_last-changes-view_on-primary--active: url('#{$icons-path}window-tools/light/last-changes-view.svg#on-primary--active'); - --icon__window-tools_last-changes-view_on-primary--disabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#on-primary--disabled'); - --icon__window-tools_last-changes-view_on-disabled--enabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#on-disabled--enabled'); - --icon__window-tools_last-changes-view_on-message--enabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#on-message--enabled'); - --icon__window-tools_last-changes-view_on-elevation--enabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#on-elevation--enabled'); - --icon__window-tools_last-changes-view_primary--enabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#primary--enabled'); - --icon__window-tools_last-changes-view_primary--hover: url('#{$icons-path}window-tools/light/last-changes-view.svg#primary--hover'); - --icon__window-tools_last-changes-view_primary--active: url('#{$icons-path}window-tools/light/last-changes-view.svg#primary--active'); - --icon__window-tools_last-changes-view_primary--disabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#primary--disabled'); - --icon__window-tools_last-changes-view_neutral--enabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#neutral--enabled'); - --icon__window-tools_last-changes-view_neutral--hover: url('#{$icons-path}window-tools/light/last-changes-view.svg#neutral--hover'); - --icon__window-tools_last-changes-view_neutral--active: url('#{$icons-path}window-tools/light/last-changes-view.svg#neutral--active'); - --icon__window-tools_last-changes-view_neutral--disabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#neutral--disabled'); - --icon__window-tools_last-changes-view_highlighted--enabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#highlighted--enabled'); - --icon__window-tools_last-changes-view_bright--enabled: url('#{$icons-path}window-tools/light/last-changes-view.svg#bright--enabled'); - --icon__window-tools_kb-explorer_on-surface--enabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#on-surface--enabled'); - --icon__window-tools_kb-explorer_on-surface--hover: url('#{$icons-path}window-tools/light/kb-explorer.svg#on-surface--hover'); - --icon__window-tools_kb-explorer_on-surface--active: url('#{$icons-path}window-tools/light/kb-explorer.svg#on-surface--active'); - --icon__window-tools_kb-explorer_on-surface--disabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#on-surface--disabled'); - --icon__window-tools_kb-explorer_on-primary--enabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#on-primary--enabled'); - --icon__window-tools_kb-explorer_on-primary--hover: url('#{$icons-path}window-tools/light/kb-explorer.svg#on-primary--hover'); - --icon__window-tools_kb-explorer_on-primary--active: url('#{$icons-path}window-tools/light/kb-explorer.svg#on-primary--active'); - --icon__window-tools_kb-explorer_on-primary--disabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#on-primary--disabled'); - --icon__window-tools_kb-explorer_on-disabled--enabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#on-disabled--enabled'); - --icon__window-tools_kb-explorer_on-message--enabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#on-message--enabled'); - --icon__window-tools_kb-explorer_on-elevation--enabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#on-elevation--enabled'); - --icon__window-tools_kb-explorer_primary--enabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#primary--enabled'); - --icon__window-tools_kb-explorer_primary--hover: url('#{$icons-path}window-tools/light/kb-explorer.svg#primary--hover'); - --icon__window-tools_kb-explorer_primary--active: url('#{$icons-path}window-tools/light/kb-explorer.svg#primary--active'); - --icon__window-tools_kb-explorer_primary--disabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#primary--disabled'); - --icon__window-tools_kb-explorer_neutral--enabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#neutral--enabled'); - --icon__window-tools_kb-explorer_neutral--hover: url('#{$icons-path}window-tools/light/kb-explorer.svg#neutral--hover'); - --icon__window-tools_kb-explorer_neutral--active: url('#{$icons-path}window-tools/light/kb-explorer.svg#neutral--active'); - --icon__window-tools_kb-explorer_neutral--disabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#neutral--disabled'); - --icon__window-tools_kb-explorer_highlighted--enabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#highlighted--enabled'); - --icon__window-tools_kb-explorer_bright--enabled: url('#{$icons-path}window-tools/light/kb-explorer.svg#bright--enabled'); - --icon__window-tools_indexer-monitor_on-surface--enabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#on-surface--enabled'); - --icon__window-tools_indexer-monitor_on-surface--hover: url('#{$icons-path}window-tools/light/indexer-monitor.svg#on-surface--hover'); - --icon__window-tools_indexer-monitor_on-surface--active: url('#{$icons-path}window-tools/light/indexer-monitor.svg#on-surface--active'); - --icon__window-tools_indexer-monitor_on-surface--disabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#on-surface--disabled'); - --icon__window-tools_indexer-monitor_on-primary--enabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#on-primary--enabled'); - --icon__window-tools_indexer-monitor_on-primary--hover: url('#{$icons-path}window-tools/light/indexer-monitor.svg#on-primary--hover'); - --icon__window-tools_indexer-monitor_on-primary--active: url('#{$icons-path}window-tools/light/indexer-monitor.svg#on-primary--active'); - --icon__window-tools_indexer-monitor_on-primary--disabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#on-primary--disabled'); - --icon__window-tools_indexer-monitor_on-disabled--enabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#on-disabled--enabled'); - --icon__window-tools_indexer-monitor_on-message--enabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#on-message--enabled'); - --icon__window-tools_indexer-monitor_on-elevation--enabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#on-elevation--enabled'); - --icon__window-tools_indexer-monitor_primary--enabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#primary--enabled'); - --icon__window-tools_indexer-monitor_primary--hover: url('#{$icons-path}window-tools/light/indexer-monitor.svg#primary--hover'); - --icon__window-tools_indexer-monitor_primary--active: url('#{$icons-path}window-tools/light/indexer-monitor.svg#primary--active'); - --icon__window-tools_indexer-monitor_primary--disabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#primary--disabled'); - --icon__window-tools_indexer-monitor_neutral--enabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#neutral--enabled'); - --icon__window-tools_indexer-monitor_neutral--hover: url('#{$icons-path}window-tools/light/indexer-monitor.svg#neutral--hover'); - --icon__window-tools_indexer-monitor_neutral--active: url('#{$icons-path}window-tools/light/indexer-monitor.svg#neutral--active'); - --icon__window-tools_indexer-monitor_neutral--disabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#neutral--disabled'); - --icon__window-tools_indexer-monitor_highlighted--enabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#highlighted--enabled'); - --icon__window-tools_indexer-monitor_bright--enabled: url('#{$icons-path}window-tools/light/indexer-monitor.svg#bright--enabled'); - --icon__window-tools_history_on-surface--enabled: url('#{$icons-path}window-tools/light/history.svg#on-surface--enabled'); - --icon__window-tools_history_on-surface--hover: url('#{$icons-path}window-tools/light/history.svg#on-surface--hover'); - --icon__window-tools_history_on-surface--active: url('#{$icons-path}window-tools/light/history.svg#on-surface--active'); - --icon__window-tools_history_on-surface--disabled: url('#{$icons-path}window-tools/light/history.svg#on-surface--disabled'); - --icon__window-tools_history_on-primary--enabled: url('#{$icons-path}window-tools/light/history.svg#on-primary--enabled'); - --icon__window-tools_history_on-primary--hover: url('#{$icons-path}window-tools/light/history.svg#on-primary--hover'); - --icon__window-tools_history_on-primary--active: url('#{$icons-path}window-tools/light/history.svg#on-primary--active'); - --icon__window-tools_history_on-primary--disabled: url('#{$icons-path}window-tools/light/history.svg#on-primary--disabled'); - --icon__window-tools_history_on-disabled--enabled: url('#{$icons-path}window-tools/light/history.svg#on-disabled--enabled'); - --icon__window-tools_history_on-message--enabled: url('#{$icons-path}window-tools/light/history.svg#on-message--enabled'); - --icon__window-tools_history_on-elevation--enabled: url('#{$icons-path}window-tools/light/history.svg#on-elevation--enabled'); - --icon__window-tools_history_primary--enabled: url('#{$icons-path}window-tools/light/history.svg#primary--enabled'); - --icon__window-tools_history_primary--hover: url('#{$icons-path}window-tools/light/history.svg#primary--hover'); - --icon__window-tools_history_primary--active: url('#{$icons-path}window-tools/light/history.svg#primary--active'); - --icon__window-tools_history_primary--disabled: url('#{$icons-path}window-tools/light/history.svg#primary--disabled'); - --icon__window-tools_history_neutral--enabled: url('#{$icons-path}window-tools/light/history.svg#neutral--enabled'); - --icon__window-tools_history_neutral--hover: url('#{$icons-path}window-tools/light/history.svg#neutral--hover'); - --icon__window-tools_history_neutral--active: url('#{$icons-path}window-tools/light/history.svg#neutral--active'); - --icon__window-tools_history_neutral--disabled: url('#{$icons-path}window-tools/light/history.svg#neutral--disabled'); - --icon__window-tools_history_highlighted--enabled: url('#{$icons-path}window-tools/light/history.svg#highlighted--enabled'); - --icon__window-tools_history_bright--enabled: url('#{$icons-path}window-tools/light/history.svg#bright--enabled'); - --icon__window-tools_genexus-cloud_on-surface--enabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#on-surface--enabled'); - --icon__window-tools_genexus-cloud_on-surface--hover: url('#{$icons-path}window-tools/light/genexus-cloud.svg#on-surface--hover'); - --icon__window-tools_genexus-cloud_on-surface--active: url('#{$icons-path}window-tools/light/genexus-cloud.svg#on-surface--active'); - --icon__window-tools_genexus-cloud_on-surface--disabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#on-surface--disabled'); - --icon__window-tools_genexus-cloud_on-primary--enabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#on-primary--enabled'); - --icon__window-tools_genexus-cloud_on-primary--hover: url('#{$icons-path}window-tools/light/genexus-cloud.svg#on-primary--hover'); - --icon__window-tools_genexus-cloud_on-primary--active: url('#{$icons-path}window-tools/light/genexus-cloud.svg#on-primary--active'); - --icon__window-tools_genexus-cloud_on-primary--disabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#on-primary--disabled'); - --icon__window-tools_genexus-cloud_on-disabled--enabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#on-disabled--enabled'); - --icon__window-tools_genexus-cloud_on-message--enabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#on-message--enabled'); - --icon__window-tools_genexus-cloud_on-elevation--enabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#on-elevation--enabled'); - --icon__window-tools_genexus-cloud_primary--enabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#primary--enabled'); - --icon__window-tools_genexus-cloud_primary--hover: url('#{$icons-path}window-tools/light/genexus-cloud.svg#primary--hover'); - --icon__window-tools_genexus-cloud_primary--active: url('#{$icons-path}window-tools/light/genexus-cloud.svg#primary--active'); - --icon__window-tools_genexus-cloud_primary--disabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#primary--disabled'); - --icon__window-tools_genexus-cloud_neutral--enabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#neutral--enabled'); - --icon__window-tools_genexus-cloud_neutral--hover: url('#{$icons-path}window-tools/light/genexus-cloud.svg#neutral--hover'); - --icon__window-tools_genexus-cloud_neutral--active: url('#{$icons-path}window-tools/light/genexus-cloud.svg#neutral--active'); - --icon__window-tools_genexus-cloud_neutral--disabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#neutral--disabled'); - --icon__window-tools_genexus-cloud_highlighted--enabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#highlighted--enabled'); - --icon__window-tools_genexus-cloud_bright--enabled: url('#{$icons-path}window-tools/light/genexus-cloud.svg#bright--enabled'); - --icon__window-tools_frontend_on-surface--enabled: url('#{$icons-path}window-tools/light/frontend.svg#on-surface--enabled'); - --icon__window-tools_frontend_on-surface--hover: url('#{$icons-path}window-tools/light/frontend.svg#on-surface--hover'); - --icon__window-tools_frontend_on-surface--active: url('#{$icons-path}window-tools/light/frontend.svg#on-surface--active'); - --icon__window-tools_frontend_on-surface--disabled: url('#{$icons-path}window-tools/light/frontend.svg#on-surface--disabled'); - --icon__window-tools_frontend_on-primary--enabled: url('#{$icons-path}window-tools/light/frontend.svg#on-primary--enabled'); - --icon__window-tools_frontend_on-primary--hover: url('#{$icons-path}window-tools/light/frontend.svg#on-primary--hover'); - --icon__window-tools_frontend_on-primary--active: url('#{$icons-path}window-tools/light/frontend.svg#on-primary--active'); - --icon__window-tools_frontend_on-primary--disabled: url('#{$icons-path}window-tools/light/frontend.svg#on-primary--disabled'); - --icon__window-tools_frontend_on-disabled--enabled: url('#{$icons-path}window-tools/light/frontend.svg#on-disabled--enabled'); - --icon__window-tools_frontend_on-message--enabled: url('#{$icons-path}window-tools/light/frontend.svg#on-message--enabled'); - --icon__window-tools_frontend_on-elevation--enabled: url('#{$icons-path}window-tools/light/frontend.svg#on-elevation--enabled'); - --icon__window-tools_frontend_primary--enabled: url('#{$icons-path}window-tools/light/frontend.svg#primary--enabled'); - --icon__window-tools_frontend_primary--hover: url('#{$icons-path}window-tools/light/frontend.svg#primary--hover'); - --icon__window-tools_frontend_primary--active: url('#{$icons-path}window-tools/light/frontend.svg#primary--active'); - --icon__window-tools_frontend_primary--disabled: url('#{$icons-path}window-tools/light/frontend.svg#primary--disabled'); - --icon__window-tools_frontend_neutral--enabled: url('#{$icons-path}window-tools/light/frontend.svg#neutral--enabled'); - --icon__window-tools_frontend_neutral--hover: url('#{$icons-path}window-tools/light/frontend.svg#neutral--hover'); - --icon__window-tools_frontend_neutral--active: url('#{$icons-path}window-tools/light/frontend.svg#neutral--active'); - --icon__window-tools_frontend_neutral--disabled: url('#{$icons-path}window-tools/light/frontend.svg#neutral--disabled'); - --icon__window-tools_frontend_highlighted--enabled: url('#{$icons-path}window-tools/light/frontend.svg#highlighted--enabled'); - --icon__window-tools_frontend_bright--enabled: url('#{$icons-path}window-tools/light/frontend.svg#bright--enabled'); - --icon__window-tools_filter_on-surface--enabled: url('#{$icons-path}window-tools/light/filter.svg#on-surface--enabled'); - --icon__window-tools_filter_on-surface--hover: url('#{$icons-path}window-tools/light/filter.svg#on-surface--hover'); - --icon__window-tools_filter_on-surface--active: url('#{$icons-path}window-tools/light/filter.svg#on-surface--active'); - --icon__window-tools_filter_on-surface--disabled: url('#{$icons-path}window-tools/light/filter.svg#on-surface--disabled'); - --icon__window-tools_filter_on-primary--enabled: url('#{$icons-path}window-tools/light/filter.svg#on-primary--enabled'); - --icon__window-tools_filter_on-primary--hover: url('#{$icons-path}window-tools/light/filter.svg#on-primary--hover'); - --icon__window-tools_filter_on-primary--active: url('#{$icons-path}window-tools/light/filter.svg#on-primary--active'); - --icon__window-tools_filter_on-primary--disabled: url('#{$icons-path}window-tools/light/filter.svg#on-primary--disabled'); - --icon__window-tools_filter_on-disabled--enabled: url('#{$icons-path}window-tools/light/filter.svg#on-disabled--enabled'); - --icon__window-tools_filter_on-message--enabled: url('#{$icons-path}window-tools/light/filter.svg#on-message--enabled'); - --icon__window-tools_filter_on-elevation--enabled: url('#{$icons-path}window-tools/light/filter.svg#on-elevation--enabled'); - --icon__window-tools_filter_primary--enabled: url('#{$icons-path}window-tools/light/filter.svg#primary--enabled'); - --icon__window-tools_filter_primary--hover: url('#{$icons-path}window-tools/light/filter.svg#primary--hover'); - --icon__window-tools_filter_primary--active: url('#{$icons-path}window-tools/light/filter.svg#primary--active'); - --icon__window-tools_filter_primary--disabled: url('#{$icons-path}window-tools/light/filter.svg#primary--disabled'); - --icon__window-tools_filter_neutral--enabled: url('#{$icons-path}window-tools/light/filter.svg#neutral--enabled'); - --icon__window-tools_filter_neutral--hover: url('#{$icons-path}window-tools/light/filter.svg#neutral--hover'); - --icon__window-tools_filter_neutral--active: url('#{$icons-path}window-tools/light/filter.svg#neutral--active'); - --icon__window-tools_filter_neutral--disabled: url('#{$icons-path}window-tools/light/filter.svg#neutral--disabled'); - --icon__window-tools_filter_highlighted--enabled: url('#{$icons-path}window-tools/light/filter.svg#highlighted--enabled'); - --icon__window-tools_filter_bright--enabled: url('#{$icons-path}window-tools/light/filter.svg#bright--enabled'); - --icon__window-tools_filter-conditions_on-surface--enabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#on-surface--enabled'); - --icon__window-tools_filter-conditions_on-surface--hover: url('#{$icons-path}window-tools/light/filter-conditions.svg#on-surface--hover'); - --icon__window-tools_filter-conditions_on-surface--active: url('#{$icons-path}window-tools/light/filter-conditions.svg#on-surface--active'); - --icon__window-tools_filter-conditions_on-surface--disabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#on-surface--disabled'); - --icon__window-tools_filter-conditions_on-primary--enabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#on-primary--enabled'); - --icon__window-tools_filter-conditions_on-primary--hover: url('#{$icons-path}window-tools/light/filter-conditions.svg#on-primary--hover'); - --icon__window-tools_filter-conditions_on-primary--active: url('#{$icons-path}window-tools/light/filter-conditions.svg#on-primary--active'); - --icon__window-tools_filter-conditions_on-primary--disabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#on-primary--disabled'); - --icon__window-tools_filter-conditions_on-disabled--enabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#on-disabled--enabled'); - --icon__window-tools_filter-conditions_on-message--enabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#on-message--enabled'); - --icon__window-tools_filter-conditions_on-elevation--enabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#on-elevation--enabled'); - --icon__window-tools_filter-conditions_primary--enabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#primary--enabled'); - --icon__window-tools_filter-conditions_primary--hover: url('#{$icons-path}window-tools/light/filter-conditions.svg#primary--hover'); - --icon__window-tools_filter-conditions_primary--active: url('#{$icons-path}window-tools/light/filter-conditions.svg#primary--active'); - --icon__window-tools_filter-conditions_primary--disabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#primary--disabled'); - --icon__window-tools_filter-conditions_neutral--enabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#neutral--enabled'); - --icon__window-tools_filter-conditions_neutral--hover: url('#{$icons-path}window-tools/light/filter-conditions.svg#neutral--hover'); - --icon__window-tools_filter-conditions_neutral--active: url('#{$icons-path}window-tools/light/filter-conditions.svg#neutral--active'); - --icon__window-tools_filter-conditions_neutral--disabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#neutral--disabled'); - --icon__window-tools_filter-conditions_highlighted--enabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#highlighted--enabled'); - --icon__window-tools_filter-conditions_bright--enabled: url('#{$icons-path}window-tools/light/filter-conditions.svg#bright--enabled'); - --icon__window-tools_error-list_on-surface--enabled: url('#{$icons-path}window-tools/light/error-list.svg#on-surface--enabled'); - --icon__window-tools_error-list_on-surface--hover: url('#{$icons-path}window-tools/light/error-list.svg#on-surface--hover'); - --icon__window-tools_error-list_on-surface--active: url('#{$icons-path}window-tools/light/error-list.svg#on-surface--active'); - --icon__window-tools_error-list_on-surface--disabled: url('#{$icons-path}window-tools/light/error-list.svg#on-surface--disabled'); - --icon__window-tools_error-list_on-primary--enabled: url('#{$icons-path}window-tools/light/error-list.svg#on-primary--enabled'); - --icon__window-tools_error-list_on-primary--hover: url('#{$icons-path}window-tools/light/error-list.svg#on-primary--hover'); - --icon__window-tools_error-list_on-primary--active: url('#{$icons-path}window-tools/light/error-list.svg#on-primary--active'); - --icon__window-tools_error-list_on-primary--disabled: url('#{$icons-path}window-tools/light/error-list.svg#on-primary--disabled'); - --icon__window-tools_error-list_on-disabled--enabled: url('#{$icons-path}window-tools/light/error-list.svg#on-disabled--enabled'); - --icon__window-tools_error-list_on-message--enabled: url('#{$icons-path}window-tools/light/error-list.svg#on-message--enabled'); - --icon__window-tools_error-list_on-elevation--enabled: url('#{$icons-path}window-tools/light/error-list.svg#on-elevation--enabled'); - --icon__window-tools_error-list_primary--enabled: url('#{$icons-path}window-tools/light/error-list.svg#primary--enabled'); - --icon__window-tools_error-list_primary--hover: url('#{$icons-path}window-tools/light/error-list.svg#primary--hover'); - --icon__window-tools_error-list_primary--active: url('#{$icons-path}window-tools/light/error-list.svg#primary--active'); - --icon__window-tools_error-list_primary--disabled: url('#{$icons-path}window-tools/light/error-list.svg#primary--disabled'); - --icon__window-tools_error-list_neutral--enabled: url('#{$icons-path}window-tools/light/error-list.svg#neutral--enabled'); - --icon__window-tools_error-list_neutral--hover: url('#{$icons-path}window-tools/light/error-list.svg#neutral--hover'); - --icon__window-tools_error-list_neutral--active: url('#{$icons-path}window-tools/light/error-list.svg#neutral--active'); - --icon__window-tools_error-list_neutral--disabled: url('#{$icons-path}window-tools/light/error-list.svg#neutral--disabled'); - --icon__window-tools_error-list_highlighted--enabled: url('#{$icons-path}window-tools/light/error-list.svg#highlighted--enabled'); - --icon__window-tools_error-list_bright--enabled: url('#{$icons-path}window-tools/light/error-list.svg#bright--enabled'); - --icon__window-tools_debugx_on-surface--enabled: url('#{$icons-path}window-tools/light/debugx.svg#on-surface--enabled'); - --icon__window-tools_debugx_on-surface--hover: url('#{$icons-path}window-tools/light/debugx.svg#on-surface--hover'); - --icon__window-tools_debugx_on-surface--active: url('#{$icons-path}window-tools/light/debugx.svg#on-surface--active'); - --icon__window-tools_debugx_on-surface--disabled: url('#{$icons-path}window-tools/light/debugx.svg#on-surface--disabled'); - --icon__window-tools_debugx_on-primary--enabled: url('#{$icons-path}window-tools/light/debugx.svg#on-primary--enabled'); - --icon__window-tools_debugx_on-primary--hover: url('#{$icons-path}window-tools/light/debugx.svg#on-primary--hover'); - --icon__window-tools_debugx_on-primary--active: url('#{$icons-path}window-tools/light/debugx.svg#on-primary--active'); - --icon__window-tools_debugx_on-primary--disabled: url('#{$icons-path}window-tools/light/debugx.svg#on-primary--disabled'); - --icon__window-tools_debugx_on-disabled--enabled: url('#{$icons-path}window-tools/light/debugx.svg#on-disabled--enabled'); - --icon__window-tools_debugx_on-message--enabled: url('#{$icons-path}window-tools/light/debugx.svg#on-message--enabled'); - --icon__window-tools_debugx_on-elevation--enabled: url('#{$icons-path}window-tools/light/debugx.svg#on-elevation--enabled'); - --icon__window-tools_debugx_primary--enabled: url('#{$icons-path}window-tools/light/debugx.svg#primary--enabled'); - --icon__window-tools_debugx_primary--hover: url('#{$icons-path}window-tools/light/debugx.svg#primary--hover'); - --icon__window-tools_debugx_primary--active: url('#{$icons-path}window-tools/light/debugx.svg#primary--active'); - --icon__window-tools_debugx_primary--disabled: url('#{$icons-path}window-tools/light/debugx.svg#primary--disabled'); - --icon__window-tools_debugx_neutral--enabled: url('#{$icons-path}window-tools/light/debugx.svg#neutral--enabled'); - --icon__window-tools_debugx_neutral--hover: url('#{$icons-path}window-tools/light/debugx.svg#neutral--hover'); - --icon__window-tools_debugx_neutral--active: url('#{$icons-path}window-tools/light/debugx.svg#neutral--active'); - --icon__window-tools_debugx_neutral--disabled: url('#{$icons-path}window-tools/light/debugx.svg#neutral--disabled'); - --icon__window-tools_debugx_highlighted--enabled: url('#{$icons-path}window-tools/light/debugx.svg#highlighted--enabled'); - --icon__window-tools_debugx_bright--enabled: url('#{$icons-path}window-tools/light/debugx.svg#bright--enabled'); - --icon__window-tools_datastores_on-surface--enabled: url('#{$icons-path}window-tools/light/datastores.svg#on-surface--enabled'); - --icon__window-tools_datastores_on-surface--hover: url('#{$icons-path}window-tools/light/datastores.svg#on-surface--hover'); - --icon__window-tools_datastores_on-surface--active: url('#{$icons-path}window-tools/light/datastores.svg#on-surface--active'); - --icon__window-tools_datastores_on-surface--disabled: url('#{$icons-path}window-tools/light/datastores.svg#on-surface--disabled'); - --icon__window-tools_datastores_on-primary--enabled: url('#{$icons-path}window-tools/light/datastores.svg#on-primary--enabled'); - --icon__window-tools_datastores_on-primary--hover: url('#{$icons-path}window-tools/light/datastores.svg#on-primary--hover'); - --icon__window-tools_datastores_on-primary--active: url('#{$icons-path}window-tools/light/datastores.svg#on-primary--active'); - --icon__window-tools_datastores_on-primary--disabled: url('#{$icons-path}window-tools/light/datastores.svg#on-primary--disabled'); - --icon__window-tools_datastores_on-disabled--enabled: url('#{$icons-path}window-tools/light/datastores.svg#on-disabled--enabled'); - --icon__window-tools_datastores_on-message--enabled: url('#{$icons-path}window-tools/light/datastores.svg#on-message--enabled'); - --icon__window-tools_datastores_on-elevation--enabled: url('#{$icons-path}window-tools/light/datastores.svg#on-elevation--enabled'); - --icon__window-tools_datastores_primary--enabled: url('#{$icons-path}window-tools/light/datastores.svg#primary--enabled'); - --icon__window-tools_datastores_primary--hover: url('#{$icons-path}window-tools/light/datastores.svg#primary--hover'); - --icon__window-tools_datastores_primary--active: url('#{$icons-path}window-tools/light/datastores.svg#primary--active'); - --icon__window-tools_datastores_primary--disabled: url('#{$icons-path}window-tools/light/datastores.svg#primary--disabled'); - --icon__window-tools_datastores_neutral--enabled: url('#{$icons-path}window-tools/light/datastores.svg#neutral--enabled'); - --icon__window-tools_datastores_neutral--hover: url('#{$icons-path}window-tools/light/datastores.svg#neutral--hover'); - --icon__window-tools_datastores_neutral--active: url('#{$icons-path}window-tools/light/datastores.svg#neutral--active'); - --icon__window-tools_datastores_neutral--disabled: url('#{$icons-path}window-tools/light/datastores.svg#neutral--disabled'); - --icon__window-tools_datastores_highlighted--enabled: url('#{$icons-path}window-tools/light/datastores.svg#highlighted--enabled'); - --icon__window-tools_datastores_bright--enabled: url('#{$icons-path}window-tools/light/datastores.svg#bright--enabled'); - --icon__window-tools_category-groups_on-surface--enabled: url('#{$icons-path}window-tools/light/category-groups.svg#on-surface--enabled'); - --icon__window-tools_category-groups_on-surface--hover: url('#{$icons-path}window-tools/light/category-groups.svg#on-surface--hover'); - --icon__window-tools_category-groups_on-surface--active: url('#{$icons-path}window-tools/light/category-groups.svg#on-surface--active'); - --icon__window-tools_category-groups_on-surface--disabled: url('#{$icons-path}window-tools/light/category-groups.svg#on-surface--disabled'); - --icon__window-tools_category-groups_on-primary--enabled: url('#{$icons-path}window-tools/light/category-groups.svg#on-primary--enabled'); - --icon__window-tools_category-groups_on-primary--hover: url('#{$icons-path}window-tools/light/category-groups.svg#on-primary--hover'); - --icon__window-tools_category-groups_on-primary--active: url('#{$icons-path}window-tools/light/category-groups.svg#on-primary--active'); - --icon__window-tools_category-groups_on-primary--disabled: url('#{$icons-path}window-tools/light/category-groups.svg#on-primary--disabled'); - --icon__window-tools_category-groups_on-disabled--enabled: url('#{$icons-path}window-tools/light/category-groups.svg#on-disabled--enabled'); - --icon__window-tools_category-groups_on-message--enabled: url('#{$icons-path}window-tools/light/category-groups.svg#on-message--enabled'); - --icon__window-tools_category-groups_on-elevation--enabled: url('#{$icons-path}window-tools/light/category-groups.svg#on-elevation--enabled'); - --icon__window-tools_category-groups_primary--enabled: url('#{$icons-path}window-tools/light/category-groups.svg#primary--enabled'); - --icon__window-tools_category-groups_primary--hover: url('#{$icons-path}window-tools/light/category-groups.svg#primary--hover'); - --icon__window-tools_category-groups_primary--active: url('#{$icons-path}window-tools/light/category-groups.svg#primary--active'); - --icon__window-tools_category-groups_primary--disabled: url('#{$icons-path}window-tools/light/category-groups.svg#primary--disabled'); - --icon__window-tools_category-groups_neutral--enabled: url('#{$icons-path}window-tools/light/category-groups.svg#neutral--enabled'); - --icon__window-tools_category-groups_neutral--hover: url('#{$icons-path}window-tools/light/category-groups.svg#neutral--hover'); - --icon__window-tools_category-groups_neutral--active: url('#{$icons-path}window-tools/light/category-groups.svg#neutral--active'); - --icon__window-tools_category-groups_neutral--disabled: url('#{$icons-path}window-tools/light/category-groups.svg#neutral--disabled'); - --icon__window-tools_category-groups_highlighted--enabled: url('#{$icons-path}window-tools/light/category-groups.svg#highlighted--enabled'); - --icon__window-tools_category-groups_bright--enabled: url('#{$icons-path}window-tools/light/category-groups.svg#bright--enabled'); - --icon__window-tools_breakpoints_on-surface--enabled: url('#{$icons-path}window-tools/light/breakpoints.svg#on-surface--enabled'); - --icon__window-tools_breakpoints_on-surface--hover: url('#{$icons-path}window-tools/light/breakpoints.svg#on-surface--hover'); - --icon__window-tools_breakpoints_on-surface--active: url('#{$icons-path}window-tools/light/breakpoints.svg#on-surface--active'); - --icon__window-tools_breakpoints_on-surface--disabled: url('#{$icons-path}window-tools/light/breakpoints.svg#on-surface--disabled'); - --icon__window-tools_breakpoints_on-primary--enabled: url('#{$icons-path}window-tools/light/breakpoints.svg#on-primary--enabled'); - --icon__window-tools_breakpoints_on-primary--hover: url('#{$icons-path}window-tools/light/breakpoints.svg#on-primary--hover'); - --icon__window-tools_breakpoints_on-primary--active: url('#{$icons-path}window-tools/light/breakpoints.svg#on-primary--active'); - --icon__window-tools_breakpoints_on-primary--disabled: url('#{$icons-path}window-tools/light/breakpoints.svg#on-primary--disabled'); - --icon__window-tools_breakpoints_on-disabled--enabled: url('#{$icons-path}window-tools/light/breakpoints.svg#on-disabled--enabled'); - --icon__window-tools_breakpoints_on-message--enabled: url('#{$icons-path}window-tools/light/breakpoints.svg#on-message--enabled'); - --icon__window-tools_breakpoints_on-elevation--enabled: url('#{$icons-path}window-tools/light/breakpoints.svg#on-elevation--enabled'); - --icon__window-tools_breakpoints_primary--enabled: url('#{$icons-path}window-tools/light/breakpoints.svg#primary--enabled'); - --icon__window-tools_breakpoints_primary--hover: url('#{$icons-path}window-tools/light/breakpoints.svg#primary--hover'); - --icon__window-tools_breakpoints_primary--active: url('#{$icons-path}window-tools/light/breakpoints.svg#primary--active'); - --icon__window-tools_breakpoints_primary--disabled: url('#{$icons-path}window-tools/light/breakpoints.svg#primary--disabled'); - --icon__window-tools_breakpoints_neutral--enabled: url('#{$icons-path}window-tools/light/breakpoints.svg#neutral--enabled'); - --icon__window-tools_breakpoints_neutral--hover: url('#{$icons-path}window-tools/light/breakpoints.svg#neutral--hover'); - --icon__window-tools_breakpoints_neutral--active: url('#{$icons-path}window-tools/light/breakpoints.svg#neutral--active'); - --icon__window-tools_breakpoints_neutral--disabled: url('#{$icons-path}window-tools/light/breakpoints.svg#neutral--disabled'); - --icon__window-tools_breakpoints_highlighted--enabled: url('#{$icons-path}window-tools/light/breakpoints.svg#highlighted--enabled'); - --icon__window-tools_breakpoints_bright--enabled: url('#{$icons-path}window-tools/light/breakpoints.svg#bright--enabled'); - --icon__window-tools_backend_on-surface--enabled: url('#{$icons-path}window-tools/light/backend.svg#on-surface--enabled'); - --icon__window-tools_backend_on-surface--hover: url('#{$icons-path}window-tools/light/backend.svg#on-surface--hover'); - --icon__window-tools_backend_on-surface--active: url('#{$icons-path}window-tools/light/backend.svg#on-surface--active'); - --icon__window-tools_backend_on-surface--disabled: url('#{$icons-path}window-tools/light/backend.svg#on-surface--disabled'); - --icon__window-tools_backend_on-primary--enabled: url('#{$icons-path}window-tools/light/backend.svg#on-primary--enabled'); - --icon__window-tools_backend_on-primary--hover: url('#{$icons-path}window-tools/light/backend.svg#on-primary--hover'); - --icon__window-tools_backend_on-primary--active: url('#{$icons-path}window-tools/light/backend.svg#on-primary--active'); - --icon__window-tools_backend_on-primary--disabled: url('#{$icons-path}window-tools/light/backend.svg#on-primary--disabled'); - --icon__window-tools_backend_on-disabled--enabled: url('#{$icons-path}window-tools/light/backend.svg#on-disabled--enabled'); - --icon__window-tools_backend_on-message--enabled: url('#{$icons-path}window-tools/light/backend.svg#on-message--enabled'); - --icon__window-tools_backend_on-elevation--enabled: url('#{$icons-path}window-tools/light/backend.svg#on-elevation--enabled'); - --icon__window-tools_backend_primary--enabled: url('#{$icons-path}window-tools/light/backend.svg#primary--enabled'); - --icon__window-tools_backend_primary--hover: url('#{$icons-path}window-tools/light/backend.svg#primary--hover'); - --icon__window-tools_backend_primary--active: url('#{$icons-path}window-tools/light/backend.svg#primary--active'); - --icon__window-tools_backend_primary--disabled: url('#{$icons-path}window-tools/light/backend.svg#primary--disabled'); - --icon__window-tools_backend_neutral--enabled: url('#{$icons-path}window-tools/light/backend.svg#neutral--enabled'); - --icon__window-tools_backend_neutral--hover: url('#{$icons-path}window-tools/light/backend.svg#neutral--hover'); - --icon__window-tools_backend_neutral--active: url('#{$icons-path}window-tools/light/backend.svg#neutral--active'); - --icon__window-tools_backend_neutral--disabled: url('#{$icons-path}window-tools/light/backend.svg#neutral--disabled'); - --icon__window-tools_backend_highlighted--enabled: url('#{$icons-path}window-tools/light/backend.svg#highlighted--enabled'); - --icon__window-tools_backend_bright--enabled: url('#{$icons-path}window-tools/light/backend.svg#bright--enabled'); - --icon__window-tools_alphabetical-order_on-surface--enabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#on-surface--enabled'); - --icon__window-tools_alphabetical-order_on-surface--hover: url('#{$icons-path}window-tools/light/alphabetical-order.svg#on-surface--hover'); - --icon__window-tools_alphabetical-order_on-surface--active: url('#{$icons-path}window-tools/light/alphabetical-order.svg#on-surface--active'); - --icon__window-tools_alphabetical-order_on-surface--disabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#on-surface--disabled'); - --icon__window-tools_alphabetical-order_on-primary--enabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#on-primary--enabled'); - --icon__window-tools_alphabetical-order_on-primary--hover: url('#{$icons-path}window-tools/light/alphabetical-order.svg#on-primary--hover'); - --icon__window-tools_alphabetical-order_on-primary--active: url('#{$icons-path}window-tools/light/alphabetical-order.svg#on-primary--active'); - --icon__window-tools_alphabetical-order_on-primary--disabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#on-primary--disabled'); - --icon__window-tools_alphabetical-order_on-disabled--enabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#on-disabled--enabled'); - --icon__window-tools_alphabetical-order_on-message--enabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#on-message--enabled'); - --icon__window-tools_alphabetical-order_on-elevation--enabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#on-elevation--enabled'); - --icon__window-tools_alphabetical-order_primary--enabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#primary--enabled'); - --icon__window-tools_alphabetical-order_primary--hover: url('#{$icons-path}window-tools/light/alphabetical-order.svg#primary--hover'); - --icon__window-tools_alphabetical-order_primary--active: url('#{$icons-path}window-tools/light/alphabetical-order.svg#primary--active'); - --icon__window-tools_alphabetical-order_primary--disabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#primary--disabled'); - --icon__window-tools_alphabetical-order_neutral--enabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#neutral--enabled'); - --icon__window-tools_alphabetical-order_neutral--hover: url('#{$icons-path}window-tools/light/alphabetical-order.svg#neutral--hover'); - --icon__window-tools_alphabetical-order_neutral--active: url('#{$icons-path}window-tools/light/alphabetical-order.svg#neutral--active'); - --icon__window-tools_alphabetical-order_neutral--disabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#neutral--disabled'); - --icon__window-tools_alphabetical-order_highlighted--enabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#highlighted--enabled'); - --icon__window-tools_alphabetical-order_bright--enabled: url('#{$icons-path}window-tools/light/alphabetical-order.svg#bright--enabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*window-tools*/ - --icon__window-tools_workflow_on-surface--enabled: url('#{$icons-path}window-tools/dark/workflow.svg#on-surface--enabled'); - --icon__window-tools_workflow_on-surface--hover: url('#{$icons-path}window-tools/dark/workflow.svg#on-surface--hover'); - --icon__window-tools_workflow_on-surface--active: url('#{$icons-path}window-tools/dark/workflow.svg#on-surface--active'); - --icon__window-tools_workflow_on-surface--disabled: url('#{$icons-path}window-tools/dark/workflow.svg#on-surface--disabled'); - --icon__window-tools_workflow_on-primary--enabled: url('#{$icons-path}window-tools/dark/workflow.svg#on-primary--enabled'); - --icon__window-tools_workflow_on-primary--hover: url('#{$icons-path}window-tools/dark/workflow.svg#on-primary--hover'); - --icon__window-tools_workflow_on-primary--active: url('#{$icons-path}window-tools/dark/workflow.svg#on-primary--active'); - --icon__window-tools_workflow_on-primary--disabled: url('#{$icons-path}window-tools/dark/workflow.svg#on-primary--disabled'); - --icon__window-tools_workflow_on-disabled--enabled: url('#{$icons-path}window-tools/dark/workflow.svg#on-disabled--enabled'); - --icon__window-tools_workflow_on-message--enabled: url('#{$icons-path}window-tools/dark/workflow.svg#on-message--enabled'); - --icon__window-tools_workflow_on-elevation--enabled: url('#{$icons-path}window-tools/dark/workflow.svg#on-elevation--enabled'); - --icon__window-tools_workflow_primary--enabled: url('#{$icons-path}window-tools/dark/workflow.svg#primary--enabled'); - --icon__window-tools_workflow_primary--hover: url('#{$icons-path}window-tools/dark/workflow.svg#primary--hover'); - --icon__window-tools_workflow_primary--active: url('#{$icons-path}window-tools/dark/workflow.svg#primary--active'); - --icon__window-tools_workflow_primary--disabled: url('#{$icons-path}window-tools/dark/workflow.svg#primary--disabled'); - --icon__window-tools_workflow_neutral--enabled: url('#{$icons-path}window-tools/dark/workflow.svg#neutral--enabled'); - --icon__window-tools_workflow_neutral--hover: url('#{$icons-path}window-tools/dark/workflow.svg#neutral--hover'); - --icon__window-tools_workflow_neutral--active: url('#{$icons-path}window-tools/dark/workflow.svg#neutral--active'); - --icon__window-tools_workflow_neutral--disabled: url('#{$icons-path}window-tools/dark/workflow.svg#neutral--disabled'); - --icon__window-tools_workflow_highlighted--enabled: url('#{$icons-path}window-tools/dark/workflow.svg#highlighted--enabled'); - --icon__window-tools_workflow_bright--enabled: url('#{$icons-path}window-tools/dark/workflow.svg#bright--enabled'); - --icon__window-tools_workflow-settings_on-surface--enabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#on-surface--enabled'); - --icon__window-tools_workflow-settings_on-surface--hover: url('#{$icons-path}window-tools/dark/workflow-settings.svg#on-surface--hover'); - --icon__window-tools_workflow-settings_on-surface--active: url('#{$icons-path}window-tools/dark/workflow-settings.svg#on-surface--active'); - --icon__window-tools_workflow-settings_on-surface--disabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#on-surface--disabled'); - --icon__window-tools_workflow-settings_on-primary--enabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#on-primary--enabled'); - --icon__window-tools_workflow-settings_on-primary--hover: url('#{$icons-path}window-tools/dark/workflow-settings.svg#on-primary--hover'); - --icon__window-tools_workflow-settings_on-primary--active: url('#{$icons-path}window-tools/dark/workflow-settings.svg#on-primary--active'); - --icon__window-tools_workflow-settings_on-primary--disabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#on-primary--disabled'); - --icon__window-tools_workflow-settings_on-disabled--enabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#on-disabled--enabled'); - --icon__window-tools_workflow-settings_on-message--enabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#on-message--enabled'); - --icon__window-tools_workflow-settings_on-elevation--enabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#on-elevation--enabled'); - --icon__window-tools_workflow-settings_primary--enabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#primary--enabled'); - --icon__window-tools_workflow-settings_primary--hover: url('#{$icons-path}window-tools/dark/workflow-settings.svg#primary--hover'); - --icon__window-tools_workflow-settings_primary--active: url('#{$icons-path}window-tools/dark/workflow-settings.svg#primary--active'); - --icon__window-tools_workflow-settings_primary--disabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#primary--disabled'); - --icon__window-tools_workflow-settings_neutral--enabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#neutral--enabled'); - --icon__window-tools_workflow-settings_neutral--hover: url('#{$icons-path}window-tools/dark/workflow-settings.svg#neutral--hover'); - --icon__window-tools_workflow-settings_neutral--active: url('#{$icons-path}window-tools/dark/workflow-settings.svg#neutral--active'); - --icon__window-tools_workflow-settings_neutral--disabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#neutral--disabled'); - --icon__window-tools_workflow-settings_highlighted--enabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#highlighted--enabled'); - --icon__window-tools_workflow-settings_bright--enabled: url('#{$icons-path}window-tools/dark/workflow-settings.svg#bright--enabled'); - --icon__window-tools_work-with-attributes_on-surface--enabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#on-surface--enabled'); - --icon__window-tools_work-with-attributes_on-surface--hover: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#on-surface--hover'); - --icon__window-tools_work-with-attributes_on-surface--active: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#on-surface--active'); - --icon__window-tools_work-with-attributes_on-surface--disabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#on-surface--disabled'); - --icon__window-tools_work-with-attributes_on-primary--enabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#on-primary--enabled'); - --icon__window-tools_work-with-attributes_on-primary--hover: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#on-primary--hover'); - --icon__window-tools_work-with-attributes_on-primary--active: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#on-primary--active'); - --icon__window-tools_work-with-attributes_on-primary--disabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#on-primary--disabled'); - --icon__window-tools_work-with-attributes_on-disabled--enabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#on-disabled--enabled'); - --icon__window-tools_work-with-attributes_on-message--enabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#on-message--enabled'); - --icon__window-tools_work-with-attributes_on-elevation--enabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#on-elevation--enabled'); - --icon__window-tools_work-with-attributes_primary--enabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#primary--enabled'); - --icon__window-tools_work-with-attributes_primary--hover: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#primary--hover'); - --icon__window-tools_work-with-attributes_primary--active: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#primary--active'); - --icon__window-tools_work-with-attributes_primary--disabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#primary--disabled'); - --icon__window-tools_work-with-attributes_neutral--enabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#neutral--enabled'); - --icon__window-tools_work-with-attributes_neutral--hover: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#neutral--hover'); - --icon__window-tools_work-with-attributes_neutral--active: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#neutral--active'); - --icon__window-tools_work-with-attributes_neutral--disabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#neutral--disabled'); - --icon__window-tools_work-with-attributes_highlighted--enabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#highlighted--enabled'); - --icon__window-tools_work-with-attributes_bright--enabled: url('#{$icons-path}window-tools/dark/work-with-attributes.svg#bright--enabled'); - --icon__window-tools_watch_on-surface--enabled: url('#{$icons-path}window-tools/dark/watch.svg#on-surface--enabled'); - --icon__window-tools_watch_on-surface--hover: url('#{$icons-path}window-tools/dark/watch.svg#on-surface--hover'); - --icon__window-tools_watch_on-surface--active: url('#{$icons-path}window-tools/dark/watch.svg#on-surface--active'); - --icon__window-tools_watch_on-surface--disabled: url('#{$icons-path}window-tools/dark/watch.svg#on-surface--disabled'); - --icon__window-tools_watch_on-primary--enabled: url('#{$icons-path}window-tools/dark/watch.svg#on-primary--enabled'); - --icon__window-tools_watch_on-primary--hover: url('#{$icons-path}window-tools/dark/watch.svg#on-primary--hover'); - --icon__window-tools_watch_on-primary--active: url('#{$icons-path}window-tools/dark/watch.svg#on-primary--active'); - --icon__window-tools_watch_on-primary--disabled: url('#{$icons-path}window-tools/dark/watch.svg#on-primary--disabled'); - --icon__window-tools_watch_on-disabled--enabled: url('#{$icons-path}window-tools/dark/watch.svg#on-disabled--enabled'); - --icon__window-tools_watch_on-message--enabled: url('#{$icons-path}window-tools/dark/watch.svg#on-message--enabled'); - --icon__window-tools_watch_on-elevation--enabled: url('#{$icons-path}window-tools/dark/watch.svg#on-elevation--enabled'); - --icon__window-tools_watch_primary--enabled: url('#{$icons-path}window-tools/dark/watch.svg#primary--enabled'); - --icon__window-tools_watch_primary--hover: url('#{$icons-path}window-tools/dark/watch.svg#primary--hover'); - --icon__window-tools_watch_primary--active: url('#{$icons-path}window-tools/dark/watch.svg#primary--active'); - --icon__window-tools_watch_primary--disabled: url('#{$icons-path}window-tools/dark/watch.svg#primary--disabled'); - --icon__window-tools_watch_neutral--enabled: url('#{$icons-path}window-tools/dark/watch.svg#neutral--enabled'); - --icon__window-tools_watch_neutral--hover: url('#{$icons-path}window-tools/dark/watch.svg#neutral--hover'); - --icon__window-tools_watch_neutral--active: url('#{$icons-path}window-tools/dark/watch.svg#neutral--active'); - --icon__window-tools_watch_neutral--disabled: url('#{$icons-path}window-tools/dark/watch.svg#neutral--disabled'); - --icon__window-tools_watch_highlighted--enabled: url('#{$icons-path}window-tools/dark/watch.svg#highlighted--enabled'); - --icon__window-tools_watch_bright--enabled: url('#{$icons-path}window-tools/dark/watch.svg#bright--enabled'); - --icon__window-tools_toolbox_on-surface--enabled: url('#{$icons-path}window-tools/dark/toolbox.svg#on-surface--enabled'); - --icon__window-tools_toolbox_on-surface--hover: url('#{$icons-path}window-tools/dark/toolbox.svg#on-surface--hover'); - --icon__window-tools_toolbox_on-surface--active: url('#{$icons-path}window-tools/dark/toolbox.svg#on-surface--active'); - --icon__window-tools_toolbox_on-surface--disabled: url('#{$icons-path}window-tools/dark/toolbox.svg#on-surface--disabled'); - --icon__window-tools_toolbox_on-primary--enabled: url('#{$icons-path}window-tools/dark/toolbox.svg#on-primary--enabled'); - --icon__window-tools_toolbox_on-primary--hover: url('#{$icons-path}window-tools/dark/toolbox.svg#on-primary--hover'); - --icon__window-tools_toolbox_on-primary--active: url('#{$icons-path}window-tools/dark/toolbox.svg#on-primary--active'); - --icon__window-tools_toolbox_on-primary--disabled: url('#{$icons-path}window-tools/dark/toolbox.svg#on-primary--disabled'); - --icon__window-tools_toolbox_on-disabled--enabled: url('#{$icons-path}window-tools/dark/toolbox.svg#on-disabled--enabled'); - --icon__window-tools_toolbox_on-message--enabled: url('#{$icons-path}window-tools/dark/toolbox.svg#on-message--enabled'); - --icon__window-tools_toolbox_on-elevation--enabled: url('#{$icons-path}window-tools/dark/toolbox.svg#on-elevation--enabled'); - --icon__window-tools_toolbox_primary--enabled: url('#{$icons-path}window-tools/dark/toolbox.svg#primary--enabled'); - --icon__window-tools_toolbox_primary--hover: url('#{$icons-path}window-tools/dark/toolbox.svg#primary--hover'); - --icon__window-tools_toolbox_primary--active: url('#{$icons-path}window-tools/dark/toolbox.svg#primary--active'); - --icon__window-tools_toolbox_primary--disabled: url('#{$icons-path}window-tools/dark/toolbox.svg#primary--disabled'); - --icon__window-tools_toolbox_neutral--enabled: url('#{$icons-path}window-tools/dark/toolbox.svg#neutral--enabled'); - --icon__window-tools_toolbox_neutral--hover: url('#{$icons-path}window-tools/dark/toolbox.svg#neutral--hover'); - --icon__window-tools_toolbox_neutral--active: url('#{$icons-path}window-tools/dark/toolbox.svg#neutral--active'); - --icon__window-tools_toolbox_neutral--disabled: url('#{$icons-path}window-tools/dark/toolbox.svg#neutral--disabled'); - --icon__window-tools_toolbox_highlighted--enabled: url('#{$icons-path}window-tools/dark/toolbox.svg#highlighted--enabled'); - --icon__window-tools_toolbox_bright--enabled: url('#{$icons-path}window-tools/dark/toolbox.svg#bright--enabled'); - --icon__window-tools_teamdev_on-surface--enabled: url('#{$icons-path}window-tools/dark/teamdev.svg#on-surface--enabled'); - --icon__window-tools_teamdev_on-surface--hover: url('#{$icons-path}window-tools/dark/teamdev.svg#on-surface--hover'); - --icon__window-tools_teamdev_on-surface--active: url('#{$icons-path}window-tools/dark/teamdev.svg#on-surface--active'); - --icon__window-tools_teamdev_on-surface--disabled: url('#{$icons-path}window-tools/dark/teamdev.svg#on-surface--disabled'); - --icon__window-tools_teamdev_on-primary--enabled: url('#{$icons-path}window-tools/dark/teamdev.svg#on-primary--enabled'); - --icon__window-tools_teamdev_on-primary--hover: url('#{$icons-path}window-tools/dark/teamdev.svg#on-primary--hover'); - --icon__window-tools_teamdev_on-primary--active: url('#{$icons-path}window-tools/dark/teamdev.svg#on-primary--active'); - --icon__window-tools_teamdev_on-primary--disabled: url('#{$icons-path}window-tools/dark/teamdev.svg#on-primary--disabled'); - --icon__window-tools_teamdev_on-disabled--enabled: url('#{$icons-path}window-tools/dark/teamdev.svg#on-disabled--enabled'); - --icon__window-tools_teamdev_on-message--enabled: url('#{$icons-path}window-tools/dark/teamdev.svg#on-message--enabled'); - --icon__window-tools_teamdev_on-elevation--enabled: url('#{$icons-path}window-tools/dark/teamdev.svg#on-elevation--enabled'); - --icon__window-tools_teamdev_primary--enabled: url('#{$icons-path}window-tools/dark/teamdev.svg#primary--enabled'); - --icon__window-tools_teamdev_primary--hover: url('#{$icons-path}window-tools/dark/teamdev.svg#primary--hover'); - --icon__window-tools_teamdev_primary--active: url('#{$icons-path}window-tools/dark/teamdev.svg#primary--active'); - --icon__window-tools_teamdev_primary--disabled: url('#{$icons-path}window-tools/dark/teamdev.svg#primary--disabled'); - --icon__window-tools_teamdev_neutral--enabled: url('#{$icons-path}window-tools/dark/teamdev.svg#neutral--enabled'); - --icon__window-tools_teamdev_neutral--hover: url('#{$icons-path}window-tools/dark/teamdev.svg#neutral--hover'); - --icon__window-tools_teamdev_neutral--active: url('#{$icons-path}window-tools/dark/teamdev.svg#neutral--active'); - --icon__window-tools_teamdev_neutral--disabled: url('#{$icons-path}window-tools/dark/teamdev.svg#neutral--disabled'); - --icon__window-tools_teamdev_highlighted--enabled: url('#{$icons-path}window-tools/dark/teamdev.svg#highlighted--enabled'); - --icon__window-tools_teamdev_bright--enabled: url('#{$icons-path}window-tools/dark/teamdev.svg#bright--enabled'); - --icon__window-tools_services_on-surface--enabled: url('#{$icons-path}window-tools/dark/services.svg#on-surface--enabled'); - --icon__window-tools_services_on-surface--hover: url('#{$icons-path}window-tools/dark/services.svg#on-surface--hover'); - --icon__window-tools_services_on-surface--active: url('#{$icons-path}window-tools/dark/services.svg#on-surface--active'); - --icon__window-tools_services_on-surface--disabled: url('#{$icons-path}window-tools/dark/services.svg#on-surface--disabled'); - --icon__window-tools_services_on-primary--enabled: url('#{$icons-path}window-tools/dark/services.svg#on-primary--enabled'); - --icon__window-tools_services_on-primary--hover: url('#{$icons-path}window-tools/dark/services.svg#on-primary--hover'); - --icon__window-tools_services_on-primary--active: url('#{$icons-path}window-tools/dark/services.svg#on-primary--active'); - --icon__window-tools_services_on-primary--disabled: url('#{$icons-path}window-tools/dark/services.svg#on-primary--disabled'); - --icon__window-tools_services_on-disabled--enabled: url('#{$icons-path}window-tools/dark/services.svg#on-disabled--enabled'); - --icon__window-tools_services_on-message--enabled: url('#{$icons-path}window-tools/dark/services.svg#on-message--enabled'); - --icon__window-tools_services_on-elevation--enabled: url('#{$icons-path}window-tools/dark/services.svg#on-elevation--enabled'); - --icon__window-tools_services_primary--enabled: url('#{$icons-path}window-tools/dark/services.svg#primary--enabled'); - --icon__window-tools_services_primary--hover: url('#{$icons-path}window-tools/dark/services.svg#primary--hover'); - --icon__window-tools_services_primary--active: url('#{$icons-path}window-tools/dark/services.svg#primary--active'); - --icon__window-tools_services_primary--disabled: url('#{$icons-path}window-tools/dark/services.svg#primary--disabled'); - --icon__window-tools_services_neutral--enabled: url('#{$icons-path}window-tools/dark/services.svg#neutral--enabled'); - --icon__window-tools_services_neutral--hover: url('#{$icons-path}window-tools/dark/services.svg#neutral--hover'); - --icon__window-tools_services_neutral--active: url('#{$icons-path}window-tools/dark/services.svg#neutral--active'); - --icon__window-tools_services_neutral--disabled: url('#{$icons-path}window-tools/dark/services.svg#neutral--disabled'); - --icon__window-tools_services_highlighted--enabled: url('#{$icons-path}window-tools/dark/services.svg#highlighted--enabled'); - --icon__window-tools_services_bright--enabled: url('#{$icons-path}window-tools/dark/services.svg#bright--enabled'); - --icon__window-tools_roles_on-surface--enabled: url('#{$icons-path}window-tools/dark/roles.svg#on-surface--enabled'); - --icon__window-tools_roles_on-surface--hover: url('#{$icons-path}window-tools/dark/roles.svg#on-surface--hover'); - --icon__window-tools_roles_on-surface--active: url('#{$icons-path}window-tools/dark/roles.svg#on-surface--active'); - --icon__window-tools_roles_on-surface--disabled: url('#{$icons-path}window-tools/dark/roles.svg#on-surface--disabled'); - --icon__window-tools_roles_on-primary--enabled: url('#{$icons-path}window-tools/dark/roles.svg#on-primary--enabled'); - --icon__window-tools_roles_on-primary--hover: url('#{$icons-path}window-tools/dark/roles.svg#on-primary--hover'); - --icon__window-tools_roles_on-primary--active: url('#{$icons-path}window-tools/dark/roles.svg#on-primary--active'); - --icon__window-tools_roles_on-primary--disabled: url('#{$icons-path}window-tools/dark/roles.svg#on-primary--disabled'); - --icon__window-tools_roles_on-disabled--enabled: url('#{$icons-path}window-tools/dark/roles.svg#on-disabled--enabled'); - --icon__window-tools_roles_on-message--enabled: url('#{$icons-path}window-tools/dark/roles.svg#on-message--enabled'); - --icon__window-tools_roles_on-elevation--enabled: url('#{$icons-path}window-tools/dark/roles.svg#on-elevation--enabled'); - --icon__window-tools_roles_primary--enabled: url('#{$icons-path}window-tools/dark/roles.svg#primary--enabled'); - --icon__window-tools_roles_primary--hover: url('#{$icons-path}window-tools/dark/roles.svg#primary--hover'); - --icon__window-tools_roles_primary--active: url('#{$icons-path}window-tools/dark/roles.svg#primary--active'); - --icon__window-tools_roles_primary--disabled: url('#{$icons-path}window-tools/dark/roles.svg#primary--disabled'); - --icon__window-tools_roles_neutral--enabled: url('#{$icons-path}window-tools/dark/roles.svg#neutral--enabled'); - --icon__window-tools_roles_neutral--hover: url('#{$icons-path}window-tools/dark/roles.svg#neutral--hover'); - --icon__window-tools_roles_neutral--active: url('#{$icons-path}window-tools/dark/roles.svg#neutral--active'); - --icon__window-tools_roles_neutral--disabled: url('#{$icons-path}window-tools/dark/roles.svg#neutral--disabled'); - --icon__window-tools_roles_highlighted--enabled: url('#{$icons-path}window-tools/dark/roles.svg#highlighted--enabled'); - --icon__window-tools_roles_bright--enabled: url('#{$icons-path}window-tools/dark/roles.svg#bright--enabled'); - --icon__window-tools_rol_on-surface--enabled: url('#{$icons-path}window-tools/dark/rol.svg#on-surface--enabled'); - --icon__window-tools_rol_on-surface--hover: url('#{$icons-path}window-tools/dark/rol.svg#on-surface--hover'); - --icon__window-tools_rol_on-surface--active: url('#{$icons-path}window-tools/dark/rol.svg#on-surface--active'); - --icon__window-tools_rol_on-surface--disabled: url('#{$icons-path}window-tools/dark/rol.svg#on-surface--disabled'); - --icon__window-tools_rol_on-primary--enabled: url('#{$icons-path}window-tools/dark/rol.svg#on-primary--enabled'); - --icon__window-tools_rol_on-primary--hover: url('#{$icons-path}window-tools/dark/rol.svg#on-primary--hover'); - --icon__window-tools_rol_on-primary--active: url('#{$icons-path}window-tools/dark/rol.svg#on-primary--active'); - --icon__window-tools_rol_on-primary--disabled: url('#{$icons-path}window-tools/dark/rol.svg#on-primary--disabled'); - --icon__window-tools_rol_on-disabled--enabled: url('#{$icons-path}window-tools/dark/rol.svg#on-disabled--enabled'); - --icon__window-tools_rol_on-message--enabled: url('#{$icons-path}window-tools/dark/rol.svg#on-message--enabled'); - --icon__window-tools_rol_on-elevation--enabled: url('#{$icons-path}window-tools/dark/rol.svg#on-elevation--enabled'); - --icon__window-tools_rol_primary--enabled: url('#{$icons-path}window-tools/dark/rol.svg#primary--enabled'); - --icon__window-tools_rol_primary--hover: url('#{$icons-path}window-tools/dark/rol.svg#primary--hover'); - --icon__window-tools_rol_primary--active: url('#{$icons-path}window-tools/dark/rol.svg#primary--active'); - --icon__window-tools_rol_primary--disabled: url('#{$icons-path}window-tools/dark/rol.svg#primary--disabled'); - --icon__window-tools_rol_neutral--enabled: url('#{$icons-path}window-tools/dark/rol.svg#neutral--enabled'); - --icon__window-tools_rol_neutral--hover: url('#{$icons-path}window-tools/dark/rol.svg#neutral--hover'); - --icon__window-tools_rol_neutral--active: url('#{$icons-path}window-tools/dark/rol.svg#neutral--active'); - --icon__window-tools_rol_neutral--disabled: url('#{$icons-path}window-tools/dark/rol.svg#neutral--disabled'); - --icon__window-tools_rol_highlighted--enabled: url('#{$icons-path}window-tools/dark/rol.svg#highlighted--enabled'); - --icon__window-tools_rol_bright--enabled: url('#{$icons-path}window-tools/dark/rol.svg#bright--enabled'); - --icon__window-tools_responsive-sizes_on-surface--enabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#on-surface--enabled'); - --icon__window-tools_responsive-sizes_on-surface--hover: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#on-surface--hover'); - --icon__window-tools_responsive-sizes_on-surface--active: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#on-surface--active'); - --icon__window-tools_responsive-sizes_on-surface--disabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#on-surface--disabled'); - --icon__window-tools_responsive-sizes_on-primary--enabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#on-primary--enabled'); - --icon__window-tools_responsive-sizes_on-primary--hover: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#on-primary--hover'); - --icon__window-tools_responsive-sizes_on-primary--active: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#on-primary--active'); - --icon__window-tools_responsive-sizes_on-primary--disabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#on-primary--disabled'); - --icon__window-tools_responsive-sizes_on-disabled--enabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#on-disabled--enabled'); - --icon__window-tools_responsive-sizes_on-message--enabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#on-message--enabled'); - --icon__window-tools_responsive-sizes_on-elevation--enabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#on-elevation--enabled'); - --icon__window-tools_responsive-sizes_primary--enabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#primary--enabled'); - --icon__window-tools_responsive-sizes_primary--hover: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#primary--hover'); - --icon__window-tools_responsive-sizes_primary--active: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#primary--active'); - --icon__window-tools_responsive-sizes_primary--disabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#primary--disabled'); - --icon__window-tools_responsive-sizes_neutral--enabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#neutral--enabled'); - --icon__window-tools_responsive-sizes_neutral--hover: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#neutral--hover'); - --icon__window-tools_responsive-sizes_neutral--active: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#neutral--active'); - --icon__window-tools_responsive-sizes_neutral--disabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#neutral--disabled'); - --icon__window-tools_responsive-sizes_highlighted--enabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#highlighted--enabled'); - --icon__window-tools_responsive-sizes_bright--enabled: url('#{$icons-path}window-tools/dark/responsive-sizes.svg#bright--enabled'); - --icon__window-tools_references_on-surface--enabled: url('#{$icons-path}window-tools/dark/references.svg#on-surface--enabled'); - --icon__window-tools_references_on-surface--hover: url('#{$icons-path}window-tools/dark/references.svg#on-surface--hover'); - --icon__window-tools_references_on-surface--active: url('#{$icons-path}window-tools/dark/references.svg#on-surface--active'); - --icon__window-tools_references_on-surface--disabled: url('#{$icons-path}window-tools/dark/references.svg#on-surface--disabled'); - --icon__window-tools_references_on-primary--enabled: url('#{$icons-path}window-tools/dark/references.svg#on-primary--enabled'); - --icon__window-tools_references_on-primary--hover: url('#{$icons-path}window-tools/dark/references.svg#on-primary--hover'); - --icon__window-tools_references_on-primary--active: url('#{$icons-path}window-tools/dark/references.svg#on-primary--active'); - --icon__window-tools_references_on-primary--disabled: url('#{$icons-path}window-tools/dark/references.svg#on-primary--disabled'); - --icon__window-tools_references_on-disabled--enabled: url('#{$icons-path}window-tools/dark/references.svg#on-disabled--enabled'); - --icon__window-tools_references_on-message--enabled: url('#{$icons-path}window-tools/dark/references.svg#on-message--enabled'); - --icon__window-tools_references_on-elevation--enabled: url('#{$icons-path}window-tools/dark/references.svg#on-elevation--enabled'); - --icon__window-tools_references_primary--enabled: url('#{$icons-path}window-tools/dark/references.svg#primary--enabled'); - --icon__window-tools_references_primary--hover: url('#{$icons-path}window-tools/dark/references.svg#primary--hover'); - --icon__window-tools_references_primary--active: url('#{$icons-path}window-tools/dark/references.svg#primary--active'); - --icon__window-tools_references_primary--disabled: url('#{$icons-path}window-tools/dark/references.svg#primary--disabled'); - --icon__window-tools_references_neutral--enabled: url('#{$icons-path}window-tools/dark/references.svg#neutral--enabled'); - --icon__window-tools_references_neutral--hover: url('#{$icons-path}window-tools/dark/references.svg#neutral--hover'); - --icon__window-tools_references_neutral--active: url('#{$icons-path}window-tools/dark/references.svg#neutral--active'); - --icon__window-tools_references_neutral--disabled: url('#{$icons-path}window-tools/dark/references.svg#neutral--disabled'); - --icon__window-tools_references_highlighted--enabled: url('#{$icons-path}window-tools/dark/references.svg#highlighted--enabled'); - --icon__window-tools_references_bright--enabled: url('#{$icons-path}window-tools/dark/references.svg#bright--enabled'); - --icon__window-tools_properties_on-surface--enabled: url('#{$icons-path}window-tools/dark/properties.svg#on-surface--enabled'); - --icon__window-tools_properties_on-surface--hover: url('#{$icons-path}window-tools/dark/properties.svg#on-surface--hover'); - --icon__window-tools_properties_on-surface--active: url('#{$icons-path}window-tools/dark/properties.svg#on-surface--active'); - --icon__window-tools_properties_on-surface--disabled: url('#{$icons-path}window-tools/dark/properties.svg#on-surface--disabled'); - --icon__window-tools_properties_on-primary--enabled: url('#{$icons-path}window-tools/dark/properties.svg#on-primary--enabled'); - --icon__window-tools_properties_on-primary--hover: url('#{$icons-path}window-tools/dark/properties.svg#on-primary--hover'); - --icon__window-tools_properties_on-primary--active: url('#{$icons-path}window-tools/dark/properties.svg#on-primary--active'); - --icon__window-tools_properties_on-primary--disabled: url('#{$icons-path}window-tools/dark/properties.svg#on-primary--disabled'); - --icon__window-tools_properties_on-disabled--enabled: url('#{$icons-path}window-tools/dark/properties.svg#on-disabled--enabled'); - --icon__window-tools_properties_on-message--enabled: url('#{$icons-path}window-tools/dark/properties.svg#on-message--enabled'); - --icon__window-tools_properties_on-elevation--enabled: url('#{$icons-path}window-tools/dark/properties.svg#on-elevation--enabled'); - --icon__window-tools_properties_primary--enabled: url('#{$icons-path}window-tools/dark/properties.svg#primary--enabled'); - --icon__window-tools_properties_primary--hover: url('#{$icons-path}window-tools/dark/properties.svg#primary--hover'); - --icon__window-tools_properties_primary--active: url('#{$icons-path}window-tools/dark/properties.svg#primary--active'); - --icon__window-tools_properties_primary--disabled: url('#{$icons-path}window-tools/dark/properties.svg#primary--disabled'); - --icon__window-tools_properties_neutral--enabled: url('#{$icons-path}window-tools/dark/properties.svg#neutral--enabled'); - --icon__window-tools_properties_neutral--hover: url('#{$icons-path}window-tools/dark/properties.svg#neutral--hover'); - --icon__window-tools_properties_neutral--active: url('#{$icons-path}window-tools/dark/properties.svg#neutral--active'); - --icon__window-tools_properties_neutral--disabled: url('#{$icons-path}window-tools/dark/properties.svg#neutral--disabled'); - --icon__window-tools_properties_highlighted--enabled: url('#{$icons-path}window-tools/dark/properties.svg#highlighted--enabled'); - --icon__window-tools_properties_bright--enabled: url('#{$icons-path}window-tools/dark/properties.svg#bright--enabled'); - --icon__window-tools_preferences_on-surface--enabled: url('#{$icons-path}window-tools/dark/preferences.svg#on-surface--enabled'); - --icon__window-tools_preferences_on-surface--hover: url('#{$icons-path}window-tools/dark/preferences.svg#on-surface--hover'); - --icon__window-tools_preferences_on-surface--active: url('#{$icons-path}window-tools/dark/preferences.svg#on-surface--active'); - --icon__window-tools_preferences_on-surface--disabled: url('#{$icons-path}window-tools/dark/preferences.svg#on-surface--disabled'); - --icon__window-tools_preferences_on-primary--enabled: url('#{$icons-path}window-tools/dark/preferences.svg#on-primary--enabled'); - --icon__window-tools_preferences_on-primary--hover: url('#{$icons-path}window-tools/dark/preferences.svg#on-primary--hover'); - --icon__window-tools_preferences_on-primary--active: url('#{$icons-path}window-tools/dark/preferences.svg#on-primary--active'); - --icon__window-tools_preferences_on-primary--disabled: url('#{$icons-path}window-tools/dark/preferences.svg#on-primary--disabled'); - --icon__window-tools_preferences_on-disabled--enabled: url('#{$icons-path}window-tools/dark/preferences.svg#on-disabled--enabled'); - --icon__window-tools_preferences_on-message--enabled: url('#{$icons-path}window-tools/dark/preferences.svg#on-message--enabled'); - --icon__window-tools_preferences_on-elevation--enabled: url('#{$icons-path}window-tools/dark/preferences.svg#on-elevation--enabled'); - --icon__window-tools_preferences_primary--enabled: url('#{$icons-path}window-tools/dark/preferences.svg#primary--enabled'); - --icon__window-tools_preferences_primary--hover: url('#{$icons-path}window-tools/dark/preferences.svg#primary--hover'); - --icon__window-tools_preferences_primary--active: url('#{$icons-path}window-tools/dark/preferences.svg#primary--active'); - --icon__window-tools_preferences_primary--disabled: url('#{$icons-path}window-tools/dark/preferences.svg#primary--disabled'); - --icon__window-tools_preferences_neutral--enabled: url('#{$icons-path}window-tools/dark/preferences.svg#neutral--enabled'); - --icon__window-tools_preferences_neutral--hover: url('#{$icons-path}window-tools/dark/preferences.svg#neutral--hover'); - --icon__window-tools_preferences_neutral--active: url('#{$icons-path}window-tools/dark/preferences.svg#neutral--active'); - --icon__window-tools_preferences_neutral--disabled: url('#{$icons-path}window-tools/dark/preferences.svg#neutral--disabled'); - --icon__window-tools_preferences_highlighted--enabled: url('#{$icons-path}window-tools/dark/preferences.svg#highlighted--enabled'); - --icon__window-tools_preferences_bright--enabled: url('#{$icons-path}window-tools/dark/preferences.svg#bright--enabled'); - --icon__window-tools_performance-test-objects_on-surface--enabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#on-surface--enabled'); - --icon__window-tools_performance-test-objects_on-surface--hover: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#on-surface--hover'); - --icon__window-tools_performance-test-objects_on-surface--active: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#on-surface--active'); - --icon__window-tools_performance-test-objects_on-surface--disabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#on-surface--disabled'); - --icon__window-tools_performance-test-objects_on-primary--enabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#on-primary--enabled'); - --icon__window-tools_performance-test-objects_on-primary--hover: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#on-primary--hover'); - --icon__window-tools_performance-test-objects_on-primary--active: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#on-primary--active'); - --icon__window-tools_performance-test-objects_on-primary--disabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#on-primary--disabled'); - --icon__window-tools_performance-test-objects_on-disabled--enabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#on-disabled--enabled'); - --icon__window-tools_performance-test-objects_on-message--enabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#on-message--enabled'); - --icon__window-tools_performance-test-objects_on-elevation--enabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#on-elevation--enabled'); - --icon__window-tools_performance-test-objects_primary--enabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#primary--enabled'); - --icon__window-tools_performance-test-objects_primary--hover: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#primary--hover'); - --icon__window-tools_performance-test-objects_primary--active: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#primary--active'); - --icon__window-tools_performance-test-objects_primary--disabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#primary--disabled'); - --icon__window-tools_performance-test-objects_neutral--enabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#neutral--enabled'); - --icon__window-tools_performance-test-objects_neutral--hover: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#neutral--hover'); - --icon__window-tools_performance-test-objects_neutral--active: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#neutral--active'); - --icon__window-tools_performance-test-objects_neutral--disabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#neutral--disabled'); - --icon__window-tools_performance-test-objects_highlighted--enabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#highlighted--enabled'); - --icon__window-tools_performance-test-objects_bright--enabled: url('#{$icons-path}window-tools/dark/performance-test-objects.svg#bright--enabled'); - --icon__window-tools_output_on-surface--enabled: url('#{$icons-path}window-tools/dark/output.svg#on-surface--enabled'); - --icon__window-tools_output_on-surface--hover: url('#{$icons-path}window-tools/dark/output.svg#on-surface--hover'); - --icon__window-tools_output_on-surface--active: url('#{$icons-path}window-tools/dark/output.svg#on-surface--active'); - --icon__window-tools_output_on-surface--disabled: url('#{$icons-path}window-tools/dark/output.svg#on-surface--disabled'); - --icon__window-tools_output_on-primary--enabled: url('#{$icons-path}window-tools/dark/output.svg#on-primary--enabled'); - --icon__window-tools_output_on-primary--hover: url('#{$icons-path}window-tools/dark/output.svg#on-primary--hover'); - --icon__window-tools_output_on-primary--active: url('#{$icons-path}window-tools/dark/output.svg#on-primary--active'); - --icon__window-tools_output_on-primary--disabled: url('#{$icons-path}window-tools/dark/output.svg#on-primary--disabled'); - --icon__window-tools_output_on-disabled--enabled: url('#{$icons-path}window-tools/dark/output.svg#on-disabled--enabled'); - --icon__window-tools_output_on-message--enabled: url('#{$icons-path}window-tools/dark/output.svg#on-message--enabled'); - --icon__window-tools_output_on-elevation--enabled: url('#{$icons-path}window-tools/dark/output.svg#on-elevation--enabled'); - --icon__window-tools_output_primary--enabled: url('#{$icons-path}window-tools/dark/output.svg#primary--enabled'); - --icon__window-tools_output_primary--hover: url('#{$icons-path}window-tools/dark/output.svg#primary--hover'); - --icon__window-tools_output_primary--active: url('#{$icons-path}window-tools/dark/output.svg#primary--active'); - --icon__window-tools_output_primary--disabled: url('#{$icons-path}window-tools/dark/output.svg#primary--disabled'); - --icon__window-tools_output_neutral--enabled: url('#{$icons-path}window-tools/dark/output.svg#neutral--enabled'); - --icon__window-tools_output_neutral--hover: url('#{$icons-path}window-tools/dark/output.svg#neutral--hover'); - --icon__window-tools_output_neutral--active: url('#{$icons-path}window-tools/dark/output.svg#neutral--active'); - --icon__window-tools_output_neutral--disabled: url('#{$icons-path}window-tools/dark/output.svg#neutral--disabled'); - --icon__window-tools_output_highlighted--enabled: url('#{$icons-path}window-tools/dark/output.svg#highlighted--enabled'); - --icon__window-tools_output_bright--enabled: url('#{$icons-path}window-tools/dark/output.svg#bright--enabled'); - --icon__window-tools_logout_on-surface--enabled: url('#{$icons-path}window-tools/dark/logout.svg#on-surface--enabled'); - --icon__window-tools_logout_on-surface--hover: url('#{$icons-path}window-tools/dark/logout.svg#on-surface--hover'); - --icon__window-tools_logout_on-surface--active: url('#{$icons-path}window-tools/dark/logout.svg#on-surface--active'); - --icon__window-tools_logout_on-surface--disabled: url('#{$icons-path}window-tools/dark/logout.svg#on-surface--disabled'); - --icon__window-tools_logout_on-primary--enabled: url('#{$icons-path}window-tools/dark/logout.svg#on-primary--enabled'); - --icon__window-tools_logout_on-primary--hover: url('#{$icons-path}window-tools/dark/logout.svg#on-primary--hover'); - --icon__window-tools_logout_on-primary--active: url('#{$icons-path}window-tools/dark/logout.svg#on-primary--active'); - --icon__window-tools_logout_on-primary--disabled: url('#{$icons-path}window-tools/dark/logout.svg#on-primary--disabled'); - --icon__window-tools_logout_on-disabled--enabled: url('#{$icons-path}window-tools/dark/logout.svg#on-disabled--enabled'); - --icon__window-tools_logout_on-message--enabled: url('#{$icons-path}window-tools/dark/logout.svg#on-message--enabled'); - --icon__window-tools_logout_on-elevation--enabled: url('#{$icons-path}window-tools/dark/logout.svg#on-elevation--enabled'); - --icon__window-tools_logout_primary--enabled: url('#{$icons-path}window-tools/dark/logout.svg#primary--enabled'); - --icon__window-tools_logout_primary--hover: url('#{$icons-path}window-tools/dark/logout.svg#primary--hover'); - --icon__window-tools_logout_primary--active: url('#{$icons-path}window-tools/dark/logout.svg#primary--active'); - --icon__window-tools_logout_primary--disabled: url('#{$icons-path}window-tools/dark/logout.svg#primary--disabled'); - --icon__window-tools_logout_neutral--enabled: url('#{$icons-path}window-tools/dark/logout.svg#neutral--enabled'); - --icon__window-tools_logout_neutral--hover: url('#{$icons-path}window-tools/dark/logout.svg#neutral--hover'); - --icon__window-tools_logout_neutral--active: url('#{$icons-path}window-tools/dark/logout.svg#neutral--active'); - --icon__window-tools_logout_neutral--disabled: url('#{$icons-path}window-tools/dark/logout.svg#neutral--disabled'); - --icon__window-tools_logout_highlighted--enabled: url('#{$icons-path}window-tools/dark/logout.svg#highlighted--enabled'); - --icon__window-tools_logout_bright--enabled: url('#{$icons-path}window-tools/dark/logout.svg#bright--enabled'); - --icon__window-tools_last-changes-view_on-surface--enabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#on-surface--enabled'); - --icon__window-tools_last-changes-view_on-surface--hover: url('#{$icons-path}window-tools/dark/last-changes-view.svg#on-surface--hover'); - --icon__window-tools_last-changes-view_on-surface--active: url('#{$icons-path}window-tools/dark/last-changes-view.svg#on-surface--active'); - --icon__window-tools_last-changes-view_on-surface--disabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#on-surface--disabled'); - --icon__window-tools_last-changes-view_on-primary--enabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#on-primary--enabled'); - --icon__window-tools_last-changes-view_on-primary--hover: url('#{$icons-path}window-tools/dark/last-changes-view.svg#on-primary--hover'); - --icon__window-tools_last-changes-view_on-primary--active: url('#{$icons-path}window-tools/dark/last-changes-view.svg#on-primary--active'); - --icon__window-tools_last-changes-view_on-primary--disabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#on-primary--disabled'); - --icon__window-tools_last-changes-view_on-disabled--enabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#on-disabled--enabled'); - --icon__window-tools_last-changes-view_on-message--enabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#on-message--enabled'); - --icon__window-tools_last-changes-view_on-elevation--enabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#on-elevation--enabled'); - --icon__window-tools_last-changes-view_primary--enabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#primary--enabled'); - --icon__window-tools_last-changes-view_primary--hover: url('#{$icons-path}window-tools/dark/last-changes-view.svg#primary--hover'); - --icon__window-tools_last-changes-view_primary--active: url('#{$icons-path}window-tools/dark/last-changes-view.svg#primary--active'); - --icon__window-tools_last-changes-view_primary--disabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#primary--disabled'); - --icon__window-tools_last-changes-view_neutral--enabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#neutral--enabled'); - --icon__window-tools_last-changes-view_neutral--hover: url('#{$icons-path}window-tools/dark/last-changes-view.svg#neutral--hover'); - --icon__window-tools_last-changes-view_neutral--active: url('#{$icons-path}window-tools/dark/last-changes-view.svg#neutral--active'); - --icon__window-tools_last-changes-view_neutral--disabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#neutral--disabled'); - --icon__window-tools_last-changes-view_highlighted--enabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#highlighted--enabled'); - --icon__window-tools_last-changes-view_bright--enabled: url('#{$icons-path}window-tools/dark/last-changes-view.svg#bright--enabled'); - --icon__window-tools_kb-explorer_on-surface--enabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#on-surface--enabled'); - --icon__window-tools_kb-explorer_on-surface--hover: url('#{$icons-path}window-tools/dark/kb-explorer.svg#on-surface--hover'); - --icon__window-tools_kb-explorer_on-surface--active: url('#{$icons-path}window-tools/dark/kb-explorer.svg#on-surface--active'); - --icon__window-tools_kb-explorer_on-surface--disabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#on-surface--disabled'); - --icon__window-tools_kb-explorer_on-primary--enabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#on-primary--enabled'); - --icon__window-tools_kb-explorer_on-primary--hover: url('#{$icons-path}window-tools/dark/kb-explorer.svg#on-primary--hover'); - --icon__window-tools_kb-explorer_on-primary--active: url('#{$icons-path}window-tools/dark/kb-explorer.svg#on-primary--active'); - --icon__window-tools_kb-explorer_on-primary--disabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#on-primary--disabled'); - --icon__window-tools_kb-explorer_on-disabled--enabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#on-disabled--enabled'); - --icon__window-tools_kb-explorer_on-message--enabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#on-message--enabled'); - --icon__window-tools_kb-explorer_on-elevation--enabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#on-elevation--enabled'); - --icon__window-tools_kb-explorer_primary--enabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#primary--enabled'); - --icon__window-tools_kb-explorer_primary--hover: url('#{$icons-path}window-tools/dark/kb-explorer.svg#primary--hover'); - --icon__window-tools_kb-explorer_primary--active: url('#{$icons-path}window-tools/dark/kb-explorer.svg#primary--active'); - --icon__window-tools_kb-explorer_primary--disabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#primary--disabled'); - --icon__window-tools_kb-explorer_neutral--enabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#neutral--enabled'); - --icon__window-tools_kb-explorer_neutral--hover: url('#{$icons-path}window-tools/dark/kb-explorer.svg#neutral--hover'); - --icon__window-tools_kb-explorer_neutral--active: url('#{$icons-path}window-tools/dark/kb-explorer.svg#neutral--active'); - --icon__window-tools_kb-explorer_neutral--disabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#neutral--disabled'); - --icon__window-tools_kb-explorer_highlighted--enabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#highlighted--enabled'); - --icon__window-tools_kb-explorer_bright--enabled: url('#{$icons-path}window-tools/dark/kb-explorer.svg#bright--enabled'); - --icon__window-tools_indexer-monitor_on-surface--enabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#on-surface--enabled'); - --icon__window-tools_indexer-monitor_on-surface--hover: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#on-surface--hover'); - --icon__window-tools_indexer-monitor_on-surface--active: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#on-surface--active'); - --icon__window-tools_indexer-monitor_on-surface--disabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#on-surface--disabled'); - --icon__window-tools_indexer-monitor_on-primary--enabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#on-primary--enabled'); - --icon__window-tools_indexer-monitor_on-primary--hover: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#on-primary--hover'); - --icon__window-tools_indexer-monitor_on-primary--active: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#on-primary--active'); - --icon__window-tools_indexer-monitor_on-primary--disabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#on-primary--disabled'); - --icon__window-tools_indexer-monitor_on-disabled--enabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#on-disabled--enabled'); - --icon__window-tools_indexer-monitor_on-message--enabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#on-message--enabled'); - --icon__window-tools_indexer-monitor_on-elevation--enabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#on-elevation--enabled'); - --icon__window-tools_indexer-monitor_primary--enabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#primary--enabled'); - --icon__window-tools_indexer-monitor_primary--hover: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#primary--hover'); - --icon__window-tools_indexer-monitor_primary--active: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#primary--active'); - --icon__window-tools_indexer-monitor_primary--disabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#primary--disabled'); - --icon__window-tools_indexer-monitor_neutral--enabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#neutral--enabled'); - --icon__window-tools_indexer-monitor_neutral--hover: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#neutral--hover'); - --icon__window-tools_indexer-monitor_neutral--active: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#neutral--active'); - --icon__window-tools_indexer-monitor_neutral--disabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#neutral--disabled'); - --icon__window-tools_indexer-monitor_highlighted--enabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#highlighted--enabled'); - --icon__window-tools_indexer-monitor_bright--enabled: url('#{$icons-path}window-tools/dark/indexer-monitor.svg#bright--enabled'); - --icon__window-tools_history_on-surface--enabled: url('#{$icons-path}window-tools/dark/history.svg#on-surface--enabled'); - --icon__window-tools_history_on-surface--hover: url('#{$icons-path}window-tools/dark/history.svg#on-surface--hover'); - --icon__window-tools_history_on-surface--active: url('#{$icons-path}window-tools/dark/history.svg#on-surface--active'); - --icon__window-tools_history_on-surface--disabled: url('#{$icons-path}window-tools/dark/history.svg#on-surface--disabled'); - --icon__window-tools_history_on-primary--enabled: url('#{$icons-path}window-tools/dark/history.svg#on-primary--enabled'); - --icon__window-tools_history_on-primary--hover: url('#{$icons-path}window-tools/dark/history.svg#on-primary--hover'); - --icon__window-tools_history_on-primary--active: url('#{$icons-path}window-tools/dark/history.svg#on-primary--active'); - --icon__window-tools_history_on-primary--disabled: url('#{$icons-path}window-tools/dark/history.svg#on-primary--disabled'); - --icon__window-tools_history_on-disabled--enabled: url('#{$icons-path}window-tools/dark/history.svg#on-disabled--enabled'); - --icon__window-tools_history_on-message--enabled: url('#{$icons-path}window-tools/dark/history.svg#on-message--enabled'); - --icon__window-tools_history_on-elevation--enabled: url('#{$icons-path}window-tools/dark/history.svg#on-elevation--enabled'); - --icon__window-tools_history_primary--enabled: url('#{$icons-path}window-tools/dark/history.svg#primary--enabled'); - --icon__window-tools_history_primary--hover: url('#{$icons-path}window-tools/dark/history.svg#primary--hover'); - --icon__window-tools_history_primary--active: url('#{$icons-path}window-tools/dark/history.svg#primary--active'); - --icon__window-tools_history_primary--disabled: url('#{$icons-path}window-tools/dark/history.svg#primary--disabled'); - --icon__window-tools_history_neutral--enabled: url('#{$icons-path}window-tools/dark/history.svg#neutral--enabled'); - --icon__window-tools_history_neutral--hover: url('#{$icons-path}window-tools/dark/history.svg#neutral--hover'); - --icon__window-tools_history_neutral--active: url('#{$icons-path}window-tools/dark/history.svg#neutral--active'); - --icon__window-tools_history_neutral--disabled: url('#{$icons-path}window-tools/dark/history.svg#neutral--disabled'); - --icon__window-tools_history_highlighted--enabled: url('#{$icons-path}window-tools/dark/history.svg#highlighted--enabled'); - --icon__window-tools_history_bright--enabled: url('#{$icons-path}window-tools/dark/history.svg#bright--enabled'); - --icon__window-tools_genexus-cloud_on-surface--enabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#on-surface--enabled'); - --icon__window-tools_genexus-cloud_on-surface--hover: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#on-surface--hover'); - --icon__window-tools_genexus-cloud_on-surface--active: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#on-surface--active'); - --icon__window-tools_genexus-cloud_on-surface--disabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#on-surface--disabled'); - --icon__window-tools_genexus-cloud_on-primary--enabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#on-primary--enabled'); - --icon__window-tools_genexus-cloud_on-primary--hover: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#on-primary--hover'); - --icon__window-tools_genexus-cloud_on-primary--active: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#on-primary--active'); - --icon__window-tools_genexus-cloud_on-primary--disabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#on-primary--disabled'); - --icon__window-tools_genexus-cloud_on-disabled--enabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#on-disabled--enabled'); - --icon__window-tools_genexus-cloud_on-message--enabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#on-message--enabled'); - --icon__window-tools_genexus-cloud_on-elevation--enabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#on-elevation--enabled'); - --icon__window-tools_genexus-cloud_primary--enabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#primary--enabled'); - --icon__window-tools_genexus-cloud_primary--hover: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#primary--hover'); - --icon__window-tools_genexus-cloud_primary--active: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#primary--active'); - --icon__window-tools_genexus-cloud_primary--disabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#primary--disabled'); - --icon__window-tools_genexus-cloud_neutral--enabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#neutral--enabled'); - --icon__window-tools_genexus-cloud_neutral--hover: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#neutral--hover'); - --icon__window-tools_genexus-cloud_neutral--active: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#neutral--active'); - --icon__window-tools_genexus-cloud_neutral--disabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#neutral--disabled'); - --icon__window-tools_genexus-cloud_highlighted--enabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#highlighted--enabled'); - --icon__window-tools_genexus-cloud_bright--enabled: url('#{$icons-path}window-tools/dark/genexus-cloud.svg#bright--enabled'); - --icon__window-tools_frontend_on-surface--enabled: url('#{$icons-path}window-tools/dark/frontend.svg#on-surface--enabled'); - --icon__window-tools_frontend_on-surface--hover: url('#{$icons-path}window-tools/dark/frontend.svg#on-surface--hover'); - --icon__window-tools_frontend_on-surface--active: url('#{$icons-path}window-tools/dark/frontend.svg#on-surface--active'); - --icon__window-tools_frontend_on-surface--disabled: url('#{$icons-path}window-tools/dark/frontend.svg#on-surface--disabled'); - --icon__window-tools_frontend_on-primary--enabled: url('#{$icons-path}window-tools/dark/frontend.svg#on-primary--enabled'); - --icon__window-tools_frontend_on-primary--hover: url('#{$icons-path}window-tools/dark/frontend.svg#on-primary--hover'); - --icon__window-tools_frontend_on-primary--active: url('#{$icons-path}window-tools/dark/frontend.svg#on-primary--active'); - --icon__window-tools_frontend_on-primary--disabled: url('#{$icons-path}window-tools/dark/frontend.svg#on-primary--disabled'); - --icon__window-tools_frontend_on-disabled--enabled: url('#{$icons-path}window-tools/dark/frontend.svg#on-disabled--enabled'); - --icon__window-tools_frontend_on-message--enabled: url('#{$icons-path}window-tools/dark/frontend.svg#on-message--enabled'); - --icon__window-tools_frontend_on-elevation--enabled: url('#{$icons-path}window-tools/dark/frontend.svg#on-elevation--enabled'); - --icon__window-tools_frontend_primary--enabled: url('#{$icons-path}window-tools/dark/frontend.svg#primary--enabled'); - --icon__window-tools_frontend_primary--hover: url('#{$icons-path}window-tools/dark/frontend.svg#primary--hover'); - --icon__window-tools_frontend_primary--active: url('#{$icons-path}window-tools/dark/frontend.svg#primary--active'); - --icon__window-tools_frontend_primary--disabled: url('#{$icons-path}window-tools/dark/frontend.svg#primary--disabled'); - --icon__window-tools_frontend_neutral--enabled: url('#{$icons-path}window-tools/dark/frontend.svg#neutral--enabled'); - --icon__window-tools_frontend_neutral--hover: url('#{$icons-path}window-tools/dark/frontend.svg#neutral--hover'); - --icon__window-tools_frontend_neutral--active: url('#{$icons-path}window-tools/dark/frontend.svg#neutral--active'); - --icon__window-tools_frontend_neutral--disabled: url('#{$icons-path}window-tools/dark/frontend.svg#neutral--disabled'); - --icon__window-tools_frontend_highlighted--enabled: url('#{$icons-path}window-tools/dark/frontend.svg#highlighted--enabled'); - --icon__window-tools_frontend_bright--enabled: url('#{$icons-path}window-tools/dark/frontend.svg#bright--enabled'); - --icon__window-tools_filter_on-surface--enabled: url('#{$icons-path}window-tools/dark/filter.svg#on-surface--enabled'); - --icon__window-tools_filter_on-surface--hover: url('#{$icons-path}window-tools/dark/filter.svg#on-surface--hover'); - --icon__window-tools_filter_on-surface--active: url('#{$icons-path}window-tools/dark/filter.svg#on-surface--active'); - --icon__window-tools_filter_on-surface--disabled: url('#{$icons-path}window-tools/dark/filter.svg#on-surface--disabled'); - --icon__window-tools_filter_on-primary--enabled: url('#{$icons-path}window-tools/dark/filter.svg#on-primary--enabled'); - --icon__window-tools_filter_on-primary--hover: url('#{$icons-path}window-tools/dark/filter.svg#on-primary--hover'); - --icon__window-tools_filter_on-primary--active: url('#{$icons-path}window-tools/dark/filter.svg#on-primary--active'); - --icon__window-tools_filter_on-primary--disabled: url('#{$icons-path}window-tools/dark/filter.svg#on-primary--disabled'); - --icon__window-tools_filter_on-disabled--enabled: url('#{$icons-path}window-tools/dark/filter.svg#on-disabled--enabled'); - --icon__window-tools_filter_on-message--enabled: url('#{$icons-path}window-tools/dark/filter.svg#on-message--enabled'); - --icon__window-tools_filter_on-elevation--enabled: url('#{$icons-path}window-tools/dark/filter.svg#on-elevation--enabled'); - --icon__window-tools_filter_primary--enabled: url('#{$icons-path}window-tools/dark/filter.svg#primary--enabled'); - --icon__window-tools_filter_primary--hover: url('#{$icons-path}window-tools/dark/filter.svg#primary--hover'); - --icon__window-tools_filter_primary--active: url('#{$icons-path}window-tools/dark/filter.svg#primary--active'); - --icon__window-tools_filter_primary--disabled: url('#{$icons-path}window-tools/dark/filter.svg#primary--disabled'); - --icon__window-tools_filter_neutral--enabled: url('#{$icons-path}window-tools/dark/filter.svg#neutral--enabled'); - --icon__window-tools_filter_neutral--hover: url('#{$icons-path}window-tools/dark/filter.svg#neutral--hover'); - --icon__window-tools_filter_neutral--active: url('#{$icons-path}window-tools/dark/filter.svg#neutral--active'); - --icon__window-tools_filter_neutral--disabled: url('#{$icons-path}window-tools/dark/filter.svg#neutral--disabled'); - --icon__window-tools_filter_highlighted--enabled: url('#{$icons-path}window-tools/dark/filter.svg#highlighted--enabled'); - --icon__window-tools_filter_bright--enabled: url('#{$icons-path}window-tools/dark/filter.svg#bright--enabled'); - --icon__window-tools_filter-conditions_on-surface--enabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#on-surface--enabled'); - --icon__window-tools_filter-conditions_on-surface--hover: url('#{$icons-path}window-tools/dark/filter-conditions.svg#on-surface--hover'); - --icon__window-tools_filter-conditions_on-surface--active: url('#{$icons-path}window-tools/dark/filter-conditions.svg#on-surface--active'); - --icon__window-tools_filter-conditions_on-surface--disabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#on-surface--disabled'); - --icon__window-tools_filter-conditions_on-primary--enabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#on-primary--enabled'); - --icon__window-tools_filter-conditions_on-primary--hover: url('#{$icons-path}window-tools/dark/filter-conditions.svg#on-primary--hover'); - --icon__window-tools_filter-conditions_on-primary--active: url('#{$icons-path}window-tools/dark/filter-conditions.svg#on-primary--active'); - --icon__window-tools_filter-conditions_on-primary--disabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#on-primary--disabled'); - --icon__window-tools_filter-conditions_on-disabled--enabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#on-disabled--enabled'); - --icon__window-tools_filter-conditions_on-message--enabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#on-message--enabled'); - --icon__window-tools_filter-conditions_on-elevation--enabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#on-elevation--enabled'); - --icon__window-tools_filter-conditions_primary--enabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#primary--enabled'); - --icon__window-tools_filter-conditions_primary--hover: url('#{$icons-path}window-tools/dark/filter-conditions.svg#primary--hover'); - --icon__window-tools_filter-conditions_primary--active: url('#{$icons-path}window-tools/dark/filter-conditions.svg#primary--active'); - --icon__window-tools_filter-conditions_primary--disabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#primary--disabled'); - --icon__window-tools_filter-conditions_neutral--enabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#neutral--enabled'); - --icon__window-tools_filter-conditions_neutral--hover: url('#{$icons-path}window-tools/dark/filter-conditions.svg#neutral--hover'); - --icon__window-tools_filter-conditions_neutral--active: url('#{$icons-path}window-tools/dark/filter-conditions.svg#neutral--active'); - --icon__window-tools_filter-conditions_neutral--disabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#neutral--disabled'); - --icon__window-tools_filter-conditions_highlighted--enabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#highlighted--enabled'); - --icon__window-tools_filter-conditions_bright--enabled: url('#{$icons-path}window-tools/dark/filter-conditions.svg#bright--enabled'); - --icon__window-tools_error-list_on-surface--enabled: url('#{$icons-path}window-tools/dark/error-list.svg#on-surface--enabled'); - --icon__window-tools_error-list_on-surface--hover: url('#{$icons-path}window-tools/dark/error-list.svg#on-surface--hover'); - --icon__window-tools_error-list_on-surface--active: url('#{$icons-path}window-tools/dark/error-list.svg#on-surface--active'); - --icon__window-tools_error-list_on-surface--disabled: url('#{$icons-path}window-tools/dark/error-list.svg#on-surface--disabled'); - --icon__window-tools_error-list_on-primary--enabled: url('#{$icons-path}window-tools/dark/error-list.svg#on-primary--enabled'); - --icon__window-tools_error-list_on-primary--hover: url('#{$icons-path}window-tools/dark/error-list.svg#on-primary--hover'); - --icon__window-tools_error-list_on-primary--active: url('#{$icons-path}window-tools/dark/error-list.svg#on-primary--active'); - --icon__window-tools_error-list_on-primary--disabled: url('#{$icons-path}window-tools/dark/error-list.svg#on-primary--disabled'); - --icon__window-tools_error-list_on-disabled--enabled: url('#{$icons-path}window-tools/dark/error-list.svg#on-disabled--enabled'); - --icon__window-tools_error-list_on-message--enabled: url('#{$icons-path}window-tools/dark/error-list.svg#on-message--enabled'); - --icon__window-tools_error-list_on-elevation--enabled: url('#{$icons-path}window-tools/dark/error-list.svg#on-elevation--enabled'); - --icon__window-tools_error-list_primary--enabled: url('#{$icons-path}window-tools/dark/error-list.svg#primary--enabled'); - --icon__window-tools_error-list_primary--hover: url('#{$icons-path}window-tools/dark/error-list.svg#primary--hover'); - --icon__window-tools_error-list_primary--active: url('#{$icons-path}window-tools/dark/error-list.svg#primary--active'); - --icon__window-tools_error-list_primary--disabled: url('#{$icons-path}window-tools/dark/error-list.svg#primary--disabled'); - --icon__window-tools_error-list_neutral--enabled: url('#{$icons-path}window-tools/dark/error-list.svg#neutral--enabled'); - --icon__window-tools_error-list_neutral--hover: url('#{$icons-path}window-tools/dark/error-list.svg#neutral--hover'); - --icon__window-tools_error-list_neutral--active: url('#{$icons-path}window-tools/dark/error-list.svg#neutral--active'); - --icon__window-tools_error-list_neutral--disabled: url('#{$icons-path}window-tools/dark/error-list.svg#neutral--disabled'); - --icon__window-tools_error-list_highlighted--enabled: url('#{$icons-path}window-tools/dark/error-list.svg#highlighted--enabled'); - --icon__window-tools_error-list_bright--enabled: url('#{$icons-path}window-tools/dark/error-list.svg#bright--enabled'); - --icon__window-tools_debugx_on-surface--enabled: url('#{$icons-path}window-tools/dark/debugx.svg#on-surface--enabled'); - --icon__window-tools_debugx_on-surface--hover: url('#{$icons-path}window-tools/dark/debugx.svg#on-surface--hover'); - --icon__window-tools_debugx_on-surface--active: url('#{$icons-path}window-tools/dark/debugx.svg#on-surface--active'); - --icon__window-tools_debugx_on-surface--disabled: url('#{$icons-path}window-tools/dark/debugx.svg#on-surface--disabled'); - --icon__window-tools_debugx_on-primary--enabled: url('#{$icons-path}window-tools/dark/debugx.svg#on-primary--enabled'); - --icon__window-tools_debugx_on-primary--hover: url('#{$icons-path}window-tools/dark/debugx.svg#on-primary--hover'); - --icon__window-tools_debugx_on-primary--active: url('#{$icons-path}window-tools/dark/debugx.svg#on-primary--active'); - --icon__window-tools_debugx_on-primary--disabled: url('#{$icons-path}window-tools/dark/debugx.svg#on-primary--disabled'); - --icon__window-tools_debugx_on-disabled--enabled: url('#{$icons-path}window-tools/dark/debugx.svg#on-disabled--enabled'); - --icon__window-tools_debugx_on-message--enabled: url('#{$icons-path}window-tools/dark/debugx.svg#on-message--enabled'); - --icon__window-tools_debugx_on-elevation--enabled: url('#{$icons-path}window-tools/dark/debugx.svg#on-elevation--enabled'); - --icon__window-tools_debugx_primary--enabled: url('#{$icons-path}window-tools/dark/debugx.svg#primary--enabled'); - --icon__window-tools_debugx_primary--hover: url('#{$icons-path}window-tools/dark/debugx.svg#primary--hover'); - --icon__window-tools_debugx_primary--active: url('#{$icons-path}window-tools/dark/debugx.svg#primary--active'); - --icon__window-tools_debugx_primary--disabled: url('#{$icons-path}window-tools/dark/debugx.svg#primary--disabled'); - --icon__window-tools_debugx_neutral--enabled: url('#{$icons-path}window-tools/dark/debugx.svg#neutral--enabled'); - --icon__window-tools_debugx_neutral--hover: url('#{$icons-path}window-tools/dark/debugx.svg#neutral--hover'); - --icon__window-tools_debugx_neutral--active: url('#{$icons-path}window-tools/dark/debugx.svg#neutral--active'); - --icon__window-tools_debugx_neutral--disabled: url('#{$icons-path}window-tools/dark/debugx.svg#neutral--disabled'); - --icon__window-tools_debugx_highlighted--enabled: url('#{$icons-path}window-tools/dark/debugx.svg#highlighted--enabled'); - --icon__window-tools_debugx_bright--enabled: url('#{$icons-path}window-tools/dark/debugx.svg#bright--enabled'); - --icon__window-tools_datastores_on-surface--enabled: url('#{$icons-path}window-tools/dark/datastores.svg#on-surface--enabled'); - --icon__window-tools_datastores_on-surface--hover: url('#{$icons-path}window-tools/dark/datastores.svg#on-surface--hover'); - --icon__window-tools_datastores_on-surface--active: url('#{$icons-path}window-tools/dark/datastores.svg#on-surface--active'); - --icon__window-tools_datastores_on-surface--disabled: url('#{$icons-path}window-tools/dark/datastores.svg#on-surface--disabled'); - --icon__window-tools_datastores_on-primary--enabled: url('#{$icons-path}window-tools/dark/datastores.svg#on-primary--enabled'); - --icon__window-tools_datastores_on-primary--hover: url('#{$icons-path}window-tools/dark/datastores.svg#on-primary--hover'); - --icon__window-tools_datastores_on-primary--active: url('#{$icons-path}window-tools/dark/datastores.svg#on-primary--active'); - --icon__window-tools_datastores_on-primary--disabled: url('#{$icons-path}window-tools/dark/datastores.svg#on-primary--disabled'); - --icon__window-tools_datastores_on-disabled--enabled: url('#{$icons-path}window-tools/dark/datastores.svg#on-disabled--enabled'); - --icon__window-tools_datastores_on-message--enabled: url('#{$icons-path}window-tools/dark/datastores.svg#on-message--enabled'); - --icon__window-tools_datastores_on-elevation--enabled: url('#{$icons-path}window-tools/dark/datastores.svg#on-elevation--enabled'); - --icon__window-tools_datastores_primary--enabled: url('#{$icons-path}window-tools/dark/datastores.svg#primary--enabled'); - --icon__window-tools_datastores_primary--hover: url('#{$icons-path}window-tools/dark/datastores.svg#primary--hover'); - --icon__window-tools_datastores_primary--active: url('#{$icons-path}window-tools/dark/datastores.svg#primary--active'); - --icon__window-tools_datastores_primary--disabled: url('#{$icons-path}window-tools/dark/datastores.svg#primary--disabled'); - --icon__window-tools_datastores_neutral--enabled: url('#{$icons-path}window-tools/dark/datastores.svg#neutral--enabled'); - --icon__window-tools_datastores_neutral--hover: url('#{$icons-path}window-tools/dark/datastores.svg#neutral--hover'); - --icon__window-tools_datastores_neutral--active: url('#{$icons-path}window-tools/dark/datastores.svg#neutral--active'); - --icon__window-tools_datastores_neutral--disabled: url('#{$icons-path}window-tools/dark/datastores.svg#neutral--disabled'); - --icon__window-tools_datastores_highlighted--enabled: url('#{$icons-path}window-tools/dark/datastores.svg#highlighted--enabled'); - --icon__window-tools_datastores_bright--enabled: url('#{$icons-path}window-tools/dark/datastores.svg#bright--enabled'); - --icon__window-tools_category-groups_on-surface--enabled: url('#{$icons-path}window-tools/dark/category-groups.svg#on-surface--enabled'); - --icon__window-tools_category-groups_on-surface--hover: url('#{$icons-path}window-tools/dark/category-groups.svg#on-surface--hover'); - --icon__window-tools_category-groups_on-surface--active: url('#{$icons-path}window-tools/dark/category-groups.svg#on-surface--active'); - --icon__window-tools_category-groups_on-surface--disabled: url('#{$icons-path}window-tools/dark/category-groups.svg#on-surface--disabled'); - --icon__window-tools_category-groups_on-primary--enabled: url('#{$icons-path}window-tools/dark/category-groups.svg#on-primary--enabled'); - --icon__window-tools_category-groups_on-primary--hover: url('#{$icons-path}window-tools/dark/category-groups.svg#on-primary--hover'); - --icon__window-tools_category-groups_on-primary--active: url('#{$icons-path}window-tools/dark/category-groups.svg#on-primary--active'); - --icon__window-tools_category-groups_on-primary--disabled: url('#{$icons-path}window-tools/dark/category-groups.svg#on-primary--disabled'); - --icon__window-tools_category-groups_on-disabled--enabled: url('#{$icons-path}window-tools/dark/category-groups.svg#on-disabled--enabled'); - --icon__window-tools_category-groups_on-message--enabled: url('#{$icons-path}window-tools/dark/category-groups.svg#on-message--enabled'); - --icon__window-tools_category-groups_on-elevation--enabled: url('#{$icons-path}window-tools/dark/category-groups.svg#on-elevation--enabled'); - --icon__window-tools_category-groups_primary--enabled: url('#{$icons-path}window-tools/dark/category-groups.svg#primary--enabled'); - --icon__window-tools_category-groups_primary--hover: url('#{$icons-path}window-tools/dark/category-groups.svg#primary--hover'); - --icon__window-tools_category-groups_primary--active: url('#{$icons-path}window-tools/dark/category-groups.svg#primary--active'); - --icon__window-tools_category-groups_primary--disabled: url('#{$icons-path}window-tools/dark/category-groups.svg#primary--disabled'); - --icon__window-tools_category-groups_neutral--enabled: url('#{$icons-path}window-tools/dark/category-groups.svg#neutral--enabled'); - --icon__window-tools_category-groups_neutral--hover: url('#{$icons-path}window-tools/dark/category-groups.svg#neutral--hover'); - --icon__window-tools_category-groups_neutral--active: url('#{$icons-path}window-tools/dark/category-groups.svg#neutral--active'); - --icon__window-tools_category-groups_neutral--disabled: url('#{$icons-path}window-tools/dark/category-groups.svg#neutral--disabled'); - --icon__window-tools_category-groups_highlighted--enabled: url('#{$icons-path}window-tools/dark/category-groups.svg#highlighted--enabled'); - --icon__window-tools_category-groups_bright--enabled: url('#{$icons-path}window-tools/dark/category-groups.svg#bright--enabled'); - --icon__window-tools_breakpoints_on-surface--enabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#on-surface--enabled'); - --icon__window-tools_breakpoints_on-surface--hover: url('#{$icons-path}window-tools/dark/breakpoints.svg#on-surface--hover'); - --icon__window-tools_breakpoints_on-surface--active: url('#{$icons-path}window-tools/dark/breakpoints.svg#on-surface--active'); - --icon__window-tools_breakpoints_on-surface--disabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#on-surface--disabled'); - --icon__window-tools_breakpoints_on-primary--enabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#on-primary--enabled'); - --icon__window-tools_breakpoints_on-primary--hover: url('#{$icons-path}window-tools/dark/breakpoints.svg#on-primary--hover'); - --icon__window-tools_breakpoints_on-primary--active: url('#{$icons-path}window-tools/dark/breakpoints.svg#on-primary--active'); - --icon__window-tools_breakpoints_on-primary--disabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#on-primary--disabled'); - --icon__window-tools_breakpoints_on-disabled--enabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#on-disabled--enabled'); - --icon__window-tools_breakpoints_on-message--enabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#on-message--enabled'); - --icon__window-tools_breakpoints_on-elevation--enabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#on-elevation--enabled'); - --icon__window-tools_breakpoints_primary--enabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#primary--enabled'); - --icon__window-tools_breakpoints_primary--hover: url('#{$icons-path}window-tools/dark/breakpoints.svg#primary--hover'); - --icon__window-tools_breakpoints_primary--active: url('#{$icons-path}window-tools/dark/breakpoints.svg#primary--active'); - --icon__window-tools_breakpoints_primary--disabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#primary--disabled'); - --icon__window-tools_breakpoints_neutral--enabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#neutral--enabled'); - --icon__window-tools_breakpoints_neutral--hover: url('#{$icons-path}window-tools/dark/breakpoints.svg#neutral--hover'); - --icon__window-tools_breakpoints_neutral--active: url('#{$icons-path}window-tools/dark/breakpoints.svg#neutral--active'); - --icon__window-tools_breakpoints_neutral--disabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#neutral--disabled'); - --icon__window-tools_breakpoints_highlighted--enabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#highlighted--enabled'); - --icon__window-tools_breakpoints_bright--enabled: url('#{$icons-path}window-tools/dark/breakpoints.svg#bright--enabled'); - --icon__window-tools_backend_on-surface--enabled: url('#{$icons-path}window-tools/dark/backend.svg#on-surface--enabled'); - --icon__window-tools_backend_on-surface--hover: url('#{$icons-path}window-tools/dark/backend.svg#on-surface--hover'); - --icon__window-tools_backend_on-surface--active: url('#{$icons-path}window-tools/dark/backend.svg#on-surface--active'); - --icon__window-tools_backend_on-surface--disabled: url('#{$icons-path}window-tools/dark/backend.svg#on-surface--disabled'); - --icon__window-tools_backend_on-primary--enabled: url('#{$icons-path}window-tools/dark/backend.svg#on-primary--enabled'); - --icon__window-tools_backend_on-primary--hover: url('#{$icons-path}window-tools/dark/backend.svg#on-primary--hover'); - --icon__window-tools_backend_on-primary--active: url('#{$icons-path}window-tools/dark/backend.svg#on-primary--active'); - --icon__window-tools_backend_on-primary--disabled: url('#{$icons-path}window-tools/dark/backend.svg#on-primary--disabled'); - --icon__window-tools_backend_on-disabled--enabled: url('#{$icons-path}window-tools/dark/backend.svg#on-disabled--enabled'); - --icon__window-tools_backend_on-message--enabled: url('#{$icons-path}window-tools/dark/backend.svg#on-message--enabled'); - --icon__window-tools_backend_on-elevation--enabled: url('#{$icons-path}window-tools/dark/backend.svg#on-elevation--enabled'); - --icon__window-tools_backend_primary--enabled: url('#{$icons-path}window-tools/dark/backend.svg#primary--enabled'); - --icon__window-tools_backend_primary--hover: url('#{$icons-path}window-tools/dark/backend.svg#primary--hover'); - --icon__window-tools_backend_primary--active: url('#{$icons-path}window-tools/dark/backend.svg#primary--active'); - --icon__window-tools_backend_primary--disabled: url('#{$icons-path}window-tools/dark/backend.svg#primary--disabled'); - --icon__window-tools_backend_neutral--enabled: url('#{$icons-path}window-tools/dark/backend.svg#neutral--enabled'); - --icon__window-tools_backend_neutral--hover: url('#{$icons-path}window-tools/dark/backend.svg#neutral--hover'); - --icon__window-tools_backend_neutral--active: url('#{$icons-path}window-tools/dark/backend.svg#neutral--active'); - --icon__window-tools_backend_neutral--disabled: url('#{$icons-path}window-tools/dark/backend.svg#neutral--disabled'); - --icon__window-tools_backend_highlighted--enabled: url('#{$icons-path}window-tools/dark/backend.svg#highlighted--enabled'); - --icon__window-tools_backend_bright--enabled: url('#{$icons-path}window-tools/dark/backend.svg#bright--enabled'); - --icon__window-tools_alphabetical-order_on-surface--enabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#on-surface--enabled'); - --icon__window-tools_alphabetical-order_on-surface--hover: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#on-surface--hover'); - --icon__window-tools_alphabetical-order_on-surface--active: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#on-surface--active'); - --icon__window-tools_alphabetical-order_on-surface--disabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#on-surface--disabled'); - --icon__window-tools_alphabetical-order_on-primary--enabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#on-primary--enabled'); - --icon__window-tools_alphabetical-order_on-primary--hover: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#on-primary--hover'); - --icon__window-tools_alphabetical-order_on-primary--active: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#on-primary--active'); - --icon__window-tools_alphabetical-order_on-primary--disabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#on-primary--disabled'); - --icon__window-tools_alphabetical-order_on-disabled--enabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#on-disabled--enabled'); - --icon__window-tools_alphabetical-order_on-message--enabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#on-message--enabled'); - --icon__window-tools_alphabetical-order_on-elevation--enabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#on-elevation--enabled'); - --icon__window-tools_alphabetical-order_primary--enabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#primary--enabled'); - --icon__window-tools_alphabetical-order_primary--hover: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#primary--hover'); - --icon__window-tools_alphabetical-order_primary--active: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#primary--active'); - --icon__window-tools_alphabetical-order_primary--disabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#primary--disabled'); - --icon__window-tools_alphabetical-order_neutral--enabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#neutral--enabled'); - --icon__window-tools_alphabetical-order_neutral--hover: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#neutral--hover'); - --icon__window-tools_alphabetical-order_neutral--active: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#neutral--active'); - --icon__window-tools_alphabetical-order_neutral--disabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#neutral--disabled'); - --icon__window-tools_alphabetical-order_highlighted--enabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#highlighted--enabled'); - --icon__window-tools_alphabetical-order_bright--enabled: url('#{$icons-path}window-tools/dark/alphabetical-order.svg#bright--enabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*system*/ - --icon__system_zoom-out_on-surface--enabled: url('#{$icons-path}system/light/zoom-out.svg#on-surface--enabled'); - --icon__system_zoom-out_on-surface--hover: url('#{$icons-path}system/light/zoom-out.svg#on-surface--hover'); - --icon__system_zoom-out_on-surface--active: url('#{$icons-path}system/light/zoom-out.svg#on-surface--active'); - --icon__system_zoom-out_on-surface--disabled: url('#{$icons-path}system/light/zoom-out.svg#on-surface--disabled'); - --icon__system_zoom-out_on-primary--enabled: url('#{$icons-path}system/light/zoom-out.svg#on-primary--enabled'); - --icon__system_zoom-out_on-primary--hover: url('#{$icons-path}system/light/zoom-out.svg#on-primary--hover'); - --icon__system_zoom-out_on-primary--active: url('#{$icons-path}system/light/zoom-out.svg#on-primary--active'); - --icon__system_zoom-out_on-primary--disabled: url('#{$icons-path}system/light/zoom-out.svg#on-primary--disabled'); - --icon__system_zoom-out_on-disabled--enabled: url('#{$icons-path}system/light/zoom-out.svg#on-disabled--enabled'); - --icon__system_zoom-out_on-message--enabled: url('#{$icons-path}system/light/zoom-out.svg#on-message--enabled'); - --icon__system_zoom-out_on-elevation--enabled: url('#{$icons-path}system/light/zoom-out.svg#on-elevation--enabled'); - --icon__system_zoom-out_primary--enabled: url('#{$icons-path}system/light/zoom-out.svg#primary--enabled'); - --icon__system_zoom-out_primary--hover: url('#{$icons-path}system/light/zoom-out.svg#primary--hover'); - --icon__system_zoom-out_primary--active: url('#{$icons-path}system/light/zoom-out.svg#primary--active'); - --icon__system_zoom-out_primary--disabled: url('#{$icons-path}system/light/zoom-out.svg#primary--disabled'); - --icon__system_zoom-out_error--enabled: url('#{$icons-path}system/light/zoom-out.svg#error--enabled'); - --icon__system_zoom-out_error-actionable--enabled: url('#{$icons-path}system/light/zoom-out.svg#error-actionable--enabled'); - --icon__system_zoom-out_error-actionable--hover: url('#{$icons-path}system/light/zoom-out.svg#error-actionable--hover'); - --icon__system_zoom-out_error-actionable--active: url('#{$icons-path}system/light/zoom-out.svg#error-actionable--active'); - --icon__system_zoom-out_error-actionable--disabled: url('#{$icons-path}system/light/zoom-out.svg#error-actionable--disabled'); - --icon__system_zoom-out_warning--enabled: url('#{$icons-path}system/light/zoom-out.svg#warning--enabled'); - --icon__system_zoom-out_success--enabled: url('#{$icons-path}system/light/zoom-out.svg#success--enabled'); - --icon__system_zoom-out_neutral--enabled: url('#{$icons-path}system/light/zoom-out.svg#neutral--enabled'); - --icon__system_zoom-out_neutral--hover: url('#{$icons-path}system/light/zoom-out.svg#neutral--hover'); - --icon__system_zoom-out_neutral--active: url('#{$icons-path}system/light/zoom-out.svg#neutral--active'); - --icon__system_zoom-out_neutral--disabled: url('#{$icons-path}system/light/zoom-out.svg#neutral--disabled'); - --icon__system_zoom-out_highlighted--enabled: url('#{$icons-path}system/light/zoom-out.svg#highlighted--enabled'); - --icon__system_zoom-out_bright--enabled: url('#{$icons-path}system/light/zoom-out.svg#bright--enabled'); - --icon__system_zoom-in_on-surface--enabled: url('#{$icons-path}system/light/zoom-in.svg#on-surface--enabled'); - --icon__system_zoom-in_on-surface--hover: url('#{$icons-path}system/light/zoom-in.svg#on-surface--hover'); - --icon__system_zoom-in_on-surface--active: url('#{$icons-path}system/light/zoom-in.svg#on-surface--active'); - --icon__system_zoom-in_on-surface--disabled: url('#{$icons-path}system/light/zoom-in.svg#on-surface--disabled'); - --icon__system_zoom-in_on-primary--enabled: url('#{$icons-path}system/light/zoom-in.svg#on-primary--enabled'); - --icon__system_zoom-in_on-primary--hover: url('#{$icons-path}system/light/zoom-in.svg#on-primary--hover'); - --icon__system_zoom-in_on-primary--active: url('#{$icons-path}system/light/zoom-in.svg#on-primary--active'); - --icon__system_zoom-in_on-primary--disabled: url('#{$icons-path}system/light/zoom-in.svg#on-primary--disabled'); - --icon__system_zoom-in_on-disabled--enabled: url('#{$icons-path}system/light/zoom-in.svg#on-disabled--enabled'); - --icon__system_zoom-in_on-message--enabled: url('#{$icons-path}system/light/zoom-in.svg#on-message--enabled'); - --icon__system_zoom-in_on-elevation--enabled: url('#{$icons-path}system/light/zoom-in.svg#on-elevation--enabled'); - --icon__system_zoom-in_primary--enabled: url('#{$icons-path}system/light/zoom-in.svg#primary--enabled'); - --icon__system_zoom-in_primary--hover: url('#{$icons-path}system/light/zoom-in.svg#primary--hover'); - --icon__system_zoom-in_primary--active: url('#{$icons-path}system/light/zoom-in.svg#primary--active'); - --icon__system_zoom-in_primary--disabled: url('#{$icons-path}system/light/zoom-in.svg#primary--disabled'); - --icon__system_zoom-in_error--enabled: url('#{$icons-path}system/light/zoom-in.svg#error--enabled'); - --icon__system_zoom-in_error-actionable--enabled: url('#{$icons-path}system/light/zoom-in.svg#error-actionable--enabled'); - --icon__system_zoom-in_error-actionable--hover: url('#{$icons-path}system/light/zoom-in.svg#error-actionable--hover'); - --icon__system_zoom-in_error-actionable--active: url('#{$icons-path}system/light/zoom-in.svg#error-actionable--active'); - --icon__system_zoom-in_error-actionable--disabled: url('#{$icons-path}system/light/zoom-in.svg#error-actionable--disabled'); - --icon__system_zoom-in_warning--enabled: url('#{$icons-path}system/light/zoom-in.svg#warning--enabled'); - --icon__system_zoom-in_success--enabled: url('#{$icons-path}system/light/zoom-in.svg#success--enabled'); - --icon__system_zoom-in_neutral--enabled: url('#{$icons-path}system/light/zoom-in.svg#neutral--enabled'); - --icon__system_zoom-in_neutral--hover: url('#{$icons-path}system/light/zoom-in.svg#neutral--hover'); - --icon__system_zoom-in_neutral--active: url('#{$icons-path}system/light/zoom-in.svg#neutral--active'); - --icon__system_zoom-in_neutral--disabled: url('#{$icons-path}system/light/zoom-in.svg#neutral--disabled'); - --icon__system_zoom-in_highlighted--enabled: url('#{$icons-path}system/light/zoom-in.svg#highlighted--enabled'); - --icon__system_zoom-in_bright--enabled: url('#{$icons-path}system/light/zoom-in.svg#bright--enabled'); - --icon__system_warning_on-surface--enabled: url('#{$icons-path}system/light/warning.svg#on-surface--enabled'); - --icon__system_warning_on-surface--hover: url('#{$icons-path}system/light/warning.svg#on-surface--hover'); - --icon__system_warning_on-surface--active: url('#{$icons-path}system/light/warning.svg#on-surface--active'); - --icon__system_warning_on-surface--disabled: url('#{$icons-path}system/light/warning.svg#on-surface--disabled'); - --icon__system_warning_on-primary--enabled: url('#{$icons-path}system/light/warning.svg#on-primary--enabled'); - --icon__system_warning_on-primary--hover: url('#{$icons-path}system/light/warning.svg#on-primary--hover'); - --icon__system_warning_on-primary--active: url('#{$icons-path}system/light/warning.svg#on-primary--active'); - --icon__system_warning_on-primary--disabled: url('#{$icons-path}system/light/warning.svg#on-primary--disabled'); - --icon__system_warning_on-disabled--enabled: url('#{$icons-path}system/light/warning.svg#on-disabled--enabled'); - --icon__system_warning_on-message--enabled: url('#{$icons-path}system/light/warning.svg#on-message--enabled'); - --icon__system_warning_on-elevation--enabled: url('#{$icons-path}system/light/warning.svg#on-elevation--enabled'); - --icon__system_warning_primary--enabled: url('#{$icons-path}system/light/warning.svg#primary--enabled'); - --icon__system_warning_primary--hover: url('#{$icons-path}system/light/warning.svg#primary--hover'); - --icon__system_warning_primary--active: url('#{$icons-path}system/light/warning.svg#primary--active'); - --icon__system_warning_primary--disabled: url('#{$icons-path}system/light/warning.svg#primary--disabled'); - --icon__system_warning_error--enabled: url('#{$icons-path}system/light/warning.svg#error--enabled'); - --icon__system_warning_error-actionable--enabled: url('#{$icons-path}system/light/warning.svg#error-actionable--enabled'); - --icon__system_warning_error-actionable--hover: url('#{$icons-path}system/light/warning.svg#error-actionable--hover'); - --icon__system_warning_error-actionable--active: url('#{$icons-path}system/light/warning.svg#error-actionable--active'); - --icon__system_warning_error-actionable--disabled: url('#{$icons-path}system/light/warning.svg#error-actionable--disabled'); - --icon__system_warning_warning--enabled: url('#{$icons-path}system/light/warning.svg#warning--enabled'); - --icon__system_warning_success--enabled: url('#{$icons-path}system/light/warning.svg#success--enabled'); - --icon__system_warning_neutral--enabled: url('#{$icons-path}system/light/warning.svg#neutral--enabled'); - --icon__system_warning_neutral--hover: url('#{$icons-path}system/light/warning.svg#neutral--hover'); - --icon__system_warning_neutral--active: url('#{$icons-path}system/light/warning.svg#neutral--active'); - --icon__system_warning_neutral--disabled: url('#{$icons-path}system/light/warning.svg#neutral--disabled'); - --icon__system_warning_highlighted--enabled: url('#{$icons-path}system/light/warning.svg#highlighted--enabled'); - --icon__system_warning_bright--enabled: url('#{$icons-path}system/light/warning.svg#bright--enabled'); - --icon__system_version_on-surface--enabled: url('#{$icons-path}system/light/version.svg#on-surface--enabled'); - --icon__system_version_on-surface--hover: url('#{$icons-path}system/light/version.svg#on-surface--hover'); - --icon__system_version_on-surface--active: url('#{$icons-path}system/light/version.svg#on-surface--active'); - --icon__system_version_on-surface--disabled: url('#{$icons-path}system/light/version.svg#on-surface--disabled'); - --icon__system_version_on-primary--enabled: url('#{$icons-path}system/light/version.svg#on-primary--enabled'); - --icon__system_version_on-primary--hover: url('#{$icons-path}system/light/version.svg#on-primary--hover'); - --icon__system_version_on-primary--active: url('#{$icons-path}system/light/version.svg#on-primary--active'); - --icon__system_version_on-primary--disabled: url('#{$icons-path}system/light/version.svg#on-primary--disabled'); - --icon__system_version_on-disabled--enabled: url('#{$icons-path}system/light/version.svg#on-disabled--enabled'); - --icon__system_version_on-message--enabled: url('#{$icons-path}system/light/version.svg#on-message--enabled'); - --icon__system_version_on-elevation--enabled: url('#{$icons-path}system/light/version.svg#on-elevation--enabled'); - --icon__system_version_primary--enabled: url('#{$icons-path}system/light/version.svg#primary--enabled'); - --icon__system_version_primary--hover: url('#{$icons-path}system/light/version.svg#primary--hover'); - --icon__system_version_primary--active: url('#{$icons-path}system/light/version.svg#primary--active'); - --icon__system_version_primary--disabled: url('#{$icons-path}system/light/version.svg#primary--disabled'); - --icon__system_version_error--enabled: url('#{$icons-path}system/light/version.svg#error--enabled'); - --icon__system_version_error-actionable--enabled: url('#{$icons-path}system/light/version.svg#error-actionable--enabled'); - --icon__system_version_error-actionable--hover: url('#{$icons-path}system/light/version.svg#error-actionable--hover'); - --icon__system_version_error-actionable--active: url('#{$icons-path}system/light/version.svg#error-actionable--active'); - --icon__system_version_error-actionable--disabled: url('#{$icons-path}system/light/version.svg#error-actionable--disabled'); - --icon__system_version_warning--enabled: url('#{$icons-path}system/light/version.svg#warning--enabled'); - --icon__system_version_success--enabled: url('#{$icons-path}system/light/version.svg#success--enabled'); - --icon__system_version_neutral--enabled: url('#{$icons-path}system/light/version.svg#neutral--enabled'); - --icon__system_version_neutral--hover: url('#{$icons-path}system/light/version.svg#neutral--hover'); - --icon__system_version_neutral--active: url('#{$icons-path}system/light/version.svg#neutral--active'); - --icon__system_version_neutral--disabled: url('#{$icons-path}system/light/version.svg#neutral--disabled'); - --icon__system_version_highlighted--enabled: url('#{$icons-path}system/light/version.svg#highlighted--enabled'); - --icon__system_version_bright--enabled: url('#{$icons-path}system/light/version.svg#bright--enabled'); - --icon__system_user_on-surface--enabled: url('#{$icons-path}system/light/user.svg#on-surface--enabled'); - --icon__system_user_on-surface--hover: url('#{$icons-path}system/light/user.svg#on-surface--hover'); - --icon__system_user_on-surface--active: url('#{$icons-path}system/light/user.svg#on-surface--active'); - --icon__system_user_on-surface--disabled: url('#{$icons-path}system/light/user.svg#on-surface--disabled'); - --icon__system_user_on-primary--enabled: url('#{$icons-path}system/light/user.svg#on-primary--enabled'); - --icon__system_user_on-primary--hover: url('#{$icons-path}system/light/user.svg#on-primary--hover'); - --icon__system_user_on-primary--active: url('#{$icons-path}system/light/user.svg#on-primary--active'); - --icon__system_user_on-primary--disabled: url('#{$icons-path}system/light/user.svg#on-primary--disabled'); - --icon__system_user_on-disabled--enabled: url('#{$icons-path}system/light/user.svg#on-disabled--enabled'); - --icon__system_user_on-message--enabled: url('#{$icons-path}system/light/user.svg#on-message--enabled'); - --icon__system_user_on-elevation--enabled: url('#{$icons-path}system/light/user.svg#on-elevation--enabled'); - --icon__system_user_primary--enabled: url('#{$icons-path}system/light/user.svg#primary--enabled'); - --icon__system_user_primary--hover: url('#{$icons-path}system/light/user.svg#primary--hover'); - --icon__system_user_primary--active: url('#{$icons-path}system/light/user.svg#primary--active'); - --icon__system_user_primary--disabled: url('#{$icons-path}system/light/user.svg#primary--disabled'); - --icon__system_user_error--enabled: url('#{$icons-path}system/light/user.svg#error--enabled'); - --icon__system_user_error-actionable--enabled: url('#{$icons-path}system/light/user.svg#error-actionable--enabled'); - --icon__system_user_error-actionable--hover: url('#{$icons-path}system/light/user.svg#error-actionable--hover'); - --icon__system_user_error-actionable--active: url('#{$icons-path}system/light/user.svg#error-actionable--active'); - --icon__system_user_error-actionable--disabled: url('#{$icons-path}system/light/user.svg#error-actionable--disabled'); - --icon__system_user_warning--enabled: url('#{$icons-path}system/light/user.svg#warning--enabled'); - --icon__system_user_success--enabled: url('#{$icons-path}system/light/user.svg#success--enabled'); - --icon__system_user_neutral--enabled: url('#{$icons-path}system/light/user.svg#neutral--enabled'); - --icon__system_user_neutral--hover: url('#{$icons-path}system/light/user.svg#neutral--hover'); - --icon__system_user_neutral--active: url('#{$icons-path}system/light/user.svg#neutral--active'); - --icon__system_user_neutral--disabled: url('#{$icons-path}system/light/user.svg#neutral--disabled'); - --icon__system_user_highlighted--enabled: url('#{$icons-path}system/light/user.svg#highlighted--enabled'); - --icon__system_user_bright--enabled: url('#{$icons-path}system/light/user.svg#bright--enabled'); - --icon__system_upload_on-surface--enabled: url('#{$icons-path}system/light/upload.svg#on-surface--enabled'); - --icon__system_upload_on-surface--hover: url('#{$icons-path}system/light/upload.svg#on-surface--hover'); - --icon__system_upload_on-surface--active: url('#{$icons-path}system/light/upload.svg#on-surface--active'); - --icon__system_upload_on-surface--disabled: url('#{$icons-path}system/light/upload.svg#on-surface--disabled'); - --icon__system_upload_on-primary--enabled: url('#{$icons-path}system/light/upload.svg#on-primary--enabled'); - --icon__system_upload_on-primary--hover: url('#{$icons-path}system/light/upload.svg#on-primary--hover'); - --icon__system_upload_on-primary--active: url('#{$icons-path}system/light/upload.svg#on-primary--active'); - --icon__system_upload_on-primary--disabled: url('#{$icons-path}system/light/upload.svg#on-primary--disabled'); - --icon__system_upload_on-disabled--enabled: url('#{$icons-path}system/light/upload.svg#on-disabled--enabled'); - --icon__system_upload_on-message--enabled: url('#{$icons-path}system/light/upload.svg#on-message--enabled'); - --icon__system_upload_on-elevation--enabled: url('#{$icons-path}system/light/upload.svg#on-elevation--enabled'); - --icon__system_upload_primary--enabled: url('#{$icons-path}system/light/upload.svg#primary--enabled'); - --icon__system_upload_primary--hover: url('#{$icons-path}system/light/upload.svg#primary--hover'); - --icon__system_upload_primary--active: url('#{$icons-path}system/light/upload.svg#primary--active'); - --icon__system_upload_primary--disabled: url('#{$icons-path}system/light/upload.svg#primary--disabled'); - --icon__system_upload_error--enabled: url('#{$icons-path}system/light/upload.svg#error--enabled'); - --icon__system_upload_error-actionable--enabled: url('#{$icons-path}system/light/upload.svg#error-actionable--enabled'); - --icon__system_upload_error-actionable--hover: url('#{$icons-path}system/light/upload.svg#error-actionable--hover'); - --icon__system_upload_error-actionable--active: url('#{$icons-path}system/light/upload.svg#error-actionable--active'); - --icon__system_upload_error-actionable--disabled: url('#{$icons-path}system/light/upload.svg#error-actionable--disabled'); - --icon__system_upload_warning--enabled: url('#{$icons-path}system/light/upload.svg#warning--enabled'); - --icon__system_upload_success--enabled: url('#{$icons-path}system/light/upload.svg#success--enabled'); - --icon__system_upload_neutral--enabled: url('#{$icons-path}system/light/upload.svg#neutral--enabled'); - --icon__system_upload_neutral--hover: url('#{$icons-path}system/light/upload.svg#neutral--hover'); - --icon__system_upload_neutral--active: url('#{$icons-path}system/light/upload.svg#neutral--active'); - --icon__system_upload_neutral--disabled: url('#{$icons-path}system/light/upload.svg#neutral--disabled'); - --icon__system_upload_highlighted--enabled: url('#{$icons-path}system/light/upload.svg#highlighted--enabled'); - --icon__system_upload_bright--enabled: url('#{$icons-path}system/light/upload.svg#bright--enabled'); - --icon__system_undo_on-surface--enabled: url('#{$icons-path}system/light/undo.svg#on-surface--enabled'); - --icon__system_undo_on-surface--hover: url('#{$icons-path}system/light/undo.svg#on-surface--hover'); - --icon__system_undo_on-surface--active: url('#{$icons-path}system/light/undo.svg#on-surface--active'); - --icon__system_undo_on-surface--disabled: url('#{$icons-path}system/light/undo.svg#on-surface--disabled'); - --icon__system_undo_on-primary--enabled: url('#{$icons-path}system/light/undo.svg#on-primary--enabled'); - --icon__system_undo_on-primary--hover: url('#{$icons-path}system/light/undo.svg#on-primary--hover'); - --icon__system_undo_on-primary--active: url('#{$icons-path}system/light/undo.svg#on-primary--active'); - --icon__system_undo_on-primary--disabled: url('#{$icons-path}system/light/undo.svg#on-primary--disabled'); - --icon__system_undo_on-disabled--enabled: url('#{$icons-path}system/light/undo.svg#on-disabled--enabled'); - --icon__system_undo_on-message--enabled: url('#{$icons-path}system/light/undo.svg#on-message--enabled'); - --icon__system_undo_on-elevation--enabled: url('#{$icons-path}system/light/undo.svg#on-elevation--enabled'); - --icon__system_undo_primary--enabled: url('#{$icons-path}system/light/undo.svg#primary--enabled'); - --icon__system_undo_primary--hover: url('#{$icons-path}system/light/undo.svg#primary--hover'); - --icon__system_undo_primary--active: url('#{$icons-path}system/light/undo.svg#primary--active'); - --icon__system_undo_primary--disabled: url('#{$icons-path}system/light/undo.svg#primary--disabled'); - --icon__system_undo_error--enabled: url('#{$icons-path}system/light/undo.svg#error--enabled'); - --icon__system_undo_error-actionable--enabled: url('#{$icons-path}system/light/undo.svg#error-actionable--enabled'); - --icon__system_undo_error-actionable--hover: url('#{$icons-path}system/light/undo.svg#error-actionable--hover'); - --icon__system_undo_error-actionable--active: url('#{$icons-path}system/light/undo.svg#error-actionable--active'); - --icon__system_undo_error-actionable--disabled: url('#{$icons-path}system/light/undo.svg#error-actionable--disabled'); - --icon__system_undo_warning--enabled: url('#{$icons-path}system/light/undo.svg#warning--enabled'); - --icon__system_undo_success--enabled: url('#{$icons-path}system/light/undo.svg#success--enabled'); - --icon__system_undo_neutral--enabled: url('#{$icons-path}system/light/undo.svg#neutral--enabled'); - --icon__system_undo_neutral--hover: url('#{$icons-path}system/light/undo.svg#neutral--hover'); - --icon__system_undo_neutral--active: url('#{$icons-path}system/light/undo.svg#neutral--active'); - --icon__system_undo_neutral--disabled: url('#{$icons-path}system/light/undo.svg#neutral--disabled'); - --icon__system_undo_highlighted--enabled: url('#{$icons-path}system/light/undo.svg#highlighted--enabled'); - --icon__system_undo_bright--enabled: url('#{$icons-path}system/light/undo.svg#bright--enabled'); - --icon__system_tools_on-surface--enabled: url('#{$icons-path}system/light/tools.svg#on-surface--enabled'); - --icon__system_tools_on-surface--hover: url('#{$icons-path}system/light/tools.svg#on-surface--hover'); - --icon__system_tools_on-surface--active: url('#{$icons-path}system/light/tools.svg#on-surface--active'); - --icon__system_tools_on-surface--disabled: url('#{$icons-path}system/light/tools.svg#on-surface--disabled'); - --icon__system_tools_on-primary--enabled: url('#{$icons-path}system/light/tools.svg#on-primary--enabled'); - --icon__system_tools_on-primary--hover: url('#{$icons-path}system/light/tools.svg#on-primary--hover'); - --icon__system_tools_on-primary--active: url('#{$icons-path}system/light/tools.svg#on-primary--active'); - --icon__system_tools_on-primary--disabled: url('#{$icons-path}system/light/tools.svg#on-primary--disabled'); - --icon__system_tools_on-disabled--enabled: url('#{$icons-path}system/light/tools.svg#on-disabled--enabled'); - --icon__system_tools_on-message--enabled: url('#{$icons-path}system/light/tools.svg#on-message--enabled'); - --icon__system_tools_on-elevation--enabled: url('#{$icons-path}system/light/tools.svg#on-elevation--enabled'); - --icon__system_tools_primary--enabled: url('#{$icons-path}system/light/tools.svg#primary--enabled'); - --icon__system_tools_primary--hover: url('#{$icons-path}system/light/tools.svg#primary--hover'); - --icon__system_tools_primary--active: url('#{$icons-path}system/light/tools.svg#primary--active'); - --icon__system_tools_primary--disabled: url('#{$icons-path}system/light/tools.svg#primary--disabled'); - --icon__system_tools_error--enabled: url('#{$icons-path}system/light/tools.svg#error--enabled'); - --icon__system_tools_error-actionable--enabled: url('#{$icons-path}system/light/tools.svg#error-actionable--enabled'); - --icon__system_tools_error-actionable--hover: url('#{$icons-path}system/light/tools.svg#error-actionable--hover'); - --icon__system_tools_error-actionable--active: url('#{$icons-path}system/light/tools.svg#error-actionable--active'); - --icon__system_tools_error-actionable--disabled: url('#{$icons-path}system/light/tools.svg#error-actionable--disabled'); - --icon__system_tools_warning--enabled: url('#{$icons-path}system/light/tools.svg#warning--enabled'); - --icon__system_tools_success--enabled: url('#{$icons-path}system/light/tools.svg#success--enabled'); - --icon__system_tools_neutral--enabled: url('#{$icons-path}system/light/tools.svg#neutral--enabled'); - --icon__system_tools_neutral--hover: url('#{$icons-path}system/light/tools.svg#neutral--hover'); - --icon__system_tools_neutral--active: url('#{$icons-path}system/light/tools.svg#neutral--active'); - --icon__system_tools_neutral--disabled: url('#{$icons-path}system/light/tools.svg#neutral--disabled'); - --icon__system_tools_highlighted--enabled: url('#{$icons-path}system/light/tools.svg#highlighted--enabled'); - --icon__system_tools_bright--enabled: url('#{$icons-path}system/light/tools.svg#bright--enabled'); - --icon__system_toggle-theme_on-surface--enabled: url('#{$icons-path}system/light/toggle-theme.svg#on-surface--enabled'); - --icon__system_toggle-theme_on-surface--hover: url('#{$icons-path}system/light/toggle-theme.svg#on-surface--hover'); - --icon__system_toggle-theme_on-surface--active: url('#{$icons-path}system/light/toggle-theme.svg#on-surface--active'); - --icon__system_toggle-theme_on-surface--disabled: url('#{$icons-path}system/light/toggle-theme.svg#on-surface--disabled'); - --icon__system_toggle-theme_on-primary--enabled: url('#{$icons-path}system/light/toggle-theme.svg#on-primary--enabled'); - --icon__system_toggle-theme_on-primary--hover: url('#{$icons-path}system/light/toggle-theme.svg#on-primary--hover'); - --icon__system_toggle-theme_on-primary--active: url('#{$icons-path}system/light/toggle-theme.svg#on-primary--active'); - --icon__system_toggle-theme_on-primary--disabled: url('#{$icons-path}system/light/toggle-theme.svg#on-primary--disabled'); - --icon__system_toggle-theme_on-disabled--enabled: url('#{$icons-path}system/light/toggle-theme.svg#on-disabled--enabled'); - --icon__system_toggle-theme_on-message--enabled: url('#{$icons-path}system/light/toggle-theme.svg#on-message--enabled'); - --icon__system_toggle-theme_on-elevation--enabled: url('#{$icons-path}system/light/toggle-theme.svg#on-elevation--enabled'); - --icon__system_toggle-theme_primary--enabled: url('#{$icons-path}system/light/toggle-theme.svg#primary--enabled'); - --icon__system_toggle-theme_primary--hover: url('#{$icons-path}system/light/toggle-theme.svg#primary--hover'); - --icon__system_toggle-theme_primary--active: url('#{$icons-path}system/light/toggle-theme.svg#primary--active'); - --icon__system_toggle-theme_primary--disabled: url('#{$icons-path}system/light/toggle-theme.svg#primary--disabled'); - --icon__system_toggle-theme_error--enabled: url('#{$icons-path}system/light/toggle-theme.svg#error--enabled'); - --icon__system_toggle-theme_error-actionable--enabled: url('#{$icons-path}system/light/toggle-theme.svg#error-actionable--enabled'); - --icon__system_toggle-theme_error-actionable--hover: url('#{$icons-path}system/light/toggle-theme.svg#error-actionable--hover'); - --icon__system_toggle-theme_error-actionable--active: url('#{$icons-path}system/light/toggle-theme.svg#error-actionable--active'); - --icon__system_toggle-theme_error-actionable--disabled: url('#{$icons-path}system/light/toggle-theme.svg#error-actionable--disabled'); - --icon__system_toggle-theme_warning--enabled: url('#{$icons-path}system/light/toggle-theme.svg#warning--enabled'); - --icon__system_toggle-theme_success--enabled: url('#{$icons-path}system/light/toggle-theme.svg#success--enabled'); - --icon__system_toggle-theme_neutral--enabled: url('#{$icons-path}system/light/toggle-theme.svg#neutral--enabled'); - --icon__system_toggle-theme_neutral--hover: url('#{$icons-path}system/light/toggle-theme.svg#neutral--hover'); - --icon__system_toggle-theme_neutral--active: url('#{$icons-path}system/light/toggle-theme.svg#neutral--active'); - --icon__system_toggle-theme_neutral--disabled: url('#{$icons-path}system/light/toggle-theme.svg#neutral--disabled'); - --icon__system_toggle-theme_highlighted--enabled: url('#{$icons-path}system/light/toggle-theme.svg#highlighted--enabled'); - --icon__system_toggle-theme_bright--enabled: url('#{$icons-path}system/light/toggle-theme.svg#bright--enabled'); - --icon__system_time_on-surface--enabled: url('#{$icons-path}system/light/time.svg#on-surface--enabled'); - --icon__system_time_on-surface--hover: url('#{$icons-path}system/light/time.svg#on-surface--hover'); - --icon__system_time_on-surface--active: url('#{$icons-path}system/light/time.svg#on-surface--active'); - --icon__system_time_on-surface--disabled: url('#{$icons-path}system/light/time.svg#on-surface--disabled'); - --icon__system_time_on-primary--enabled: url('#{$icons-path}system/light/time.svg#on-primary--enabled'); - --icon__system_time_on-primary--hover: url('#{$icons-path}system/light/time.svg#on-primary--hover'); - --icon__system_time_on-primary--active: url('#{$icons-path}system/light/time.svg#on-primary--active'); - --icon__system_time_on-primary--disabled: url('#{$icons-path}system/light/time.svg#on-primary--disabled'); - --icon__system_time_on-disabled--enabled: url('#{$icons-path}system/light/time.svg#on-disabled--enabled'); - --icon__system_time_on-message--enabled: url('#{$icons-path}system/light/time.svg#on-message--enabled'); - --icon__system_time_on-elevation--enabled: url('#{$icons-path}system/light/time.svg#on-elevation--enabled'); - --icon__system_time_primary--enabled: url('#{$icons-path}system/light/time.svg#primary--enabled'); - --icon__system_time_primary--hover: url('#{$icons-path}system/light/time.svg#primary--hover'); - --icon__system_time_primary--active: url('#{$icons-path}system/light/time.svg#primary--active'); - --icon__system_time_primary--disabled: url('#{$icons-path}system/light/time.svg#primary--disabled'); - --icon__system_time_error--enabled: url('#{$icons-path}system/light/time.svg#error--enabled'); - --icon__system_time_error-actionable--enabled: url('#{$icons-path}system/light/time.svg#error-actionable--enabled'); - --icon__system_time_error-actionable--hover: url('#{$icons-path}system/light/time.svg#error-actionable--hover'); - --icon__system_time_error-actionable--active: url('#{$icons-path}system/light/time.svg#error-actionable--active'); - --icon__system_time_error-actionable--disabled: url('#{$icons-path}system/light/time.svg#error-actionable--disabled'); - --icon__system_time_warning--enabled: url('#{$icons-path}system/light/time.svg#warning--enabled'); - --icon__system_time_success--enabled: url('#{$icons-path}system/light/time.svg#success--enabled'); - --icon__system_time_neutral--enabled: url('#{$icons-path}system/light/time.svg#neutral--enabled'); - --icon__system_time_neutral--hover: url('#{$icons-path}system/light/time.svg#neutral--hover'); - --icon__system_time_neutral--active: url('#{$icons-path}system/light/time.svg#neutral--active'); - --icon__system_time_neutral--disabled: url('#{$icons-path}system/light/time.svg#neutral--disabled'); - --icon__system_time_highlighted--enabled: url('#{$icons-path}system/light/time.svg#highlighted--enabled'); - --icon__system_time_bright--enabled: url('#{$icons-path}system/light/time.svg#bright--enabled'); - --icon__system_thunder_on-surface--enabled: url('#{$icons-path}system/light/thunder.svg#on-surface--enabled'); - --icon__system_thunder_on-surface--hover: url('#{$icons-path}system/light/thunder.svg#on-surface--hover'); - --icon__system_thunder_on-surface--active: url('#{$icons-path}system/light/thunder.svg#on-surface--active'); - --icon__system_thunder_on-surface--disabled: url('#{$icons-path}system/light/thunder.svg#on-surface--disabled'); - --icon__system_thunder_on-primary--enabled: url('#{$icons-path}system/light/thunder.svg#on-primary--enabled'); - --icon__system_thunder_on-primary--hover: url('#{$icons-path}system/light/thunder.svg#on-primary--hover'); - --icon__system_thunder_on-primary--active: url('#{$icons-path}system/light/thunder.svg#on-primary--active'); - --icon__system_thunder_on-primary--disabled: url('#{$icons-path}system/light/thunder.svg#on-primary--disabled'); - --icon__system_thunder_on-disabled--enabled: url('#{$icons-path}system/light/thunder.svg#on-disabled--enabled'); - --icon__system_thunder_on-message--enabled: url('#{$icons-path}system/light/thunder.svg#on-message--enabled'); - --icon__system_thunder_on-elevation--enabled: url('#{$icons-path}system/light/thunder.svg#on-elevation--enabled'); - --icon__system_thunder_primary--enabled: url('#{$icons-path}system/light/thunder.svg#primary--enabled'); - --icon__system_thunder_primary--hover: url('#{$icons-path}system/light/thunder.svg#primary--hover'); - --icon__system_thunder_primary--active: url('#{$icons-path}system/light/thunder.svg#primary--active'); - --icon__system_thunder_primary--disabled: url('#{$icons-path}system/light/thunder.svg#primary--disabled'); - --icon__system_thunder_error--enabled: url('#{$icons-path}system/light/thunder.svg#error--enabled'); - --icon__system_thunder_error-actionable--enabled: url('#{$icons-path}system/light/thunder.svg#error-actionable--enabled'); - --icon__system_thunder_error-actionable--hover: url('#{$icons-path}system/light/thunder.svg#error-actionable--hover'); - --icon__system_thunder_error-actionable--active: url('#{$icons-path}system/light/thunder.svg#error-actionable--active'); - --icon__system_thunder_error-actionable--disabled: url('#{$icons-path}system/light/thunder.svg#error-actionable--disabled'); - --icon__system_thunder_warning--enabled: url('#{$icons-path}system/light/thunder.svg#warning--enabled'); - --icon__system_thunder_success--enabled: url('#{$icons-path}system/light/thunder.svg#success--enabled'); - --icon__system_thunder_neutral--enabled: url('#{$icons-path}system/light/thunder.svg#neutral--enabled'); - --icon__system_thunder_neutral--hover: url('#{$icons-path}system/light/thunder.svg#neutral--hover'); - --icon__system_thunder_neutral--active: url('#{$icons-path}system/light/thunder.svg#neutral--active'); - --icon__system_thunder_neutral--disabled: url('#{$icons-path}system/light/thunder.svg#neutral--disabled'); - --icon__system_thunder_highlighted--enabled: url('#{$icons-path}system/light/thunder.svg#highlighted--enabled'); - --icon__system_thunder_bright--enabled: url('#{$icons-path}system/light/thunder.svg#bright--enabled'); - --icon__system_thumb-up_on-surface--enabled: url('#{$icons-path}system/light/thumb-up.svg#on-surface--enabled'); - --icon__system_thumb-up_on-surface--hover: url('#{$icons-path}system/light/thumb-up.svg#on-surface--hover'); - --icon__system_thumb-up_on-surface--active: url('#{$icons-path}system/light/thumb-up.svg#on-surface--active'); - --icon__system_thumb-up_on-surface--disabled: url('#{$icons-path}system/light/thumb-up.svg#on-surface--disabled'); - --icon__system_thumb-up_on-primary--enabled: url('#{$icons-path}system/light/thumb-up.svg#on-primary--enabled'); - --icon__system_thumb-up_on-primary--hover: url('#{$icons-path}system/light/thumb-up.svg#on-primary--hover'); - --icon__system_thumb-up_on-primary--active: url('#{$icons-path}system/light/thumb-up.svg#on-primary--active'); - --icon__system_thumb-up_on-primary--disabled: url('#{$icons-path}system/light/thumb-up.svg#on-primary--disabled'); - --icon__system_thumb-up_on-disabled--enabled: url('#{$icons-path}system/light/thumb-up.svg#on-disabled--enabled'); - --icon__system_thumb-up_on-message--enabled: url('#{$icons-path}system/light/thumb-up.svg#on-message--enabled'); - --icon__system_thumb-up_on-elevation--enabled: url('#{$icons-path}system/light/thumb-up.svg#on-elevation--enabled'); - --icon__system_thumb-up_primary--enabled: url('#{$icons-path}system/light/thumb-up.svg#primary--enabled'); - --icon__system_thumb-up_primary--hover: url('#{$icons-path}system/light/thumb-up.svg#primary--hover'); - --icon__system_thumb-up_primary--active: url('#{$icons-path}system/light/thumb-up.svg#primary--active'); - --icon__system_thumb-up_primary--disabled: url('#{$icons-path}system/light/thumb-up.svg#primary--disabled'); - --icon__system_thumb-up_error--enabled: url('#{$icons-path}system/light/thumb-up.svg#error--enabled'); - --icon__system_thumb-up_error-actionable--enabled: url('#{$icons-path}system/light/thumb-up.svg#error-actionable--enabled'); - --icon__system_thumb-up_error-actionable--hover: url('#{$icons-path}system/light/thumb-up.svg#error-actionable--hover'); - --icon__system_thumb-up_error-actionable--active: url('#{$icons-path}system/light/thumb-up.svg#error-actionable--active'); - --icon__system_thumb-up_error-actionable--disabled: url('#{$icons-path}system/light/thumb-up.svg#error-actionable--disabled'); - --icon__system_thumb-up_warning--enabled: url('#{$icons-path}system/light/thumb-up.svg#warning--enabled'); - --icon__system_thumb-up_success--enabled: url('#{$icons-path}system/light/thumb-up.svg#success--enabled'); - --icon__system_thumb-up_neutral--enabled: url('#{$icons-path}system/light/thumb-up.svg#neutral--enabled'); - --icon__system_thumb-up_neutral--hover: url('#{$icons-path}system/light/thumb-up.svg#neutral--hover'); - --icon__system_thumb-up_neutral--active: url('#{$icons-path}system/light/thumb-up.svg#neutral--active'); - --icon__system_thumb-up_neutral--disabled: url('#{$icons-path}system/light/thumb-up.svg#neutral--disabled'); - --icon__system_thumb-up_highlighted--enabled: url('#{$icons-path}system/light/thumb-up.svg#highlighted--enabled'); - --icon__system_thumb-up_bright--enabled: url('#{$icons-path}system/light/thumb-up.svg#bright--enabled'); - --icon__system_thumb-down_on-surface--enabled: url('#{$icons-path}system/light/thumb-down.svg#on-surface--enabled'); - --icon__system_thumb-down_on-surface--hover: url('#{$icons-path}system/light/thumb-down.svg#on-surface--hover'); - --icon__system_thumb-down_on-surface--active: url('#{$icons-path}system/light/thumb-down.svg#on-surface--active'); - --icon__system_thumb-down_on-surface--disabled: url('#{$icons-path}system/light/thumb-down.svg#on-surface--disabled'); - --icon__system_thumb-down_on-primary--enabled: url('#{$icons-path}system/light/thumb-down.svg#on-primary--enabled'); - --icon__system_thumb-down_on-primary--hover: url('#{$icons-path}system/light/thumb-down.svg#on-primary--hover'); - --icon__system_thumb-down_on-primary--active: url('#{$icons-path}system/light/thumb-down.svg#on-primary--active'); - --icon__system_thumb-down_on-primary--disabled: url('#{$icons-path}system/light/thumb-down.svg#on-primary--disabled'); - --icon__system_thumb-down_on-disabled--enabled: url('#{$icons-path}system/light/thumb-down.svg#on-disabled--enabled'); - --icon__system_thumb-down_on-message--enabled: url('#{$icons-path}system/light/thumb-down.svg#on-message--enabled'); - --icon__system_thumb-down_on-elevation--enabled: url('#{$icons-path}system/light/thumb-down.svg#on-elevation--enabled'); - --icon__system_thumb-down_primary--enabled: url('#{$icons-path}system/light/thumb-down.svg#primary--enabled'); - --icon__system_thumb-down_primary--hover: url('#{$icons-path}system/light/thumb-down.svg#primary--hover'); - --icon__system_thumb-down_primary--active: url('#{$icons-path}system/light/thumb-down.svg#primary--active'); - --icon__system_thumb-down_primary--disabled: url('#{$icons-path}system/light/thumb-down.svg#primary--disabled'); - --icon__system_thumb-down_error--enabled: url('#{$icons-path}system/light/thumb-down.svg#error--enabled'); - --icon__system_thumb-down_error-actionable--enabled: url('#{$icons-path}system/light/thumb-down.svg#error-actionable--enabled'); - --icon__system_thumb-down_error-actionable--hover: url('#{$icons-path}system/light/thumb-down.svg#error-actionable--hover'); - --icon__system_thumb-down_error-actionable--active: url('#{$icons-path}system/light/thumb-down.svg#error-actionable--active'); - --icon__system_thumb-down_error-actionable--disabled: url('#{$icons-path}system/light/thumb-down.svg#error-actionable--disabled'); - --icon__system_thumb-down_warning--enabled: url('#{$icons-path}system/light/thumb-down.svg#warning--enabled'); - --icon__system_thumb-down_success--enabled: url('#{$icons-path}system/light/thumb-down.svg#success--enabled'); - --icon__system_thumb-down_neutral--enabled: url('#{$icons-path}system/light/thumb-down.svg#neutral--enabled'); - --icon__system_thumb-down_neutral--hover: url('#{$icons-path}system/light/thumb-down.svg#neutral--hover'); - --icon__system_thumb-down_neutral--active: url('#{$icons-path}system/light/thumb-down.svg#neutral--active'); - --icon__system_thumb-down_neutral--disabled: url('#{$icons-path}system/light/thumb-down.svg#neutral--disabled'); - --icon__system_thumb-down_highlighted--enabled: url('#{$icons-path}system/light/thumb-down.svg#highlighted--enabled'); - --icon__system_thumb-down_bright--enabled: url('#{$icons-path}system/light/thumb-down.svg#bright--enabled'); - --icon__system_text-compare_on-surface--enabled: url('#{$icons-path}system/light/text-compare.svg#on-surface--enabled'); - --icon__system_text-compare_on-surface--hover: url('#{$icons-path}system/light/text-compare.svg#on-surface--hover'); - --icon__system_text-compare_on-surface--active: url('#{$icons-path}system/light/text-compare.svg#on-surface--active'); - --icon__system_text-compare_on-surface--disabled: url('#{$icons-path}system/light/text-compare.svg#on-surface--disabled'); - --icon__system_text-compare_on-primary--enabled: url('#{$icons-path}system/light/text-compare.svg#on-primary--enabled'); - --icon__system_text-compare_on-primary--hover: url('#{$icons-path}system/light/text-compare.svg#on-primary--hover'); - --icon__system_text-compare_on-primary--active: url('#{$icons-path}system/light/text-compare.svg#on-primary--active'); - --icon__system_text-compare_on-primary--disabled: url('#{$icons-path}system/light/text-compare.svg#on-primary--disabled'); - --icon__system_text-compare_on-disabled--enabled: url('#{$icons-path}system/light/text-compare.svg#on-disabled--enabled'); - --icon__system_text-compare_on-message--enabled: url('#{$icons-path}system/light/text-compare.svg#on-message--enabled'); - --icon__system_text-compare_on-elevation--enabled: url('#{$icons-path}system/light/text-compare.svg#on-elevation--enabled'); - --icon__system_text-compare_primary--enabled: url('#{$icons-path}system/light/text-compare.svg#primary--enabled'); - --icon__system_text-compare_primary--hover: url('#{$icons-path}system/light/text-compare.svg#primary--hover'); - --icon__system_text-compare_primary--active: url('#{$icons-path}system/light/text-compare.svg#primary--active'); - --icon__system_text-compare_primary--disabled: url('#{$icons-path}system/light/text-compare.svg#primary--disabled'); - --icon__system_text-compare_error--enabled: url('#{$icons-path}system/light/text-compare.svg#error--enabled'); - --icon__system_text-compare_error-actionable--enabled: url('#{$icons-path}system/light/text-compare.svg#error-actionable--enabled'); - --icon__system_text-compare_error-actionable--hover: url('#{$icons-path}system/light/text-compare.svg#error-actionable--hover'); - --icon__system_text-compare_error-actionable--active: url('#{$icons-path}system/light/text-compare.svg#error-actionable--active'); - --icon__system_text-compare_error-actionable--disabled: url('#{$icons-path}system/light/text-compare.svg#error-actionable--disabled'); - --icon__system_text-compare_warning--enabled: url('#{$icons-path}system/light/text-compare.svg#warning--enabled'); - --icon__system_text-compare_success--enabled: url('#{$icons-path}system/light/text-compare.svg#success--enabled'); - --icon__system_text-compare_neutral--enabled: url('#{$icons-path}system/light/text-compare.svg#neutral--enabled'); - --icon__system_text-compare_neutral--hover: url('#{$icons-path}system/light/text-compare.svg#neutral--hover'); - --icon__system_text-compare_neutral--active: url('#{$icons-path}system/light/text-compare.svg#neutral--active'); - --icon__system_text-compare_neutral--disabled: url('#{$icons-path}system/light/text-compare.svg#neutral--disabled'); - --icon__system_text-compare_highlighted--enabled: url('#{$icons-path}system/light/text-compare.svg#highlighted--enabled'); - --icon__system_text-compare_bright--enabled: url('#{$icons-path}system/light/text-compare.svg#bright--enabled'); - --icon__system_table_on-surface--enabled: url('#{$icons-path}system/light/table.svg#on-surface--enabled'); - --icon__system_table_on-surface--hover: url('#{$icons-path}system/light/table.svg#on-surface--hover'); - --icon__system_table_on-surface--active: url('#{$icons-path}system/light/table.svg#on-surface--active'); - --icon__system_table_on-surface--disabled: url('#{$icons-path}system/light/table.svg#on-surface--disabled'); - --icon__system_table_on-primary--enabled: url('#{$icons-path}system/light/table.svg#on-primary--enabled'); - --icon__system_table_on-primary--hover: url('#{$icons-path}system/light/table.svg#on-primary--hover'); - --icon__system_table_on-primary--active: url('#{$icons-path}system/light/table.svg#on-primary--active'); - --icon__system_table_on-primary--disabled: url('#{$icons-path}system/light/table.svg#on-primary--disabled'); - --icon__system_table_on-disabled--enabled: url('#{$icons-path}system/light/table.svg#on-disabled--enabled'); - --icon__system_table_on-message--enabled: url('#{$icons-path}system/light/table.svg#on-message--enabled'); - --icon__system_table_on-elevation--enabled: url('#{$icons-path}system/light/table.svg#on-elevation--enabled'); - --icon__system_table_primary--enabled: url('#{$icons-path}system/light/table.svg#primary--enabled'); - --icon__system_table_primary--hover: url('#{$icons-path}system/light/table.svg#primary--hover'); - --icon__system_table_primary--active: url('#{$icons-path}system/light/table.svg#primary--active'); - --icon__system_table_primary--disabled: url('#{$icons-path}system/light/table.svg#primary--disabled'); - --icon__system_table_error--enabled: url('#{$icons-path}system/light/table.svg#error--enabled'); - --icon__system_table_error-actionable--enabled: url('#{$icons-path}system/light/table.svg#error-actionable--enabled'); - --icon__system_table_error-actionable--hover: url('#{$icons-path}system/light/table.svg#error-actionable--hover'); - --icon__system_table_error-actionable--active: url('#{$icons-path}system/light/table.svg#error-actionable--active'); - --icon__system_table_error-actionable--disabled: url('#{$icons-path}system/light/table.svg#error-actionable--disabled'); - --icon__system_table_warning--enabled: url('#{$icons-path}system/light/table.svg#warning--enabled'); - --icon__system_table_success--enabled: url('#{$icons-path}system/light/table.svg#success--enabled'); - --icon__system_table_neutral--enabled: url('#{$icons-path}system/light/table.svg#neutral--enabled'); - --icon__system_table_neutral--hover: url('#{$icons-path}system/light/table.svg#neutral--hover'); - --icon__system_table_neutral--active: url('#{$icons-path}system/light/table.svg#neutral--active'); - --icon__system_table_neutral--disabled: url('#{$icons-path}system/light/table.svg#neutral--disabled'); - --icon__system_table_highlighted--enabled: url('#{$icons-path}system/light/table.svg#highlighted--enabled'); - --icon__system_table_bright--enabled: url('#{$icons-path}system/light/table.svg#bright--enabled'); - --icon__system_substract_on-surface--enabled: url('#{$icons-path}system/light/substract.svg#on-surface--enabled'); - --icon__system_substract_on-surface--hover: url('#{$icons-path}system/light/substract.svg#on-surface--hover'); - --icon__system_substract_on-surface--active: url('#{$icons-path}system/light/substract.svg#on-surface--active'); - --icon__system_substract_on-surface--disabled: url('#{$icons-path}system/light/substract.svg#on-surface--disabled'); - --icon__system_substract_on-primary--enabled: url('#{$icons-path}system/light/substract.svg#on-primary--enabled'); - --icon__system_substract_on-primary--hover: url('#{$icons-path}system/light/substract.svg#on-primary--hover'); - --icon__system_substract_on-primary--active: url('#{$icons-path}system/light/substract.svg#on-primary--active'); - --icon__system_substract_on-primary--disabled: url('#{$icons-path}system/light/substract.svg#on-primary--disabled'); - --icon__system_substract_on-disabled--enabled: url('#{$icons-path}system/light/substract.svg#on-disabled--enabled'); - --icon__system_substract_on-message--enabled: url('#{$icons-path}system/light/substract.svg#on-message--enabled'); - --icon__system_substract_on-elevation--enabled: url('#{$icons-path}system/light/substract.svg#on-elevation--enabled'); - --icon__system_substract_primary--enabled: url('#{$icons-path}system/light/substract.svg#primary--enabled'); - --icon__system_substract_primary--hover: url('#{$icons-path}system/light/substract.svg#primary--hover'); - --icon__system_substract_primary--active: url('#{$icons-path}system/light/substract.svg#primary--active'); - --icon__system_substract_primary--disabled: url('#{$icons-path}system/light/substract.svg#primary--disabled'); - --icon__system_substract_error--enabled: url('#{$icons-path}system/light/substract.svg#error--enabled'); - --icon__system_substract_error-actionable--enabled: url('#{$icons-path}system/light/substract.svg#error-actionable--enabled'); - --icon__system_substract_error-actionable--hover: url('#{$icons-path}system/light/substract.svg#error-actionable--hover'); - --icon__system_substract_error-actionable--active: url('#{$icons-path}system/light/substract.svg#error-actionable--active'); - --icon__system_substract_error-actionable--disabled: url('#{$icons-path}system/light/substract.svg#error-actionable--disabled'); - --icon__system_substract_warning--enabled: url('#{$icons-path}system/light/substract.svg#warning--enabled'); - --icon__system_substract_success--enabled: url('#{$icons-path}system/light/substract.svg#success--enabled'); - --icon__system_substract_neutral--enabled: url('#{$icons-path}system/light/substract.svg#neutral--enabled'); - --icon__system_substract_neutral--hover: url('#{$icons-path}system/light/substract.svg#neutral--hover'); - --icon__system_substract_neutral--active: url('#{$icons-path}system/light/substract.svg#neutral--active'); - --icon__system_substract_neutral--disabled: url('#{$icons-path}system/light/substract.svg#neutral--disabled'); - --icon__system_substract_highlighted--enabled: url('#{$icons-path}system/light/substract.svg#highlighted--enabled'); - --icon__system_substract_bright--enabled: url('#{$icons-path}system/light/substract.svg#bright--enabled'); - --icon__system_star_on-surface--enabled: url('#{$icons-path}system/light/star.svg#on-surface--enabled'); - --icon__system_star_on-surface--hover: url('#{$icons-path}system/light/star.svg#on-surface--hover'); - --icon__system_star_on-surface--active: url('#{$icons-path}system/light/star.svg#on-surface--active'); - --icon__system_star_on-surface--disabled: url('#{$icons-path}system/light/star.svg#on-surface--disabled'); - --icon__system_star_on-primary--enabled: url('#{$icons-path}system/light/star.svg#on-primary--enabled'); - --icon__system_star_on-primary--hover: url('#{$icons-path}system/light/star.svg#on-primary--hover'); - --icon__system_star_on-primary--active: url('#{$icons-path}system/light/star.svg#on-primary--active'); - --icon__system_star_on-primary--disabled: url('#{$icons-path}system/light/star.svg#on-primary--disabled'); - --icon__system_star_on-disabled--enabled: url('#{$icons-path}system/light/star.svg#on-disabled--enabled'); - --icon__system_star_on-message--enabled: url('#{$icons-path}system/light/star.svg#on-message--enabled'); - --icon__system_star_on-elevation--enabled: url('#{$icons-path}system/light/star.svg#on-elevation--enabled'); - --icon__system_star_primary--enabled: url('#{$icons-path}system/light/star.svg#primary--enabled'); - --icon__system_star_primary--hover: url('#{$icons-path}system/light/star.svg#primary--hover'); - --icon__system_star_primary--active: url('#{$icons-path}system/light/star.svg#primary--active'); - --icon__system_star_primary--disabled: url('#{$icons-path}system/light/star.svg#primary--disabled'); - --icon__system_star_error--enabled: url('#{$icons-path}system/light/star.svg#error--enabled'); - --icon__system_star_error-actionable--enabled: url('#{$icons-path}system/light/star.svg#error-actionable--enabled'); - --icon__system_star_error-actionable--hover: url('#{$icons-path}system/light/star.svg#error-actionable--hover'); - --icon__system_star_error-actionable--active: url('#{$icons-path}system/light/star.svg#error-actionable--active'); - --icon__system_star_error-actionable--disabled: url('#{$icons-path}system/light/star.svg#error-actionable--disabled'); - --icon__system_star_warning--enabled: url('#{$icons-path}system/light/star.svg#warning--enabled'); - --icon__system_star_success--enabled: url('#{$icons-path}system/light/star.svg#success--enabled'); - --icon__system_star_neutral--enabled: url('#{$icons-path}system/light/star.svg#neutral--enabled'); - --icon__system_star_neutral--hover: url('#{$icons-path}system/light/star.svg#neutral--hover'); - --icon__system_star_neutral--active: url('#{$icons-path}system/light/star.svg#neutral--active'); - --icon__system_star_neutral--disabled: url('#{$icons-path}system/light/star.svg#neutral--disabled'); - --icon__system_star_highlighted--enabled: url('#{$icons-path}system/light/star.svg#highlighted--enabled'); - --icon__system_star_bright--enabled: url('#{$icons-path}system/light/star.svg#bright--enabled'); - --icon__system_star-unselected_on-surface--enabled: url('#{$icons-path}system/light/star-unselected.svg#on-surface--enabled'); - --icon__system_star-unselected_on-surface--hover: url('#{$icons-path}system/light/star-unselected.svg#on-surface--hover'); - --icon__system_star-unselected_on-surface--active: url('#{$icons-path}system/light/star-unselected.svg#on-surface--active'); - --icon__system_star-unselected_on-surface--disabled: url('#{$icons-path}system/light/star-unselected.svg#on-surface--disabled'); - --icon__system_star-unselected_on-primary--enabled: url('#{$icons-path}system/light/star-unselected.svg#on-primary--enabled'); - --icon__system_star-unselected_on-primary--hover: url('#{$icons-path}system/light/star-unselected.svg#on-primary--hover'); - --icon__system_star-unselected_on-primary--active: url('#{$icons-path}system/light/star-unselected.svg#on-primary--active'); - --icon__system_star-unselected_on-primary--disabled: url('#{$icons-path}system/light/star-unselected.svg#on-primary--disabled'); - --icon__system_star-unselected_on-disabled--enabled: url('#{$icons-path}system/light/star-unselected.svg#on-disabled--enabled'); - --icon__system_star-unselected_on-message--enabled: url('#{$icons-path}system/light/star-unselected.svg#on-message--enabled'); - --icon__system_star-unselected_on-elevation--enabled: url('#{$icons-path}system/light/star-unselected.svg#on-elevation--enabled'); - --icon__system_star-unselected_primary--enabled: url('#{$icons-path}system/light/star-unselected.svg#primary--enabled'); - --icon__system_star-unselected_primary--hover: url('#{$icons-path}system/light/star-unselected.svg#primary--hover'); - --icon__system_star-unselected_primary--active: url('#{$icons-path}system/light/star-unselected.svg#primary--active'); - --icon__system_star-unselected_primary--disabled: url('#{$icons-path}system/light/star-unselected.svg#primary--disabled'); - --icon__system_star-unselected_error--enabled: url('#{$icons-path}system/light/star-unselected.svg#error--enabled'); - --icon__system_star-unselected_error-actionable--enabled: url('#{$icons-path}system/light/star-unselected.svg#error-actionable--enabled'); - --icon__system_star-unselected_error-actionable--hover: url('#{$icons-path}system/light/star-unselected.svg#error-actionable--hover'); - --icon__system_star-unselected_error-actionable--active: url('#{$icons-path}system/light/star-unselected.svg#error-actionable--active'); - --icon__system_star-unselected_error-actionable--disabled: url('#{$icons-path}system/light/star-unselected.svg#error-actionable--disabled'); - --icon__system_star-unselected_warning--enabled: url('#{$icons-path}system/light/star-unselected.svg#warning--enabled'); - --icon__system_star-unselected_success--enabled: url('#{$icons-path}system/light/star-unselected.svg#success--enabled'); - --icon__system_star-unselected_neutral--enabled: url('#{$icons-path}system/light/star-unselected.svg#neutral--enabled'); - --icon__system_star-unselected_neutral--hover: url('#{$icons-path}system/light/star-unselected.svg#neutral--hover'); - --icon__system_star-unselected_neutral--active: url('#{$icons-path}system/light/star-unselected.svg#neutral--active'); - --icon__system_star-unselected_neutral--disabled: url('#{$icons-path}system/light/star-unselected.svg#neutral--disabled'); - --icon__system_star-unselected_highlighted--enabled: url('#{$icons-path}system/light/star-unselected.svg#highlighted--enabled'); - --icon__system_star-unselected_bright--enabled: url('#{$icons-path}system/light/star-unselected.svg#bright--enabled'); - --icon__system_show_on-surface--enabled: url('#{$icons-path}system/light/show.svg#on-surface--enabled'); - --icon__system_show_on-surface--hover: url('#{$icons-path}system/light/show.svg#on-surface--hover'); - --icon__system_show_on-surface--active: url('#{$icons-path}system/light/show.svg#on-surface--active'); - --icon__system_show_on-surface--disabled: url('#{$icons-path}system/light/show.svg#on-surface--disabled'); - --icon__system_show_on-primary--enabled: url('#{$icons-path}system/light/show.svg#on-primary--enabled'); - --icon__system_show_on-primary--hover: url('#{$icons-path}system/light/show.svg#on-primary--hover'); - --icon__system_show_on-primary--active: url('#{$icons-path}system/light/show.svg#on-primary--active'); - --icon__system_show_on-primary--disabled: url('#{$icons-path}system/light/show.svg#on-primary--disabled'); - --icon__system_show_on-disabled--enabled: url('#{$icons-path}system/light/show.svg#on-disabled--enabled'); - --icon__system_show_on-message--enabled: url('#{$icons-path}system/light/show.svg#on-message--enabled'); - --icon__system_show_on-elevation--enabled: url('#{$icons-path}system/light/show.svg#on-elevation--enabled'); - --icon__system_show_primary--enabled: url('#{$icons-path}system/light/show.svg#primary--enabled'); - --icon__system_show_primary--hover: url('#{$icons-path}system/light/show.svg#primary--hover'); - --icon__system_show_primary--active: url('#{$icons-path}system/light/show.svg#primary--active'); - --icon__system_show_primary--disabled: url('#{$icons-path}system/light/show.svg#primary--disabled'); - --icon__system_show_error--enabled: url('#{$icons-path}system/light/show.svg#error--enabled'); - --icon__system_show_error-actionable--enabled: url('#{$icons-path}system/light/show.svg#error-actionable--enabled'); - --icon__system_show_error-actionable--hover: url('#{$icons-path}system/light/show.svg#error-actionable--hover'); - --icon__system_show_error-actionable--active: url('#{$icons-path}system/light/show.svg#error-actionable--active'); - --icon__system_show_error-actionable--disabled: url('#{$icons-path}system/light/show.svg#error-actionable--disabled'); - --icon__system_show_warning--enabled: url('#{$icons-path}system/light/show.svg#warning--enabled'); - --icon__system_show_success--enabled: url('#{$icons-path}system/light/show.svg#success--enabled'); - --icon__system_show_neutral--enabled: url('#{$icons-path}system/light/show.svg#neutral--enabled'); - --icon__system_show_neutral--hover: url('#{$icons-path}system/light/show.svg#neutral--hover'); - --icon__system_show_neutral--active: url('#{$icons-path}system/light/show.svg#neutral--active'); - --icon__system_show_neutral--disabled: url('#{$icons-path}system/light/show.svg#neutral--disabled'); - --icon__system_show_highlighted--enabled: url('#{$icons-path}system/light/show.svg#highlighted--enabled'); - --icon__system_show_bright--enabled: url('#{$icons-path}system/light/show.svg#bright--enabled'); - --icon__system_share_on-surface--enabled: url('#{$icons-path}system/light/share.svg#on-surface--enabled'); - --icon__system_share_on-surface--hover: url('#{$icons-path}system/light/share.svg#on-surface--hover'); - --icon__system_share_on-surface--active: url('#{$icons-path}system/light/share.svg#on-surface--active'); - --icon__system_share_on-surface--disabled: url('#{$icons-path}system/light/share.svg#on-surface--disabled'); - --icon__system_share_on-primary--enabled: url('#{$icons-path}system/light/share.svg#on-primary--enabled'); - --icon__system_share_on-primary--hover: url('#{$icons-path}system/light/share.svg#on-primary--hover'); - --icon__system_share_on-primary--active: url('#{$icons-path}system/light/share.svg#on-primary--active'); - --icon__system_share_on-primary--disabled: url('#{$icons-path}system/light/share.svg#on-primary--disabled'); - --icon__system_share_on-disabled--enabled: url('#{$icons-path}system/light/share.svg#on-disabled--enabled'); - --icon__system_share_on-message--enabled: url('#{$icons-path}system/light/share.svg#on-message--enabled'); - --icon__system_share_on-elevation--enabled: url('#{$icons-path}system/light/share.svg#on-elevation--enabled'); - --icon__system_share_primary--enabled: url('#{$icons-path}system/light/share.svg#primary--enabled'); - --icon__system_share_primary--hover: url('#{$icons-path}system/light/share.svg#primary--hover'); - --icon__system_share_primary--active: url('#{$icons-path}system/light/share.svg#primary--active'); - --icon__system_share_primary--disabled: url('#{$icons-path}system/light/share.svg#primary--disabled'); - --icon__system_share_error--enabled: url('#{$icons-path}system/light/share.svg#error--enabled'); - --icon__system_share_error-actionable--enabled: url('#{$icons-path}system/light/share.svg#error-actionable--enabled'); - --icon__system_share_error-actionable--hover: url('#{$icons-path}system/light/share.svg#error-actionable--hover'); - --icon__system_share_error-actionable--active: url('#{$icons-path}system/light/share.svg#error-actionable--active'); - --icon__system_share_error-actionable--disabled: url('#{$icons-path}system/light/share.svg#error-actionable--disabled'); - --icon__system_share_warning--enabled: url('#{$icons-path}system/light/share.svg#warning--enabled'); - --icon__system_share_success--enabled: url('#{$icons-path}system/light/share.svg#success--enabled'); - --icon__system_share_neutral--enabled: url('#{$icons-path}system/light/share.svg#neutral--enabled'); - --icon__system_share_neutral--hover: url('#{$icons-path}system/light/share.svg#neutral--hover'); - --icon__system_share_neutral--active: url('#{$icons-path}system/light/share.svg#neutral--active'); - --icon__system_share_neutral--disabled: url('#{$icons-path}system/light/share.svg#neutral--disabled'); - --icon__system_share_highlighted--enabled: url('#{$icons-path}system/light/share.svg#highlighted--enabled'); - --icon__system_share_bright--enabled: url('#{$icons-path}system/light/share.svg#bright--enabled'); - --icon__system_settings_on-surface--enabled: url('#{$icons-path}system/light/settings.svg#on-surface--enabled'); - --icon__system_settings_on-surface--hover: url('#{$icons-path}system/light/settings.svg#on-surface--hover'); - --icon__system_settings_on-surface--active: url('#{$icons-path}system/light/settings.svg#on-surface--active'); - --icon__system_settings_on-surface--disabled: url('#{$icons-path}system/light/settings.svg#on-surface--disabled'); - --icon__system_settings_on-primary--enabled: url('#{$icons-path}system/light/settings.svg#on-primary--enabled'); - --icon__system_settings_on-primary--hover: url('#{$icons-path}system/light/settings.svg#on-primary--hover'); - --icon__system_settings_on-primary--active: url('#{$icons-path}system/light/settings.svg#on-primary--active'); - --icon__system_settings_on-primary--disabled: url('#{$icons-path}system/light/settings.svg#on-primary--disabled'); - --icon__system_settings_on-disabled--enabled: url('#{$icons-path}system/light/settings.svg#on-disabled--enabled'); - --icon__system_settings_on-message--enabled: url('#{$icons-path}system/light/settings.svg#on-message--enabled'); - --icon__system_settings_on-elevation--enabled: url('#{$icons-path}system/light/settings.svg#on-elevation--enabled'); - --icon__system_settings_primary--enabled: url('#{$icons-path}system/light/settings.svg#primary--enabled'); - --icon__system_settings_primary--hover: url('#{$icons-path}system/light/settings.svg#primary--hover'); - --icon__system_settings_primary--active: url('#{$icons-path}system/light/settings.svg#primary--active'); - --icon__system_settings_primary--disabled: url('#{$icons-path}system/light/settings.svg#primary--disabled'); - --icon__system_settings_error--enabled: url('#{$icons-path}system/light/settings.svg#error--enabled'); - --icon__system_settings_error-actionable--enabled: url('#{$icons-path}system/light/settings.svg#error-actionable--enabled'); - --icon__system_settings_error-actionable--hover: url('#{$icons-path}system/light/settings.svg#error-actionable--hover'); - --icon__system_settings_error-actionable--active: url('#{$icons-path}system/light/settings.svg#error-actionable--active'); - --icon__system_settings_error-actionable--disabled: url('#{$icons-path}system/light/settings.svg#error-actionable--disabled'); - --icon__system_settings_warning--enabled: url('#{$icons-path}system/light/settings.svg#warning--enabled'); - --icon__system_settings_success--enabled: url('#{$icons-path}system/light/settings.svg#success--enabled'); - --icon__system_settings_neutral--enabled: url('#{$icons-path}system/light/settings.svg#neutral--enabled'); - --icon__system_settings_neutral--hover: url('#{$icons-path}system/light/settings.svg#neutral--hover'); - --icon__system_settings_neutral--active: url('#{$icons-path}system/light/settings.svg#neutral--active'); - --icon__system_settings_neutral--disabled: url('#{$icons-path}system/light/settings.svg#neutral--disabled'); - --icon__system_settings_highlighted--enabled: url('#{$icons-path}system/light/settings.svg#highlighted--enabled'); - --icon__system_settings_bright--enabled: url('#{$icons-path}system/light/settings.svg#bright--enabled'); - --icon__system_send_on-surface--enabled: url('#{$icons-path}system/light/send.svg#on-surface--enabled'); - --icon__system_send_on-surface--hover: url('#{$icons-path}system/light/send.svg#on-surface--hover'); - --icon__system_send_on-surface--active: url('#{$icons-path}system/light/send.svg#on-surface--active'); - --icon__system_send_on-surface--disabled: url('#{$icons-path}system/light/send.svg#on-surface--disabled'); - --icon__system_send_on-primary--enabled: url('#{$icons-path}system/light/send.svg#on-primary--enabled'); - --icon__system_send_on-primary--hover: url('#{$icons-path}system/light/send.svg#on-primary--hover'); - --icon__system_send_on-primary--active: url('#{$icons-path}system/light/send.svg#on-primary--active'); - --icon__system_send_on-primary--disabled: url('#{$icons-path}system/light/send.svg#on-primary--disabled'); - --icon__system_send_on-disabled--enabled: url('#{$icons-path}system/light/send.svg#on-disabled--enabled'); - --icon__system_send_on-message--enabled: url('#{$icons-path}system/light/send.svg#on-message--enabled'); - --icon__system_send_on-elevation--enabled: url('#{$icons-path}system/light/send.svg#on-elevation--enabled'); - --icon__system_send_primary--enabled: url('#{$icons-path}system/light/send.svg#primary--enabled'); - --icon__system_send_primary--hover: url('#{$icons-path}system/light/send.svg#primary--hover'); - --icon__system_send_primary--active: url('#{$icons-path}system/light/send.svg#primary--active'); - --icon__system_send_primary--disabled: url('#{$icons-path}system/light/send.svg#primary--disabled'); - --icon__system_send_error--enabled: url('#{$icons-path}system/light/send.svg#error--enabled'); - --icon__system_send_error-actionable--enabled: url('#{$icons-path}system/light/send.svg#error-actionable--enabled'); - --icon__system_send_error-actionable--hover: url('#{$icons-path}system/light/send.svg#error-actionable--hover'); - --icon__system_send_error-actionable--active: url('#{$icons-path}system/light/send.svg#error-actionable--active'); - --icon__system_send_error-actionable--disabled: url('#{$icons-path}system/light/send.svg#error-actionable--disabled'); - --icon__system_send_warning--enabled: url('#{$icons-path}system/light/send.svg#warning--enabled'); - --icon__system_send_success--enabled: url('#{$icons-path}system/light/send.svg#success--enabled'); - --icon__system_send_neutral--enabled: url('#{$icons-path}system/light/send.svg#neutral--enabled'); - --icon__system_send_neutral--hover: url('#{$icons-path}system/light/send.svg#neutral--hover'); - --icon__system_send_neutral--active: url('#{$icons-path}system/light/send.svg#neutral--active'); - --icon__system_send_neutral--disabled: url('#{$icons-path}system/light/send.svg#neutral--disabled'); - --icon__system_send_highlighted--enabled: url('#{$icons-path}system/light/send.svg#highlighted--enabled'); - --icon__system_send_bright--enabled: url('#{$icons-path}system/light/send.svg#bright--enabled'); - --icon__system_search_on-surface--enabled: url('#{$icons-path}system/light/search.svg#on-surface--enabled'); - --icon__system_search_on-surface--hover: url('#{$icons-path}system/light/search.svg#on-surface--hover'); - --icon__system_search_on-surface--active: url('#{$icons-path}system/light/search.svg#on-surface--active'); - --icon__system_search_on-surface--disabled: url('#{$icons-path}system/light/search.svg#on-surface--disabled'); - --icon__system_search_on-primary--enabled: url('#{$icons-path}system/light/search.svg#on-primary--enabled'); - --icon__system_search_on-primary--hover: url('#{$icons-path}system/light/search.svg#on-primary--hover'); - --icon__system_search_on-primary--active: url('#{$icons-path}system/light/search.svg#on-primary--active'); - --icon__system_search_on-primary--disabled: url('#{$icons-path}system/light/search.svg#on-primary--disabled'); - --icon__system_search_on-disabled--enabled: url('#{$icons-path}system/light/search.svg#on-disabled--enabled'); - --icon__system_search_on-message--enabled: url('#{$icons-path}system/light/search.svg#on-message--enabled'); - --icon__system_search_on-elevation--enabled: url('#{$icons-path}system/light/search.svg#on-elevation--enabled'); - --icon__system_search_primary--enabled: url('#{$icons-path}system/light/search.svg#primary--enabled'); - --icon__system_search_primary--hover: url('#{$icons-path}system/light/search.svg#primary--hover'); - --icon__system_search_primary--active: url('#{$icons-path}system/light/search.svg#primary--active'); - --icon__system_search_primary--disabled: url('#{$icons-path}system/light/search.svg#primary--disabled'); - --icon__system_search_error--enabled: url('#{$icons-path}system/light/search.svg#error--enabled'); - --icon__system_search_error-actionable--enabled: url('#{$icons-path}system/light/search.svg#error-actionable--enabled'); - --icon__system_search_error-actionable--hover: url('#{$icons-path}system/light/search.svg#error-actionable--hover'); - --icon__system_search_error-actionable--active: url('#{$icons-path}system/light/search.svg#error-actionable--active'); - --icon__system_search_error-actionable--disabled: url('#{$icons-path}system/light/search.svg#error-actionable--disabled'); - --icon__system_search_warning--enabled: url('#{$icons-path}system/light/search.svg#warning--enabled'); - --icon__system_search_success--enabled: url('#{$icons-path}system/light/search.svg#success--enabled'); - --icon__system_search_neutral--enabled: url('#{$icons-path}system/light/search.svg#neutral--enabled'); - --icon__system_search_neutral--hover: url('#{$icons-path}system/light/search.svg#neutral--hover'); - --icon__system_search_neutral--active: url('#{$icons-path}system/light/search.svg#neutral--active'); - --icon__system_search_neutral--disabled: url('#{$icons-path}system/light/search.svg#neutral--disabled'); - --icon__system_search_highlighted--enabled: url('#{$icons-path}system/light/search.svg#highlighted--enabled'); - --icon__system_search_bright--enabled: url('#{$icons-path}system/light/search.svg#bright--enabled'); - --icon__system_save_on-surface--enabled: url('#{$icons-path}system/light/save.svg#on-surface--enabled'); - --icon__system_save_on-surface--hover: url('#{$icons-path}system/light/save.svg#on-surface--hover'); - --icon__system_save_on-surface--active: url('#{$icons-path}system/light/save.svg#on-surface--active'); - --icon__system_save_on-surface--disabled: url('#{$icons-path}system/light/save.svg#on-surface--disabled'); - --icon__system_save_on-primary--enabled: url('#{$icons-path}system/light/save.svg#on-primary--enabled'); - --icon__system_save_on-primary--hover: url('#{$icons-path}system/light/save.svg#on-primary--hover'); - --icon__system_save_on-primary--active: url('#{$icons-path}system/light/save.svg#on-primary--active'); - --icon__system_save_on-primary--disabled: url('#{$icons-path}system/light/save.svg#on-primary--disabled'); - --icon__system_save_on-disabled--enabled: url('#{$icons-path}system/light/save.svg#on-disabled--enabled'); - --icon__system_save_on-message--enabled: url('#{$icons-path}system/light/save.svg#on-message--enabled'); - --icon__system_save_on-elevation--enabled: url('#{$icons-path}system/light/save.svg#on-elevation--enabled'); - --icon__system_save_primary--enabled: url('#{$icons-path}system/light/save.svg#primary--enabled'); - --icon__system_save_primary--hover: url('#{$icons-path}system/light/save.svg#primary--hover'); - --icon__system_save_primary--active: url('#{$icons-path}system/light/save.svg#primary--active'); - --icon__system_save_primary--disabled: url('#{$icons-path}system/light/save.svg#primary--disabled'); - --icon__system_save_error--enabled: url('#{$icons-path}system/light/save.svg#error--enabled'); - --icon__system_save_error-actionable--enabled: url('#{$icons-path}system/light/save.svg#error-actionable--enabled'); - --icon__system_save_error-actionable--hover: url('#{$icons-path}system/light/save.svg#error-actionable--hover'); - --icon__system_save_error-actionable--active: url('#{$icons-path}system/light/save.svg#error-actionable--active'); - --icon__system_save_error-actionable--disabled: url('#{$icons-path}system/light/save.svg#error-actionable--disabled'); - --icon__system_save_warning--enabled: url('#{$icons-path}system/light/save.svg#warning--enabled'); - --icon__system_save_success--enabled: url('#{$icons-path}system/light/save.svg#success--enabled'); - --icon__system_save_neutral--enabled: url('#{$icons-path}system/light/save.svg#neutral--enabled'); - --icon__system_save_neutral--hover: url('#{$icons-path}system/light/save.svg#neutral--hover'); - --icon__system_save_neutral--active: url('#{$icons-path}system/light/save.svg#neutral--active'); - --icon__system_save_neutral--disabled: url('#{$icons-path}system/light/save.svg#neutral--disabled'); - --icon__system_save_highlighted--enabled: url('#{$icons-path}system/light/save.svg#highlighted--enabled'); - --icon__system_save_bright--enabled: url('#{$icons-path}system/light/save.svg#bright--enabled'); - --icon__system_run_on-surface--enabled: url('#{$icons-path}system/light/run.svg#on-surface--enabled'); - --icon__system_run_on-surface--hover: url('#{$icons-path}system/light/run.svg#on-surface--hover'); - --icon__system_run_on-surface--active: url('#{$icons-path}system/light/run.svg#on-surface--active'); - --icon__system_run_on-surface--disabled: url('#{$icons-path}system/light/run.svg#on-surface--disabled'); - --icon__system_run_on-primary--enabled: url('#{$icons-path}system/light/run.svg#on-primary--enabled'); - --icon__system_run_on-primary--hover: url('#{$icons-path}system/light/run.svg#on-primary--hover'); - --icon__system_run_on-primary--active: url('#{$icons-path}system/light/run.svg#on-primary--active'); - --icon__system_run_on-primary--disabled: url('#{$icons-path}system/light/run.svg#on-primary--disabled'); - --icon__system_run_on-disabled--enabled: url('#{$icons-path}system/light/run.svg#on-disabled--enabled'); - --icon__system_run_on-message--enabled: url('#{$icons-path}system/light/run.svg#on-message--enabled'); - --icon__system_run_on-elevation--enabled: url('#{$icons-path}system/light/run.svg#on-elevation--enabled'); - --icon__system_run_primary--enabled: url('#{$icons-path}system/light/run.svg#primary--enabled'); - --icon__system_run_primary--hover: url('#{$icons-path}system/light/run.svg#primary--hover'); - --icon__system_run_primary--active: url('#{$icons-path}system/light/run.svg#primary--active'); - --icon__system_run_primary--disabled: url('#{$icons-path}system/light/run.svg#primary--disabled'); - --icon__system_run_error--enabled: url('#{$icons-path}system/light/run.svg#error--enabled'); - --icon__system_run_error-actionable--enabled: url('#{$icons-path}system/light/run.svg#error-actionable--enabled'); - --icon__system_run_error-actionable--hover: url('#{$icons-path}system/light/run.svg#error-actionable--hover'); - --icon__system_run_error-actionable--active: url('#{$icons-path}system/light/run.svg#error-actionable--active'); - --icon__system_run_error-actionable--disabled: url('#{$icons-path}system/light/run.svg#error-actionable--disabled'); - --icon__system_run_warning--enabled: url('#{$icons-path}system/light/run.svg#warning--enabled'); - --icon__system_run_success--enabled: url('#{$icons-path}system/light/run.svg#success--enabled'); - --icon__system_run_neutral--enabled: url('#{$icons-path}system/light/run.svg#neutral--enabled'); - --icon__system_run_neutral--hover: url('#{$icons-path}system/light/run.svg#neutral--hover'); - --icon__system_run_neutral--active: url('#{$icons-path}system/light/run.svg#neutral--active'); - --icon__system_run_neutral--disabled: url('#{$icons-path}system/light/run.svg#neutral--disabled'); - --icon__system_run_highlighted--enabled: url('#{$icons-path}system/light/run.svg#highlighted--enabled'); - --icon__system_run_bright--enabled: url('#{$icons-path}system/light/run.svg#bright--enabled'); - --icon__system_right-panel-open_on-surface--enabled: url('#{$icons-path}system/light/right-panel-open.svg#on-surface--enabled'); - --icon__system_right-panel-open_on-surface--hover: url('#{$icons-path}system/light/right-panel-open.svg#on-surface--hover'); - --icon__system_right-panel-open_on-surface--active: url('#{$icons-path}system/light/right-panel-open.svg#on-surface--active'); - --icon__system_right-panel-open_on-surface--disabled: url('#{$icons-path}system/light/right-panel-open.svg#on-surface--disabled'); - --icon__system_right-panel-open_on-primary--enabled: url('#{$icons-path}system/light/right-panel-open.svg#on-primary--enabled'); - --icon__system_right-panel-open_on-primary--hover: url('#{$icons-path}system/light/right-panel-open.svg#on-primary--hover'); - --icon__system_right-panel-open_on-primary--active: url('#{$icons-path}system/light/right-panel-open.svg#on-primary--active'); - --icon__system_right-panel-open_on-primary--disabled: url('#{$icons-path}system/light/right-panel-open.svg#on-primary--disabled'); - --icon__system_right-panel-open_on-disabled--enabled: url('#{$icons-path}system/light/right-panel-open.svg#on-disabled--enabled'); - --icon__system_right-panel-open_on-message--enabled: url('#{$icons-path}system/light/right-panel-open.svg#on-message--enabled'); - --icon__system_right-panel-open_on-elevation--enabled: url('#{$icons-path}system/light/right-panel-open.svg#on-elevation--enabled'); - --icon__system_right-panel-open_primary--enabled: url('#{$icons-path}system/light/right-panel-open.svg#primary--enabled'); - --icon__system_right-panel-open_primary--hover: url('#{$icons-path}system/light/right-panel-open.svg#primary--hover'); - --icon__system_right-panel-open_primary--active: url('#{$icons-path}system/light/right-panel-open.svg#primary--active'); - --icon__system_right-panel-open_primary--disabled: url('#{$icons-path}system/light/right-panel-open.svg#primary--disabled'); - --icon__system_right-panel-open_error--enabled: url('#{$icons-path}system/light/right-panel-open.svg#error--enabled'); - --icon__system_right-panel-open_error-actionable--enabled: url('#{$icons-path}system/light/right-panel-open.svg#error-actionable--enabled'); - --icon__system_right-panel-open_error-actionable--hover: url('#{$icons-path}system/light/right-panel-open.svg#error-actionable--hover'); - --icon__system_right-panel-open_error-actionable--active: url('#{$icons-path}system/light/right-panel-open.svg#error-actionable--active'); - --icon__system_right-panel-open_error-actionable--disabled: url('#{$icons-path}system/light/right-panel-open.svg#error-actionable--disabled'); - --icon__system_right-panel-open_warning--enabled: url('#{$icons-path}system/light/right-panel-open.svg#warning--enabled'); - --icon__system_right-panel-open_success--enabled: url('#{$icons-path}system/light/right-panel-open.svg#success--enabled'); - --icon__system_right-panel-open_neutral--enabled: url('#{$icons-path}system/light/right-panel-open.svg#neutral--enabled'); - --icon__system_right-panel-open_neutral--hover: url('#{$icons-path}system/light/right-panel-open.svg#neutral--hover'); - --icon__system_right-panel-open_neutral--active: url('#{$icons-path}system/light/right-panel-open.svg#neutral--active'); - --icon__system_right-panel-open_neutral--disabled: url('#{$icons-path}system/light/right-panel-open.svg#neutral--disabled'); - --icon__system_right-panel-open_highlighted--enabled: url('#{$icons-path}system/light/right-panel-open.svg#highlighted--enabled'); - --icon__system_right-panel-open_bright--enabled: url('#{$icons-path}system/light/right-panel-open.svg#bright--enabled'); - --icon__system_retry_on-surface--enabled: url('#{$icons-path}system/light/retry.svg#on-surface--enabled'); - --icon__system_retry_on-surface--hover: url('#{$icons-path}system/light/retry.svg#on-surface--hover'); - --icon__system_retry_on-surface--active: url('#{$icons-path}system/light/retry.svg#on-surface--active'); - --icon__system_retry_on-surface--disabled: url('#{$icons-path}system/light/retry.svg#on-surface--disabled'); - --icon__system_retry_on-primary--enabled: url('#{$icons-path}system/light/retry.svg#on-primary--enabled'); - --icon__system_retry_on-primary--hover: url('#{$icons-path}system/light/retry.svg#on-primary--hover'); - --icon__system_retry_on-primary--active: url('#{$icons-path}system/light/retry.svg#on-primary--active'); - --icon__system_retry_on-primary--disabled: url('#{$icons-path}system/light/retry.svg#on-primary--disabled'); - --icon__system_retry_on-disabled--enabled: url('#{$icons-path}system/light/retry.svg#on-disabled--enabled'); - --icon__system_retry_on-message--enabled: url('#{$icons-path}system/light/retry.svg#on-message--enabled'); - --icon__system_retry_on-elevation--enabled: url('#{$icons-path}system/light/retry.svg#on-elevation--enabled'); - --icon__system_retry_primary--enabled: url('#{$icons-path}system/light/retry.svg#primary--enabled'); - --icon__system_retry_primary--hover: url('#{$icons-path}system/light/retry.svg#primary--hover'); - --icon__system_retry_primary--active: url('#{$icons-path}system/light/retry.svg#primary--active'); - --icon__system_retry_primary--disabled: url('#{$icons-path}system/light/retry.svg#primary--disabled'); - --icon__system_retry_error--enabled: url('#{$icons-path}system/light/retry.svg#error--enabled'); - --icon__system_retry_error-actionable--enabled: url('#{$icons-path}system/light/retry.svg#error-actionable--enabled'); - --icon__system_retry_error-actionable--hover: url('#{$icons-path}system/light/retry.svg#error-actionable--hover'); - --icon__system_retry_error-actionable--active: url('#{$icons-path}system/light/retry.svg#error-actionable--active'); - --icon__system_retry_error-actionable--disabled: url('#{$icons-path}system/light/retry.svg#error-actionable--disabled'); - --icon__system_retry_warning--enabled: url('#{$icons-path}system/light/retry.svg#warning--enabled'); - --icon__system_retry_success--enabled: url('#{$icons-path}system/light/retry.svg#success--enabled'); - --icon__system_retry_neutral--enabled: url('#{$icons-path}system/light/retry.svg#neutral--enabled'); - --icon__system_retry_neutral--hover: url('#{$icons-path}system/light/retry.svg#neutral--hover'); - --icon__system_retry_neutral--active: url('#{$icons-path}system/light/retry.svg#neutral--active'); - --icon__system_retry_neutral--disabled: url('#{$icons-path}system/light/retry.svg#neutral--disabled'); - --icon__system_retry_highlighted--enabled: url('#{$icons-path}system/light/retry.svg#highlighted--enabled'); - --icon__system_retry_bright--enabled: url('#{$icons-path}system/light/retry.svg#bright--enabled'); - --icon__system_refresh_on-surface--enabled: url('#{$icons-path}system/light/refresh.svg#on-surface--enabled'); - --icon__system_refresh_on-surface--hover: url('#{$icons-path}system/light/refresh.svg#on-surface--hover'); - --icon__system_refresh_on-surface--active: url('#{$icons-path}system/light/refresh.svg#on-surface--active'); - --icon__system_refresh_on-surface--disabled: url('#{$icons-path}system/light/refresh.svg#on-surface--disabled'); - --icon__system_refresh_on-primary--enabled: url('#{$icons-path}system/light/refresh.svg#on-primary--enabled'); - --icon__system_refresh_on-primary--hover: url('#{$icons-path}system/light/refresh.svg#on-primary--hover'); - --icon__system_refresh_on-primary--active: url('#{$icons-path}system/light/refresh.svg#on-primary--active'); - --icon__system_refresh_on-primary--disabled: url('#{$icons-path}system/light/refresh.svg#on-primary--disabled'); - --icon__system_refresh_on-disabled--enabled: url('#{$icons-path}system/light/refresh.svg#on-disabled--enabled'); - --icon__system_refresh_on-message--enabled: url('#{$icons-path}system/light/refresh.svg#on-message--enabled'); - --icon__system_refresh_on-elevation--enabled: url('#{$icons-path}system/light/refresh.svg#on-elevation--enabled'); - --icon__system_refresh_primary--enabled: url('#{$icons-path}system/light/refresh.svg#primary--enabled'); - --icon__system_refresh_primary--hover: url('#{$icons-path}system/light/refresh.svg#primary--hover'); - --icon__system_refresh_primary--active: url('#{$icons-path}system/light/refresh.svg#primary--active'); - --icon__system_refresh_primary--disabled: url('#{$icons-path}system/light/refresh.svg#primary--disabled'); - --icon__system_refresh_error--enabled: url('#{$icons-path}system/light/refresh.svg#error--enabled'); - --icon__system_refresh_error-actionable--enabled: url('#{$icons-path}system/light/refresh.svg#error-actionable--enabled'); - --icon__system_refresh_error-actionable--hover: url('#{$icons-path}system/light/refresh.svg#error-actionable--hover'); - --icon__system_refresh_error-actionable--active: url('#{$icons-path}system/light/refresh.svg#error-actionable--active'); - --icon__system_refresh_error-actionable--disabled: url('#{$icons-path}system/light/refresh.svg#error-actionable--disabled'); - --icon__system_refresh_warning--enabled: url('#{$icons-path}system/light/refresh.svg#warning--enabled'); - --icon__system_refresh_success--enabled: url('#{$icons-path}system/light/refresh.svg#success--enabled'); - --icon__system_refresh_neutral--enabled: url('#{$icons-path}system/light/refresh.svg#neutral--enabled'); - --icon__system_refresh_neutral--hover: url('#{$icons-path}system/light/refresh.svg#neutral--hover'); - --icon__system_refresh_neutral--active: url('#{$icons-path}system/light/refresh.svg#neutral--active'); - --icon__system_refresh_neutral--disabled: url('#{$icons-path}system/light/refresh.svg#neutral--disabled'); - --icon__system_refresh_highlighted--enabled: url('#{$icons-path}system/light/refresh.svg#highlighted--enabled'); - --icon__system_refresh_bright--enabled: url('#{$icons-path}system/light/refresh.svg#bright--enabled'); - --icon__system_query_on-surface--enabled: url('#{$icons-path}system/light/query.svg#on-surface--enabled'); - --icon__system_query_on-surface--hover: url('#{$icons-path}system/light/query.svg#on-surface--hover'); - --icon__system_query_on-surface--active: url('#{$icons-path}system/light/query.svg#on-surface--active'); - --icon__system_query_on-surface--disabled: url('#{$icons-path}system/light/query.svg#on-surface--disabled'); - --icon__system_query_on-primary--enabled: url('#{$icons-path}system/light/query.svg#on-primary--enabled'); - --icon__system_query_on-primary--hover: url('#{$icons-path}system/light/query.svg#on-primary--hover'); - --icon__system_query_on-primary--active: url('#{$icons-path}system/light/query.svg#on-primary--active'); - --icon__system_query_on-primary--disabled: url('#{$icons-path}system/light/query.svg#on-primary--disabled'); - --icon__system_query_on-disabled--enabled: url('#{$icons-path}system/light/query.svg#on-disabled--enabled'); - --icon__system_query_on-message--enabled: url('#{$icons-path}system/light/query.svg#on-message--enabled'); - --icon__system_query_on-elevation--enabled: url('#{$icons-path}system/light/query.svg#on-elevation--enabled'); - --icon__system_query_primary--enabled: url('#{$icons-path}system/light/query.svg#primary--enabled'); - --icon__system_query_primary--hover: url('#{$icons-path}system/light/query.svg#primary--hover'); - --icon__system_query_primary--active: url('#{$icons-path}system/light/query.svg#primary--active'); - --icon__system_query_primary--disabled: url('#{$icons-path}system/light/query.svg#primary--disabled'); - --icon__system_query_error--enabled: url('#{$icons-path}system/light/query.svg#error--enabled'); - --icon__system_query_error-actionable--enabled: url('#{$icons-path}system/light/query.svg#error-actionable--enabled'); - --icon__system_query_error-actionable--hover: url('#{$icons-path}system/light/query.svg#error-actionable--hover'); - --icon__system_query_error-actionable--active: url('#{$icons-path}system/light/query.svg#error-actionable--active'); - --icon__system_query_error-actionable--disabled: url('#{$icons-path}system/light/query.svg#error-actionable--disabled'); - --icon__system_query_warning--enabled: url('#{$icons-path}system/light/query.svg#warning--enabled'); - --icon__system_query_success--enabled: url('#{$icons-path}system/light/query.svg#success--enabled'); - --icon__system_query_neutral--enabled: url('#{$icons-path}system/light/query.svg#neutral--enabled'); - --icon__system_query_neutral--hover: url('#{$icons-path}system/light/query.svg#neutral--hover'); - --icon__system_query_neutral--active: url('#{$icons-path}system/light/query.svg#neutral--active'); - --icon__system_query_neutral--disabled: url('#{$icons-path}system/light/query.svg#neutral--disabled'); - --icon__system_query_highlighted--enabled: url('#{$icons-path}system/light/query.svg#highlighted--enabled'); - --icon__system_query_bright--enabled: url('#{$icons-path}system/light/query.svg#bright--enabled'); - --icon__system_qr-code_on-surface--enabled: url('#{$icons-path}system/light/qr-code.svg#on-surface--enabled'); - --icon__system_qr-code_on-surface--hover: url('#{$icons-path}system/light/qr-code.svg#on-surface--hover'); - --icon__system_qr-code_on-surface--active: url('#{$icons-path}system/light/qr-code.svg#on-surface--active'); - --icon__system_qr-code_on-surface--disabled: url('#{$icons-path}system/light/qr-code.svg#on-surface--disabled'); - --icon__system_qr-code_on-primary--enabled: url('#{$icons-path}system/light/qr-code.svg#on-primary--enabled'); - --icon__system_qr-code_on-primary--hover: url('#{$icons-path}system/light/qr-code.svg#on-primary--hover'); - --icon__system_qr-code_on-primary--active: url('#{$icons-path}system/light/qr-code.svg#on-primary--active'); - --icon__system_qr-code_on-primary--disabled: url('#{$icons-path}system/light/qr-code.svg#on-primary--disabled'); - --icon__system_qr-code_on-disabled--enabled: url('#{$icons-path}system/light/qr-code.svg#on-disabled--enabled'); - --icon__system_qr-code_on-message--enabled: url('#{$icons-path}system/light/qr-code.svg#on-message--enabled'); - --icon__system_qr-code_on-elevation--enabled: url('#{$icons-path}system/light/qr-code.svg#on-elevation--enabled'); - --icon__system_qr-code_primary--enabled: url('#{$icons-path}system/light/qr-code.svg#primary--enabled'); - --icon__system_qr-code_primary--hover: url('#{$icons-path}system/light/qr-code.svg#primary--hover'); - --icon__system_qr-code_primary--active: url('#{$icons-path}system/light/qr-code.svg#primary--active'); - --icon__system_qr-code_primary--disabled: url('#{$icons-path}system/light/qr-code.svg#primary--disabled'); - --icon__system_qr-code_error--enabled: url('#{$icons-path}system/light/qr-code.svg#error--enabled'); - --icon__system_qr-code_error-actionable--enabled: url('#{$icons-path}system/light/qr-code.svg#error-actionable--enabled'); - --icon__system_qr-code_error-actionable--hover: url('#{$icons-path}system/light/qr-code.svg#error-actionable--hover'); - --icon__system_qr-code_error-actionable--active: url('#{$icons-path}system/light/qr-code.svg#error-actionable--active'); - --icon__system_qr-code_error-actionable--disabled: url('#{$icons-path}system/light/qr-code.svg#error-actionable--disabled'); - --icon__system_qr-code_warning--enabled: url('#{$icons-path}system/light/qr-code.svg#warning--enabled'); - --icon__system_qr-code_success--enabled: url('#{$icons-path}system/light/qr-code.svg#success--enabled'); - --icon__system_qr-code_neutral--enabled: url('#{$icons-path}system/light/qr-code.svg#neutral--enabled'); - --icon__system_qr-code_neutral--hover: url('#{$icons-path}system/light/qr-code.svg#neutral--hover'); - --icon__system_qr-code_neutral--active: url('#{$icons-path}system/light/qr-code.svg#neutral--active'); - --icon__system_qr-code_neutral--disabled: url('#{$icons-path}system/light/qr-code.svg#neutral--disabled'); - --icon__system_qr-code_highlighted--enabled: url('#{$icons-path}system/light/qr-code.svg#highlighted--enabled'); - --icon__system_qr-code_bright--enabled: url('#{$icons-path}system/light/qr-code.svg#bright--enabled'); - --icon__system_publish_on-surface--enabled: url('#{$icons-path}system/light/publish.svg#on-surface--enabled'); - --icon__system_publish_on-surface--hover: url('#{$icons-path}system/light/publish.svg#on-surface--hover'); - --icon__system_publish_on-surface--active: url('#{$icons-path}system/light/publish.svg#on-surface--active'); - --icon__system_publish_on-surface--disabled: url('#{$icons-path}system/light/publish.svg#on-surface--disabled'); - --icon__system_publish_on-primary--enabled: url('#{$icons-path}system/light/publish.svg#on-primary--enabled'); - --icon__system_publish_on-primary--hover: url('#{$icons-path}system/light/publish.svg#on-primary--hover'); - --icon__system_publish_on-primary--active: url('#{$icons-path}system/light/publish.svg#on-primary--active'); - --icon__system_publish_on-primary--disabled: url('#{$icons-path}system/light/publish.svg#on-primary--disabled'); - --icon__system_publish_on-disabled--enabled: url('#{$icons-path}system/light/publish.svg#on-disabled--enabled'); - --icon__system_publish_on-message--enabled: url('#{$icons-path}system/light/publish.svg#on-message--enabled'); - --icon__system_publish_on-elevation--enabled: url('#{$icons-path}system/light/publish.svg#on-elevation--enabled'); - --icon__system_publish_primary--enabled: url('#{$icons-path}system/light/publish.svg#primary--enabled'); - --icon__system_publish_primary--hover: url('#{$icons-path}system/light/publish.svg#primary--hover'); - --icon__system_publish_primary--active: url('#{$icons-path}system/light/publish.svg#primary--active'); - --icon__system_publish_primary--disabled: url('#{$icons-path}system/light/publish.svg#primary--disabled'); - --icon__system_publish_error--enabled: url('#{$icons-path}system/light/publish.svg#error--enabled'); - --icon__system_publish_error-actionable--enabled: url('#{$icons-path}system/light/publish.svg#error-actionable--enabled'); - --icon__system_publish_error-actionable--hover: url('#{$icons-path}system/light/publish.svg#error-actionable--hover'); - --icon__system_publish_error-actionable--active: url('#{$icons-path}system/light/publish.svg#error-actionable--active'); - --icon__system_publish_error-actionable--disabled: url('#{$icons-path}system/light/publish.svg#error-actionable--disabled'); - --icon__system_publish_warning--enabled: url('#{$icons-path}system/light/publish.svg#warning--enabled'); - --icon__system_publish_success--enabled: url('#{$icons-path}system/light/publish.svg#success--enabled'); - --icon__system_publish_neutral--enabled: url('#{$icons-path}system/light/publish.svg#neutral--enabled'); - --icon__system_publish_neutral--hover: url('#{$icons-path}system/light/publish.svg#neutral--hover'); - --icon__system_publish_neutral--active: url('#{$icons-path}system/light/publish.svg#neutral--active'); - --icon__system_publish_neutral--disabled: url('#{$icons-path}system/light/publish.svg#neutral--disabled'); - --icon__system_publish_highlighted--enabled: url('#{$icons-path}system/light/publish.svg#highlighted--enabled'); - --icon__system_publish_bright--enabled: url('#{$icons-path}system/light/publish.svg#bright--enabled'); - --icon__system_property_on-surface--enabled: url('#{$icons-path}system/light/property.svg#on-surface--enabled'); - --icon__system_property_on-surface--hover: url('#{$icons-path}system/light/property.svg#on-surface--hover'); - --icon__system_property_on-surface--active: url('#{$icons-path}system/light/property.svg#on-surface--active'); - --icon__system_property_on-surface--disabled: url('#{$icons-path}system/light/property.svg#on-surface--disabled'); - --icon__system_property_on-primary--enabled: url('#{$icons-path}system/light/property.svg#on-primary--enabled'); - --icon__system_property_on-primary--hover: url('#{$icons-path}system/light/property.svg#on-primary--hover'); - --icon__system_property_on-primary--active: url('#{$icons-path}system/light/property.svg#on-primary--active'); - --icon__system_property_on-primary--disabled: url('#{$icons-path}system/light/property.svg#on-primary--disabled'); - --icon__system_property_on-disabled--enabled: url('#{$icons-path}system/light/property.svg#on-disabled--enabled'); - --icon__system_property_on-message--enabled: url('#{$icons-path}system/light/property.svg#on-message--enabled'); - --icon__system_property_on-elevation--enabled: url('#{$icons-path}system/light/property.svg#on-elevation--enabled'); - --icon__system_property_primary--enabled: url('#{$icons-path}system/light/property.svg#primary--enabled'); - --icon__system_property_primary--hover: url('#{$icons-path}system/light/property.svg#primary--hover'); - --icon__system_property_primary--active: url('#{$icons-path}system/light/property.svg#primary--active'); - --icon__system_property_primary--disabled: url('#{$icons-path}system/light/property.svg#primary--disabled'); - --icon__system_property_error--enabled: url('#{$icons-path}system/light/property.svg#error--enabled'); - --icon__system_property_error-actionable--enabled: url('#{$icons-path}system/light/property.svg#error-actionable--enabled'); - --icon__system_property_error-actionable--hover: url('#{$icons-path}system/light/property.svg#error-actionable--hover'); - --icon__system_property_error-actionable--active: url('#{$icons-path}system/light/property.svg#error-actionable--active'); - --icon__system_property_error-actionable--disabled: url('#{$icons-path}system/light/property.svg#error-actionable--disabled'); - --icon__system_property_warning--enabled: url('#{$icons-path}system/light/property.svg#warning--enabled'); - --icon__system_property_success--enabled: url('#{$icons-path}system/light/property.svg#success--enabled'); - --icon__system_property_neutral--enabled: url('#{$icons-path}system/light/property.svg#neutral--enabled'); - --icon__system_property_neutral--hover: url('#{$icons-path}system/light/property.svg#neutral--hover'); - --icon__system_property_neutral--active: url('#{$icons-path}system/light/property.svg#neutral--active'); - --icon__system_property_neutral--disabled: url('#{$icons-path}system/light/property.svg#neutral--disabled'); - --icon__system_property_highlighted--enabled: url('#{$icons-path}system/light/property.svg#highlighted--enabled'); - --icon__system_property_bright--enabled: url('#{$icons-path}system/light/property.svg#bright--enabled'); - --icon__system_photo_on-surface--enabled: url('#{$icons-path}system/light/photo.svg#on-surface--enabled'); - --icon__system_photo_on-surface--hover: url('#{$icons-path}system/light/photo.svg#on-surface--hover'); - --icon__system_photo_on-surface--active: url('#{$icons-path}system/light/photo.svg#on-surface--active'); - --icon__system_photo_on-surface--disabled: url('#{$icons-path}system/light/photo.svg#on-surface--disabled'); - --icon__system_photo_on-primary--enabled: url('#{$icons-path}system/light/photo.svg#on-primary--enabled'); - --icon__system_photo_on-primary--hover: url('#{$icons-path}system/light/photo.svg#on-primary--hover'); - --icon__system_photo_on-primary--active: url('#{$icons-path}system/light/photo.svg#on-primary--active'); - --icon__system_photo_on-primary--disabled: url('#{$icons-path}system/light/photo.svg#on-primary--disabled'); - --icon__system_photo_on-disabled--enabled: url('#{$icons-path}system/light/photo.svg#on-disabled--enabled'); - --icon__system_photo_on-message--enabled: url('#{$icons-path}system/light/photo.svg#on-message--enabled'); - --icon__system_photo_on-elevation--enabled: url('#{$icons-path}system/light/photo.svg#on-elevation--enabled'); - --icon__system_photo_primary--enabled: url('#{$icons-path}system/light/photo.svg#primary--enabled'); - --icon__system_photo_primary--hover: url('#{$icons-path}system/light/photo.svg#primary--hover'); - --icon__system_photo_primary--active: url('#{$icons-path}system/light/photo.svg#primary--active'); - --icon__system_photo_primary--disabled: url('#{$icons-path}system/light/photo.svg#primary--disabled'); - --icon__system_photo_error--enabled: url('#{$icons-path}system/light/photo.svg#error--enabled'); - --icon__system_photo_error-actionable--enabled: url('#{$icons-path}system/light/photo.svg#error-actionable--enabled'); - --icon__system_photo_error-actionable--hover: url('#{$icons-path}system/light/photo.svg#error-actionable--hover'); - --icon__system_photo_error-actionable--active: url('#{$icons-path}system/light/photo.svg#error-actionable--active'); - --icon__system_photo_error-actionable--disabled: url('#{$icons-path}system/light/photo.svg#error-actionable--disabled'); - --icon__system_photo_warning--enabled: url('#{$icons-path}system/light/photo.svg#warning--enabled'); - --icon__system_photo_success--enabled: url('#{$icons-path}system/light/photo.svg#success--enabled'); - --icon__system_photo_neutral--enabled: url('#{$icons-path}system/light/photo.svg#neutral--enabled'); - --icon__system_photo_neutral--hover: url('#{$icons-path}system/light/photo.svg#neutral--hover'); - --icon__system_photo_neutral--active: url('#{$icons-path}system/light/photo.svg#neutral--active'); - --icon__system_photo_neutral--disabled: url('#{$icons-path}system/light/photo.svg#neutral--disabled'); - --icon__system_photo_highlighted--enabled: url('#{$icons-path}system/light/photo.svg#highlighted--enabled'); - --icon__system_photo_bright--enabled: url('#{$icons-path}system/light/photo.svg#bright--enabled'); - --icon__system_pause_on-surface--enabled: url('#{$icons-path}system/light/pause.svg#on-surface--enabled'); - --icon__system_pause_on-surface--hover: url('#{$icons-path}system/light/pause.svg#on-surface--hover'); - --icon__system_pause_on-surface--active: url('#{$icons-path}system/light/pause.svg#on-surface--active'); - --icon__system_pause_on-surface--disabled: url('#{$icons-path}system/light/pause.svg#on-surface--disabled'); - --icon__system_pause_on-primary--enabled: url('#{$icons-path}system/light/pause.svg#on-primary--enabled'); - --icon__system_pause_on-primary--hover: url('#{$icons-path}system/light/pause.svg#on-primary--hover'); - --icon__system_pause_on-primary--active: url('#{$icons-path}system/light/pause.svg#on-primary--active'); - --icon__system_pause_on-primary--disabled: url('#{$icons-path}system/light/pause.svg#on-primary--disabled'); - --icon__system_pause_on-disabled--enabled: url('#{$icons-path}system/light/pause.svg#on-disabled--enabled'); - --icon__system_pause_on-message--enabled: url('#{$icons-path}system/light/pause.svg#on-message--enabled'); - --icon__system_pause_on-elevation--enabled: url('#{$icons-path}system/light/pause.svg#on-elevation--enabled'); - --icon__system_pause_primary--enabled: url('#{$icons-path}system/light/pause.svg#primary--enabled'); - --icon__system_pause_primary--hover: url('#{$icons-path}system/light/pause.svg#primary--hover'); - --icon__system_pause_primary--active: url('#{$icons-path}system/light/pause.svg#primary--active'); - --icon__system_pause_primary--disabled: url('#{$icons-path}system/light/pause.svg#primary--disabled'); - --icon__system_pause_error--enabled: url('#{$icons-path}system/light/pause.svg#error--enabled'); - --icon__system_pause_error-actionable--enabled: url('#{$icons-path}system/light/pause.svg#error-actionable--enabled'); - --icon__system_pause_error-actionable--hover: url('#{$icons-path}system/light/pause.svg#error-actionable--hover'); - --icon__system_pause_error-actionable--active: url('#{$icons-path}system/light/pause.svg#error-actionable--active'); - --icon__system_pause_error-actionable--disabled: url('#{$icons-path}system/light/pause.svg#error-actionable--disabled'); - --icon__system_pause_warning--enabled: url('#{$icons-path}system/light/pause.svg#warning--enabled'); - --icon__system_pause_success--enabled: url('#{$icons-path}system/light/pause.svg#success--enabled'); - --icon__system_pause_neutral--enabled: url('#{$icons-path}system/light/pause.svg#neutral--enabled'); - --icon__system_pause_neutral--hover: url('#{$icons-path}system/light/pause.svg#neutral--hover'); - --icon__system_pause_neutral--active: url('#{$icons-path}system/light/pause.svg#neutral--active'); - --icon__system_pause_neutral--disabled: url('#{$icons-path}system/light/pause.svg#neutral--disabled'); - --icon__system_pause_highlighted--enabled: url('#{$icons-path}system/light/pause.svg#highlighted--enabled'); - --icon__system_pause_bright--enabled: url('#{$icons-path}system/light/pause.svg#bright--enabled'); - --icon__system_order-numberically_on-surface--enabled: url('#{$icons-path}system/light/order-numberically.svg#on-surface--enabled'); - --icon__system_order-numberically_on-surface--hover: url('#{$icons-path}system/light/order-numberically.svg#on-surface--hover'); - --icon__system_order-numberically_on-surface--active: url('#{$icons-path}system/light/order-numberically.svg#on-surface--active'); - --icon__system_order-numberically_on-surface--disabled: url('#{$icons-path}system/light/order-numberically.svg#on-surface--disabled'); - --icon__system_order-numberically_on-primary--enabled: url('#{$icons-path}system/light/order-numberically.svg#on-primary--enabled'); - --icon__system_order-numberically_on-primary--hover: url('#{$icons-path}system/light/order-numberically.svg#on-primary--hover'); - --icon__system_order-numberically_on-primary--active: url('#{$icons-path}system/light/order-numberically.svg#on-primary--active'); - --icon__system_order-numberically_on-primary--disabled: url('#{$icons-path}system/light/order-numberically.svg#on-primary--disabled'); - --icon__system_order-numberically_on-disabled--enabled: url('#{$icons-path}system/light/order-numberically.svg#on-disabled--enabled'); - --icon__system_order-numberically_on-message--enabled: url('#{$icons-path}system/light/order-numberically.svg#on-message--enabled'); - --icon__system_order-numberically_on-elevation--enabled: url('#{$icons-path}system/light/order-numberically.svg#on-elevation--enabled'); - --icon__system_order-numberically_primary--enabled: url('#{$icons-path}system/light/order-numberically.svg#primary--enabled'); - --icon__system_order-numberically_primary--hover: url('#{$icons-path}system/light/order-numberically.svg#primary--hover'); - --icon__system_order-numberically_primary--active: url('#{$icons-path}system/light/order-numberically.svg#primary--active'); - --icon__system_order-numberically_primary--disabled: url('#{$icons-path}system/light/order-numberically.svg#primary--disabled'); - --icon__system_order-numberically_error--enabled: url('#{$icons-path}system/light/order-numberically.svg#error--enabled'); - --icon__system_order-numberically_error-actionable--enabled: url('#{$icons-path}system/light/order-numberically.svg#error-actionable--enabled'); - --icon__system_order-numberically_error-actionable--hover: url('#{$icons-path}system/light/order-numberically.svg#error-actionable--hover'); - --icon__system_order-numberically_error-actionable--active: url('#{$icons-path}system/light/order-numberically.svg#error-actionable--active'); - --icon__system_order-numberically_error-actionable--disabled: url('#{$icons-path}system/light/order-numberically.svg#error-actionable--disabled'); - --icon__system_order-numberically_warning--enabled: url('#{$icons-path}system/light/order-numberically.svg#warning--enabled'); - --icon__system_order-numberically_success--enabled: url('#{$icons-path}system/light/order-numberically.svg#success--enabled'); - --icon__system_order-numberically_neutral--enabled: url('#{$icons-path}system/light/order-numberically.svg#neutral--enabled'); - --icon__system_order-numberically_neutral--hover: url('#{$icons-path}system/light/order-numberically.svg#neutral--hover'); - --icon__system_order-numberically_neutral--active: url('#{$icons-path}system/light/order-numberically.svg#neutral--active'); - --icon__system_order-numberically_neutral--disabled: url('#{$icons-path}system/light/order-numberically.svg#neutral--disabled'); - --icon__system_order-numberically_highlighted--enabled: url('#{$icons-path}system/light/order-numberically.svg#highlighted--enabled'); - --icon__system_order-numberically_bright--enabled: url('#{$icons-path}system/light/order-numberically.svg#bright--enabled'); - --icon__system_order-alphabetically_on-surface--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#on-surface--enabled'); - --icon__system_order-alphabetically_on-surface--hover: url('#{$icons-path}system/light/order-alphabetically.svg#on-surface--hover'); - --icon__system_order-alphabetically_on-surface--active: url('#{$icons-path}system/light/order-alphabetically.svg#on-surface--active'); - --icon__system_order-alphabetically_on-surface--disabled: url('#{$icons-path}system/light/order-alphabetically.svg#on-surface--disabled'); - --icon__system_order-alphabetically_on-primary--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#on-primary--enabled'); - --icon__system_order-alphabetically_on-primary--hover: url('#{$icons-path}system/light/order-alphabetically.svg#on-primary--hover'); - --icon__system_order-alphabetically_on-primary--active: url('#{$icons-path}system/light/order-alphabetically.svg#on-primary--active'); - --icon__system_order-alphabetically_on-primary--disabled: url('#{$icons-path}system/light/order-alphabetically.svg#on-primary--disabled'); - --icon__system_order-alphabetically_on-disabled--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#on-disabled--enabled'); - --icon__system_order-alphabetically_on-message--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#on-message--enabled'); - --icon__system_order-alphabetically_on-elevation--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#on-elevation--enabled'); - --icon__system_order-alphabetically_primary--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#primary--enabled'); - --icon__system_order-alphabetically_primary--hover: url('#{$icons-path}system/light/order-alphabetically.svg#primary--hover'); - --icon__system_order-alphabetically_primary--active: url('#{$icons-path}system/light/order-alphabetically.svg#primary--active'); - --icon__system_order-alphabetically_primary--disabled: url('#{$icons-path}system/light/order-alphabetically.svg#primary--disabled'); - --icon__system_order-alphabetically_error--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#error--enabled'); - --icon__system_order-alphabetically_error-actionable--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#error-actionable--enabled'); - --icon__system_order-alphabetically_error-actionable--hover: url('#{$icons-path}system/light/order-alphabetically.svg#error-actionable--hover'); - --icon__system_order-alphabetically_error-actionable--active: url('#{$icons-path}system/light/order-alphabetically.svg#error-actionable--active'); - --icon__system_order-alphabetically_error-actionable--disabled: url('#{$icons-path}system/light/order-alphabetically.svg#error-actionable--disabled'); - --icon__system_order-alphabetically_warning--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#warning--enabled'); - --icon__system_order-alphabetically_success--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#success--enabled'); - --icon__system_order-alphabetically_neutral--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#neutral--enabled'); - --icon__system_order-alphabetically_neutral--hover: url('#{$icons-path}system/light/order-alphabetically.svg#neutral--hover'); - --icon__system_order-alphabetically_neutral--active: url('#{$icons-path}system/light/order-alphabetically.svg#neutral--active'); - --icon__system_order-alphabetically_neutral--disabled: url('#{$icons-path}system/light/order-alphabetically.svg#neutral--disabled'); - --icon__system_order-alphabetically_highlighted--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#highlighted--enabled'); - --icon__system_order-alphabetically_bright--enabled: url('#{$icons-path}system/light/order-alphabetically.svg#bright--enabled'); - --icon__system_notification_on-surface--enabled: url('#{$icons-path}system/light/notification.svg#on-surface--enabled'); - --icon__system_notification_on-surface--hover: url('#{$icons-path}system/light/notification.svg#on-surface--hover'); - --icon__system_notification_on-surface--active: url('#{$icons-path}system/light/notification.svg#on-surface--active'); - --icon__system_notification_on-surface--disabled: url('#{$icons-path}system/light/notification.svg#on-surface--disabled'); - --icon__system_notification_on-primary--enabled: url('#{$icons-path}system/light/notification.svg#on-primary--enabled'); - --icon__system_notification_on-primary--hover: url('#{$icons-path}system/light/notification.svg#on-primary--hover'); - --icon__system_notification_on-primary--active: url('#{$icons-path}system/light/notification.svg#on-primary--active'); - --icon__system_notification_on-primary--disabled: url('#{$icons-path}system/light/notification.svg#on-primary--disabled'); - --icon__system_notification_on-disabled--enabled: url('#{$icons-path}system/light/notification.svg#on-disabled--enabled'); - --icon__system_notification_on-message--enabled: url('#{$icons-path}system/light/notification.svg#on-message--enabled'); - --icon__system_notification_on-elevation--enabled: url('#{$icons-path}system/light/notification.svg#on-elevation--enabled'); - --icon__system_notification_primary--enabled: url('#{$icons-path}system/light/notification.svg#primary--enabled'); - --icon__system_notification_primary--hover: url('#{$icons-path}system/light/notification.svg#primary--hover'); - --icon__system_notification_primary--active: url('#{$icons-path}system/light/notification.svg#primary--active'); - --icon__system_notification_primary--disabled: url('#{$icons-path}system/light/notification.svg#primary--disabled'); - --icon__system_notification_error--enabled: url('#{$icons-path}system/light/notification.svg#error--enabled'); - --icon__system_notification_error-actionable--enabled: url('#{$icons-path}system/light/notification.svg#error-actionable--enabled'); - --icon__system_notification_error-actionable--hover: url('#{$icons-path}system/light/notification.svg#error-actionable--hover'); - --icon__system_notification_error-actionable--active: url('#{$icons-path}system/light/notification.svg#error-actionable--active'); - --icon__system_notification_error-actionable--disabled: url('#{$icons-path}system/light/notification.svg#error-actionable--disabled'); - --icon__system_notification_warning--enabled: url('#{$icons-path}system/light/notification.svg#warning--enabled'); - --icon__system_notification_success--enabled: url('#{$icons-path}system/light/notification.svg#success--enabled'); - --icon__system_notification_neutral--enabled: url('#{$icons-path}system/light/notification.svg#neutral--enabled'); - --icon__system_notification_neutral--hover: url('#{$icons-path}system/light/notification.svg#neutral--hover'); - --icon__system_notification_neutral--active: url('#{$icons-path}system/light/notification.svg#neutral--active'); - --icon__system_notification_neutral--disabled: url('#{$icons-path}system/light/notification.svg#neutral--disabled'); - --icon__system_notification_highlighted--enabled: url('#{$icons-path}system/light/notification.svg#highlighted--enabled'); - --icon__system_notification_bright--enabled: url('#{$icons-path}system/light/notification.svg#bright--enabled'); - --icon__system_news_on-surface--enabled: url('#{$icons-path}system/light/news.svg#on-surface--enabled'); - --icon__system_news_on-surface--hover: url('#{$icons-path}system/light/news.svg#on-surface--hover'); - --icon__system_news_on-surface--active: url('#{$icons-path}system/light/news.svg#on-surface--active'); - --icon__system_news_on-surface--disabled: url('#{$icons-path}system/light/news.svg#on-surface--disabled'); - --icon__system_news_on-primary--enabled: url('#{$icons-path}system/light/news.svg#on-primary--enabled'); - --icon__system_news_on-primary--hover: url('#{$icons-path}system/light/news.svg#on-primary--hover'); - --icon__system_news_on-primary--active: url('#{$icons-path}system/light/news.svg#on-primary--active'); - --icon__system_news_on-primary--disabled: url('#{$icons-path}system/light/news.svg#on-primary--disabled'); - --icon__system_news_on-disabled--enabled: url('#{$icons-path}system/light/news.svg#on-disabled--enabled'); - --icon__system_news_on-message--enabled: url('#{$icons-path}system/light/news.svg#on-message--enabled'); - --icon__system_news_on-elevation--enabled: url('#{$icons-path}system/light/news.svg#on-elevation--enabled'); - --icon__system_news_primary--enabled: url('#{$icons-path}system/light/news.svg#primary--enabled'); - --icon__system_news_primary--hover: url('#{$icons-path}system/light/news.svg#primary--hover'); - --icon__system_news_primary--active: url('#{$icons-path}system/light/news.svg#primary--active'); - --icon__system_news_primary--disabled: url('#{$icons-path}system/light/news.svg#primary--disabled'); - --icon__system_news_error--enabled: url('#{$icons-path}system/light/news.svg#error--enabled'); - --icon__system_news_error-actionable--enabled: url('#{$icons-path}system/light/news.svg#error-actionable--enabled'); - --icon__system_news_error-actionable--hover: url('#{$icons-path}system/light/news.svg#error-actionable--hover'); - --icon__system_news_error-actionable--active: url('#{$icons-path}system/light/news.svg#error-actionable--active'); - --icon__system_news_error-actionable--disabled: url('#{$icons-path}system/light/news.svg#error-actionable--disabled'); - --icon__system_news_warning--enabled: url('#{$icons-path}system/light/news.svg#warning--enabled'); - --icon__system_news_success--enabled: url('#{$icons-path}system/light/news.svg#success--enabled'); - --icon__system_news_neutral--enabled: url('#{$icons-path}system/light/news.svg#neutral--enabled'); - --icon__system_news_neutral--hover: url('#{$icons-path}system/light/news.svg#neutral--hover'); - --icon__system_news_neutral--active: url('#{$icons-path}system/light/news.svg#neutral--active'); - --icon__system_news_neutral--disabled: url('#{$icons-path}system/light/news.svg#neutral--disabled'); - --icon__system_news_highlighted--enabled: url('#{$icons-path}system/light/news.svg#highlighted--enabled'); - --icon__system_news_bright--enabled: url('#{$icons-path}system/light/news.svg#bright--enabled'); - --icon__system_more-vertical_on-surface--enabled: url('#{$icons-path}system/light/more-vertical.svg#on-surface--enabled'); - --icon__system_more-vertical_on-surface--hover: url('#{$icons-path}system/light/more-vertical.svg#on-surface--hover'); - --icon__system_more-vertical_on-surface--active: url('#{$icons-path}system/light/more-vertical.svg#on-surface--active'); - --icon__system_more-vertical_on-surface--disabled: url('#{$icons-path}system/light/more-vertical.svg#on-surface--disabled'); - --icon__system_more-vertical_on-primary--enabled: url('#{$icons-path}system/light/more-vertical.svg#on-primary--enabled'); - --icon__system_more-vertical_on-primary--hover: url('#{$icons-path}system/light/more-vertical.svg#on-primary--hover'); - --icon__system_more-vertical_on-primary--active: url('#{$icons-path}system/light/more-vertical.svg#on-primary--active'); - --icon__system_more-vertical_on-primary--disabled: url('#{$icons-path}system/light/more-vertical.svg#on-primary--disabled'); - --icon__system_more-vertical_on-disabled--enabled: url('#{$icons-path}system/light/more-vertical.svg#on-disabled--enabled'); - --icon__system_more-vertical_on-message--enabled: url('#{$icons-path}system/light/more-vertical.svg#on-message--enabled'); - --icon__system_more-vertical_on-elevation--enabled: url('#{$icons-path}system/light/more-vertical.svg#on-elevation--enabled'); - --icon__system_more-vertical_primary--enabled: url('#{$icons-path}system/light/more-vertical.svg#primary--enabled'); - --icon__system_more-vertical_primary--hover: url('#{$icons-path}system/light/more-vertical.svg#primary--hover'); - --icon__system_more-vertical_primary--active: url('#{$icons-path}system/light/more-vertical.svg#primary--active'); - --icon__system_more-vertical_primary--disabled: url('#{$icons-path}system/light/more-vertical.svg#primary--disabled'); - --icon__system_more-vertical_error--enabled: url('#{$icons-path}system/light/more-vertical.svg#error--enabled'); - --icon__system_more-vertical_error-actionable--enabled: url('#{$icons-path}system/light/more-vertical.svg#error-actionable--enabled'); - --icon__system_more-vertical_error-actionable--hover: url('#{$icons-path}system/light/more-vertical.svg#error-actionable--hover'); - --icon__system_more-vertical_error-actionable--active: url('#{$icons-path}system/light/more-vertical.svg#error-actionable--active'); - --icon__system_more-vertical_error-actionable--disabled: url('#{$icons-path}system/light/more-vertical.svg#error-actionable--disabled'); - --icon__system_more-vertical_warning--enabled: url('#{$icons-path}system/light/more-vertical.svg#warning--enabled'); - --icon__system_more-vertical_success--enabled: url('#{$icons-path}system/light/more-vertical.svg#success--enabled'); - --icon__system_more-vertical_neutral--enabled: url('#{$icons-path}system/light/more-vertical.svg#neutral--enabled'); - --icon__system_more-vertical_neutral--hover: url('#{$icons-path}system/light/more-vertical.svg#neutral--hover'); - --icon__system_more-vertical_neutral--active: url('#{$icons-path}system/light/more-vertical.svg#neutral--active'); - --icon__system_more-vertical_neutral--disabled: url('#{$icons-path}system/light/more-vertical.svg#neutral--disabled'); - --icon__system_more-vertical_highlighted--enabled: url('#{$icons-path}system/light/more-vertical.svg#highlighted--enabled'); - --icon__system_more-vertical_bright--enabled: url('#{$icons-path}system/light/more-vertical.svg#bright--enabled'); - --icon__system_more-horizontal_on-surface--enabled: url('#{$icons-path}system/light/more-horizontal.svg#on-surface--enabled'); - --icon__system_more-horizontal_on-surface--hover: url('#{$icons-path}system/light/more-horizontal.svg#on-surface--hover'); - --icon__system_more-horizontal_on-surface--active: url('#{$icons-path}system/light/more-horizontal.svg#on-surface--active'); - --icon__system_more-horizontal_on-surface--disabled: url('#{$icons-path}system/light/more-horizontal.svg#on-surface--disabled'); - --icon__system_more-horizontal_on-primary--enabled: url('#{$icons-path}system/light/more-horizontal.svg#on-primary--enabled'); - --icon__system_more-horizontal_on-primary--hover: url('#{$icons-path}system/light/more-horizontal.svg#on-primary--hover'); - --icon__system_more-horizontal_on-primary--active: url('#{$icons-path}system/light/more-horizontal.svg#on-primary--active'); - --icon__system_more-horizontal_on-primary--disabled: url('#{$icons-path}system/light/more-horizontal.svg#on-primary--disabled'); - --icon__system_more-horizontal_on-disabled--enabled: url('#{$icons-path}system/light/more-horizontal.svg#on-disabled--enabled'); - --icon__system_more-horizontal_on-message--enabled: url('#{$icons-path}system/light/more-horizontal.svg#on-message--enabled'); - --icon__system_more-horizontal_on-elevation--enabled: url('#{$icons-path}system/light/more-horizontal.svg#on-elevation--enabled'); - --icon__system_more-horizontal_primary--enabled: url('#{$icons-path}system/light/more-horizontal.svg#primary--enabled'); - --icon__system_more-horizontal_primary--hover: url('#{$icons-path}system/light/more-horizontal.svg#primary--hover'); - --icon__system_more-horizontal_primary--active: url('#{$icons-path}system/light/more-horizontal.svg#primary--active'); - --icon__system_more-horizontal_primary--disabled: url('#{$icons-path}system/light/more-horizontal.svg#primary--disabled'); - --icon__system_more-horizontal_error--enabled: url('#{$icons-path}system/light/more-horizontal.svg#error--enabled'); - --icon__system_more-horizontal_error-actionable--enabled: url('#{$icons-path}system/light/more-horizontal.svg#error-actionable--enabled'); - --icon__system_more-horizontal_error-actionable--hover: url('#{$icons-path}system/light/more-horizontal.svg#error-actionable--hover'); - --icon__system_more-horizontal_error-actionable--active: url('#{$icons-path}system/light/more-horizontal.svg#error-actionable--active'); - --icon__system_more-horizontal_error-actionable--disabled: url('#{$icons-path}system/light/more-horizontal.svg#error-actionable--disabled'); - --icon__system_more-horizontal_warning--enabled: url('#{$icons-path}system/light/more-horizontal.svg#warning--enabled'); - --icon__system_more-horizontal_success--enabled: url('#{$icons-path}system/light/more-horizontal.svg#success--enabled'); - --icon__system_more-horizontal_neutral--enabled: url('#{$icons-path}system/light/more-horizontal.svg#neutral--enabled'); - --icon__system_more-horizontal_neutral--hover: url('#{$icons-path}system/light/more-horizontal.svg#neutral--hover'); - --icon__system_more-horizontal_neutral--active: url('#{$icons-path}system/light/more-horizontal.svg#neutral--active'); - --icon__system_more-horizontal_neutral--disabled: url('#{$icons-path}system/light/more-horizontal.svg#neutral--disabled'); - --icon__system_more-horizontal_highlighted--enabled: url('#{$icons-path}system/light/more-horizontal.svg#highlighted--enabled'); - --icon__system_more-horizontal_bright--enabled: url('#{$icons-path}system/light/more-horizontal.svg#bright--enabled'); - --icon__system_mobile_on-surface--enabled: url('#{$icons-path}system/light/mobile.svg#on-surface--enabled'); - --icon__system_mobile_on-surface--hover: url('#{$icons-path}system/light/mobile.svg#on-surface--hover'); - --icon__system_mobile_on-surface--active: url('#{$icons-path}system/light/mobile.svg#on-surface--active'); - --icon__system_mobile_on-surface--disabled: url('#{$icons-path}system/light/mobile.svg#on-surface--disabled'); - --icon__system_mobile_on-primary--enabled: url('#{$icons-path}system/light/mobile.svg#on-primary--enabled'); - --icon__system_mobile_on-primary--hover: url('#{$icons-path}system/light/mobile.svg#on-primary--hover'); - --icon__system_mobile_on-primary--active: url('#{$icons-path}system/light/mobile.svg#on-primary--active'); - --icon__system_mobile_on-primary--disabled: url('#{$icons-path}system/light/mobile.svg#on-primary--disabled'); - --icon__system_mobile_on-disabled--enabled: url('#{$icons-path}system/light/mobile.svg#on-disabled--enabled'); - --icon__system_mobile_on-message--enabled: url('#{$icons-path}system/light/mobile.svg#on-message--enabled'); - --icon__system_mobile_on-elevation--enabled: url('#{$icons-path}system/light/mobile.svg#on-elevation--enabled'); - --icon__system_mobile_primary--enabled: url('#{$icons-path}system/light/mobile.svg#primary--enabled'); - --icon__system_mobile_primary--hover: url('#{$icons-path}system/light/mobile.svg#primary--hover'); - --icon__system_mobile_primary--active: url('#{$icons-path}system/light/mobile.svg#primary--active'); - --icon__system_mobile_primary--disabled: url('#{$icons-path}system/light/mobile.svg#primary--disabled'); - --icon__system_mobile_error--enabled: url('#{$icons-path}system/light/mobile.svg#error--enabled'); - --icon__system_mobile_error-actionable--enabled: url('#{$icons-path}system/light/mobile.svg#error-actionable--enabled'); - --icon__system_mobile_error-actionable--hover: url('#{$icons-path}system/light/mobile.svg#error-actionable--hover'); - --icon__system_mobile_error-actionable--active: url('#{$icons-path}system/light/mobile.svg#error-actionable--active'); - --icon__system_mobile_error-actionable--disabled: url('#{$icons-path}system/light/mobile.svg#error-actionable--disabled'); - --icon__system_mobile_warning--enabled: url('#{$icons-path}system/light/mobile.svg#warning--enabled'); - --icon__system_mobile_success--enabled: url('#{$icons-path}system/light/mobile.svg#success--enabled'); - --icon__system_mobile_neutral--enabled: url('#{$icons-path}system/light/mobile.svg#neutral--enabled'); - --icon__system_mobile_neutral--hover: url('#{$icons-path}system/light/mobile.svg#neutral--hover'); - --icon__system_mobile_neutral--active: url('#{$icons-path}system/light/mobile.svg#neutral--active'); - --icon__system_mobile_neutral--disabled: url('#{$icons-path}system/light/mobile.svg#neutral--disabled'); - --icon__system_mobile_highlighted--enabled: url('#{$icons-path}system/light/mobile.svg#highlighted--enabled'); - --icon__system_mobile_bright--enabled: url('#{$icons-path}system/light/mobile.svg#bright--enabled'); - --icon__system_mic_on-surface--enabled: url('#{$icons-path}system/light/mic.svg#on-surface--enabled'); - --icon__system_mic_on-surface--hover: url('#{$icons-path}system/light/mic.svg#on-surface--hover'); - --icon__system_mic_on-surface--active: url('#{$icons-path}system/light/mic.svg#on-surface--active'); - --icon__system_mic_on-surface--disabled: url('#{$icons-path}system/light/mic.svg#on-surface--disabled'); - --icon__system_mic_on-primary--enabled: url('#{$icons-path}system/light/mic.svg#on-primary--enabled'); - --icon__system_mic_on-primary--hover: url('#{$icons-path}system/light/mic.svg#on-primary--hover'); - --icon__system_mic_on-primary--active: url('#{$icons-path}system/light/mic.svg#on-primary--active'); - --icon__system_mic_on-primary--disabled: url('#{$icons-path}system/light/mic.svg#on-primary--disabled'); - --icon__system_mic_on-disabled--enabled: url('#{$icons-path}system/light/mic.svg#on-disabled--enabled'); - --icon__system_mic_on-message--enabled: url('#{$icons-path}system/light/mic.svg#on-message--enabled'); - --icon__system_mic_on-elevation--enabled: url('#{$icons-path}system/light/mic.svg#on-elevation--enabled'); - --icon__system_mic_primary--enabled: url('#{$icons-path}system/light/mic.svg#primary--enabled'); - --icon__system_mic_primary--hover: url('#{$icons-path}system/light/mic.svg#primary--hover'); - --icon__system_mic_primary--active: url('#{$icons-path}system/light/mic.svg#primary--active'); - --icon__system_mic_primary--disabled: url('#{$icons-path}system/light/mic.svg#primary--disabled'); - --icon__system_mic_error--enabled: url('#{$icons-path}system/light/mic.svg#error--enabled'); - --icon__system_mic_error-actionable--enabled: url('#{$icons-path}system/light/mic.svg#error-actionable--enabled'); - --icon__system_mic_error-actionable--hover: url('#{$icons-path}system/light/mic.svg#error-actionable--hover'); - --icon__system_mic_error-actionable--active: url('#{$icons-path}system/light/mic.svg#error-actionable--active'); - --icon__system_mic_error-actionable--disabled: url('#{$icons-path}system/light/mic.svg#error-actionable--disabled'); - --icon__system_mic_warning--enabled: url('#{$icons-path}system/light/mic.svg#warning--enabled'); - --icon__system_mic_success--enabled: url('#{$icons-path}system/light/mic.svg#success--enabled'); - --icon__system_mic_neutral--enabled: url('#{$icons-path}system/light/mic.svg#neutral--enabled'); - --icon__system_mic_neutral--hover: url('#{$icons-path}system/light/mic.svg#neutral--hover'); - --icon__system_mic_neutral--active: url('#{$icons-path}system/light/mic.svg#neutral--active'); - --icon__system_mic_neutral--disabled: url('#{$icons-path}system/light/mic.svg#neutral--disabled'); - --icon__system_mic_highlighted--enabled: url('#{$icons-path}system/light/mic.svg#highlighted--enabled'); - --icon__system_mic_bright--enabled: url('#{$icons-path}system/light/mic.svg#bright--enabled'); - --icon__system_mic-off_on-surface--enabled: url('#{$icons-path}system/light/mic-off.svg#on-surface--enabled'); - --icon__system_mic-off_on-surface--hover: url('#{$icons-path}system/light/mic-off.svg#on-surface--hover'); - --icon__system_mic-off_on-surface--active: url('#{$icons-path}system/light/mic-off.svg#on-surface--active'); - --icon__system_mic-off_on-surface--disabled: url('#{$icons-path}system/light/mic-off.svg#on-surface--disabled'); - --icon__system_mic-off_on-primary--enabled: url('#{$icons-path}system/light/mic-off.svg#on-primary--enabled'); - --icon__system_mic-off_on-primary--hover: url('#{$icons-path}system/light/mic-off.svg#on-primary--hover'); - --icon__system_mic-off_on-primary--active: url('#{$icons-path}system/light/mic-off.svg#on-primary--active'); - --icon__system_mic-off_on-primary--disabled: url('#{$icons-path}system/light/mic-off.svg#on-primary--disabled'); - --icon__system_mic-off_on-disabled--enabled: url('#{$icons-path}system/light/mic-off.svg#on-disabled--enabled'); - --icon__system_mic-off_on-message--enabled: url('#{$icons-path}system/light/mic-off.svg#on-message--enabled'); - --icon__system_mic-off_on-elevation--enabled: url('#{$icons-path}system/light/mic-off.svg#on-elevation--enabled'); - --icon__system_mic-off_primary--enabled: url('#{$icons-path}system/light/mic-off.svg#primary--enabled'); - --icon__system_mic-off_primary--hover: url('#{$icons-path}system/light/mic-off.svg#primary--hover'); - --icon__system_mic-off_primary--active: url('#{$icons-path}system/light/mic-off.svg#primary--active'); - --icon__system_mic-off_primary--disabled: url('#{$icons-path}system/light/mic-off.svg#primary--disabled'); - --icon__system_mic-off_error--enabled: url('#{$icons-path}system/light/mic-off.svg#error--enabled'); - --icon__system_mic-off_error-actionable--enabled: url('#{$icons-path}system/light/mic-off.svg#error-actionable--enabled'); - --icon__system_mic-off_error-actionable--hover: url('#{$icons-path}system/light/mic-off.svg#error-actionable--hover'); - --icon__system_mic-off_error-actionable--active: url('#{$icons-path}system/light/mic-off.svg#error-actionable--active'); - --icon__system_mic-off_error-actionable--disabled: url('#{$icons-path}system/light/mic-off.svg#error-actionable--disabled'); - --icon__system_mic-off_warning--enabled: url('#{$icons-path}system/light/mic-off.svg#warning--enabled'); - --icon__system_mic-off_success--enabled: url('#{$icons-path}system/light/mic-off.svg#success--enabled'); - --icon__system_mic-off_neutral--enabled: url('#{$icons-path}system/light/mic-off.svg#neutral--enabled'); - --icon__system_mic-off_neutral--hover: url('#{$icons-path}system/light/mic-off.svg#neutral--hover'); - --icon__system_mic-off_neutral--active: url('#{$icons-path}system/light/mic-off.svg#neutral--active'); - --icon__system_mic-off_neutral--disabled: url('#{$icons-path}system/light/mic-off.svg#neutral--disabled'); - --icon__system_mic-off_highlighted--enabled: url('#{$icons-path}system/light/mic-off.svg#highlighted--enabled'); - --icon__system_mic-off_bright--enabled: url('#{$icons-path}system/light/mic-off.svg#bright--enabled'); - --icon__system_message_on-surface--enabled: url('#{$icons-path}system/light/message.svg#on-surface--enabled'); - --icon__system_message_on-surface--hover: url('#{$icons-path}system/light/message.svg#on-surface--hover'); - --icon__system_message_on-surface--active: url('#{$icons-path}system/light/message.svg#on-surface--active'); - --icon__system_message_on-surface--disabled: url('#{$icons-path}system/light/message.svg#on-surface--disabled'); - --icon__system_message_on-primary--enabled: url('#{$icons-path}system/light/message.svg#on-primary--enabled'); - --icon__system_message_on-primary--hover: url('#{$icons-path}system/light/message.svg#on-primary--hover'); - --icon__system_message_on-primary--active: url('#{$icons-path}system/light/message.svg#on-primary--active'); - --icon__system_message_on-primary--disabled: url('#{$icons-path}system/light/message.svg#on-primary--disabled'); - --icon__system_message_on-disabled--enabled: url('#{$icons-path}system/light/message.svg#on-disabled--enabled'); - --icon__system_message_on-message--enabled: url('#{$icons-path}system/light/message.svg#on-message--enabled'); - --icon__system_message_on-elevation--enabled: url('#{$icons-path}system/light/message.svg#on-elevation--enabled'); - --icon__system_message_primary--enabled: url('#{$icons-path}system/light/message.svg#primary--enabled'); - --icon__system_message_primary--hover: url('#{$icons-path}system/light/message.svg#primary--hover'); - --icon__system_message_primary--active: url('#{$icons-path}system/light/message.svg#primary--active'); - --icon__system_message_primary--disabled: url('#{$icons-path}system/light/message.svg#primary--disabled'); - --icon__system_message_error--enabled: url('#{$icons-path}system/light/message.svg#error--enabled'); - --icon__system_message_error-actionable--enabled: url('#{$icons-path}system/light/message.svg#error-actionable--enabled'); - --icon__system_message_error-actionable--hover: url('#{$icons-path}system/light/message.svg#error-actionable--hover'); - --icon__system_message_error-actionable--active: url('#{$icons-path}system/light/message.svg#error-actionable--active'); - --icon__system_message_error-actionable--disabled: url('#{$icons-path}system/light/message.svg#error-actionable--disabled'); - --icon__system_message_warning--enabled: url('#{$icons-path}system/light/message.svg#warning--enabled'); - --icon__system_message_success--enabled: url('#{$icons-path}system/light/message.svg#success--enabled'); - --icon__system_message_neutral--enabled: url('#{$icons-path}system/light/message.svg#neutral--enabled'); - --icon__system_message_neutral--hover: url('#{$icons-path}system/light/message.svg#neutral--hover'); - --icon__system_message_neutral--active: url('#{$icons-path}system/light/message.svg#neutral--active'); - --icon__system_message_neutral--disabled: url('#{$icons-path}system/light/message.svg#neutral--disabled'); - --icon__system_message_highlighted--enabled: url('#{$icons-path}system/light/message.svg#highlighted--enabled'); - --icon__system_message_bright--enabled: url('#{$icons-path}system/light/message.svg#bright--enabled'); - --icon__system_menu_on-surface--enabled: url('#{$icons-path}system/light/menu.svg#on-surface--enabled'); - --icon__system_menu_on-surface--hover: url('#{$icons-path}system/light/menu.svg#on-surface--hover'); - --icon__system_menu_on-surface--active: url('#{$icons-path}system/light/menu.svg#on-surface--active'); - --icon__system_menu_on-surface--disabled: url('#{$icons-path}system/light/menu.svg#on-surface--disabled'); - --icon__system_menu_on-primary--enabled: url('#{$icons-path}system/light/menu.svg#on-primary--enabled'); - --icon__system_menu_on-primary--hover: url('#{$icons-path}system/light/menu.svg#on-primary--hover'); - --icon__system_menu_on-primary--active: url('#{$icons-path}system/light/menu.svg#on-primary--active'); - --icon__system_menu_on-primary--disabled: url('#{$icons-path}system/light/menu.svg#on-primary--disabled'); - --icon__system_menu_on-disabled--enabled: url('#{$icons-path}system/light/menu.svg#on-disabled--enabled'); - --icon__system_menu_on-message--enabled: url('#{$icons-path}system/light/menu.svg#on-message--enabled'); - --icon__system_menu_on-elevation--enabled: url('#{$icons-path}system/light/menu.svg#on-elevation--enabled'); - --icon__system_menu_primary--enabled: url('#{$icons-path}system/light/menu.svg#primary--enabled'); - --icon__system_menu_primary--hover: url('#{$icons-path}system/light/menu.svg#primary--hover'); - --icon__system_menu_primary--active: url('#{$icons-path}system/light/menu.svg#primary--active'); - --icon__system_menu_primary--disabled: url('#{$icons-path}system/light/menu.svg#primary--disabled'); - --icon__system_menu_error--enabled: url('#{$icons-path}system/light/menu.svg#error--enabled'); - --icon__system_menu_error-actionable--enabled: url('#{$icons-path}system/light/menu.svg#error-actionable--enabled'); - --icon__system_menu_error-actionable--hover: url('#{$icons-path}system/light/menu.svg#error-actionable--hover'); - --icon__system_menu_error-actionable--active: url('#{$icons-path}system/light/menu.svg#error-actionable--active'); - --icon__system_menu_error-actionable--disabled: url('#{$icons-path}system/light/menu.svg#error-actionable--disabled'); - --icon__system_menu_warning--enabled: url('#{$icons-path}system/light/menu.svg#warning--enabled'); - --icon__system_menu_success--enabled: url('#{$icons-path}system/light/menu.svg#success--enabled'); - --icon__system_menu_neutral--enabled: url('#{$icons-path}system/light/menu.svg#neutral--enabled'); - --icon__system_menu_neutral--hover: url('#{$icons-path}system/light/menu.svg#neutral--hover'); - --icon__system_menu_neutral--active: url('#{$icons-path}system/light/menu.svg#neutral--active'); - --icon__system_menu_neutral--disabled: url('#{$icons-path}system/light/menu.svg#neutral--disabled'); - --icon__system_menu_highlighted--enabled: url('#{$icons-path}system/light/menu.svg#highlighted--enabled'); - --icon__system_menu_bright--enabled: url('#{$icons-path}system/light/menu.svg#bright--enabled'); - --icon__system_mail_on-surface--enabled: url('#{$icons-path}system/light/mail.svg#on-surface--enabled'); - --icon__system_mail_on-surface--hover: url('#{$icons-path}system/light/mail.svg#on-surface--hover'); - --icon__system_mail_on-surface--active: url('#{$icons-path}system/light/mail.svg#on-surface--active'); - --icon__system_mail_on-surface--disabled: url('#{$icons-path}system/light/mail.svg#on-surface--disabled'); - --icon__system_mail_on-primary--enabled: url('#{$icons-path}system/light/mail.svg#on-primary--enabled'); - --icon__system_mail_on-primary--hover: url('#{$icons-path}system/light/mail.svg#on-primary--hover'); - --icon__system_mail_on-primary--active: url('#{$icons-path}system/light/mail.svg#on-primary--active'); - --icon__system_mail_on-primary--disabled: url('#{$icons-path}system/light/mail.svg#on-primary--disabled'); - --icon__system_mail_on-disabled--enabled: url('#{$icons-path}system/light/mail.svg#on-disabled--enabled'); - --icon__system_mail_on-message--enabled: url('#{$icons-path}system/light/mail.svg#on-message--enabled'); - --icon__system_mail_on-elevation--enabled: url('#{$icons-path}system/light/mail.svg#on-elevation--enabled'); - --icon__system_mail_primary--enabled: url('#{$icons-path}system/light/mail.svg#primary--enabled'); - --icon__system_mail_primary--hover: url('#{$icons-path}system/light/mail.svg#primary--hover'); - --icon__system_mail_primary--active: url('#{$icons-path}system/light/mail.svg#primary--active'); - --icon__system_mail_primary--disabled: url('#{$icons-path}system/light/mail.svg#primary--disabled'); - --icon__system_mail_error--enabled: url('#{$icons-path}system/light/mail.svg#error--enabled'); - --icon__system_mail_error-actionable--enabled: url('#{$icons-path}system/light/mail.svg#error-actionable--enabled'); - --icon__system_mail_error-actionable--hover: url('#{$icons-path}system/light/mail.svg#error-actionable--hover'); - --icon__system_mail_error-actionable--active: url('#{$icons-path}system/light/mail.svg#error-actionable--active'); - --icon__system_mail_error-actionable--disabled: url('#{$icons-path}system/light/mail.svg#error-actionable--disabled'); - --icon__system_mail_warning--enabled: url('#{$icons-path}system/light/mail.svg#warning--enabled'); - --icon__system_mail_success--enabled: url('#{$icons-path}system/light/mail.svg#success--enabled'); - --icon__system_mail_neutral--enabled: url('#{$icons-path}system/light/mail.svg#neutral--enabled'); - --icon__system_mail_neutral--hover: url('#{$icons-path}system/light/mail.svg#neutral--hover'); - --icon__system_mail_neutral--active: url('#{$icons-path}system/light/mail.svg#neutral--active'); - --icon__system_mail_neutral--disabled: url('#{$icons-path}system/light/mail.svg#neutral--disabled'); - --icon__system_mail_highlighted--enabled: url('#{$icons-path}system/light/mail.svg#highlighted--enabled'); - --icon__system_mail_bright--enabled: url('#{$icons-path}system/light/mail.svg#bright--enabled'); - --icon__system_logout_on-surface--enabled: url('#{$icons-path}system/light/logout.svg#on-surface--enabled'); - --icon__system_logout_on-surface--hover: url('#{$icons-path}system/light/logout.svg#on-surface--hover'); - --icon__system_logout_on-surface--active: url('#{$icons-path}system/light/logout.svg#on-surface--active'); - --icon__system_logout_on-surface--disabled: url('#{$icons-path}system/light/logout.svg#on-surface--disabled'); - --icon__system_logout_on-primary--enabled: url('#{$icons-path}system/light/logout.svg#on-primary--enabled'); - --icon__system_logout_on-primary--hover: url('#{$icons-path}system/light/logout.svg#on-primary--hover'); - --icon__system_logout_on-primary--active: url('#{$icons-path}system/light/logout.svg#on-primary--active'); - --icon__system_logout_on-primary--disabled: url('#{$icons-path}system/light/logout.svg#on-primary--disabled'); - --icon__system_logout_on-disabled--enabled: url('#{$icons-path}system/light/logout.svg#on-disabled--enabled'); - --icon__system_logout_on-message--enabled: url('#{$icons-path}system/light/logout.svg#on-message--enabled'); - --icon__system_logout_on-elevation--enabled: url('#{$icons-path}system/light/logout.svg#on-elevation--enabled'); - --icon__system_logout_primary--enabled: url('#{$icons-path}system/light/logout.svg#primary--enabled'); - --icon__system_logout_primary--hover: url('#{$icons-path}system/light/logout.svg#primary--hover'); - --icon__system_logout_primary--active: url('#{$icons-path}system/light/logout.svg#primary--active'); - --icon__system_logout_primary--disabled: url('#{$icons-path}system/light/logout.svg#primary--disabled'); - --icon__system_logout_error--enabled: url('#{$icons-path}system/light/logout.svg#error--enabled'); - --icon__system_logout_error-actionable--enabled: url('#{$icons-path}system/light/logout.svg#error-actionable--enabled'); - --icon__system_logout_error-actionable--hover: url('#{$icons-path}system/light/logout.svg#error-actionable--hover'); - --icon__system_logout_error-actionable--active: url('#{$icons-path}system/light/logout.svg#error-actionable--active'); - --icon__system_logout_error-actionable--disabled: url('#{$icons-path}system/light/logout.svg#error-actionable--disabled'); - --icon__system_logout_warning--enabled: url('#{$icons-path}system/light/logout.svg#warning--enabled'); - --icon__system_logout_success--enabled: url('#{$icons-path}system/light/logout.svg#success--enabled'); - --icon__system_logout_neutral--enabled: url('#{$icons-path}system/light/logout.svg#neutral--enabled'); - --icon__system_logout_neutral--hover: url('#{$icons-path}system/light/logout.svg#neutral--hover'); - --icon__system_logout_neutral--active: url('#{$icons-path}system/light/logout.svg#neutral--active'); - --icon__system_logout_neutral--disabled: url('#{$icons-path}system/light/logout.svg#neutral--disabled'); - --icon__system_logout_highlighted--enabled: url('#{$icons-path}system/light/logout.svg#highlighted--enabled'); - --icon__system_logout_bright--enabled: url('#{$icons-path}system/light/logout.svg#bright--enabled'); - --icon__system_log-out_on-surface--enabled: url('#{$icons-path}system/light/log-out.svg#on-surface--enabled'); - --icon__system_log-out_on-surface--hover: url('#{$icons-path}system/light/log-out.svg#on-surface--hover'); - --icon__system_log-out_on-surface--active: url('#{$icons-path}system/light/log-out.svg#on-surface--active'); - --icon__system_log-out_on-surface--disabled: url('#{$icons-path}system/light/log-out.svg#on-surface--disabled'); - --icon__system_log-out_on-primary--enabled: url('#{$icons-path}system/light/log-out.svg#on-primary--enabled'); - --icon__system_log-out_on-primary--hover: url('#{$icons-path}system/light/log-out.svg#on-primary--hover'); - --icon__system_log-out_on-primary--active: url('#{$icons-path}system/light/log-out.svg#on-primary--active'); - --icon__system_log-out_on-primary--disabled: url('#{$icons-path}system/light/log-out.svg#on-primary--disabled'); - --icon__system_log-out_on-disabled--enabled: url('#{$icons-path}system/light/log-out.svg#on-disabled--enabled'); - --icon__system_log-out_on-message--enabled: url('#{$icons-path}system/light/log-out.svg#on-message--enabled'); - --icon__system_log-out_on-elevation--enabled: url('#{$icons-path}system/light/log-out.svg#on-elevation--enabled'); - --icon__system_log-out_primary--enabled: url('#{$icons-path}system/light/log-out.svg#primary--enabled'); - --icon__system_log-out_primary--hover: url('#{$icons-path}system/light/log-out.svg#primary--hover'); - --icon__system_log-out_primary--active: url('#{$icons-path}system/light/log-out.svg#primary--active'); - --icon__system_log-out_primary--disabled: url('#{$icons-path}system/light/log-out.svg#primary--disabled'); - --icon__system_log-out_error--enabled: url('#{$icons-path}system/light/log-out.svg#error--enabled'); - --icon__system_log-out_error-actionable--enabled: url('#{$icons-path}system/light/log-out.svg#error-actionable--enabled'); - --icon__system_log-out_error-actionable--hover: url('#{$icons-path}system/light/log-out.svg#error-actionable--hover'); - --icon__system_log-out_error-actionable--active: url('#{$icons-path}system/light/log-out.svg#error-actionable--active'); - --icon__system_log-out_error-actionable--disabled: url('#{$icons-path}system/light/log-out.svg#error-actionable--disabled'); - --icon__system_log-out_warning--enabled: url('#{$icons-path}system/light/log-out.svg#warning--enabled'); - --icon__system_log-out_success--enabled: url('#{$icons-path}system/light/log-out.svg#success--enabled'); - --icon__system_log-out_neutral--enabled: url('#{$icons-path}system/light/log-out.svg#neutral--enabled'); - --icon__system_log-out_neutral--hover: url('#{$icons-path}system/light/log-out.svg#neutral--hover'); - --icon__system_log-out_neutral--active: url('#{$icons-path}system/light/log-out.svg#neutral--active'); - --icon__system_log-out_neutral--disabled: url('#{$icons-path}system/light/log-out.svg#neutral--disabled'); - --icon__system_log-out_highlighted--enabled: url('#{$icons-path}system/light/log-out.svg#highlighted--enabled'); - --icon__system_log-out_bright--enabled: url('#{$icons-path}system/light/log-out.svg#bright--enabled'); - --icon__system_lock_on-surface--enabled: url('#{$icons-path}system/light/lock.svg#on-surface--enabled'); - --icon__system_lock_on-surface--hover: url('#{$icons-path}system/light/lock.svg#on-surface--hover'); - --icon__system_lock_on-surface--active: url('#{$icons-path}system/light/lock.svg#on-surface--active'); - --icon__system_lock_on-surface--disabled: url('#{$icons-path}system/light/lock.svg#on-surface--disabled'); - --icon__system_lock_on-primary--enabled: url('#{$icons-path}system/light/lock.svg#on-primary--enabled'); - --icon__system_lock_on-primary--hover: url('#{$icons-path}system/light/lock.svg#on-primary--hover'); - --icon__system_lock_on-primary--active: url('#{$icons-path}system/light/lock.svg#on-primary--active'); - --icon__system_lock_on-primary--disabled: url('#{$icons-path}system/light/lock.svg#on-primary--disabled'); - --icon__system_lock_on-disabled--enabled: url('#{$icons-path}system/light/lock.svg#on-disabled--enabled'); - --icon__system_lock_on-message--enabled: url('#{$icons-path}system/light/lock.svg#on-message--enabled'); - --icon__system_lock_on-elevation--enabled: url('#{$icons-path}system/light/lock.svg#on-elevation--enabled'); - --icon__system_lock_primary--enabled: url('#{$icons-path}system/light/lock.svg#primary--enabled'); - --icon__system_lock_primary--hover: url('#{$icons-path}system/light/lock.svg#primary--hover'); - --icon__system_lock_primary--active: url('#{$icons-path}system/light/lock.svg#primary--active'); - --icon__system_lock_primary--disabled: url('#{$icons-path}system/light/lock.svg#primary--disabled'); - --icon__system_lock_error--enabled: url('#{$icons-path}system/light/lock.svg#error--enabled'); - --icon__system_lock_error-actionable--enabled: url('#{$icons-path}system/light/lock.svg#error-actionable--enabled'); - --icon__system_lock_error-actionable--hover: url('#{$icons-path}system/light/lock.svg#error-actionable--hover'); - --icon__system_lock_error-actionable--active: url('#{$icons-path}system/light/lock.svg#error-actionable--active'); - --icon__system_lock_error-actionable--disabled: url('#{$icons-path}system/light/lock.svg#error-actionable--disabled'); - --icon__system_lock_warning--enabled: url('#{$icons-path}system/light/lock.svg#warning--enabled'); - --icon__system_lock_success--enabled: url('#{$icons-path}system/light/lock.svg#success--enabled'); - --icon__system_lock_neutral--enabled: url('#{$icons-path}system/light/lock.svg#neutral--enabled'); - --icon__system_lock_neutral--hover: url('#{$icons-path}system/light/lock.svg#neutral--hover'); - --icon__system_lock_neutral--active: url('#{$icons-path}system/light/lock.svg#neutral--active'); - --icon__system_lock_neutral--disabled: url('#{$icons-path}system/light/lock.svg#neutral--disabled'); - --icon__system_lock_highlighted--enabled: url('#{$icons-path}system/light/lock.svg#highlighted--enabled'); - --icon__system_lock_bright--enabled: url('#{$icons-path}system/light/lock.svg#bright--enabled'); - --icon__system_loading_on-surface--enabled: url('#{$icons-path}system/light/loading.svg#on-surface--enabled'); - --icon__system_loading_on-surface--hover: url('#{$icons-path}system/light/loading.svg#on-surface--hover'); - --icon__system_loading_on-surface--active: url('#{$icons-path}system/light/loading.svg#on-surface--active'); - --icon__system_loading_on-surface--disabled: url('#{$icons-path}system/light/loading.svg#on-surface--disabled'); - --icon__system_loading_on-primary--enabled: url('#{$icons-path}system/light/loading.svg#on-primary--enabled'); - --icon__system_loading_on-primary--hover: url('#{$icons-path}system/light/loading.svg#on-primary--hover'); - --icon__system_loading_on-primary--active: url('#{$icons-path}system/light/loading.svg#on-primary--active'); - --icon__system_loading_on-primary--disabled: url('#{$icons-path}system/light/loading.svg#on-primary--disabled'); - --icon__system_loading_on-disabled--enabled: url('#{$icons-path}system/light/loading.svg#on-disabled--enabled'); - --icon__system_loading_on-message--enabled: url('#{$icons-path}system/light/loading.svg#on-message--enabled'); - --icon__system_loading_on-elevation--enabled: url('#{$icons-path}system/light/loading.svg#on-elevation--enabled'); - --icon__system_loading_primary--enabled: url('#{$icons-path}system/light/loading.svg#primary--enabled'); - --icon__system_loading_primary--hover: url('#{$icons-path}system/light/loading.svg#primary--hover'); - --icon__system_loading_primary--active: url('#{$icons-path}system/light/loading.svg#primary--active'); - --icon__system_loading_primary--disabled: url('#{$icons-path}system/light/loading.svg#primary--disabled'); - --icon__system_loading_error--enabled: url('#{$icons-path}system/light/loading.svg#error--enabled'); - --icon__system_loading_error-actionable--enabled: url('#{$icons-path}system/light/loading.svg#error-actionable--enabled'); - --icon__system_loading_error-actionable--hover: url('#{$icons-path}system/light/loading.svg#error-actionable--hover'); - --icon__system_loading_error-actionable--active: url('#{$icons-path}system/light/loading.svg#error-actionable--active'); - --icon__system_loading_error-actionable--disabled: url('#{$icons-path}system/light/loading.svg#error-actionable--disabled'); - --icon__system_loading_warning--enabled: url('#{$icons-path}system/light/loading.svg#warning--enabled'); - --icon__system_loading_success--enabled: url('#{$icons-path}system/light/loading.svg#success--enabled'); - --icon__system_loading_neutral--enabled: url('#{$icons-path}system/light/loading.svg#neutral--enabled'); - --icon__system_loading_neutral--hover: url('#{$icons-path}system/light/loading.svg#neutral--hover'); - --icon__system_loading_neutral--active: url('#{$icons-path}system/light/loading.svg#neutral--active'); - --icon__system_loading_neutral--disabled: url('#{$icons-path}system/light/loading.svg#neutral--disabled'); - --icon__system_loading_highlighted--enabled: url('#{$icons-path}system/light/loading.svg#highlighted--enabled'); - --icon__system_loading_bright--enabled: url('#{$icons-path}system/light/loading.svg#bright--enabled'); - --icon__system_list_on-surface--enabled: url('#{$icons-path}system/light/list.svg#on-surface--enabled'); - --icon__system_list_on-surface--hover: url('#{$icons-path}system/light/list.svg#on-surface--hover'); - --icon__system_list_on-surface--active: url('#{$icons-path}system/light/list.svg#on-surface--active'); - --icon__system_list_on-surface--disabled: url('#{$icons-path}system/light/list.svg#on-surface--disabled'); - --icon__system_list_on-primary--enabled: url('#{$icons-path}system/light/list.svg#on-primary--enabled'); - --icon__system_list_on-primary--hover: url('#{$icons-path}system/light/list.svg#on-primary--hover'); - --icon__system_list_on-primary--active: url('#{$icons-path}system/light/list.svg#on-primary--active'); - --icon__system_list_on-primary--disabled: url('#{$icons-path}system/light/list.svg#on-primary--disabled'); - --icon__system_list_on-disabled--enabled: url('#{$icons-path}system/light/list.svg#on-disabled--enabled'); - --icon__system_list_on-message--enabled: url('#{$icons-path}system/light/list.svg#on-message--enabled'); - --icon__system_list_on-elevation--enabled: url('#{$icons-path}system/light/list.svg#on-elevation--enabled'); - --icon__system_list_primary--enabled: url('#{$icons-path}system/light/list.svg#primary--enabled'); - --icon__system_list_primary--hover: url('#{$icons-path}system/light/list.svg#primary--hover'); - --icon__system_list_primary--active: url('#{$icons-path}system/light/list.svg#primary--active'); - --icon__system_list_primary--disabled: url('#{$icons-path}system/light/list.svg#primary--disabled'); - --icon__system_list_error--enabled: url('#{$icons-path}system/light/list.svg#error--enabled'); - --icon__system_list_error-actionable--enabled: url('#{$icons-path}system/light/list.svg#error-actionable--enabled'); - --icon__system_list_error-actionable--hover: url('#{$icons-path}system/light/list.svg#error-actionable--hover'); - --icon__system_list_error-actionable--active: url('#{$icons-path}system/light/list.svg#error-actionable--active'); - --icon__system_list_error-actionable--disabled: url('#{$icons-path}system/light/list.svg#error-actionable--disabled'); - --icon__system_list_warning--enabled: url('#{$icons-path}system/light/list.svg#warning--enabled'); - --icon__system_list_success--enabled: url('#{$icons-path}system/light/list.svg#success--enabled'); - --icon__system_list_neutral--enabled: url('#{$icons-path}system/light/list.svg#neutral--enabled'); - --icon__system_list_neutral--hover: url('#{$icons-path}system/light/list.svg#neutral--hover'); - --icon__system_list_neutral--active: url('#{$icons-path}system/light/list.svg#neutral--active'); - --icon__system_list_neutral--disabled: url('#{$icons-path}system/light/list.svg#neutral--disabled'); - --icon__system_list_highlighted--enabled: url('#{$icons-path}system/light/list.svg#highlighted--enabled'); - --icon__system_list_bright--enabled: url('#{$icons-path}system/light/list.svg#bright--enabled'); - --icon__system_link_on-surface--enabled: url('#{$icons-path}system/light/link.svg#on-surface--enabled'); - --icon__system_link_on-surface--hover: url('#{$icons-path}system/light/link.svg#on-surface--hover'); - --icon__system_link_on-surface--active: url('#{$icons-path}system/light/link.svg#on-surface--active'); - --icon__system_link_on-surface--disabled: url('#{$icons-path}system/light/link.svg#on-surface--disabled'); - --icon__system_link_on-primary--enabled: url('#{$icons-path}system/light/link.svg#on-primary--enabled'); - --icon__system_link_on-primary--hover: url('#{$icons-path}system/light/link.svg#on-primary--hover'); - --icon__system_link_on-primary--active: url('#{$icons-path}system/light/link.svg#on-primary--active'); - --icon__system_link_on-primary--disabled: url('#{$icons-path}system/light/link.svg#on-primary--disabled'); - --icon__system_link_on-disabled--enabled: url('#{$icons-path}system/light/link.svg#on-disabled--enabled'); - --icon__system_link_on-message--enabled: url('#{$icons-path}system/light/link.svg#on-message--enabled'); - --icon__system_link_on-elevation--enabled: url('#{$icons-path}system/light/link.svg#on-elevation--enabled'); - --icon__system_link_primary--enabled: url('#{$icons-path}system/light/link.svg#primary--enabled'); - --icon__system_link_primary--hover: url('#{$icons-path}system/light/link.svg#primary--hover'); - --icon__system_link_primary--active: url('#{$icons-path}system/light/link.svg#primary--active'); - --icon__system_link_primary--disabled: url('#{$icons-path}system/light/link.svg#primary--disabled'); - --icon__system_link_error--enabled: url('#{$icons-path}system/light/link.svg#error--enabled'); - --icon__system_link_error-actionable--enabled: url('#{$icons-path}system/light/link.svg#error-actionable--enabled'); - --icon__system_link_error-actionable--hover: url('#{$icons-path}system/light/link.svg#error-actionable--hover'); - --icon__system_link_error-actionable--active: url('#{$icons-path}system/light/link.svg#error-actionable--active'); - --icon__system_link_error-actionable--disabled: url('#{$icons-path}system/light/link.svg#error-actionable--disabled'); - --icon__system_link_warning--enabled: url('#{$icons-path}system/light/link.svg#warning--enabled'); - --icon__system_link_success--enabled: url('#{$icons-path}system/light/link.svg#success--enabled'); - --icon__system_link_neutral--enabled: url('#{$icons-path}system/light/link.svg#neutral--enabled'); - --icon__system_link_neutral--hover: url('#{$icons-path}system/light/link.svg#neutral--hover'); - --icon__system_link_neutral--active: url('#{$icons-path}system/light/link.svg#neutral--active'); - --icon__system_link_neutral--disabled: url('#{$icons-path}system/light/link.svg#neutral--disabled'); - --icon__system_link_highlighted--enabled: url('#{$icons-path}system/light/link.svg#highlighted--enabled'); - --icon__system_link_bright--enabled: url('#{$icons-path}system/light/link.svg#bright--enabled'); - --icon__system_link-off_on-surface--enabled: url('#{$icons-path}system/light/link-off.svg#on-surface--enabled'); - --icon__system_link-off_on-surface--hover: url('#{$icons-path}system/light/link-off.svg#on-surface--hover'); - --icon__system_link-off_on-surface--active: url('#{$icons-path}system/light/link-off.svg#on-surface--active'); - --icon__system_link-off_on-surface--disabled: url('#{$icons-path}system/light/link-off.svg#on-surface--disabled'); - --icon__system_link-off_on-primary--enabled: url('#{$icons-path}system/light/link-off.svg#on-primary--enabled'); - --icon__system_link-off_on-primary--hover: url('#{$icons-path}system/light/link-off.svg#on-primary--hover'); - --icon__system_link-off_on-primary--active: url('#{$icons-path}system/light/link-off.svg#on-primary--active'); - --icon__system_link-off_on-primary--disabled: url('#{$icons-path}system/light/link-off.svg#on-primary--disabled'); - --icon__system_link-off_on-disabled--enabled: url('#{$icons-path}system/light/link-off.svg#on-disabled--enabled'); - --icon__system_link-off_on-message--enabled: url('#{$icons-path}system/light/link-off.svg#on-message--enabled'); - --icon__system_link-off_on-elevation--enabled: url('#{$icons-path}system/light/link-off.svg#on-elevation--enabled'); - --icon__system_link-off_primary--enabled: url('#{$icons-path}system/light/link-off.svg#primary--enabled'); - --icon__system_link-off_primary--hover: url('#{$icons-path}system/light/link-off.svg#primary--hover'); - --icon__system_link-off_primary--active: url('#{$icons-path}system/light/link-off.svg#primary--active'); - --icon__system_link-off_primary--disabled: url('#{$icons-path}system/light/link-off.svg#primary--disabled'); - --icon__system_link-off_error--enabled: url('#{$icons-path}system/light/link-off.svg#error--enabled'); - --icon__system_link-off_error-actionable--enabled: url('#{$icons-path}system/light/link-off.svg#error-actionable--enabled'); - --icon__system_link-off_error-actionable--hover: url('#{$icons-path}system/light/link-off.svg#error-actionable--hover'); - --icon__system_link-off_error-actionable--active: url('#{$icons-path}system/light/link-off.svg#error-actionable--active'); - --icon__system_link-off_error-actionable--disabled: url('#{$icons-path}system/light/link-off.svg#error-actionable--disabled'); - --icon__system_link-off_warning--enabled: url('#{$icons-path}system/light/link-off.svg#warning--enabled'); - --icon__system_link-off_success--enabled: url('#{$icons-path}system/light/link-off.svg#success--enabled'); - --icon__system_link-off_neutral--enabled: url('#{$icons-path}system/light/link-off.svg#neutral--enabled'); - --icon__system_link-off_neutral--hover: url('#{$icons-path}system/light/link-off.svg#neutral--hover'); - --icon__system_link-off_neutral--active: url('#{$icons-path}system/light/link-off.svg#neutral--active'); - --icon__system_link-off_neutral--disabled: url('#{$icons-path}system/light/link-off.svg#neutral--disabled'); - --icon__system_link-off_highlighted--enabled: url('#{$icons-path}system/light/link-off.svg#highlighted--enabled'); - --icon__system_link-off_bright--enabled: url('#{$icons-path}system/light/link-off.svg#bright--enabled'); - --icon__system_left-panel-open_on-surface--enabled: url('#{$icons-path}system/light/left-panel-open.svg#on-surface--enabled'); - --icon__system_left-panel-open_on-surface--hover: url('#{$icons-path}system/light/left-panel-open.svg#on-surface--hover'); - --icon__system_left-panel-open_on-surface--active: url('#{$icons-path}system/light/left-panel-open.svg#on-surface--active'); - --icon__system_left-panel-open_on-surface--disabled: url('#{$icons-path}system/light/left-panel-open.svg#on-surface--disabled'); - --icon__system_left-panel-open_on-primary--enabled: url('#{$icons-path}system/light/left-panel-open.svg#on-primary--enabled'); - --icon__system_left-panel-open_on-primary--hover: url('#{$icons-path}system/light/left-panel-open.svg#on-primary--hover'); - --icon__system_left-panel-open_on-primary--active: url('#{$icons-path}system/light/left-panel-open.svg#on-primary--active'); - --icon__system_left-panel-open_on-primary--disabled: url('#{$icons-path}system/light/left-panel-open.svg#on-primary--disabled'); - --icon__system_left-panel-open_on-disabled--enabled: url('#{$icons-path}system/light/left-panel-open.svg#on-disabled--enabled'); - --icon__system_left-panel-open_on-message--enabled: url('#{$icons-path}system/light/left-panel-open.svg#on-message--enabled'); - --icon__system_left-panel-open_on-elevation--enabled: url('#{$icons-path}system/light/left-panel-open.svg#on-elevation--enabled'); - --icon__system_left-panel-open_primary--enabled: url('#{$icons-path}system/light/left-panel-open.svg#primary--enabled'); - --icon__system_left-panel-open_primary--hover: url('#{$icons-path}system/light/left-panel-open.svg#primary--hover'); - --icon__system_left-panel-open_primary--active: url('#{$icons-path}system/light/left-panel-open.svg#primary--active'); - --icon__system_left-panel-open_primary--disabled: url('#{$icons-path}system/light/left-panel-open.svg#primary--disabled'); - --icon__system_left-panel-open_error--enabled: url('#{$icons-path}system/light/left-panel-open.svg#error--enabled'); - --icon__system_left-panel-open_error-actionable--enabled: url('#{$icons-path}system/light/left-panel-open.svg#error-actionable--enabled'); - --icon__system_left-panel-open_error-actionable--hover: url('#{$icons-path}system/light/left-panel-open.svg#error-actionable--hover'); - --icon__system_left-panel-open_error-actionable--active: url('#{$icons-path}system/light/left-panel-open.svg#error-actionable--active'); - --icon__system_left-panel-open_error-actionable--disabled: url('#{$icons-path}system/light/left-panel-open.svg#error-actionable--disabled'); - --icon__system_left-panel-open_warning--enabled: url('#{$icons-path}system/light/left-panel-open.svg#warning--enabled'); - --icon__system_left-panel-open_success--enabled: url('#{$icons-path}system/light/left-panel-open.svg#success--enabled'); - --icon__system_left-panel-open_neutral--enabled: url('#{$icons-path}system/light/left-panel-open.svg#neutral--enabled'); - --icon__system_left-panel-open_neutral--hover: url('#{$icons-path}system/light/left-panel-open.svg#neutral--hover'); - --icon__system_left-panel-open_neutral--active: url('#{$icons-path}system/light/left-panel-open.svg#neutral--active'); - --icon__system_left-panel-open_neutral--disabled: url('#{$icons-path}system/light/left-panel-open.svg#neutral--disabled'); - --icon__system_left-panel-open_highlighted--enabled: url('#{$icons-path}system/light/left-panel-open.svg#highlighted--enabled'); - --icon__system_left-panel-open_bright--enabled: url('#{$icons-path}system/light/left-panel-open.svg#bright--enabled'); - --icon__system_launch_on-surface--enabled: url('#{$icons-path}system/light/launch.svg#on-surface--enabled'); - --icon__system_launch_on-surface--hover: url('#{$icons-path}system/light/launch.svg#on-surface--hover'); - --icon__system_launch_on-surface--active: url('#{$icons-path}system/light/launch.svg#on-surface--active'); - --icon__system_launch_on-surface--disabled: url('#{$icons-path}system/light/launch.svg#on-surface--disabled'); - --icon__system_launch_on-primary--enabled: url('#{$icons-path}system/light/launch.svg#on-primary--enabled'); - --icon__system_launch_on-primary--hover: url('#{$icons-path}system/light/launch.svg#on-primary--hover'); - --icon__system_launch_on-primary--active: url('#{$icons-path}system/light/launch.svg#on-primary--active'); - --icon__system_launch_on-primary--disabled: url('#{$icons-path}system/light/launch.svg#on-primary--disabled'); - --icon__system_launch_on-disabled--enabled: url('#{$icons-path}system/light/launch.svg#on-disabled--enabled'); - --icon__system_launch_on-message--enabled: url('#{$icons-path}system/light/launch.svg#on-message--enabled'); - --icon__system_launch_on-elevation--enabled: url('#{$icons-path}system/light/launch.svg#on-elevation--enabled'); - --icon__system_launch_primary--enabled: url('#{$icons-path}system/light/launch.svg#primary--enabled'); - --icon__system_launch_primary--hover: url('#{$icons-path}system/light/launch.svg#primary--hover'); - --icon__system_launch_primary--active: url('#{$icons-path}system/light/launch.svg#primary--active'); - --icon__system_launch_primary--disabled: url('#{$icons-path}system/light/launch.svg#primary--disabled'); - --icon__system_launch_error--enabled: url('#{$icons-path}system/light/launch.svg#error--enabled'); - --icon__system_launch_error-actionable--enabled: url('#{$icons-path}system/light/launch.svg#error-actionable--enabled'); - --icon__system_launch_error-actionable--hover: url('#{$icons-path}system/light/launch.svg#error-actionable--hover'); - --icon__system_launch_error-actionable--active: url('#{$icons-path}system/light/launch.svg#error-actionable--active'); - --icon__system_launch_error-actionable--disabled: url('#{$icons-path}system/light/launch.svg#error-actionable--disabled'); - --icon__system_launch_warning--enabled: url('#{$icons-path}system/light/launch.svg#warning--enabled'); - --icon__system_launch_success--enabled: url('#{$icons-path}system/light/launch.svg#success--enabled'); - --icon__system_launch_neutral--enabled: url('#{$icons-path}system/light/launch.svg#neutral--enabled'); - --icon__system_launch_neutral--hover: url('#{$icons-path}system/light/launch.svg#neutral--hover'); - --icon__system_launch_neutral--active: url('#{$icons-path}system/light/launch.svg#neutral--active'); - --icon__system_launch_neutral--disabled: url('#{$icons-path}system/light/launch.svg#neutral--disabled'); - --icon__system_launch_highlighted--enabled: url('#{$icons-path}system/light/launch.svg#highlighted--enabled'); - --icon__system_launch_bright--enabled: url('#{$icons-path}system/light/launch.svg#bright--enabled'); - --icon__system_language_on-surface--enabled: url('#{$icons-path}system/light/language.svg#on-surface--enabled'); - --icon__system_language_on-surface--hover: url('#{$icons-path}system/light/language.svg#on-surface--hover'); - --icon__system_language_on-surface--active: url('#{$icons-path}system/light/language.svg#on-surface--active'); - --icon__system_language_on-surface--disabled: url('#{$icons-path}system/light/language.svg#on-surface--disabled'); - --icon__system_language_on-primary--enabled: url('#{$icons-path}system/light/language.svg#on-primary--enabled'); - --icon__system_language_on-primary--hover: url('#{$icons-path}system/light/language.svg#on-primary--hover'); - --icon__system_language_on-primary--active: url('#{$icons-path}system/light/language.svg#on-primary--active'); - --icon__system_language_on-primary--disabled: url('#{$icons-path}system/light/language.svg#on-primary--disabled'); - --icon__system_language_on-disabled--enabled: url('#{$icons-path}system/light/language.svg#on-disabled--enabled'); - --icon__system_language_on-message--enabled: url('#{$icons-path}system/light/language.svg#on-message--enabled'); - --icon__system_language_on-elevation--enabled: url('#{$icons-path}system/light/language.svg#on-elevation--enabled'); - --icon__system_language_primary--enabled: url('#{$icons-path}system/light/language.svg#primary--enabled'); - --icon__system_language_primary--hover: url('#{$icons-path}system/light/language.svg#primary--hover'); - --icon__system_language_primary--active: url('#{$icons-path}system/light/language.svg#primary--active'); - --icon__system_language_primary--disabled: url('#{$icons-path}system/light/language.svg#primary--disabled'); - --icon__system_language_error--enabled: url('#{$icons-path}system/light/language.svg#error--enabled'); - --icon__system_language_error-actionable--enabled: url('#{$icons-path}system/light/language.svg#error-actionable--enabled'); - --icon__system_language_error-actionable--hover: url('#{$icons-path}system/light/language.svg#error-actionable--hover'); - --icon__system_language_error-actionable--active: url('#{$icons-path}system/light/language.svg#error-actionable--active'); - --icon__system_language_error-actionable--disabled: url('#{$icons-path}system/light/language.svg#error-actionable--disabled'); - --icon__system_language_warning--enabled: url('#{$icons-path}system/light/language.svg#warning--enabled'); - --icon__system_language_success--enabled: url('#{$icons-path}system/light/language.svg#success--enabled'); - --icon__system_language_neutral--enabled: url('#{$icons-path}system/light/language.svg#neutral--enabled'); - --icon__system_language_neutral--hover: url('#{$icons-path}system/light/language.svg#neutral--hover'); - --icon__system_language_neutral--active: url('#{$icons-path}system/light/language.svg#neutral--active'); - --icon__system_language_neutral--disabled: url('#{$icons-path}system/light/language.svg#neutral--disabled'); - --icon__system_language_highlighted--enabled: url('#{$icons-path}system/light/language.svg#highlighted--enabled'); - --icon__system_language_bright--enabled: url('#{$icons-path}system/light/language.svg#bright--enabled'); - --icon__system_key_on-surface--enabled: url('#{$icons-path}system/light/key.svg#on-surface--enabled'); - --icon__system_key_on-surface--hover: url('#{$icons-path}system/light/key.svg#on-surface--hover'); - --icon__system_key_on-surface--active: url('#{$icons-path}system/light/key.svg#on-surface--active'); - --icon__system_key_on-surface--disabled: url('#{$icons-path}system/light/key.svg#on-surface--disabled'); - --icon__system_key_on-primary--enabled: url('#{$icons-path}system/light/key.svg#on-primary--enabled'); - --icon__system_key_on-primary--hover: url('#{$icons-path}system/light/key.svg#on-primary--hover'); - --icon__system_key_on-primary--active: url('#{$icons-path}system/light/key.svg#on-primary--active'); - --icon__system_key_on-primary--disabled: url('#{$icons-path}system/light/key.svg#on-primary--disabled'); - --icon__system_key_on-disabled--enabled: url('#{$icons-path}system/light/key.svg#on-disabled--enabled'); - --icon__system_key_on-message--enabled: url('#{$icons-path}system/light/key.svg#on-message--enabled'); - --icon__system_key_on-elevation--enabled: url('#{$icons-path}system/light/key.svg#on-elevation--enabled'); - --icon__system_key_primary--enabled: url('#{$icons-path}system/light/key.svg#primary--enabled'); - --icon__system_key_primary--hover: url('#{$icons-path}system/light/key.svg#primary--hover'); - --icon__system_key_primary--active: url('#{$icons-path}system/light/key.svg#primary--active'); - --icon__system_key_primary--disabled: url('#{$icons-path}system/light/key.svg#primary--disabled'); - --icon__system_key_error--enabled: url('#{$icons-path}system/light/key.svg#error--enabled'); - --icon__system_key_error-actionable--enabled: url('#{$icons-path}system/light/key.svg#error-actionable--enabled'); - --icon__system_key_error-actionable--hover: url('#{$icons-path}system/light/key.svg#error-actionable--hover'); - --icon__system_key_error-actionable--active: url('#{$icons-path}system/light/key.svg#error-actionable--active'); - --icon__system_key_error-actionable--disabled: url('#{$icons-path}system/light/key.svg#error-actionable--disabled'); - --icon__system_key_warning--enabled: url('#{$icons-path}system/light/key.svg#warning--enabled'); - --icon__system_key_success--enabled: url('#{$icons-path}system/light/key.svg#success--enabled'); - --icon__system_key_neutral--enabled: url('#{$icons-path}system/light/key.svg#neutral--enabled'); - --icon__system_key_neutral--hover: url('#{$icons-path}system/light/key.svg#neutral--hover'); - --icon__system_key_neutral--active: url('#{$icons-path}system/light/key.svg#neutral--active'); - --icon__system_key_neutral--disabled: url('#{$icons-path}system/light/key.svg#neutral--disabled'); - --icon__system_key_highlighted--enabled: url('#{$icons-path}system/light/key.svg#highlighted--enabled'); - --icon__system_key_bright--enabled: url('#{$icons-path}system/light/key.svg#bright--enabled'); - --icon__system_information_on-surface--enabled: url('#{$icons-path}system/light/information.svg#on-surface--enabled'); - --icon__system_information_on-surface--hover: url('#{$icons-path}system/light/information.svg#on-surface--hover'); - --icon__system_information_on-surface--active: url('#{$icons-path}system/light/information.svg#on-surface--active'); - --icon__system_information_on-surface--disabled: url('#{$icons-path}system/light/information.svg#on-surface--disabled'); - --icon__system_information_on-primary--enabled: url('#{$icons-path}system/light/information.svg#on-primary--enabled'); - --icon__system_information_on-primary--hover: url('#{$icons-path}system/light/information.svg#on-primary--hover'); - --icon__system_information_on-primary--active: url('#{$icons-path}system/light/information.svg#on-primary--active'); - --icon__system_information_on-primary--disabled: url('#{$icons-path}system/light/information.svg#on-primary--disabled'); - --icon__system_information_on-disabled--enabled: url('#{$icons-path}system/light/information.svg#on-disabled--enabled'); - --icon__system_information_on-message--enabled: url('#{$icons-path}system/light/information.svg#on-message--enabled'); - --icon__system_information_on-elevation--enabled: url('#{$icons-path}system/light/information.svg#on-elevation--enabled'); - --icon__system_information_primary--enabled: url('#{$icons-path}system/light/information.svg#primary--enabled'); - --icon__system_information_primary--hover: url('#{$icons-path}system/light/information.svg#primary--hover'); - --icon__system_information_primary--active: url('#{$icons-path}system/light/information.svg#primary--active'); - --icon__system_information_primary--disabled: url('#{$icons-path}system/light/information.svg#primary--disabled'); - --icon__system_information_error--enabled: url('#{$icons-path}system/light/information.svg#error--enabled'); - --icon__system_information_error-actionable--enabled: url('#{$icons-path}system/light/information.svg#error-actionable--enabled'); - --icon__system_information_error-actionable--hover: url('#{$icons-path}system/light/information.svg#error-actionable--hover'); - --icon__system_information_error-actionable--active: url('#{$icons-path}system/light/information.svg#error-actionable--active'); - --icon__system_information_error-actionable--disabled: url('#{$icons-path}system/light/information.svg#error-actionable--disabled'); - --icon__system_information_warning--enabled: url('#{$icons-path}system/light/information.svg#warning--enabled'); - --icon__system_information_success--enabled: url('#{$icons-path}system/light/information.svg#success--enabled'); - --icon__system_information_neutral--enabled: url('#{$icons-path}system/light/information.svg#neutral--enabled'); - --icon__system_information_neutral--hover: url('#{$icons-path}system/light/information.svg#neutral--hover'); - --icon__system_information_neutral--active: url('#{$icons-path}system/light/information.svg#neutral--active'); - --icon__system_information_neutral--disabled: url('#{$icons-path}system/light/information.svg#neutral--disabled'); - --icon__system_information_highlighted--enabled: url('#{$icons-path}system/light/information.svg#highlighted--enabled'); - --icon__system_information_bright--enabled: url('#{$icons-path}system/light/information.svg#bright--enabled'); - --icon__system_home_on-surface--enabled: url('#{$icons-path}system/light/home.svg#on-surface--enabled'); - --icon__system_home_on-surface--hover: url('#{$icons-path}system/light/home.svg#on-surface--hover'); - --icon__system_home_on-surface--active: url('#{$icons-path}system/light/home.svg#on-surface--active'); - --icon__system_home_on-surface--disabled: url('#{$icons-path}system/light/home.svg#on-surface--disabled'); - --icon__system_home_on-primary--enabled: url('#{$icons-path}system/light/home.svg#on-primary--enabled'); - --icon__system_home_on-primary--hover: url('#{$icons-path}system/light/home.svg#on-primary--hover'); - --icon__system_home_on-primary--active: url('#{$icons-path}system/light/home.svg#on-primary--active'); - --icon__system_home_on-primary--disabled: url('#{$icons-path}system/light/home.svg#on-primary--disabled'); - --icon__system_home_on-disabled--enabled: url('#{$icons-path}system/light/home.svg#on-disabled--enabled'); - --icon__system_home_on-message--enabled: url('#{$icons-path}system/light/home.svg#on-message--enabled'); - --icon__system_home_on-elevation--enabled: url('#{$icons-path}system/light/home.svg#on-elevation--enabled'); - --icon__system_home_primary--enabled: url('#{$icons-path}system/light/home.svg#primary--enabled'); - --icon__system_home_primary--hover: url('#{$icons-path}system/light/home.svg#primary--hover'); - --icon__system_home_primary--active: url('#{$icons-path}system/light/home.svg#primary--active'); - --icon__system_home_primary--disabled: url('#{$icons-path}system/light/home.svg#primary--disabled'); - --icon__system_home_error--enabled: url('#{$icons-path}system/light/home.svg#error--enabled'); - --icon__system_home_error-actionable--enabled: url('#{$icons-path}system/light/home.svg#error-actionable--enabled'); - --icon__system_home_error-actionable--hover: url('#{$icons-path}system/light/home.svg#error-actionable--hover'); - --icon__system_home_error-actionable--active: url('#{$icons-path}system/light/home.svg#error-actionable--active'); - --icon__system_home_error-actionable--disabled: url('#{$icons-path}system/light/home.svg#error-actionable--disabled'); - --icon__system_home_warning--enabled: url('#{$icons-path}system/light/home.svg#warning--enabled'); - --icon__system_home_success--enabled: url('#{$icons-path}system/light/home.svg#success--enabled'); - --icon__system_home_neutral--enabled: url('#{$icons-path}system/light/home.svg#neutral--enabled'); - --icon__system_home_neutral--hover: url('#{$icons-path}system/light/home.svg#neutral--hover'); - --icon__system_home_neutral--active: url('#{$icons-path}system/light/home.svg#neutral--active'); - --icon__system_home_neutral--disabled: url('#{$icons-path}system/light/home.svg#neutral--disabled'); - --icon__system_home_highlighted--enabled: url('#{$icons-path}system/light/home.svg#highlighted--enabled'); - --icon__system_home_bright--enabled: url('#{$icons-path}system/light/home.svg#bright--enabled'); - --icon__system_hide_on-surface--enabled: url('#{$icons-path}system/light/hide.svg#on-surface--enabled'); - --icon__system_hide_on-surface--hover: url('#{$icons-path}system/light/hide.svg#on-surface--hover'); - --icon__system_hide_on-surface--active: url('#{$icons-path}system/light/hide.svg#on-surface--active'); - --icon__system_hide_on-surface--disabled: url('#{$icons-path}system/light/hide.svg#on-surface--disabled'); - --icon__system_hide_on-primary--enabled: url('#{$icons-path}system/light/hide.svg#on-primary--enabled'); - --icon__system_hide_on-primary--hover: url('#{$icons-path}system/light/hide.svg#on-primary--hover'); - --icon__system_hide_on-primary--active: url('#{$icons-path}system/light/hide.svg#on-primary--active'); - --icon__system_hide_on-primary--disabled: url('#{$icons-path}system/light/hide.svg#on-primary--disabled'); - --icon__system_hide_on-disabled--enabled: url('#{$icons-path}system/light/hide.svg#on-disabled--enabled'); - --icon__system_hide_on-message--enabled: url('#{$icons-path}system/light/hide.svg#on-message--enabled'); - --icon__system_hide_on-elevation--enabled: url('#{$icons-path}system/light/hide.svg#on-elevation--enabled'); - --icon__system_hide_primary--enabled: url('#{$icons-path}system/light/hide.svg#primary--enabled'); - --icon__system_hide_primary--hover: url('#{$icons-path}system/light/hide.svg#primary--hover'); - --icon__system_hide_primary--active: url('#{$icons-path}system/light/hide.svg#primary--active'); - --icon__system_hide_primary--disabled: url('#{$icons-path}system/light/hide.svg#primary--disabled'); - --icon__system_hide_error--enabled: url('#{$icons-path}system/light/hide.svg#error--enabled'); - --icon__system_hide_error-actionable--enabled: url('#{$icons-path}system/light/hide.svg#error-actionable--enabled'); - --icon__system_hide_error-actionable--hover: url('#{$icons-path}system/light/hide.svg#error-actionable--hover'); - --icon__system_hide_error-actionable--active: url('#{$icons-path}system/light/hide.svg#error-actionable--active'); - --icon__system_hide_error-actionable--disabled: url('#{$icons-path}system/light/hide.svg#error-actionable--disabled'); - --icon__system_hide_warning--enabled: url('#{$icons-path}system/light/hide.svg#warning--enabled'); - --icon__system_hide_success--enabled: url('#{$icons-path}system/light/hide.svg#success--enabled'); - --icon__system_hide_neutral--enabled: url('#{$icons-path}system/light/hide.svg#neutral--enabled'); - --icon__system_hide_neutral--hover: url('#{$icons-path}system/light/hide.svg#neutral--hover'); - --icon__system_hide_neutral--active: url('#{$icons-path}system/light/hide.svg#neutral--active'); - --icon__system_hide_neutral--disabled: url('#{$icons-path}system/light/hide.svg#neutral--disabled'); - --icon__system_hide_highlighted--enabled: url('#{$icons-path}system/light/hide.svg#highlighted--enabled'); - --icon__system_hide_bright--enabled: url('#{$icons-path}system/light/hide.svg#bright--enabled'); - --icon__system_help_on-surface--enabled: url('#{$icons-path}system/light/help.svg#on-surface--enabled'); - --icon__system_help_on-surface--hover: url('#{$icons-path}system/light/help.svg#on-surface--hover'); - --icon__system_help_on-surface--active: url('#{$icons-path}system/light/help.svg#on-surface--active'); - --icon__system_help_on-surface--disabled: url('#{$icons-path}system/light/help.svg#on-surface--disabled'); - --icon__system_help_on-primary--enabled: url('#{$icons-path}system/light/help.svg#on-primary--enabled'); - --icon__system_help_on-primary--hover: url('#{$icons-path}system/light/help.svg#on-primary--hover'); - --icon__system_help_on-primary--active: url('#{$icons-path}system/light/help.svg#on-primary--active'); - --icon__system_help_on-primary--disabled: url('#{$icons-path}system/light/help.svg#on-primary--disabled'); - --icon__system_help_on-disabled--enabled: url('#{$icons-path}system/light/help.svg#on-disabled--enabled'); - --icon__system_help_on-message--enabled: url('#{$icons-path}system/light/help.svg#on-message--enabled'); - --icon__system_help_on-elevation--enabled: url('#{$icons-path}system/light/help.svg#on-elevation--enabled'); - --icon__system_help_primary--enabled: url('#{$icons-path}system/light/help.svg#primary--enabled'); - --icon__system_help_primary--hover: url('#{$icons-path}system/light/help.svg#primary--hover'); - --icon__system_help_primary--active: url('#{$icons-path}system/light/help.svg#primary--active'); - --icon__system_help_primary--disabled: url('#{$icons-path}system/light/help.svg#primary--disabled'); - --icon__system_help_error--enabled: url('#{$icons-path}system/light/help.svg#error--enabled'); - --icon__system_help_error-actionable--enabled: url('#{$icons-path}system/light/help.svg#error-actionable--enabled'); - --icon__system_help_error-actionable--hover: url('#{$icons-path}system/light/help.svg#error-actionable--hover'); - --icon__system_help_error-actionable--active: url('#{$icons-path}system/light/help.svg#error-actionable--active'); - --icon__system_help_error-actionable--disabled: url('#{$icons-path}system/light/help.svg#error-actionable--disabled'); - --icon__system_help_warning--enabled: url('#{$icons-path}system/light/help.svg#warning--enabled'); - --icon__system_help_success--enabled: url('#{$icons-path}system/light/help.svg#success--enabled'); - --icon__system_help_neutral--enabled: url('#{$icons-path}system/light/help.svg#neutral--enabled'); - --icon__system_help_neutral--hover: url('#{$icons-path}system/light/help.svg#neutral--hover'); - --icon__system_help_neutral--active: url('#{$icons-path}system/light/help.svg#neutral--active'); - --icon__system_help_neutral--disabled: url('#{$icons-path}system/light/help.svg#neutral--disabled'); - --icon__system_help_highlighted--enabled: url('#{$icons-path}system/light/help.svg#highlighted--enabled'); - --icon__system_help_bright--enabled: url('#{$icons-path}system/light/help.svg#bright--enabled'); - --icon__system_help-variant_on-surface--enabled: url('#{$icons-path}system/light/help-variant.svg#on-surface--enabled'); - --icon__system_help-variant_on-surface--hover: url('#{$icons-path}system/light/help-variant.svg#on-surface--hover'); - --icon__system_help-variant_on-surface--active: url('#{$icons-path}system/light/help-variant.svg#on-surface--active'); - --icon__system_help-variant_on-surface--disabled: url('#{$icons-path}system/light/help-variant.svg#on-surface--disabled'); - --icon__system_help-variant_on-primary--enabled: url('#{$icons-path}system/light/help-variant.svg#on-primary--enabled'); - --icon__system_help-variant_on-primary--hover: url('#{$icons-path}system/light/help-variant.svg#on-primary--hover'); - --icon__system_help-variant_on-primary--active: url('#{$icons-path}system/light/help-variant.svg#on-primary--active'); - --icon__system_help-variant_on-primary--disabled: url('#{$icons-path}system/light/help-variant.svg#on-primary--disabled'); - --icon__system_help-variant_on-disabled--enabled: url('#{$icons-path}system/light/help-variant.svg#on-disabled--enabled'); - --icon__system_help-variant_on-message--enabled: url('#{$icons-path}system/light/help-variant.svg#on-message--enabled'); - --icon__system_help-variant_on-elevation--enabled: url('#{$icons-path}system/light/help-variant.svg#on-elevation--enabled'); - --icon__system_help-variant_primary--enabled: url('#{$icons-path}system/light/help-variant.svg#primary--enabled'); - --icon__system_help-variant_primary--hover: url('#{$icons-path}system/light/help-variant.svg#primary--hover'); - --icon__system_help-variant_primary--active: url('#{$icons-path}system/light/help-variant.svg#primary--active'); - --icon__system_help-variant_primary--disabled: url('#{$icons-path}system/light/help-variant.svg#primary--disabled'); - --icon__system_help-variant_error--enabled: url('#{$icons-path}system/light/help-variant.svg#error--enabled'); - --icon__system_help-variant_error-actionable--enabled: url('#{$icons-path}system/light/help-variant.svg#error-actionable--enabled'); - --icon__system_help-variant_error-actionable--hover: url('#{$icons-path}system/light/help-variant.svg#error-actionable--hover'); - --icon__system_help-variant_error-actionable--active: url('#{$icons-path}system/light/help-variant.svg#error-actionable--active'); - --icon__system_help-variant_error-actionable--disabled: url('#{$icons-path}system/light/help-variant.svg#error-actionable--disabled'); - --icon__system_help-variant_warning--enabled: url('#{$icons-path}system/light/help-variant.svg#warning--enabled'); - --icon__system_help-variant_success--enabled: url('#{$icons-path}system/light/help-variant.svg#success--enabled'); - --icon__system_help-variant_neutral--enabled: url('#{$icons-path}system/light/help-variant.svg#neutral--enabled'); - --icon__system_help-variant_neutral--hover: url('#{$icons-path}system/light/help-variant.svg#neutral--hover'); - --icon__system_help-variant_neutral--active: url('#{$icons-path}system/light/help-variant.svg#neutral--active'); - --icon__system_help-variant_neutral--disabled: url('#{$icons-path}system/light/help-variant.svg#neutral--disabled'); - --icon__system_help-variant_highlighted--enabled: url('#{$icons-path}system/light/help-variant.svg#highlighted--enabled'); - --icon__system_help-variant_bright--enabled: url('#{$icons-path}system/light/help-variant.svg#bright--enabled'); - --icon__system_folder_on-surface--enabled: url('#{$icons-path}system/light/folder.svg#on-surface--enabled'); - --icon__system_folder_on-surface--hover: url('#{$icons-path}system/light/folder.svg#on-surface--hover'); - --icon__system_folder_on-surface--active: url('#{$icons-path}system/light/folder.svg#on-surface--active'); - --icon__system_folder_on-surface--disabled: url('#{$icons-path}system/light/folder.svg#on-surface--disabled'); - --icon__system_folder_on-primary--enabled: url('#{$icons-path}system/light/folder.svg#on-primary--enabled'); - --icon__system_folder_on-primary--hover: url('#{$icons-path}system/light/folder.svg#on-primary--hover'); - --icon__system_folder_on-primary--active: url('#{$icons-path}system/light/folder.svg#on-primary--active'); - --icon__system_folder_on-primary--disabled: url('#{$icons-path}system/light/folder.svg#on-primary--disabled'); - --icon__system_folder_on-disabled--enabled: url('#{$icons-path}system/light/folder.svg#on-disabled--enabled'); - --icon__system_folder_on-message--enabled: url('#{$icons-path}system/light/folder.svg#on-message--enabled'); - --icon__system_folder_on-elevation--enabled: url('#{$icons-path}system/light/folder.svg#on-elevation--enabled'); - --icon__system_folder_primary--enabled: url('#{$icons-path}system/light/folder.svg#primary--enabled'); - --icon__system_folder_primary--hover: url('#{$icons-path}system/light/folder.svg#primary--hover'); - --icon__system_folder_primary--active: url('#{$icons-path}system/light/folder.svg#primary--active'); - --icon__system_folder_primary--disabled: url('#{$icons-path}system/light/folder.svg#primary--disabled'); - --icon__system_folder_error--enabled: url('#{$icons-path}system/light/folder.svg#error--enabled'); - --icon__system_folder_error-actionable--enabled: url('#{$icons-path}system/light/folder.svg#error-actionable--enabled'); - --icon__system_folder_error-actionable--hover: url('#{$icons-path}system/light/folder.svg#error-actionable--hover'); - --icon__system_folder_error-actionable--active: url('#{$icons-path}system/light/folder.svg#error-actionable--active'); - --icon__system_folder_error-actionable--disabled: url('#{$icons-path}system/light/folder.svg#error-actionable--disabled'); - --icon__system_folder_warning--enabled: url('#{$icons-path}system/light/folder.svg#warning--enabled'); - --icon__system_folder_success--enabled: url('#{$icons-path}system/light/folder.svg#success--enabled'); - --icon__system_folder_neutral--enabled: url('#{$icons-path}system/light/folder.svg#neutral--enabled'); - --icon__system_folder_neutral--hover: url('#{$icons-path}system/light/folder.svg#neutral--hover'); - --icon__system_folder_neutral--active: url('#{$icons-path}system/light/folder.svg#neutral--active'); - --icon__system_folder_neutral--disabled: url('#{$icons-path}system/light/folder.svg#neutral--disabled'); - --icon__system_folder_highlighted--enabled: url('#{$icons-path}system/light/folder.svg#highlighted--enabled'); - --icon__system_folder_bright--enabled: url('#{$icons-path}system/light/folder.svg#bright--enabled'); - --icon__system_filters_on-surface--enabled: url('#{$icons-path}system/light/filters.svg#on-surface--enabled'); - --icon__system_filters_on-surface--hover: url('#{$icons-path}system/light/filters.svg#on-surface--hover'); - --icon__system_filters_on-surface--active: url('#{$icons-path}system/light/filters.svg#on-surface--active'); - --icon__system_filters_on-surface--disabled: url('#{$icons-path}system/light/filters.svg#on-surface--disabled'); - --icon__system_filters_on-primary--enabled: url('#{$icons-path}system/light/filters.svg#on-primary--enabled'); - --icon__system_filters_on-primary--hover: url('#{$icons-path}system/light/filters.svg#on-primary--hover'); - --icon__system_filters_on-primary--active: url('#{$icons-path}system/light/filters.svg#on-primary--active'); - --icon__system_filters_on-primary--disabled: url('#{$icons-path}system/light/filters.svg#on-primary--disabled'); - --icon__system_filters_on-disabled--enabled: url('#{$icons-path}system/light/filters.svg#on-disabled--enabled'); - --icon__system_filters_on-message--enabled: url('#{$icons-path}system/light/filters.svg#on-message--enabled'); - --icon__system_filters_on-elevation--enabled: url('#{$icons-path}system/light/filters.svg#on-elevation--enabled'); - --icon__system_filters_primary--enabled: url('#{$icons-path}system/light/filters.svg#primary--enabled'); - --icon__system_filters_primary--hover: url('#{$icons-path}system/light/filters.svg#primary--hover'); - --icon__system_filters_primary--active: url('#{$icons-path}system/light/filters.svg#primary--active'); - --icon__system_filters_primary--disabled: url('#{$icons-path}system/light/filters.svg#primary--disabled'); - --icon__system_filters_error--enabled: url('#{$icons-path}system/light/filters.svg#error--enabled'); - --icon__system_filters_error-actionable--enabled: url('#{$icons-path}system/light/filters.svg#error-actionable--enabled'); - --icon__system_filters_error-actionable--hover: url('#{$icons-path}system/light/filters.svg#error-actionable--hover'); - --icon__system_filters_error-actionable--active: url('#{$icons-path}system/light/filters.svg#error-actionable--active'); - --icon__system_filters_error-actionable--disabled: url('#{$icons-path}system/light/filters.svg#error-actionable--disabled'); - --icon__system_filters_warning--enabled: url('#{$icons-path}system/light/filters.svg#warning--enabled'); - --icon__system_filters_success--enabled: url('#{$icons-path}system/light/filters.svg#success--enabled'); - --icon__system_filters_neutral--enabled: url('#{$icons-path}system/light/filters.svg#neutral--enabled'); - --icon__system_filters_neutral--hover: url('#{$icons-path}system/light/filters.svg#neutral--hover'); - --icon__system_filters_neutral--active: url('#{$icons-path}system/light/filters.svg#neutral--active'); - --icon__system_filters_neutral--disabled: url('#{$icons-path}system/light/filters.svg#neutral--disabled'); - --icon__system_filters_highlighted--enabled: url('#{$icons-path}system/light/filters.svg#highlighted--enabled'); - --icon__system_filters_bright--enabled: url('#{$icons-path}system/light/filters.svg#bright--enabled'); - --icon__system_eyedropper_on-surface--enabled: url('#{$icons-path}system/light/eyedropper.svg#on-surface--enabled'); - --icon__system_eyedropper_on-surface--hover: url('#{$icons-path}system/light/eyedropper.svg#on-surface--hover'); - --icon__system_eyedropper_on-surface--active: url('#{$icons-path}system/light/eyedropper.svg#on-surface--active'); - --icon__system_eyedropper_on-surface--disabled: url('#{$icons-path}system/light/eyedropper.svg#on-surface--disabled'); - --icon__system_eyedropper_on-primary--enabled: url('#{$icons-path}system/light/eyedropper.svg#on-primary--enabled'); - --icon__system_eyedropper_on-primary--hover: url('#{$icons-path}system/light/eyedropper.svg#on-primary--hover'); - --icon__system_eyedropper_on-primary--active: url('#{$icons-path}system/light/eyedropper.svg#on-primary--active'); - --icon__system_eyedropper_on-primary--disabled: url('#{$icons-path}system/light/eyedropper.svg#on-primary--disabled'); - --icon__system_eyedropper_on-disabled--enabled: url('#{$icons-path}system/light/eyedropper.svg#on-disabled--enabled'); - --icon__system_eyedropper_on-message--enabled: url('#{$icons-path}system/light/eyedropper.svg#on-message--enabled'); - --icon__system_eyedropper_on-elevation--enabled: url('#{$icons-path}system/light/eyedropper.svg#on-elevation--enabled'); - --icon__system_eyedropper_primary--enabled: url('#{$icons-path}system/light/eyedropper.svg#primary--enabled'); - --icon__system_eyedropper_primary--hover: url('#{$icons-path}system/light/eyedropper.svg#primary--hover'); - --icon__system_eyedropper_primary--active: url('#{$icons-path}system/light/eyedropper.svg#primary--active'); - --icon__system_eyedropper_primary--disabled: url('#{$icons-path}system/light/eyedropper.svg#primary--disabled'); - --icon__system_eyedropper_error--enabled: url('#{$icons-path}system/light/eyedropper.svg#error--enabled'); - --icon__system_eyedropper_error-actionable--enabled: url('#{$icons-path}system/light/eyedropper.svg#error-actionable--enabled'); - --icon__system_eyedropper_error-actionable--hover: url('#{$icons-path}system/light/eyedropper.svg#error-actionable--hover'); - --icon__system_eyedropper_error-actionable--active: url('#{$icons-path}system/light/eyedropper.svg#error-actionable--active'); - --icon__system_eyedropper_error-actionable--disabled: url('#{$icons-path}system/light/eyedropper.svg#error-actionable--disabled'); - --icon__system_eyedropper_warning--enabled: url('#{$icons-path}system/light/eyedropper.svg#warning--enabled'); - --icon__system_eyedropper_success--enabled: url('#{$icons-path}system/light/eyedropper.svg#success--enabled'); - --icon__system_eyedropper_neutral--enabled: url('#{$icons-path}system/light/eyedropper.svg#neutral--enabled'); - --icon__system_eyedropper_neutral--hover: url('#{$icons-path}system/light/eyedropper.svg#neutral--hover'); - --icon__system_eyedropper_neutral--active: url('#{$icons-path}system/light/eyedropper.svg#neutral--active'); - --icon__system_eyedropper_neutral--disabled: url('#{$icons-path}system/light/eyedropper.svg#neutral--disabled'); - --icon__system_eyedropper_highlighted--enabled: url('#{$icons-path}system/light/eyedropper.svg#highlighted--enabled'); - --icon__system_eyedropper_bright--enabled: url('#{$icons-path}system/light/eyedropper.svg#bright--enabled'); - --icon__system_expand_on-surface--enabled: url('#{$icons-path}system/light/expand.svg#on-surface--enabled'); - --icon__system_expand_on-surface--hover: url('#{$icons-path}system/light/expand.svg#on-surface--hover'); - --icon__system_expand_on-surface--active: url('#{$icons-path}system/light/expand.svg#on-surface--active'); - --icon__system_expand_on-surface--disabled: url('#{$icons-path}system/light/expand.svg#on-surface--disabled'); - --icon__system_expand_on-primary--enabled: url('#{$icons-path}system/light/expand.svg#on-primary--enabled'); - --icon__system_expand_on-primary--hover: url('#{$icons-path}system/light/expand.svg#on-primary--hover'); - --icon__system_expand_on-primary--active: url('#{$icons-path}system/light/expand.svg#on-primary--active'); - --icon__system_expand_on-primary--disabled: url('#{$icons-path}system/light/expand.svg#on-primary--disabled'); - --icon__system_expand_on-disabled--enabled: url('#{$icons-path}system/light/expand.svg#on-disabled--enabled'); - --icon__system_expand_on-message--enabled: url('#{$icons-path}system/light/expand.svg#on-message--enabled'); - --icon__system_expand_on-elevation--enabled: url('#{$icons-path}system/light/expand.svg#on-elevation--enabled'); - --icon__system_expand_primary--enabled: url('#{$icons-path}system/light/expand.svg#primary--enabled'); - --icon__system_expand_primary--hover: url('#{$icons-path}system/light/expand.svg#primary--hover'); - --icon__system_expand_primary--active: url('#{$icons-path}system/light/expand.svg#primary--active'); - --icon__system_expand_primary--disabled: url('#{$icons-path}system/light/expand.svg#primary--disabled'); - --icon__system_expand_error--enabled: url('#{$icons-path}system/light/expand.svg#error--enabled'); - --icon__system_expand_error-actionable--enabled: url('#{$icons-path}system/light/expand.svg#error-actionable--enabled'); - --icon__system_expand_error-actionable--hover: url('#{$icons-path}system/light/expand.svg#error-actionable--hover'); - --icon__system_expand_error-actionable--active: url('#{$icons-path}system/light/expand.svg#error-actionable--active'); - --icon__system_expand_error-actionable--disabled: url('#{$icons-path}system/light/expand.svg#error-actionable--disabled'); - --icon__system_expand_warning--enabled: url('#{$icons-path}system/light/expand.svg#warning--enabled'); - --icon__system_expand_success--enabled: url('#{$icons-path}system/light/expand.svg#success--enabled'); - --icon__system_expand_neutral--enabled: url('#{$icons-path}system/light/expand.svg#neutral--enabled'); - --icon__system_expand_neutral--hover: url('#{$icons-path}system/light/expand.svg#neutral--hover'); - --icon__system_expand_neutral--active: url('#{$icons-path}system/light/expand.svg#neutral--active'); - --icon__system_expand_neutral--disabled: url('#{$icons-path}system/light/expand.svg#neutral--disabled'); - --icon__system_expand_highlighted--enabled: url('#{$icons-path}system/light/expand.svg#highlighted--enabled'); - --icon__system_expand_bright--enabled: url('#{$icons-path}system/light/expand.svg#bright--enabled'); - --icon__system_expand-content_on-surface--enabled: url('#{$icons-path}system/light/expand-content.svg#on-surface--enabled'); - --icon__system_expand-content_on-surface--hover: url('#{$icons-path}system/light/expand-content.svg#on-surface--hover'); - --icon__system_expand-content_on-surface--active: url('#{$icons-path}system/light/expand-content.svg#on-surface--active'); - --icon__system_expand-content_on-surface--disabled: url('#{$icons-path}system/light/expand-content.svg#on-surface--disabled'); - --icon__system_expand-content_on-primary--enabled: url('#{$icons-path}system/light/expand-content.svg#on-primary--enabled'); - --icon__system_expand-content_on-primary--hover: url('#{$icons-path}system/light/expand-content.svg#on-primary--hover'); - --icon__system_expand-content_on-primary--active: url('#{$icons-path}system/light/expand-content.svg#on-primary--active'); - --icon__system_expand-content_on-primary--disabled: url('#{$icons-path}system/light/expand-content.svg#on-primary--disabled'); - --icon__system_expand-content_on-disabled--enabled: url('#{$icons-path}system/light/expand-content.svg#on-disabled--enabled'); - --icon__system_expand-content_on-message--enabled: url('#{$icons-path}system/light/expand-content.svg#on-message--enabled'); - --icon__system_expand-content_on-elevation--enabled: url('#{$icons-path}system/light/expand-content.svg#on-elevation--enabled'); - --icon__system_expand-content_primary--enabled: url('#{$icons-path}system/light/expand-content.svg#primary--enabled'); - --icon__system_expand-content_primary--hover: url('#{$icons-path}system/light/expand-content.svg#primary--hover'); - --icon__system_expand-content_primary--active: url('#{$icons-path}system/light/expand-content.svg#primary--active'); - --icon__system_expand-content_primary--disabled: url('#{$icons-path}system/light/expand-content.svg#primary--disabled'); - --icon__system_expand-content_error--enabled: url('#{$icons-path}system/light/expand-content.svg#error--enabled'); - --icon__system_expand-content_error-actionable--enabled: url('#{$icons-path}system/light/expand-content.svg#error-actionable--enabled'); - --icon__system_expand-content_error-actionable--hover: url('#{$icons-path}system/light/expand-content.svg#error-actionable--hover'); - --icon__system_expand-content_error-actionable--active: url('#{$icons-path}system/light/expand-content.svg#error-actionable--active'); - --icon__system_expand-content_error-actionable--disabled: url('#{$icons-path}system/light/expand-content.svg#error-actionable--disabled'); - --icon__system_expand-content_warning--enabled: url('#{$icons-path}system/light/expand-content.svg#warning--enabled'); - --icon__system_expand-content_success--enabled: url('#{$icons-path}system/light/expand-content.svg#success--enabled'); - --icon__system_expand-content_neutral--enabled: url('#{$icons-path}system/light/expand-content.svg#neutral--enabled'); - --icon__system_expand-content_neutral--hover: url('#{$icons-path}system/light/expand-content.svg#neutral--hover'); - --icon__system_expand-content_neutral--active: url('#{$icons-path}system/light/expand-content.svg#neutral--active'); - --icon__system_expand-content_neutral--disabled: url('#{$icons-path}system/light/expand-content.svg#neutral--disabled'); - --icon__system_expand-content_highlighted--enabled: url('#{$icons-path}system/light/expand-content.svg#highlighted--enabled'); - --icon__system_expand-content_bright--enabled: url('#{$icons-path}system/light/expand-content.svg#bright--enabled'); - --icon__system_error_on-surface--enabled: url('#{$icons-path}system/light/error.svg#on-surface--enabled'); - --icon__system_error_on-surface--hover: url('#{$icons-path}system/light/error.svg#on-surface--hover'); - --icon__system_error_on-surface--active: url('#{$icons-path}system/light/error.svg#on-surface--active'); - --icon__system_error_on-surface--disabled: url('#{$icons-path}system/light/error.svg#on-surface--disabled'); - --icon__system_error_on-primary--enabled: url('#{$icons-path}system/light/error.svg#on-primary--enabled'); - --icon__system_error_on-primary--hover: url('#{$icons-path}system/light/error.svg#on-primary--hover'); - --icon__system_error_on-primary--active: url('#{$icons-path}system/light/error.svg#on-primary--active'); - --icon__system_error_on-primary--disabled: url('#{$icons-path}system/light/error.svg#on-primary--disabled'); - --icon__system_error_on-disabled--enabled: url('#{$icons-path}system/light/error.svg#on-disabled--enabled'); - --icon__system_error_on-message--enabled: url('#{$icons-path}system/light/error.svg#on-message--enabled'); - --icon__system_error_on-elevation--enabled: url('#{$icons-path}system/light/error.svg#on-elevation--enabled'); - --icon__system_error_primary--enabled: url('#{$icons-path}system/light/error.svg#primary--enabled'); - --icon__system_error_primary--hover: url('#{$icons-path}system/light/error.svg#primary--hover'); - --icon__system_error_primary--active: url('#{$icons-path}system/light/error.svg#primary--active'); - --icon__system_error_primary--disabled: url('#{$icons-path}system/light/error.svg#primary--disabled'); - --icon__system_error_error--enabled: url('#{$icons-path}system/light/error.svg#error--enabled'); - --icon__system_error_error-actionable--enabled: url('#{$icons-path}system/light/error.svg#error-actionable--enabled'); - --icon__system_error_error-actionable--hover: url('#{$icons-path}system/light/error.svg#error-actionable--hover'); - --icon__system_error_error-actionable--active: url('#{$icons-path}system/light/error.svg#error-actionable--active'); - --icon__system_error_error-actionable--disabled: url('#{$icons-path}system/light/error.svg#error-actionable--disabled'); - --icon__system_error_warning--enabled: url('#{$icons-path}system/light/error.svg#warning--enabled'); - --icon__system_error_success--enabled: url('#{$icons-path}system/light/error.svg#success--enabled'); - --icon__system_error_neutral--enabled: url('#{$icons-path}system/light/error.svg#neutral--enabled'); - --icon__system_error_neutral--hover: url('#{$icons-path}system/light/error.svg#neutral--hover'); - --icon__system_error_neutral--active: url('#{$icons-path}system/light/error.svg#neutral--active'); - --icon__system_error_neutral--disabled: url('#{$icons-path}system/light/error.svg#neutral--disabled'); - --icon__system_error_highlighted--enabled: url('#{$icons-path}system/light/error.svg#highlighted--enabled'); - --icon__system_error_bright--enabled: url('#{$icons-path}system/light/error.svg#bright--enabled'); - --icon__system_edit_on-surface--enabled: url('#{$icons-path}system/light/edit.svg#on-surface--enabled'); - --icon__system_edit_on-surface--hover: url('#{$icons-path}system/light/edit.svg#on-surface--hover'); - --icon__system_edit_on-surface--active: url('#{$icons-path}system/light/edit.svg#on-surface--active'); - --icon__system_edit_on-surface--disabled: url('#{$icons-path}system/light/edit.svg#on-surface--disabled'); - --icon__system_edit_on-primary--enabled: url('#{$icons-path}system/light/edit.svg#on-primary--enabled'); - --icon__system_edit_on-primary--hover: url('#{$icons-path}system/light/edit.svg#on-primary--hover'); - --icon__system_edit_on-primary--active: url('#{$icons-path}system/light/edit.svg#on-primary--active'); - --icon__system_edit_on-primary--disabled: url('#{$icons-path}system/light/edit.svg#on-primary--disabled'); - --icon__system_edit_on-disabled--enabled: url('#{$icons-path}system/light/edit.svg#on-disabled--enabled'); - --icon__system_edit_on-message--enabled: url('#{$icons-path}system/light/edit.svg#on-message--enabled'); - --icon__system_edit_on-elevation--enabled: url('#{$icons-path}system/light/edit.svg#on-elevation--enabled'); - --icon__system_edit_primary--enabled: url('#{$icons-path}system/light/edit.svg#primary--enabled'); - --icon__system_edit_primary--hover: url('#{$icons-path}system/light/edit.svg#primary--hover'); - --icon__system_edit_primary--active: url('#{$icons-path}system/light/edit.svg#primary--active'); - --icon__system_edit_primary--disabled: url('#{$icons-path}system/light/edit.svg#primary--disabled'); - --icon__system_edit_error--enabled: url('#{$icons-path}system/light/edit.svg#error--enabled'); - --icon__system_edit_error-actionable--enabled: url('#{$icons-path}system/light/edit.svg#error-actionable--enabled'); - --icon__system_edit_error-actionable--hover: url('#{$icons-path}system/light/edit.svg#error-actionable--hover'); - --icon__system_edit_error-actionable--active: url('#{$icons-path}system/light/edit.svg#error-actionable--active'); - --icon__system_edit_error-actionable--disabled: url('#{$icons-path}system/light/edit.svg#error-actionable--disabled'); - --icon__system_edit_warning--enabled: url('#{$icons-path}system/light/edit.svg#warning--enabled'); - --icon__system_edit_success--enabled: url('#{$icons-path}system/light/edit.svg#success--enabled'); - --icon__system_edit_neutral--enabled: url('#{$icons-path}system/light/edit.svg#neutral--enabled'); - --icon__system_edit_neutral--hover: url('#{$icons-path}system/light/edit.svg#neutral--hover'); - --icon__system_edit_neutral--active: url('#{$icons-path}system/light/edit.svg#neutral--active'); - --icon__system_edit_neutral--disabled: url('#{$icons-path}system/light/edit.svg#neutral--disabled'); - --icon__system_edit_highlighted--enabled: url('#{$icons-path}system/light/edit.svg#highlighted--enabled'); - --icon__system_edit_bright--enabled: url('#{$icons-path}system/light/edit.svg#bright--enabled'); - --icon__system_drag_on-surface--enabled: url('#{$icons-path}system/light/drag.svg#on-surface--enabled'); - --icon__system_drag_on-surface--hover: url('#{$icons-path}system/light/drag.svg#on-surface--hover'); - --icon__system_drag_on-surface--active: url('#{$icons-path}system/light/drag.svg#on-surface--active'); - --icon__system_drag_on-surface--disabled: url('#{$icons-path}system/light/drag.svg#on-surface--disabled'); - --icon__system_drag_on-primary--enabled: url('#{$icons-path}system/light/drag.svg#on-primary--enabled'); - --icon__system_drag_on-primary--hover: url('#{$icons-path}system/light/drag.svg#on-primary--hover'); - --icon__system_drag_on-primary--active: url('#{$icons-path}system/light/drag.svg#on-primary--active'); - --icon__system_drag_on-primary--disabled: url('#{$icons-path}system/light/drag.svg#on-primary--disabled'); - --icon__system_drag_on-disabled--enabled: url('#{$icons-path}system/light/drag.svg#on-disabled--enabled'); - --icon__system_drag_on-message--enabled: url('#{$icons-path}system/light/drag.svg#on-message--enabled'); - --icon__system_drag_on-elevation--enabled: url('#{$icons-path}system/light/drag.svg#on-elevation--enabled'); - --icon__system_drag_primary--enabled: url('#{$icons-path}system/light/drag.svg#primary--enabled'); - --icon__system_drag_primary--hover: url('#{$icons-path}system/light/drag.svg#primary--hover'); - --icon__system_drag_primary--active: url('#{$icons-path}system/light/drag.svg#primary--active'); - --icon__system_drag_primary--disabled: url('#{$icons-path}system/light/drag.svg#primary--disabled'); - --icon__system_drag_error--enabled: url('#{$icons-path}system/light/drag.svg#error--enabled'); - --icon__system_drag_error-actionable--enabled: url('#{$icons-path}system/light/drag.svg#error-actionable--enabled'); - --icon__system_drag_error-actionable--hover: url('#{$icons-path}system/light/drag.svg#error-actionable--hover'); - --icon__system_drag_error-actionable--active: url('#{$icons-path}system/light/drag.svg#error-actionable--active'); - --icon__system_drag_error-actionable--disabled: url('#{$icons-path}system/light/drag.svg#error-actionable--disabled'); - --icon__system_drag_warning--enabled: url('#{$icons-path}system/light/drag.svg#warning--enabled'); - --icon__system_drag_success--enabled: url('#{$icons-path}system/light/drag.svg#success--enabled'); - --icon__system_drag_neutral--enabled: url('#{$icons-path}system/light/drag.svg#neutral--enabled'); - --icon__system_drag_neutral--hover: url('#{$icons-path}system/light/drag.svg#neutral--hover'); - --icon__system_drag_neutral--active: url('#{$icons-path}system/light/drag.svg#neutral--active'); - --icon__system_drag_neutral--disabled: url('#{$icons-path}system/light/drag.svg#neutral--disabled'); - --icon__system_drag_highlighted--enabled: url('#{$icons-path}system/light/drag.svg#highlighted--enabled'); - --icon__system_drag_bright--enabled: url('#{$icons-path}system/light/drag.svg#bright--enabled'); - --icon__system_download_on-surface--enabled: url('#{$icons-path}system/light/download.svg#on-surface--enabled'); - --icon__system_download_on-surface--hover: url('#{$icons-path}system/light/download.svg#on-surface--hover'); - --icon__system_download_on-surface--active: url('#{$icons-path}system/light/download.svg#on-surface--active'); - --icon__system_download_on-surface--disabled: url('#{$icons-path}system/light/download.svg#on-surface--disabled'); - --icon__system_download_on-primary--enabled: url('#{$icons-path}system/light/download.svg#on-primary--enabled'); - --icon__system_download_on-primary--hover: url('#{$icons-path}system/light/download.svg#on-primary--hover'); - --icon__system_download_on-primary--active: url('#{$icons-path}system/light/download.svg#on-primary--active'); - --icon__system_download_on-primary--disabled: url('#{$icons-path}system/light/download.svg#on-primary--disabled'); - --icon__system_download_on-disabled--enabled: url('#{$icons-path}system/light/download.svg#on-disabled--enabled'); - --icon__system_download_on-message--enabled: url('#{$icons-path}system/light/download.svg#on-message--enabled'); - --icon__system_download_on-elevation--enabled: url('#{$icons-path}system/light/download.svg#on-elevation--enabled'); - --icon__system_download_primary--enabled: url('#{$icons-path}system/light/download.svg#primary--enabled'); - --icon__system_download_primary--hover: url('#{$icons-path}system/light/download.svg#primary--hover'); - --icon__system_download_primary--active: url('#{$icons-path}system/light/download.svg#primary--active'); - --icon__system_download_primary--disabled: url('#{$icons-path}system/light/download.svg#primary--disabled'); - --icon__system_download_error--enabled: url('#{$icons-path}system/light/download.svg#error--enabled'); - --icon__system_download_error-actionable--enabled: url('#{$icons-path}system/light/download.svg#error-actionable--enabled'); - --icon__system_download_error-actionable--hover: url('#{$icons-path}system/light/download.svg#error-actionable--hover'); - --icon__system_download_error-actionable--active: url('#{$icons-path}system/light/download.svg#error-actionable--active'); - --icon__system_download_error-actionable--disabled: url('#{$icons-path}system/light/download.svg#error-actionable--disabled'); - --icon__system_download_warning--enabled: url('#{$icons-path}system/light/download.svg#warning--enabled'); - --icon__system_download_success--enabled: url('#{$icons-path}system/light/download.svg#success--enabled'); - --icon__system_download_neutral--enabled: url('#{$icons-path}system/light/download.svg#neutral--enabled'); - --icon__system_download_neutral--hover: url('#{$icons-path}system/light/download.svg#neutral--hover'); - --icon__system_download_neutral--active: url('#{$icons-path}system/light/download.svg#neutral--active'); - --icon__system_download_neutral--disabled: url('#{$icons-path}system/light/download.svg#neutral--disabled'); - --icon__system_download_highlighted--enabled: url('#{$icons-path}system/light/download.svg#highlighted--enabled'); - --icon__system_download_bright--enabled: url('#{$icons-path}system/light/download.svg#bright--enabled'); - --icon__system_double-chevron-right_on-surface--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#on-surface--enabled'); - --icon__system_double-chevron-right_on-surface--hover: url('#{$icons-path}system/light/double-chevron-right.svg#on-surface--hover'); - --icon__system_double-chevron-right_on-surface--active: url('#{$icons-path}system/light/double-chevron-right.svg#on-surface--active'); - --icon__system_double-chevron-right_on-surface--disabled: url('#{$icons-path}system/light/double-chevron-right.svg#on-surface--disabled'); - --icon__system_double-chevron-right_on-primary--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#on-primary--enabled'); - --icon__system_double-chevron-right_on-primary--hover: url('#{$icons-path}system/light/double-chevron-right.svg#on-primary--hover'); - --icon__system_double-chevron-right_on-primary--active: url('#{$icons-path}system/light/double-chevron-right.svg#on-primary--active'); - --icon__system_double-chevron-right_on-primary--disabled: url('#{$icons-path}system/light/double-chevron-right.svg#on-primary--disabled'); - --icon__system_double-chevron-right_on-disabled--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#on-disabled--enabled'); - --icon__system_double-chevron-right_on-message--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#on-message--enabled'); - --icon__system_double-chevron-right_on-elevation--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#on-elevation--enabled'); - --icon__system_double-chevron-right_primary--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#primary--enabled'); - --icon__system_double-chevron-right_primary--hover: url('#{$icons-path}system/light/double-chevron-right.svg#primary--hover'); - --icon__system_double-chevron-right_primary--active: url('#{$icons-path}system/light/double-chevron-right.svg#primary--active'); - --icon__system_double-chevron-right_primary--disabled: url('#{$icons-path}system/light/double-chevron-right.svg#primary--disabled'); - --icon__system_double-chevron-right_error--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#error--enabled'); - --icon__system_double-chevron-right_error-actionable--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#error-actionable--enabled'); - --icon__system_double-chevron-right_error-actionable--hover: url('#{$icons-path}system/light/double-chevron-right.svg#error-actionable--hover'); - --icon__system_double-chevron-right_error-actionable--active: url('#{$icons-path}system/light/double-chevron-right.svg#error-actionable--active'); - --icon__system_double-chevron-right_error-actionable--disabled: url('#{$icons-path}system/light/double-chevron-right.svg#error-actionable--disabled'); - --icon__system_double-chevron-right_warning--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#warning--enabled'); - --icon__system_double-chevron-right_success--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#success--enabled'); - --icon__system_double-chevron-right_neutral--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#neutral--enabled'); - --icon__system_double-chevron-right_neutral--hover: url('#{$icons-path}system/light/double-chevron-right.svg#neutral--hover'); - --icon__system_double-chevron-right_neutral--active: url('#{$icons-path}system/light/double-chevron-right.svg#neutral--active'); - --icon__system_double-chevron-right_neutral--disabled: url('#{$icons-path}system/light/double-chevron-right.svg#neutral--disabled'); - --icon__system_double-chevron-right_highlighted--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#highlighted--enabled'); - --icon__system_double-chevron-right_bright--enabled: url('#{$icons-path}system/light/double-chevron-right.svg#bright--enabled'); - --icon__system_double-chevron-left_on-surface--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#on-surface--enabled'); - --icon__system_double-chevron-left_on-surface--hover: url('#{$icons-path}system/light/double-chevron-left.svg#on-surface--hover'); - --icon__system_double-chevron-left_on-surface--active: url('#{$icons-path}system/light/double-chevron-left.svg#on-surface--active'); - --icon__system_double-chevron-left_on-surface--disabled: url('#{$icons-path}system/light/double-chevron-left.svg#on-surface--disabled'); - --icon__system_double-chevron-left_on-primary--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#on-primary--enabled'); - --icon__system_double-chevron-left_on-primary--hover: url('#{$icons-path}system/light/double-chevron-left.svg#on-primary--hover'); - --icon__system_double-chevron-left_on-primary--active: url('#{$icons-path}system/light/double-chevron-left.svg#on-primary--active'); - --icon__system_double-chevron-left_on-primary--disabled: url('#{$icons-path}system/light/double-chevron-left.svg#on-primary--disabled'); - --icon__system_double-chevron-left_on-disabled--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#on-disabled--enabled'); - --icon__system_double-chevron-left_on-message--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#on-message--enabled'); - --icon__system_double-chevron-left_on-elevation--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#on-elevation--enabled'); - --icon__system_double-chevron-left_primary--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#primary--enabled'); - --icon__system_double-chevron-left_primary--hover: url('#{$icons-path}system/light/double-chevron-left.svg#primary--hover'); - --icon__system_double-chevron-left_primary--active: url('#{$icons-path}system/light/double-chevron-left.svg#primary--active'); - --icon__system_double-chevron-left_primary--disabled: url('#{$icons-path}system/light/double-chevron-left.svg#primary--disabled'); - --icon__system_double-chevron-left_error--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#error--enabled'); - --icon__system_double-chevron-left_error-actionable--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#error-actionable--enabled'); - --icon__system_double-chevron-left_error-actionable--hover: url('#{$icons-path}system/light/double-chevron-left.svg#error-actionable--hover'); - --icon__system_double-chevron-left_error-actionable--active: url('#{$icons-path}system/light/double-chevron-left.svg#error-actionable--active'); - --icon__system_double-chevron-left_error-actionable--disabled: url('#{$icons-path}system/light/double-chevron-left.svg#error-actionable--disabled'); - --icon__system_double-chevron-left_warning--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#warning--enabled'); - --icon__system_double-chevron-left_success--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#success--enabled'); - --icon__system_double-chevron-left_neutral--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#neutral--enabled'); - --icon__system_double-chevron-left_neutral--hover: url('#{$icons-path}system/light/double-chevron-left.svg#neutral--hover'); - --icon__system_double-chevron-left_neutral--active: url('#{$icons-path}system/light/double-chevron-left.svg#neutral--active'); - --icon__system_double-chevron-left_neutral--disabled: url('#{$icons-path}system/light/double-chevron-left.svg#neutral--disabled'); - --icon__system_double-chevron-left_highlighted--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#highlighted--enabled'); - --icon__system_double-chevron-left_bright--enabled: url('#{$icons-path}system/light/double-chevron-left.svg#bright--enabled'); - --icon__system_detail_on-surface--enabled: url('#{$icons-path}system/light/detail.svg#on-surface--enabled'); - --icon__system_detail_on-surface--hover: url('#{$icons-path}system/light/detail.svg#on-surface--hover'); - --icon__system_detail_on-surface--active: url('#{$icons-path}system/light/detail.svg#on-surface--active'); - --icon__system_detail_on-surface--disabled: url('#{$icons-path}system/light/detail.svg#on-surface--disabled'); - --icon__system_detail_on-primary--enabled: url('#{$icons-path}system/light/detail.svg#on-primary--enabled'); - --icon__system_detail_on-primary--hover: url('#{$icons-path}system/light/detail.svg#on-primary--hover'); - --icon__system_detail_on-primary--active: url('#{$icons-path}system/light/detail.svg#on-primary--active'); - --icon__system_detail_on-primary--disabled: url('#{$icons-path}system/light/detail.svg#on-primary--disabled'); - --icon__system_detail_on-disabled--enabled: url('#{$icons-path}system/light/detail.svg#on-disabled--enabled'); - --icon__system_detail_on-message--enabled: url('#{$icons-path}system/light/detail.svg#on-message--enabled'); - --icon__system_detail_on-elevation--enabled: url('#{$icons-path}system/light/detail.svg#on-elevation--enabled'); - --icon__system_detail_primary--enabled: url('#{$icons-path}system/light/detail.svg#primary--enabled'); - --icon__system_detail_primary--hover: url('#{$icons-path}system/light/detail.svg#primary--hover'); - --icon__system_detail_primary--active: url('#{$icons-path}system/light/detail.svg#primary--active'); - --icon__system_detail_primary--disabled: url('#{$icons-path}system/light/detail.svg#primary--disabled'); - --icon__system_detail_error--enabled: url('#{$icons-path}system/light/detail.svg#error--enabled'); - --icon__system_detail_error-actionable--enabled: url('#{$icons-path}system/light/detail.svg#error-actionable--enabled'); - --icon__system_detail_error-actionable--hover: url('#{$icons-path}system/light/detail.svg#error-actionable--hover'); - --icon__system_detail_error-actionable--active: url('#{$icons-path}system/light/detail.svg#error-actionable--active'); - --icon__system_detail_error-actionable--disabled: url('#{$icons-path}system/light/detail.svg#error-actionable--disabled'); - --icon__system_detail_warning--enabled: url('#{$icons-path}system/light/detail.svg#warning--enabled'); - --icon__system_detail_success--enabled: url('#{$icons-path}system/light/detail.svg#success--enabled'); - --icon__system_detail_neutral--enabled: url('#{$icons-path}system/light/detail.svg#neutral--enabled'); - --icon__system_detail_neutral--hover: url('#{$icons-path}system/light/detail.svg#neutral--hover'); - --icon__system_detail_neutral--active: url('#{$icons-path}system/light/detail.svg#neutral--active'); - --icon__system_detail_neutral--disabled: url('#{$icons-path}system/light/detail.svg#neutral--disabled'); - --icon__system_detail_highlighted--enabled: url('#{$icons-path}system/light/detail.svg#highlighted--enabled'); - --icon__system_detail_bright--enabled: url('#{$icons-path}system/light/detail.svg#bright--enabled'); - --icon__system_delete-outlined_on-surface--enabled: url('#{$icons-path}system/light/delete-outlined.svg#on-surface--enabled'); - --icon__system_delete-outlined_on-surface--hover: url('#{$icons-path}system/light/delete-outlined.svg#on-surface--hover'); - --icon__system_delete-outlined_on-surface--active: url('#{$icons-path}system/light/delete-outlined.svg#on-surface--active'); - --icon__system_delete-outlined_on-surface--disabled: url('#{$icons-path}system/light/delete-outlined.svg#on-surface--disabled'); - --icon__system_delete-outlined_on-primary--enabled: url('#{$icons-path}system/light/delete-outlined.svg#on-primary--enabled'); - --icon__system_delete-outlined_on-primary--hover: url('#{$icons-path}system/light/delete-outlined.svg#on-primary--hover'); - --icon__system_delete-outlined_on-primary--active: url('#{$icons-path}system/light/delete-outlined.svg#on-primary--active'); - --icon__system_delete-outlined_on-primary--disabled: url('#{$icons-path}system/light/delete-outlined.svg#on-primary--disabled'); - --icon__system_delete-outlined_on-disabled--enabled: url('#{$icons-path}system/light/delete-outlined.svg#on-disabled--enabled'); - --icon__system_delete-outlined_on-message--enabled: url('#{$icons-path}system/light/delete-outlined.svg#on-message--enabled'); - --icon__system_delete-outlined_on-elevation--enabled: url('#{$icons-path}system/light/delete-outlined.svg#on-elevation--enabled'); - --icon__system_delete-outlined_primary--enabled: url('#{$icons-path}system/light/delete-outlined.svg#primary--enabled'); - --icon__system_delete-outlined_primary--hover: url('#{$icons-path}system/light/delete-outlined.svg#primary--hover'); - --icon__system_delete-outlined_primary--active: url('#{$icons-path}system/light/delete-outlined.svg#primary--active'); - --icon__system_delete-outlined_primary--disabled: url('#{$icons-path}system/light/delete-outlined.svg#primary--disabled'); - --icon__system_delete-outlined_error--enabled: url('#{$icons-path}system/light/delete-outlined.svg#error--enabled'); - --icon__system_delete-outlined_error-actionable--enabled: url('#{$icons-path}system/light/delete-outlined.svg#error-actionable--enabled'); - --icon__system_delete-outlined_error-actionable--hover: url('#{$icons-path}system/light/delete-outlined.svg#error-actionable--hover'); - --icon__system_delete-outlined_error-actionable--active: url('#{$icons-path}system/light/delete-outlined.svg#error-actionable--active'); - --icon__system_delete-outlined_error-actionable--disabled: url('#{$icons-path}system/light/delete-outlined.svg#error-actionable--disabled'); - --icon__system_delete-outlined_warning--enabled: url('#{$icons-path}system/light/delete-outlined.svg#warning--enabled'); - --icon__system_delete-outlined_success--enabled: url('#{$icons-path}system/light/delete-outlined.svg#success--enabled'); - --icon__system_delete-outlined_neutral--enabled: url('#{$icons-path}system/light/delete-outlined.svg#neutral--enabled'); - --icon__system_delete-outlined_neutral--hover: url('#{$icons-path}system/light/delete-outlined.svg#neutral--hover'); - --icon__system_delete-outlined_neutral--active: url('#{$icons-path}system/light/delete-outlined.svg#neutral--active'); - --icon__system_delete-outlined_neutral--disabled: url('#{$icons-path}system/light/delete-outlined.svg#neutral--disabled'); - --icon__system_delete-outlined_highlighted--enabled: url('#{$icons-path}system/light/delete-outlined.svg#highlighted--enabled'); - --icon__system_delete-outlined_bright--enabled: url('#{$icons-path}system/light/delete-outlined.svg#bright--enabled'); - --icon__system_database_on-surface--enabled: url('#{$icons-path}system/light/database.svg#on-surface--enabled'); - --icon__system_database_on-surface--hover: url('#{$icons-path}system/light/database.svg#on-surface--hover'); - --icon__system_database_on-surface--active: url('#{$icons-path}system/light/database.svg#on-surface--active'); - --icon__system_database_on-surface--disabled: url('#{$icons-path}system/light/database.svg#on-surface--disabled'); - --icon__system_database_on-primary--enabled: url('#{$icons-path}system/light/database.svg#on-primary--enabled'); - --icon__system_database_on-primary--hover: url('#{$icons-path}system/light/database.svg#on-primary--hover'); - --icon__system_database_on-primary--active: url('#{$icons-path}system/light/database.svg#on-primary--active'); - --icon__system_database_on-primary--disabled: url('#{$icons-path}system/light/database.svg#on-primary--disabled'); - --icon__system_database_on-disabled--enabled: url('#{$icons-path}system/light/database.svg#on-disabled--enabled'); - --icon__system_database_on-message--enabled: url('#{$icons-path}system/light/database.svg#on-message--enabled'); - --icon__system_database_on-elevation--enabled: url('#{$icons-path}system/light/database.svg#on-elevation--enabled'); - --icon__system_database_primary--enabled: url('#{$icons-path}system/light/database.svg#primary--enabled'); - --icon__system_database_primary--hover: url('#{$icons-path}system/light/database.svg#primary--hover'); - --icon__system_database_primary--active: url('#{$icons-path}system/light/database.svg#primary--active'); - --icon__system_database_primary--disabled: url('#{$icons-path}system/light/database.svg#primary--disabled'); - --icon__system_database_error--enabled: url('#{$icons-path}system/light/database.svg#error--enabled'); - --icon__system_database_error-actionable--enabled: url('#{$icons-path}system/light/database.svg#error-actionable--enabled'); - --icon__system_database_error-actionable--hover: url('#{$icons-path}system/light/database.svg#error-actionable--hover'); - --icon__system_database_error-actionable--active: url('#{$icons-path}system/light/database.svg#error-actionable--active'); - --icon__system_database_error-actionable--disabled: url('#{$icons-path}system/light/database.svg#error-actionable--disabled'); - --icon__system_database_warning--enabled: url('#{$icons-path}system/light/database.svg#warning--enabled'); - --icon__system_database_success--enabled: url('#{$icons-path}system/light/database.svg#success--enabled'); - --icon__system_database_neutral--enabled: url('#{$icons-path}system/light/database.svg#neutral--enabled'); - --icon__system_database_neutral--hover: url('#{$icons-path}system/light/database.svg#neutral--hover'); - --icon__system_database_neutral--active: url('#{$icons-path}system/light/database.svg#neutral--active'); - --icon__system_database_neutral--disabled: url('#{$icons-path}system/light/database.svg#neutral--disabled'); - --icon__system_database_highlighted--enabled: url('#{$icons-path}system/light/database.svg#highlighted--enabled'); - --icon__system_database_bright--enabled: url('#{$icons-path}system/light/database.svg#bright--enabled'); - --icon__system_data-modeling_on-surface--enabled: url('#{$icons-path}system/light/data-modeling.svg#on-surface--enabled'); - --icon__system_data-modeling_on-surface--hover: url('#{$icons-path}system/light/data-modeling.svg#on-surface--hover'); - --icon__system_data-modeling_on-surface--active: url('#{$icons-path}system/light/data-modeling.svg#on-surface--active'); - --icon__system_data-modeling_on-surface--disabled: url('#{$icons-path}system/light/data-modeling.svg#on-surface--disabled'); - --icon__system_data-modeling_on-primary--enabled: url('#{$icons-path}system/light/data-modeling.svg#on-primary--enabled'); - --icon__system_data-modeling_on-primary--hover: url('#{$icons-path}system/light/data-modeling.svg#on-primary--hover'); - --icon__system_data-modeling_on-primary--active: url('#{$icons-path}system/light/data-modeling.svg#on-primary--active'); - --icon__system_data-modeling_on-primary--disabled: url('#{$icons-path}system/light/data-modeling.svg#on-primary--disabled'); - --icon__system_data-modeling_on-disabled--enabled: url('#{$icons-path}system/light/data-modeling.svg#on-disabled--enabled'); - --icon__system_data-modeling_on-message--enabled: url('#{$icons-path}system/light/data-modeling.svg#on-message--enabled'); - --icon__system_data-modeling_on-elevation--enabled: url('#{$icons-path}system/light/data-modeling.svg#on-elevation--enabled'); - --icon__system_data-modeling_primary--enabled: url('#{$icons-path}system/light/data-modeling.svg#primary--enabled'); - --icon__system_data-modeling_primary--hover: url('#{$icons-path}system/light/data-modeling.svg#primary--hover'); - --icon__system_data-modeling_primary--active: url('#{$icons-path}system/light/data-modeling.svg#primary--active'); - --icon__system_data-modeling_primary--disabled: url('#{$icons-path}system/light/data-modeling.svg#primary--disabled'); - --icon__system_data-modeling_error--enabled: url('#{$icons-path}system/light/data-modeling.svg#error--enabled'); - --icon__system_data-modeling_error-actionable--enabled: url('#{$icons-path}system/light/data-modeling.svg#error-actionable--enabled'); - --icon__system_data-modeling_error-actionable--hover: url('#{$icons-path}system/light/data-modeling.svg#error-actionable--hover'); - --icon__system_data-modeling_error-actionable--active: url('#{$icons-path}system/light/data-modeling.svg#error-actionable--active'); - --icon__system_data-modeling_error-actionable--disabled: url('#{$icons-path}system/light/data-modeling.svg#error-actionable--disabled'); - --icon__system_data-modeling_warning--enabled: url('#{$icons-path}system/light/data-modeling.svg#warning--enabled'); - --icon__system_data-modeling_success--enabled: url('#{$icons-path}system/light/data-modeling.svg#success--enabled'); - --icon__system_data-modeling_neutral--enabled: url('#{$icons-path}system/light/data-modeling.svg#neutral--enabled'); - --icon__system_data-modeling_neutral--hover: url('#{$icons-path}system/light/data-modeling.svg#neutral--hover'); - --icon__system_data-modeling_neutral--active: url('#{$icons-path}system/light/data-modeling.svg#neutral--active'); - --icon__system_data-modeling_neutral--disabled: url('#{$icons-path}system/light/data-modeling.svg#neutral--disabled'); - --icon__system_data-modeling_highlighted--enabled: url('#{$icons-path}system/light/data-modeling.svg#highlighted--enabled'); - --icon__system_data-modeling_bright--enabled: url('#{$icons-path}system/light/data-modeling.svg#bright--enabled'); - --icon__system_dashboard_on-surface--enabled: url('#{$icons-path}system/light/dashboard.svg#on-surface--enabled'); - --icon__system_dashboard_on-surface--hover: url('#{$icons-path}system/light/dashboard.svg#on-surface--hover'); - --icon__system_dashboard_on-surface--active: url('#{$icons-path}system/light/dashboard.svg#on-surface--active'); - --icon__system_dashboard_on-surface--disabled: url('#{$icons-path}system/light/dashboard.svg#on-surface--disabled'); - --icon__system_dashboard_on-primary--enabled: url('#{$icons-path}system/light/dashboard.svg#on-primary--enabled'); - --icon__system_dashboard_on-primary--hover: url('#{$icons-path}system/light/dashboard.svg#on-primary--hover'); - --icon__system_dashboard_on-primary--active: url('#{$icons-path}system/light/dashboard.svg#on-primary--active'); - --icon__system_dashboard_on-primary--disabled: url('#{$icons-path}system/light/dashboard.svg#on-primary--disabled'); - --icon__system_dashboard_on-disabled--enabled: url('#{$icons-path}system/light/dashboard.svg#on-disabled--enabled'); - --icon__system_dashboard_on-message--enabled: url('#{$icons-path}system/light/dashboard.svg#on-message--enabled'); - --icon__system_dashboard_on-elevation--enabled: url('#{$icons-path}system/light/dashboard.svg#on-elevation--enabled'); - --icon__system_dashboard_primary--enabled: url('#{$icons-path}system/light/dashboard.svg#primary--enabled'); - --icon__system_dashboard_primary--hover: url('#{$icons-path}system/light/dashboard.svg#primary--hover'); - --icon__system_dashboard_primary--active: url('#{$icons-path}system/light/dashboard.svg#primary--active'); - --icon__system_dashboard_primary--disabled: url('#{$icons-path}system/light/dashboard.svg#primary--disabled'); - --icon__system_dashboard_error--enabled: url('#{$icons-path}system/light/dashboard.svg#error--enabled'); - --icon__system_dashboard_error-actionable--enabled: url('#{$icons-path}system/light/dashboard.svg#error-actionable--enabled'); - --icon__system_dashboard_error-actionable--hover: url('#{$icons-path}system/light/dashboard.svg#error-actionable--hover'); - --icon__system_dashboard_error-actionable--active: url('#{$icons-path}system/light/dashboard.svg#error-actionable--active'); - --icon__system_dashboard_error-actionable--disabled: url('#{$icons-path}system/light/dashboard.svg#error-actionable--disabled'); - --icon__system_dashboard_warning--enabled: url('#{$icons-path}system/light/dashboard.svg#warning--enabled'); - --icon__system_dashboard_success--enabled: url('#{$icons-path}system/light/dashboard.svg#success--enabled'); - --icon__system_dashboard_neutral--enabled: url('#{$icons-path}system/light/dashboard.svg#neutral--enabled'); - --icon__system_dashboard_neutral--hover: url('#{$icons-path}system/light/dashboard.svg#neutral--hover'); - --icon__system_dashboard_neutral--active: url('#{$icons-path}system/light/dashboard.svg#neutral--active'); - --icon__system_dashboard_neutral--disabled: url('#{$icons-path}system/light/dashboard.svg#neutral--disabled'); - --icon__system_dashboard_highlighted--enabled: url('#{$icons-path}system/light/dashboard.svg#highlighted--enabled'); - --icon__system_dashboard_bright--enabled: url('#{$icons-path}system/light/dashboard.svg#bright--enabled'); - --icon__system_cut_on-surface--enabled: url('#{$icons-path}system/light/cut.svg#on-surface--enabled'); - --icon__system_cut_on-surface--hover: url('#{$icons-path}system/light/cut.svg#on-surface--hover'); - --icon__system_cut_on-surface--active: url('#{$icons-path}system/light/cut.svg#on-surface--active'); - --icon__system_cut_on-surface--disabled: url('#{$icons-path}system/light/cut.svg#on-surface--disabled'); - --icon__system_cut_on-primary--enabled: url('#{$icons-path}system/light/cut.svg#on-primary--enabled'); - --icon__system_cut_on-primary--hover: url('#{$icons-path}system/light/cut.svg#on-primary--hover'); - --icon__system_cut_on-primary--active: url('#{$icons-path}system/light/cut.svg#on-primary--active'); - --icon__system_cut_on-primary--disabled: url('#{$icons-path}system/light/cut.svg#on-primary--disabled'); - --icon__system_cut_on-disabled--enabled: url('#{$icons-path}system/light/cut.svg#on-disabled--enabled'); - --icon__system_cut_on-message--enabled: url('#{$icons-path}system/light/cut.svg#on-message--enabled'); - --icon__system_cut_on-elevation--enabled: url('#{$icons-path}system/light/cut.svg#on-elevation--enabled'); - --icon__system_cut_primary--enabled: url('#{$icons-path}system/light/cut.svg#primary--enabled'); - --icon__system_cut_primary--hover: url('#{$icons-path}system/light/cut.svg#primary--hover'); - --icon__system_cut_primary--active: url('#{$icons-path}system/light/cut.svg#primary--active'); - --icon__system_cut_primary--disabled: url('#{$icons-path}system/light/cut.svg#primary--disabled'); - --icon__system_cut_error--enabled: url('#{$icons-path}system/light/cut.svg#error--enabled'); - --icon__system_cut_error-actionable--enabled: url('#{$icons-path}system/light/cut.svg#error-actionable--enabled'); - --icon__system_cut_error-actionable--hover: url('#{$icons-path}system/light/cut.svg#error-actionable--hover'); - --icon__system_cut_error-actionable--active: url('#{$icons-path}system/light/cut.svg#error-actionable--active'); - --icon__system_cut_error-actionable--disabled: url('#{$icons-path}system/light/cut.svg#error-actionable--disabled'); - --icon__system_cut_warning--enabled: url('#{$icons-path}system/light/cut.svg#warning--enabled'); - --icon__system_cut_success--enabled: url('#{$icons-path}system/light/cut.svg#success--enabled'); - --icon__system_cut_neutral--enabled: url('#{$icons-path}system/light/cut.svg#neutral--enabled'); - --icon__system_cut_neutral--hover: url('#{$icons-path}system/light/cut.svg#neutral--hover'); - --icon__system_cut_neutral--active: url('#{$icons-path}system/light/cut.svg#neutral--active'); - --icon__system_cut_neutral--disabled: url('#{$icons-path}system/light/cut.svg#neutral--disabled'); - --icon__system_cut_highlighted--enabled: url('#{$icons-path}system/light/cut.svg#highlighted--enabled'); - --icon__system_cut_bright--enabled: url('#{$icons-path}system/light/cut.svg#bright--enabled'); - --icon__system_copy_on-surface--enabled: url('#{$icons-path}system/light/copy.svg#on-surface--enabled'); - --icon__system_copy_on-surface--hover: url('#{$icons-path}system/light/copy.svg#on-surface--hover'); - --icon__system_copy_on-surface--active: url('#{$icons-path}system/light/copy.svg#on-surface--active'); - --icon__system_copy_on-surface--disabled: url('#{$icons-path}system/light/copy.svg#on-surface--disabled'); - --icon__system_copy_on-primary--enabled: url('#{$icons-path}system/light/copy.svg#on-primary--enabled'); - --icon__system_copy_on-primary--hover: url('#{$icons-path}system/light/copy.svg#on-primary--hover'); - --icon__system_copy_on-primary--active: url('#{$icons-path}system/light/copy.svg#on-primary--active'); - --icon__system_copy_on-primary--disabled: url('#{$icons-path}system/light/copy.svg#on-primary--disabled'); - --icon__system_copy_on-disabled--enabled: url('#{$icons-path}system/light/copy.svg#on-disabled--enabled'); - --icon__system_copy_on-message--enabled: url('#{$icons-path}system/light/copy.svg#on-message--enabled'); - --icon__system_copy_on-elevation--enabled: url('#{$icons-path}system/light/copy.svg#on-elevation--enabled'); - --icon__system_copy_primary--enabled: url('#{$icons-path}system/light/copy.svg#primary--enabled'); - --icon__system_copy_primary--hover: url('#{$icons-path}system/light/copy.svg#primary--hover'); - --icon__system_copy_primary--active: url('#{$icons-path}system/light/copy.svg#primary--active'); - --icon__system_copy_primary--disabled: url('#{$icons-path}system/light/copy.svg#primary--disabled'); - --icon__system_copy_error--enabled: url('#{$icons-path}system/light/copy.svg#error--enabled'); - --icon__system_copy_error-actionable--enabled: url('#{$icons-path}system/light/copy.svg#error-actionable--enabled'); - --icon__system_copy_error-actionable--hover: url('#{$icons-path}system/light/copy.svg#error-actionable--hover'); - --icon__system_copy_error-actionable--active: url('#{$icons-path}system/light/copy.svg#error-actionable--active'); - --icon__system_copy_error-actionable--disabled: url('#{$icons-path}system/light/copy.svg#error-actionable--disabled'); - --icon__system_copy_warning--enabled: url('#{$icons-path}system/light/copy.svg#warning--enabled'); - --icon__system_copy_success--enabled: url('#{$icons-path}system/light/copy.svg#success--enabled'); - --icon__system_copy_neutral--enabled: url('#{$icons-path}system/light/copy.svg#neutral--enabled'); - --icon__system_copy_neutral--hover: url('#{$icons-path}system/light/copy.svg#neutral--hover'); - --icon__system_copy_neutral--active: url('#{$icons-path}system/light/copy.svg#neutral--active'); - --icon__system_copy_neutral--disabled: url('#{$icons-path}system/light/copy.svg#neutral--disabled'); - --icon__system_copy_highlighted--enabled: url('#{$icons-path}system/light/copy.svg#highlighted--enabled'); - --icon__system_copy_bright--enabled: url('#{$icons-path}system/light/copy.svg#bright--enabled'); - --icon__system_contact_on-surface--enabled: url('#{$icons-path}system/light/contact.svg#on-surface--enabled'); - --icon__system_contact_on-surface--hover: url('#{$icons-path}system/light/contact.svg#on-surface--hover'); - --icon__system_contact_on-surface--active: url('#{$icons-path}system/light/contact.svg#on-surface--active'); - --icon__system_contact_on-surface--disabled: url('#{$icons-path}system/light/contact.svg#on-surface--disabled'); - --icon__system_contact_on-primary--enabled: url('#{$icons-path}system/light/contact.svg#on-primary--enabled'); - --icon__system_contact_on-primary--hover: url('#{$icons-path}system/light/contact.svg#on-primary--hover'); - --icon__system_contact_on-primary--active: url('#{$icons-path}system/light/contact.svg#on-primary--active'); - --icon__system_contact_on-primary--disabled: url('#{$icons-path}system/light/contact.svg#on-primary--disabled'); - --icon__system_contact_on-disabled--enabled: url('#{$icons-path}system/light/contact.svg#on-disabled--enabled'); - --icon__system_contact_on-message--enabled: url('#{$icons-path}system/light/contact.svg#on-message--enabled'); - --icon__system_contact_on-elevation--enabled: url('#{$icons-path}system/light/contact.svg#on-elevation--enabled'); - --icon__system_contact_primary--enabled: url('#{$icons-path}system/light/contact.svg#primary--enabled'); - --icon__system_contact_primary--hover: url('#{$icons-path}system/light/contact.svg#primary--hover'); - --icon__system_contact_primary--active: url('#{$icons-path}system/light/contact.svg#primary--active'); - --icon__system_contact_primary--disabled: url('#{$icons-path}system/light/contact.svg#primary--disabled'); - --icon__system_contact_error--enabled: url('#{$icons-path}system/light/contact.svg#error--enabled'); - --icon__system_contact_error-actionable--enabled: url('#{$icons-path}system/light/contact.svg#error-actionable--enabled'); - --icon__system_contact_error-actionable--hover: url('#{$icons-path}system/light/contact.svg#error-actionable--hover'); - --icon__system_contact_error-actionable--active: url('#{$icons-path}system/light/contact.svg#error-actionable--active'); - --icon__system_contact_error-actionable--disabled: url('#{$icons-path}system/light/contact.svg#error-actionable--disabled'); - --icon__system_contact_warning--enabled: url('#{$icons-path}system/light/contact.svg#warning--enabled'); - --icon__system_contact_success--enabled: url('#{$icons-path}system/light/contact.svg#success--enabled'); - --icon__system_contact_neutral--enabled: url('#{$icons-path}system/light/contact.svg#neutral--enabled'); - --icon__system_contact_neutral--hover: url('#{$icons-path}system/light/contact.svg#neutral--hover'); - --icon__system_contact_neutral--active: url('#{$icons-path}system/light/contact.svg#neutral--active'); - --icon__system_contact_neutral--disabled: url('#{$icons-path}system/light/contact.svg#neutral--disabled'); - --icon__system_contact_highlighted--enabled: url('#{$icons-path}system/light/contact.svg#highlighted--enabled'); - --icon__system_contact_bright--enabled: url('#{$icons-path}system/light/contact.svg#bright--enabled'); - --icon__system_computer_on-surface--enabled: url('#{$icons-path}system/light/computer.svg#on-surface--enabled'); - --icon__system_computer_on-surface--hover: url('#{$icons-path}system/light/computer.svg#on-surface--hover'); - --icon__system_computer_on-surface--active: url('#{$icons-path}system/light/computer.svg#on-surface--active'); - --icon__system_computer_on-surface--disabled: url('#{$icons-path}system/light/computer.svg#on-surface--disabled'); - --icon__system_computer_on-primary--enabled: url('#{$icons-path}system/light/computer.svg#on-primary--enabled'); - --icon__system_computer_on-primary--hover: url('#{$icons-path}system/light/computer.svg#on-primary--hover'); - --icon__system_computer_on-primary--active: url('#{$icons-path}system/light/computer.svg#on-primary--active'); - --icon__system_computer_on-primary--disabled: url('#{$icons-path}system/light/computer.svg#on-primary--disabled'); - --icon__system_computer_on-disabled--enabled: url('#{$icons-path}system/light/computer.svg#on-disabled--enabled'); - --icon__system_computer_on-message--enabled: url('#{$icons-path}system/light/computer.svg#on-message--enabled'); - --icon__system_computer_on-elevation--enabled: url('#{$icons-path}system/light/computer.svg#on-elevation--enabled'); - --icon__system_computer_primary--enabled: url('#{$icons-path}system/light/computer.svg#primary--enabled'); - --icon__system_computer_primary--hover: url('#{$icons-path}system/light/computer.svg#primary--hover'); - --icon__system_computer_primary--active: url('#{$icons-path}system/light/computer.svg#primary--active'); - --icon__system_computer_primary--disabled: url('#{$icons-path}system/light/computer.svg#primary--disabled'); - --icon__system_computer_error--enabled: url('#{$icons-path}system/light/computer.svg#error--enabled'); - --icon__system_computer_error-actionable--enabled: url('#{$icons-path}system/light/computer.svg#error-actionable--enabled'); - --icon__system_computer_error-actionable--hover: url('#{$icons-path}system/light/computer.svg#error-actionable--hover'); - --icon__system_computer_error-actionable--active: url('#{$icons-path}system/light/computer.svg#error-actionable--active'); - --icon__system_computer_error-actionable--disabled: url('#{$icons-path}system/light/computer.svg#error-actionable--disabled'); - --icon__system_computer_warning--enabled: url('#{$icons-path}system/light/computer.svg#warning--enabled'); - --icon__system_computer_success--enabled: url('#{$icons-path}system/light/computer.svg#success--enabled'); - --icon__system_computer_neutral--enabled: url('#{$icons-path}system/light/computer.svg#neutral--enabled'); - --icon__system_computer_neutral--hover: url('#{$icons-path}system/light/computer.svg#neutral--hover'); - --icon__system_computer_neutral--active: url('#{$icons-path}system/light/computer.svg#neutral--active'); - --icon__system_computer_neutral--disabled: url('#{$icons-path}system/light/computer.svg#neutral--disabled'); - --icon__system_computer_highlighted--enabled: url('#{$icons-path}system/light/computer.svg#highlighted--enabled'); - --icon__system_computer_bright--enabled: url('#{$icons-path}system/light/computer.svg#bright--enabled'); - --icon__system_company_on-surface--enabled: url('#{$icons-path}system/light/company.svg#on-surface--enabled'); - --icon__system_company_on-surface--hover: url('#{$icons-path}system/light/company.svg#on-surface--hover'); - --icon__system_company_on-surface--active: url('#{$icons-path}system/light/company.svg#on-surface--active'); - --icon__system_company_on-surface--disabled: url('#{$icons-path}system/light/company.svg#on-surface--disabled'); - --icon__system_company_on-primary--enabled: url('#{$icons-path}system/light/company.svg#on-primary--enabled'); - --icon__system_company_on-primary--hover: url('#{$icons-path}system/light/company.svg#on-primary--hover'); - --icon__system_company_on-primary--active: url('#{$icons-path}system/light/company.svg#on-primary--active'); - --icon__system_company_on-primary--disabled: url('#{$icons-path}system/light/company.svg#on-primary--disabled'); - --icon__system_company_on-disabled--enabled: url('#{$icons-path}system/light/company.svg#on-disabled--enabled'); - --icon__system_company_on-message--enabled: url('#{$icons-path}system/light/company.svg#on-message--enabled'); - --icon__system_company_on-elevation--enabled: url('#{$icons-path}system/light/company.svg#on-elevation--enabled'); - --icon__system_company_primary--enabled: url('#{$icons-path}system/light/company.svg#primary--enabled'); - --icon__system_company_primary--hover: url('#{$icons-path}system/light/company.svg#primary--hover'); - --icon__system_company_primary--active: url('#{$icons-path}system/light/company.svg#primary--active'); - --icon__system_company_primary--disabled: url('#{$icons-path}system/light/company.svg#primary--disabled'); - --icon__system_company_error--enabled: url('#{$icons-path}system/light/company.svg#error--enabled'); - --icon__system_company_error-actionable--enabled: url('#{$icons-path}system/light/company.svg#error-actionable--enabled'); - --icon__system_company_error-actionable--hover: url('#{$icons-path}system/light/company.svg#error-actionable--hover'); - --icon__system_company_error-actionable--active: url('#{$icons-path}system/light/company.svg#error-actionable--active'); - --icon__system_company_error-actionable--disabled: url('#{$icons-path}system/light/company.svg#error-actionable--disabled'); - --icon__system_company_warning--enabled: url('#{$icons-path}system/light/company.svg#warning--enabled'); - --icon__system_company_success--enabled: url('#{$icons-path}system/light/company.svg#success--enabled'); - --icon__system_company_neutral--enabled: url('#{$icons-path}system/light/company.svg#neutral--enabled'); - --icon__system_company_neutral--hover: url('#{$icons-path}system/light/company.svg#neutral--hover'); - --icon__system_company_neutral--active: url('#{$icons-path}system/light/company.svg#neutral--active'); - --icon__system_company_neutral--disabled: url('#{$icons-path}system/light/company.svg#neutral--disabled'); - --icon__system_company_highlighted--enabled: url('#{$icons-path}system/light/company.svg#highlighted--enabled'); - --icon__system_company_bright--enabled: url('#{$icons-path}system/light/company.svg#bright--enabled'); - --icon__system_collapse-content_on-surface--enabled: url('#{$icons-path}system/light/collapse-content.svg#on-surface--enabled'); - --icon__system_collapse-content_on-surface--hover: url('#{$icons-path}system/light/collapse-content.svg#on-surface--hover'); - --icon__system_collapse-content_on-surface--active: url('#{$icons-path}system/light/collapse-content.svg#on-surface--active'); - --icon__system_collapse-content_on-surface--disabled: url('#{$icons-path}system/light/collapse-content.svg#on-surface--disabled'); - --icon__system_collapse-content_on-primary--enabled: url('#{$icons-path}system/light/collapse-content.svg#on-primary--enabled'); - --icon__system_collapse-content_on-primary--hover: url('#{$icons-path}system/light/collapse-content.svg#on-primary--hover'); - --icon__system_collapse-content_on-primary--active: url('#{$icons-path}system/light/collapse-content.svg#on-primary--active'); - --icon__system_collapse-content_on-primary--disabled: url('#{$icons-path}system/light/collapse-content.svg#on-primary--disabled'); - --icon__system_collapse-content_on-disabled--enabled: url('#{$icons-path}system/light/collapse-content.svg#on-disabled--enabled'); - --icon__system_collapse-content_on-message--enabled: url('#{$icons-path}system/light/collapse-content.svg#on-message--enabled'); - --icon__system_collapse-content_on-elevation--enabled: url('#{$icons-path}system/light/collapse-content.svg#on-elevation--enabled'); - --icon__system_collapse-content_primary--enabled: url('#{$icons-path}system/light/collapse-content.svg#primary--enabled'); - --icon__system_collapse-content_primary--hover: url('#{$icons-path}system/light/collapse-content.svg#primary--hover'); - --icon__system_collapse-content_primary--active: url('#{$icons-path}system/light/collapse-content.svg#primary--active'); - --icon__system_collapse-content_primary--disabled: url('#{$icons-path}system/light/collapse-content.svg#primary--disabled'); - --icon__system_collapse-content_error--enabled: url('#{$icons-path}system/light/collapse-content.svg#error--enabled'); - --icon__system_collapse-content_error-actionable--enabled: url('#{$icons-path}system/light/collapse-content.svg#error-actionable--enabled'); - --icon__system_collapse-content_error-actionable--hover: url('#{$icons-path}system/light/collapse-content.svg#error-actionable--hover'); - --icon__system_collapse-content_error-actionable--active: url('#{$icons-path}system/light/collapse-content.svg#error-actionable--active'); - --icon__system_collapse-content_error-actionable--disabled: url('#{$icons-path}system/light/collapse-content.svg#error-actionable--disabled'); - --icon__system_collapse-content_warning--enabled: url('#{$icons-path}system/light/collapse-content.svg#warning--enabled'); - --icon__system_collapse-content_success--enabled: url('#{$icons-path}system/light/collapse-content.svg#success--enabled'); - --icon__system_collapse-content_neutral--enabled: url('#{$icons-path}system/light/collapse-content.svg#neutral--enabled'); - --icon__system_collapse-content_neutral--hover: url('#{$icons-path}system/light/collapse-content.svg#neutral--hover'); - --icon__system_collapse-content_neutral--active: url('#{$icons-path}system/light/collapse-content.svg#neutral--active'); - --icon__system_collapse-content_neutral--disabled: url('#{$icons-path}system/light/collapse-content.svg#neutral--disabled'); - --icon__system_collapse-content_highlighted--enabled: url('#{$icons-path}system/light/collapse-content.svg#highlighted--enabled'); - --icon__system_collapse-content_bright--enabled: url('#{$icons-path}system/light/collapse-content.svg#bright--enabled'); - --icon__system_close_on-surface--enabled: url('#{$icons-path}system/light/close.svg#on-surface--enabled'); - --icon__system_close_on-surface--hover: url('#{$icons-path}system/light/close.svg#on-surface--hover'); - --icon__system_close_on-surface--active: url('#{$icons-path}system/light/close.svg#on-surface--active'); - --icon__system_close_on-surface--disabled: url('#{$icons-path}system/light/close.svg#on-surface--disabled'); - --icon__system_close_on-primary--enabled: url('#{$icons-path}system/light/close.svg#on-primary--enabled'); - --icon__system_close_on-primary--hover: url('#{$icons-path}system/light/close.svg#on-primary--hover'); - --icon__system_close_on-primary--active: url('#{$icons-path}system/light/close.svg#on-primary--active'); - --icon__system_close_on-primary--disabled: url('#{$icons-path}system/light/close.svg#on-primary--disabled'); - --icon__system_close_on-disabled--enabled: url('#{$icons-path}system/light/close.svg#on-disabled--enabled'); - --icon__system_close_on-message--enabled: url('#{$icons-path}system/light/close.svg#on-message--enabled'); - --icon__system_close_on-elevation--enabled: url('#{$icons-path}system/light/close.svg#on-elevation--enabled'); - --icon__system_close_primary--enabled: url('#{$icons-path}system/light/close.svg#primary--enabled'); - --icon__system_close_primary--hover: url('#{$icons-path}system/light/close.svg#primary--hover'); - --icon__system_close_primary--active: url('#{$icons-path}system/light/close.svg#primary--active'); - --icon__system_close_primary--disabled: url('#{$icons-path}system/light/close.svg#primary--disabled'); - --icon__system_close_error--enabled: url('#{$icons-path}system/light/close.svg#error--enabled'); - --icon__system_close_error-actionable--enabled: url('#{$icons-path}system/light/close.svg#error-actionable--enabled'); - --icon__system_close_error-actionable--hover: url('#{$icons-path}system/light/close.svg#error-actionable--hover'); - --icon__system_close_error-actionable--active: url('#{$icons-path}system/light/close.svg#error-actionable--active'); - --icon__system_close_error-actionable--disabled: url('#{$icons-path}system/light/close.svg#error-actionable--disabled'); - --icon__system_close_warning--enabled: url('#{$icons-path}system/light/close.svg#warning--enabled'); - --icon__system_close_success--enabled: url('#{$icons-path}system/light/close.svg#success--enabled'); - --icon__system_close_neutral--enabled: url('#{$icons-path}system/light/close.svg#neutral--enabled'); - --icon__system_close_neutral--hover: url('#{$icons-path}system/light/close.svg#neutral--hover'); - --icon__system_close_neutral--active: url('#{$icons-path}system/light/close.svg#neutral--active'); - --icon__system_close_neutral--disabled: url('#{$icons-path}system/light/close.svg#neutral--disabled'); - --icon__system_close_highlighted--enabled: url('#{$icons-path}system/light/close.svg#highlighted--enabled'); - --icon__system_close_bright--enabled: url('#{$icons-path}system/light/close.svg#bright--enabled'); - --icon__system_close-small_on-surface--enabled: url('#{$icons-path}system/light/close-small.svg#on-surface--enabled'); - --icon__system_close-small_on-surface--hover: url('#{$icons-path}system/light/close-small.svg#on-surface--hover'); - --icon__system_close-small_on-surface--active: url('#{$icons-path}system/light/close-small.svg#on-surface--active'); - --icon__system_close-small_on-surface--disabled: url('#{$icons-path}system/light/close-small.svg#on-surface--disabled'); - --icon__system_close-small_on-primary--enabled: url('#{$icons-path}system/light/close-small.svg#on-primary--enabled'); - --icon__system_close-small_on-primary--hover: url('#{$icons-path}system/light/close-small.svg#on-primary--hover'); - --icon__system_close-small_on-primary--active: url('#{$icons-path}system/light/close-small.svg#on-primary--active'); - --icon__system_close-small_on-primary--disabled: url('#{$icons-path}system/light/close-small.svg#on-primary--disabled'); - --icon__system_close-small_on-disabled--enabled: url('#{$icons-path}system/light/close-small.svg#on-disabled--enabled'); - --icon__system_close-small_on-message--enabled: url('#{$icons-path}system/light/close-small.svg#on-message--enabled'); - --icon__system_close-small_on-elevation--enabled: url('#{$icons-path}system/light/close-small.svg#on-elevation--enabled'); - --icon__system_close-small_primary--enabled: url('#{$icons-path}system/light/close-small.svg#primary--enabled'); - --icon__system_close-small_primary--hover: url('#{$icons-path}system/light/close-small.svg#primary--hover'); - --icon__system_close-small_primary--active: url('#{$icons-path}system/light/close-small.svg#primary--active'); - --icon__system_close-small_primary--disabled: url('#{$icons-path}system/light/close-small.svg#primary--disabled'); - --icon__system_close-small_error--enabled: url('#{$icons-path}system/light/close-small.svg#error--enabled'); - --icon__system_close-small_error-actionable--enabled: url('#{$icons-path}system/light/close-small.svg#error-actionable--enabled'); - --icon__system_close-small_error-actionable--hover: url('#{$icons-path}system/light/close-small.svg#error-actionable--hover'); - --icon__system_close-small_error-actionable--active: url('#{$icons-path}system/light/close-small.svg#error-actionable--active'); - --icon__system_close-small_error-actionable--disabled: url('#{$icons-path}system/light/close-small.svg#error-actionable--disabled'); - --icon__system_close-small_warning--enabled: url('#{$icons-path}system/light/close-small.svg#warning--enabled'); - --icon__system_close-small_success--enabled: url('#{$icons-path}system/light/close-small.svg#success--enabled'); - --icon__system_close-small_neutral--enabled: url('#{$icons-path}system/light/close-small.svg#neutral--enabled'); - --icon__system_close-small_neutral--hover: url('#{$icons-path}system/light/close-small.svg#neutral--hover'); - --icon__system_close-small_neutral--active: url('#{$icons-path}system/light/close-small.svg#neutral--active'); - --icon__system_close-small_neutral--disabled: url('#{$icons-path}system/light/close-small.svg#neutral--disabled'); - --icon__system_close-small_highlighted--enabled: url('#{$icons-path}system/light/close-small.svg#highlighted--enabled'); - --icon__system_close-small_bright--enabled: url('#{$icons-path}system/light/close-small.svg#bright--enabled'); - --icon__system_close-sidebar_on-surface--enabled: url('#{$icons-path}system/light/close-sidebar.svg#on-surface--enabled'); - --icon__system_close-sidebar_on-surface--hover: url('#{$icons-path}system/light/close-sidebar.svg#on-surface--hover'); - --icon__system_close-sidebar_on-surface--active: url('#{$icons-path}system/light/close-sidebar.svg#on-surface--active'); - --icon__system_close-sidebar_on-surface--disabled: url('#{$icons-path}system/light/close-sidebar.svg#on-surface--disabled'); - --icon__system_close-sidebar_on-primary--enabled: url('#{$icons-path}system/light/close-sidebar.svg#on-primary--enabled'); - --icon__system_close-sidebar_on-primary--hover: url('#{$icons-path}system/light/close-sidebar.svg#on-primary--hover'); - --icon__system_close-sidebar_on-primary--active: url('#{$icons-path}system/light/close-sidebar.svg#on-primary--active'); - --icon__system_close-sidebar_on-primary--disabled: url('#{$icons-path}system/light/close-sidebar.svg#on-primary--disabled'); - --icon__system_close-sidebar_on-disabled--enabled: url('#{$icons-path}system/light/close-sidebar.svg#on-disabled--enabled'); - --icon__system_close-sidebar_on-message--enabled: url('#{$icons-path}system/light/close-sidebar.svg#on-message--enabled'); - --icon__system_close-sidebar_on-elevation--enabled: url('#{$icons-path}system/light/close-sidebar.svg#on-elevation--enabled'); - --icon__system_close-sidebar_primary--enabled: url('#{$icons-path}system/light/close-sidebar.svg#primary--enabled'); - --icon__system_close-sidebar_primary--hover: url('#{$icons-path}system/light/close-sidebar.svg#primary--hover'); - --icon__system_close-sidebar_primary--active: url('#{$icons-path}system/light/close-sidebar.svg#primary--active'); - --icon__system_close-sidebar_primary--disabled: url('#{$icons-path}system/light/close-sidebar.svg#primary--disabled'); - --icon__system_close-sidebar_error--enabled: url('#{$icons-path}system/light/close-sidebar.svg#error--enabled'); - --icon__system_close-sidebar_error-actionable--enabled: url('#{$icons-path}system/light/close-sidebar.svg#error-actionable--enabled'); - --icon__system_close-sidebar_error-actionable--hover: url('#{$icons-path}system/light/close-sidebar.svg#error-actionable--hover'); - --icon__system_close-sidebar_error-actionable--active: url('#{$icons-path}system/light/close-sidebar.svg#error-actionable--active'); - --icon__system_close-sidebar_error-actionable--disabled: url('#{$icons-path}system/light/close-sidebar.svg#error-actionable--disabled'); - --icon__system_close-sidebar_warning--enabled: url('#{$icons-path}system/light/close-sidebar.svg#warning--enabled'); - --icon__system_close-sidebar_success--enabled: url('#{$icons-path}system/light/close-sidebar.svg#success--enabled'); - --icon__system_close-sidebar_neutral--enabled: url('#{$icons-path}system/light/close-sidebar.svg#neutral--enabled'); - --icon__system_close-sidebar_neutral--hover: url('#{$icons-path}system/light/close-sidebar.svg#neutral--hover'); - --icon__system_close-sidebar_neutral--active: url('#{$icons-path}system/light/close-sidebar.svg#neutral--active'); - --icon__system_close-sidebar_neutral--disabled: url('#{$icons-path}system/light/close-sidebar.svg#neutral--disabled'); - --icon__system_close-sidebar_highlighted--enabled: url('#{$icons-path}system/light/close-sidebar.svg#highlighted--enabled'); - --icon__system_close-sidebar_bright--enabled: url('#{$icons-path}system/light/close-sidebar.svg#bright--enabled'); - --icon__system_chevron-up_on-surface--enabled: url('#{$icons-path}system/light/chevron-up.svg#on-surface--enabled'); - --icon__system_chevron-up_on-surface--hover: url('#{$icons-path}system/light/chevron-up.svg#on-surface--hover'); - --icon__system_chevron-up_on-surface--active: url('#{$icons-path}system/light/chevron-up.svg#on-surface--active'); - --icon__system_chevron-up_on-surface--disabled: url('#{$icons-path}system/light/chevron-up.svg#on-surface--disabled'); - --icon__system_chevron-up_on-primary--enabled: url('#{$icons-path}system/light/chevron-up.svg#on-primary--enabled'); - --icon__system_chevron-up_on-primary--hover: url('#{$icons-path}system/light/chevron-up.svg#on-primary--hover'); - --icon__system_chevron-up_on-primary--active: url('#{$icons-path}system/light/chevron-up.svg#on-primary--active'); - --icon__system_chevron-up_on-primary--disabled: url('#{$icons-path}system/light/chevron-up.svg#on-primary--disabled'); - --icon__system_chevron-up_on-disabled--enabled: url('#{$icons-path}system/light/chevron-up.svg#on-disabled--enabled'); - --icon__system_chevron-up_on-message--enabled: url('#{$icons-path}system/light/chevron-up.svg#on-message--enabled'); - --icon__system_chevron-up_on-elevation--enabled: url('#{$icons-path}system/light/chevron-up.svg#on-elevation--enabled'); - --icon__system_chevron-up_primary--enabled: url('#{$icons-path}system/light/chevron-up.svg#primary--enabled'); - --icon__system_chevron-up_primary--hover: url('#{$icons-path}system/light/chevron-up.svg#primary--hover'); - --icon__system_chevron-up_primary--active: url('#{$icons-path}system/light/chevron-up.svg#primary--active'); - --icon__system_chevron-up_primary--disabled: url('#{$icons-path}system/light/chevron-up.svg#primary--disabled'); - --icon__system_chevron-up_error--enabled: url('#{$icons-path}system/light/chevron-up.svg#error--enabled'); - --icon__system_chevron-up_error-actionable--enabled: url('#{$icons-path}system/light/chevron-up.svg#error-actionable--enabled'); - --icon__system_chevron-up_error-actionable--hover: url('#{$icons-path}system/light/chevron-up.svg#error-actionable--hover'); - --icon__system_chevron-up_error-actionable--active: url('#{$icons-path}system/light/chevron-up.svg#error-actionable--active'); - --icon__system_chevron-up_error-actionable--disabled: url('#{$icons-path}system/light/chevron-up.svg#error-actionable--disabled'); - --icon__system_chevron-up_warning--enabled: url('#{$icons-path}system/light/chevron-up.svg#warning--enabled'); - --icon__system_chevron-up_success--enabled: url('#{$icons-path}system/light/chevron-up.svg#success--enabled'); - --icon__system_chevron-up_neutral--enabled: url('#{$icons-path}system/light/chevron-up.svg#neutral--enabled'); - --icon__system_chevron-up_neutral--hover: url('#{$icons-path}system/light/chevron-up.svg#neutral--hover'); - --icon__system_chevron-up_neutral--active: url('#{$icons-path}system/light/chevron-up.svg#neutral--active'); - --icon__system_chevron-up_neutral--disabled: url('#{$icons-path}system/light/chevron-up.svg#neutral--disabled'); - --icon__system_chevron-up_highlighted--enabled: url('#{$icons-path}system/light/chevron-up.svg#highlighted--enabled'); - --icon__system_chevron-up_bright--enabled: url('#{$icons-path}system/light/chevron-up.svg#bright--enabled'); - --icon__system_chevron-small-up_on-surface--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#on-surface--enabled'); - --icon__system_chevron-small-up_on-surface--hover: url('#{$icons-path}system/light/chevron-small-up.svg#on-surface--hover'); - --icon__system_chevron-small-up_on-surface--active: url('#{$icons-path}system/light/chevron-small-up.svg#on-surface--active'); - --icon__system_chevron-small-up_on-surface--disabled: url('#{$icons-path}system/light/chevron-small-up.svg#on-surface--disabled'); - --icon__system_chevron-small-up_on-primary--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#on-primary--enabled'); - --icon__system_chevron-small-up_on-primary--hover: url('#{$icons-path}system/light/chevron-small-up.svg#on-primary--hover'); - --icon__system_chevron-small-up_on-primary--active: url('#{$icons-path}system/light/chevron-small-up.svg#on-primary--active'); - --icon__system_chevron-small-up_on-primary--disabled: url('#{$icons-path}system/light/chevron-small-up.svg#on-primary--disabled'); - --icon__system_chevron-small-up_on-disabled--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#on-disabled--enabled'); - --icon__system_chevron-small-up_on-message--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#on-message--enabled'); - --icon__system_chevron-small-up_on-elevation--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#on-elevation--enabled'); - --icon__system_chevron-small-up_primary--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#primary--enabled'); - --icon__system_chevron-small-up_primary--hover: url('#{$icons-path}system/light/chevron-small-up.svg#primary--hover'); - --icon__system_chevron-small-up_primary--active: url('#{$icons-path}system/light/chevron-small-up.svg#primary--active'); - --icon__system_chevron-small-up_primary--disabled: url('#{$icons-path}system/light/chevron-small-up.svg#primary--disabled'); - --icon__system_chevron-small-up_error--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#error--enabled'); - --icon__system_chevron-small-up_error-actionable--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#error-actionable--enabled'); - --icon__system_chevron-small-up_error-actionable--hover: url('#{$icons-path}system/light/chevron-small-up.svg#error-actionable--hover'); - --icon__system_chevron-small-up_error-actionable--active: url('#{$icons-path}system/light/chevron-small-up.svg#error-actionable--active'); - --icon__system_chevron-small-up_error-actionable--disabled: url('#{$icons-path}system/light/chevron-small-up.svg#error-actionable--disabled'); - --icon__system_chevron-small-up_warning--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#warning--enabled'); - --icon__system_chevron-small-up_success--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#success--enabled'); - --icon__system_chevron-small-up_neutral--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#neutral--enabled'); - --icon__system_chevron-small-up_neutral--hover: url('#{$icons-path}system/light/chevron-small-up.svg#neutral--hover'); - --icon__system_chevron-small-up_neutral--active: url('#{$icons-path}system/light/chevron-small-up.svg#neutral--active'); - --icon__system_chevron-small-up_neutral--disabled: url('#{$icons-path}system/light/chevron-small-up.svg#neutral--disabled'); - --icon__system_chevron-small-up_highlighted--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#highlighted--enabled'); - --icon__system_chevron-small-up_bright--enabled: url('#{$icons-path}system/light/chevron-small-up.svg#bright--enabled'); - --icon__system_chevron-small-right_on-surface--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#on-surface--enabled'); - --icon__system_chevron-small-right_on-surface--hover: url('#{$icons-path}system/light/chevron-small-right.svg#on-surface--hover'); - --icon__system_chevron-small-right_on-surface--active: url('#{$icons-path}system/light/chevron-small-right.svg#on-surface--active'); - --icon__system_chevron-small-right_on-surface--disabled: url('#{$icons-path}system/light/chevron-small-right.svg#on-surface--disabled'); - --icon__system_chevron-small-right_on-primary--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#on-primary--enabled'); - --icon__system_chevron-small-right_on-primary--hover: url('#{$icons-path}system/light/chevron-small-right.svg#on-primary--hover'); - --icon__system_chevron-small-right_on-primary--active: url('#{$icons-path}system/light/chevron-small-right.svg#on-primary--active'); - --icon__system_chevron-small-right_on-primary--disabled: url('#{$icons-path}system/light/chevron-small-right.svg#on-primary--disabled'); - --icon__system_chevron-small-right_on-disabled--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#on-disabled--enabled'); - --icon__system_chevron-small-right_on-message--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#on-message--enabled'); - --icon__system_chevron-small-right_on-elevation--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#on-elevation--enabled'); - --icon__system_chevron-small-right_primary--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#primary--enabled'); - --icon__system_chevron-small-right_primary--hover: url('#{$icons-path}system/light/chevron-small-right.svg#primary--hover'); - --icon__system_chevron-small-right_primary--active: url('#{$icons-path}system/light/chevron-small-right.svg#primary--active'); - --icon__system_chevron-small-right_primary--disabled: url('#{$icons-path}system/light/chevron-small-right.svg#primary--disabled'); - --icon__system_chevron-small-right_error--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#error--enabled'); - --icon__system_chevron-small-right_error-actionable--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#error-actionable--enabled'); - --icon__system_chevron-small-right_error-actionable--hover: url('#{$icons-path}system/light/chevron-small-right.svg#error-actionable--hover'); - --icon__system_chevron-small-right_error-actionable--active: url('#{$icons-path}system/light/chevron-small-right.svg#error-actionable--active'); - --icon__system_chevron-small-right_error-actionable--disabled: url('#{$icons-path}system/light/chevron-small-right.svg#error-actionable--disabled'); - --icon__system_chevron-small-right_warning--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#warning--enabled'); - --icon__system_chevron-small-right_success--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#success--enabled'); - --icon__system_chevron-small-right_neutral--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#neutral--enabled'); - --icon__system_chevron-small-right_neutral--hover: url('#{$icons-path}system/light/chevron-small-right.svg#neutral--hover'); - --icon__system_chevron-small-right_neutral--active: url('#{$icons-path}system/light/chevron-small-right.svg#neutral--active'); - --icon__system_chevron-small-right_neutral--disabled: url('#{$icons-path}system/light/chevron-small-right.svg#neutral--disabled'); - --icon__system_chevron-small-right_highlighted--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#highlighted--enabled'); - --icon__system_chevron-small-right_bright--enabled: url('#{$icons-path}system/light/chevron-small-right.svg#bright--enabled'); - --icon__system_chevron-small-left_on-surface--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#on-surface--enabled'); - --icon__system_chevron-small-left_on-surface--hover: url('#{$icons-path}system/light/chevron-small-left.svg#on-surface--hover'); - --icon__system_chevron-small-left_on-surface--active: url('#{$icons-path}system/light/chevron-small-left.svg#on-surface--active'); - --icon__system_chevron-small-left_on-surface--disabled: url('#{$icons-path}system/light/chevron-small-left.svg#on-surface--disabled'); - --icon__system_chevron-small-left_on-primary--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#on-primary--enabled'); - --icon__system_chevron-small-left_on-primary--hover: url('#{$icons-path}system/light/chevron-small-left.svg#on-primary--hover'); - --icon__system_chevron-small-left_on-primary--active: url('#{$icons-path}system/light/chevron-small-left.svg#on-primary--active'); - --icon__system_chevron-small-left_on-primary--disabled: url('#{$icons-path}system/light/chevron-small-left.svg#on-primary--disabled'); - --icon__system_chevron-small-left_on-disabled--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#on-disabled--enabled'); - --icon__system_chevron-small-left_on-message--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#on-message--enabled'); - --icon__system_chevron-small-left_on-elevation--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#on-elevation--enabled'); - --icon__system_chevron-small-left_primary--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#primary--enabled'); - --icon__system_chevron-small-left_primary--hover: url('#{$icons-path}system/light/chevron-small-left.svg#primary--hover'); - --icon__system_chevron-small-left_primary--active: url('#{$icons-path}system/light/chevron-small-left.svg#primary--active'); - --icon__system_chevron-small-left_primary--disabled: url('#{$icons-path}system/light/chevron-small-left.svg#primary--disabled'); - --icon__system_chevron-small-left_error--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#error--enabled'); - --icon__system_chevron-small-left_error-actionable--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#error-actionable--enabled'); - --icon__system_chevron-small-left_error-actionable--hover: url('#{$icons-path}system/light/chevron-small-left.svg#error-actionable--hover'); - --icon__system_chevron-small-left_error-actionable--active: url('#{$icons-path}system/light/chevron-small-left.svg#error-actionable--active'); - --icon__system_chevron-small-left_error-actionable--disabled: url('#{$icons-path}system/light/chevron-small-left.svg#error-actionable--disabled'); - --icon__system_chevron-small-left_warning--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#warning--enabled'); - --icon__system_chevron-small-left_success--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#success--enabled'); - --icon__system_chevron-small-left_neutral--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#neutral--enabled'); - --icon__system_chevron-small-left_neutral--hover: url('#{$icons-path}system/light/chevron-small-left.svg#neutral--hover'); - --icon__system_chevron-small-left_neutral--active: url('#{$icons-path}system/light/chevron-small-left.svg#neutral--active'); - --icon__system_chevron-small-left_neutral--disabled: url('#{$icons-path}system/light/chevron-small-left.svg#neutral--disabled'); - --icon__system_chevron-small-left_highlighted--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#highlighted--enabled'); - --icon__system_chevron-small-left_bright--enabled: url('#{$icons-path}system/light/chevron-small-left.svg#bright--enabled'); - --icon__system_chevron-small-down_on-surface--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#on-surface--enabled'); - --icon__system_chevron-small-down_on-surface--hover: url('#{$icons-path}system/light/chevron-small-down.svg#on-surface--hover'); - --icon__system_chevron-small-down_on-surface--active: url('#{$icons-path}system/light/chevron-small-down.svg#on-surface--active'); - --icon__system_chevron-small-down_on-surface--disabled: url('#{$icons-path}system/light/chevron-small-down.svg#on-surface--disabled'); - --icon__system_chevron-small-down_on-primary--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#on-primary--enabled'); - --icon__system_chevron-small-down_on-primary--hover: url('#{$icons-path}system/light/chevron-small-down.svg#on-primary--hover'); - --icon__system_chevron-small-down_on-primary--active: url('#{$icons-path}system/light/chevron-small-down.svg#on-primary--active'); - --icon__system_chevron-small-down_on-primary--disabled: url('#{$icons-path}system/light/chevron-small-down.svg#on-primary--disabled'); - --icon__system_chevron-small-down_on-disabled--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#on-disabled--enabled'); - --icon__system_chevron-small-down_on-message--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#on-message--enabled'); - --icon__system_chevron-small-down_on-elevation--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#on-elevation--enabled'); - --icon__system_chevron-small-down_primary--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#primary--enabled'); - --icon__system_chevron-small-down_primary--hover: url('#{$icons-path}system/light/chevron-small-down.svg#primary--hover'); - --icon__system_chevron-small-down_primary--active: url('#{$icons-path}system/light/chevron-small-down.svg#primary--active'); - --icon__system_chevron-small-down_primary--disabled: url('#{$icons-path}system/light/chevron-small-down.svg#primary--disabled'); - --icon__system_chevron-small-down_error--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#error--enabled'); - --icon__system_chevron-small-down_error-actionable--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#error-actionable--enabled'); - --icon__system_chevron-small-down_error-actionable--hover: url('#{$icons-path}system/light/chevron-small-down.svg#error-actionable--hover'); - --icon__system_chevron-small-down_error-actionable--active: url('#{$icons-path}system/light/chevron-small-down.svg#error-actionable--active'); - --icon__system_chevron-small-down_error-actionable--disabled: url('#{$icons-path}system/light/chevron-small-down.svg#error-actionable--disabled'); - --icon__system_chevron-small-down_warning--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#warning--enabled'); - --icon__system_chevron-small-down_success--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#success--enabled'); - --icon__system_chevron-small-down_neutral--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#neutral--enabled'); - --icon__system_chevron-small-down_neutral--hover: url('#{$icons-path}system/light/chevron-small-down.svg#neutral--hover'); - --icon__system_chevron-small-down_neutral--active: url('#{$icons-path}system/light/chevron-small-down.svg#neutral--active'); - --icon__system_chevron-small-down_neutral--disabled: url('#{$icons-path}system/light/chevron-small-down.svg#neutral--disabled'); - --icon__system_chevron-small-down_highlighted--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#highlighted--enabled'); - --icon__system_chevron-small-down_bright--enabled: url('#{$icons-path}system/light/chevron-small-down.svg#bright--enabled'); - --icon__system_chevron-right_on-surface--enabled: url('#{$icons-path}system/light/chevron-right.svg#on-surface--enabled'); - --icon__system_chevron-right_on-surface--hover: url('#{$icons-path}system/light/chevron-right.svg#on-surface--hover'); - --icon__system_chevron-right_on-surface--active: url('#{$icons-path}system/light/chevron-right.svg#on-surface--active'); - --icon__system_chevron-right_on-surface--disabled: url('#{$icons-path}system/light/chevron-right.svg#on-surface--disabled'); - --icon__system_chevron-right_on-primary--enabled: url('#{$icons-path}system/light/chevron-right.svg#on-primary--enabled'); - --icon__system_chevron-right_on-primary--hover: url('#{$icons-path}system/light/chevron-right.svg#on-primary--hover'); - --icon__system_chevron-right_on-primary--active: url('#{$icons-path}system/light/chevron-right.svg#on-primary--active'); - --icon__system_chevron-right_on-primary--disabled: url('#{$icons-path}system/light/chevron-right.svg#on-primary--disabled'); - --icon__system_chevron-right_on-disabled--enabled: url('#{$icons-path}system/light/chevron-right.svg#on-disabled--enabled'); - --icon__system_chevron-right_on-message--enabled: url('#{$icons-path}system/light/chevron-right.svg#on-message--enabled'); - --icon__system_chevron-right_on-elevation--enabled: url('#{$icons-path}system/light/chevron-right.svg#on-elevation--enabled'); - --icon__system_chevron-right_primary--enabled: url('#{$icons-path}system/light/chevron-right.svg#primary--enabled'); - --icon__system_chevron-right_primary--hover: url('#{$icons-path}system/light/chevron-right.svg#primary--hover'); - --icon__system_chevron-right_primary--active: url('#{$icons-path}system/light/chevron-right.svg#primary--active'); - --icon__system_chevron-right_primary--disabled: url('#{$icons-path}system/light/chevron-right.svg#primary--disabled'); - --icon__system_chevron-right_error--enabled: url('#{$icons-path}system/light/chevron-right.svg#error--enabled'); - --icon__system_chevron-right_error-actionable--enabled: url('#{$icons-path}system/light/chevron-right.svg#error-actionable--enabled'); - --icon__system_chevron-right_error-actionable--hover: url('#{$icons-path}system/light/chevron-right.svg#error-actionable--hover'); - --icon__system_chevron-right_error-actionable--active: url('#{$icons-path}system/light/chevron-right.svg#error-actionable--active'); - --icon__system_chevron-right_error-actionable--disabled: url('#{$icons-path}system/light/chevron-right.svg#error-actionable--disabled'); - --icon__system_chevron-right_warning--enabled: url('#{$icons-path}system/light/chevron-right.svg#warning--enabled'); - --icon__system_chevron-right_success--enabled: url('#{$icons-path}system/light/chevron-right.svg#success--enabled'); - --icon__system_chevron-right_neutral--enabled: url('#{$icons-path}system/light/chevron-right.svg#neutral--enabled'); - --icon__system_chevron-right_neutral--hover: url('#{$icons-path}system/light/chevron-right.svg#neutral--hover'); - --icon__system_chevron-right_neutral--active: url('#{$icons-path}system/light/chevron-right.svg#neutral--active'); - --icon__system_chevron-right_neutral--disabled: url('#{$icons-path}system/light/chevron-right.svg#neutral--disabled'); - --icon__system_chevron-right_highlighted--enabled: url('#{$icons-path}system/light/chevron-right.svg#highlighted--enabled'); - --icon__system_chevron-right_bright--enabled: url('#{$icons-path}system/light/chevron-right.svg#bright--enabled'); - --icon__system_chevron-pag-right_on-surface--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#on-surface--enabled'); - --icon__system_chevron-pag-right_on-surface--hover: url('#{$icons-path}system/light/chevron-pag-right.svg#on-surface--hover'); - --icon__system_chevron-pag-right_on-surface--active: url('#{$icons-path}system/light/chevron-pag-right.svg#on-surface--active'); - --icon__system_chevron-pag-right_on-surface--disabled: url('#{$icons-path}system/light/chevron-pag-right.svg#on-surface--disabled'); - --icon__system_chevron-pag-right_on-primary--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#on-primary--enabled'); - --icon__system_chevron-pag-right_on-primary--hover: url('#{$icons-path}system/light/chevron-pag-right.svg#on-primary--hover'); - --icon__system_chevron-pag-right_on-primary--active: url('#{$icons-path}system/light/chevron-pag-right.svg#on-primary--active'); - --icon__system_chevron-pag-right_on-primary--disabled: url('#{$icons-path}system/light/chevron-pag-right.svg#on-primary--disabled'); - --icon__system_chevron-pag-right_on-disabled--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#on-disabled--enabled'); - --icon__system_chevron-pag-right_on-message--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#on-message--enabled'); - --icon__system_chevron-pag-right_on-elevation--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#on-elevation--enabled'); - --icon__system_chevron-pag-right_primary--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#primary--enabled'); - --icon__system_chevron-pag-right_primary--hover: url('#{$icons-path}system/light/chevron-pag-right.svg#primary--hover'); - --icon__system_chevron-pag-right_primary--active: url('#{$icons-path}system/light/chevron-pag-right.svg#primary--active'); - --icon__system_chevron-pag-right_primary--disabled: url('#{$icons-path}system/light/chevron-pag-right.svg#primary--disabled'); - --icon__system_chevron-pag-right_error--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#error--enabled'); - --icon__system_chevron-pag-right_error-actionable--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#error-actionable--enabled'); - --icon__system_chevron-pag-right_error-actionable--hover: url('#{$icons-path}system/light/chevron-pag-right.svg#error-actionable--hover'); - --icon__system_chevron-pag-right_error-actionable--active: url('#{$icons-path}system/light/chevron-pag-right.svg#error-actionable--active'); - --icon__system_chevron-pag-right_error-actionable--disabled: url('#{$icons-path}system/light/chevron-pag-right.svg#error-actionable--disabled'); - --icon__system_chevron-pag-right_warning--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#warning--enabled'); - --icon__system_chevron-pag-right_success--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#success--enabled'); - --icon__system_chevron-pag-right_neutral--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#neutral--enabled'); - --icon__system_chevron-pag-right_neutral--hover: url('#{$icons-path}system/light/chevron-pag-right.svg#neutral--hover'); - --icon__system_chevron-pag-right_neutral--active: url('#{$icons-path}system/light/chevron-pag-right.svg#neutral--active'); - --icon__system_chevron-pag-right_neutral--disabled: url('#{$icons-path}system/light/chevron-pag-right.svg#neutral--disabled'); - --icon__system_chevron-pag-right_highlighted--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#highlighted--enabled'); - --icon__system_chevron-pag-right_bright--enabled: url('#{$icons-path}system/light/chevron-pag-right.svg#bright--enabled'); - --icon__system_chevron-pag-left_on-surface--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#on-surface--enabled'); - --icon__system_chevron-pag-left_on-surface--hover: url('#{$icons-path}system/light/chevron-pag-left.svg#on-surface--hover'); - --icon__system_chevron-pag-left_on-surface--active: url('#{$icons-path}system/light/chevron-pag-left.svg#on-surface--active'); - --icon__system_chevron-pag-left_on-surface--disabled: url('#{$icons-path}system/light/chevron-pag-left.svg#on-surface--disabled'); - --icon__system_chevron-pag-left_on-primary--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#on-primary--enabled'); - --icon__system_chevron-pag-left_on-primary--hover: url('#{$icons-path}system/light/chevron-pag-left.svg#on-primary--hover'); - --icon__system_chevron-pag-left_on-primary--active: url('#{$icons-path}system/light/chevron-pag-left.svg#on-primary--active'); - --icon__system_chevron-pag-left_on-primary--disabled: url('#{$icons-path}system/light/chevron-pag-left.svg#on-primary--disabled'); - --icon__system_chevron-pag-left_on-disabled--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#on-disabled--enabled'); - --icon__system_chevron-pag-left_on-message--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#on-message--enabled'); - --icon__system_chevron-pag-left_on-elevation--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#on-elevation--enabled'); - --icon__system_chevron-pag-left_primary--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#primary--enabled'); - --icon__system_chevron-pag-left_primary--hover: url('#{$icons-path}system/light/chevron-pag-left.svg#primary--hover'); - --icon__system_chevron-pag-left_primary--active: url('#{$icons-path}system/light/chevron-pag-left.svg#primary--active'); - --icon__system_chevron-pag-left_primary--disabled: url('#{$icons-path}system/light/chevron-pag-left.svg#primary--disabled'); - --icon__system_chevron-pag-left_error--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#error--enabled'); - --icon__system_chevron-pag-left_error-actionable--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#error-actionable--enabled'); - --icon__system_chevron-pag-left_error-actionable--hover: url('#{$icons-path}system/light/chevron-pag-left.svg#error-actionable--hover'); - --icon__system_chevron-pag-left_error-actionable--active: url('#{$icons-path}system/light/chevron-pag-left.svg#error-actionable--active'); - --icon__system_chevron-pag-left_error-actionable--disabled: url('#{$icons-path}system/light/chevron-pag-left.svg#error-actionable--disabled'); - --icon__system_chevron-pag-left_warning--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#warning--enabled'); - --icon__system_chevron-pag-left_success--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#success--enabled'); - --icon__system_chevron-pag-left_neutral--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#neutral--enabled'); - --icon__system_chevron-pag-left_neutral--hover: url('#{$icons-path}system/light/chevron-pag-left.svg#neutral--hover'); - --icon__system_chevron-pag-left_neutral--active: url('#{$icons-path}system/light/chevron-pag-left.svg#neutral--active'); - --icon__system_chevron-pag-left_neutral--disabled: url('#{$icons-path}system/light/chevron-pag-left.svg#neutral--disabled'); - --icon__system_chevron-pag-left_highlighted--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#highlighted--enabled'); - --icon__system_chevron-pag-left_bright--enabled: url('#{$icons-path}system/light/chevron-pag-left.svg#bright--enabled'); - --icon__system_chevron-left_on-surface--enabled: url('#{$icons-path}system/light/chevron-left.svg#on-surface--enabled'); - --icon__system_chevron-left_on-surface--hover: url('#{$icons-path}system/light/chevron-left.svg#on-surface--hover'); - --icon__system_chevron-left_on-surface--active: url('#{$icons-path}system/light/chevron-left.svg#on-surface--active'); - --icon__system_chevron-left_on-surface--disabled: url('#{$icons-path}system/light/chevron-left.svg#on-surface--disabled'); - --icon__system_chevron-left_on-primary--enabled: url('#{$icons-path}system/light/chevron-left.svg#on-primary--enabled'); - --icon__system_chevron-left_on-primary--hover: url('#{$icons-path}system/light/chevron-left.svg#on-primary--hover'); - --icon__system_chevron-left_on-primary--active: url('#{$icons-path}system/light/chevron-left.svg#on-primary--active'); - --icon__system_chevron-left_on-primary--disabled: url('#{$icons-path}system/light/chevron-left.svg#on-primary--disabled'); - --icon__system_chevron-left_on-disabled--enabled: url('#{$icons-path}system/light/chevron-left.svg#on-disabled--enabled'); - --icon__system_chevron-left_on-message--enabled: url('#{$icons-path}system/light/chevron-left.svg#on-message--enabled'); - --icon__system_chevron-left_on-elevation--enabled: url('#{$icons-path}system/light/chevron-left.svg#on-elevation--enabled'); - --icon__system_chevron-left_primary--enabled: url('#{$icons-path}system/light/chevron-left.svg#primary--enabled'); - --icon__system_chevron-left_primary--hover: url('#{$icons-path}system/light/chevron-left.svg#primary--hover'); - --icon__system_chevron-left_primary--active: url('#{$icons-path}system/light/chevron-left.svg#primary--active'); - --icon__system_chevron-left_primary--disabled: url('#{$icons-path}system/light/chevron-left.svg#primary--disabled'); - --icon__system_chevron-left_error--enabled: url('#{$icons-path}system/light/chevron-left.svg#error--enabled'); - --icon__system_chevron-left_error-actionable--enabled: url('#{$icons-path}system/light/chevron-left.svg#error-actionable--enabled'); - --icon__system_chevron-left_error-actionable--hover: url('#{$icons-path}system/light/chevron-left.svg#error-actionable--hover'); - --icon__system_chevron-left_error-actionable--active: url('#{$icons-path}system/light/chevron-left.svg#error-actionable--active'); - --icon__system_chevron-left_error-actionable--disabled: url('#{$icons-path}system/light/chevron-left.svg#error-actionable--disabled'); - --icon__system_chevron-left_warning--enabled: url('#{$icons-path}system/light/chevron-left.svg#warning--enabled'); - --icon__system_chevron-left_success--enabled: url('#{$icons-path}system/light/chevron-left.svg#success--enabled'); - --icon__system_chevron-left_neutral--enabled: url('#{$icons-path}system/light/chevron-left.svg#neutral--enabled'); - --icon__system_chevron-left_neutral--hover: url('#{$icons-path}system/light/chevron-left.svg#neutral--hover'); - --icon__system_chevron-left_neutral--active: url('#{$icons-path}system/light/chevron-left.svg#neutral--active'); - --icon__system_chevron-left_neutral--disabled: url('#{$icons-path}system/light/chevron-left.svg#neutral--disabled'); - --icon__system_chevron-left_highlighted--enabled: url('#{$icons-path}system/light/chevron-left.svg#highlighted--enabled'); - --icon__system_chevron-left_bright--enabled: url('#{$icons-path}system/light/chevron-left.svg#bright--enabled'); - --icon__system_chevron-down_on-surface--enabled: url('#{$icons-path}system/light/chevron-down.svg#on-surface--enabled'); - --icon__system_chevron-down_on-surface--hover: url('#{$icons-path}system/light/chevron-down.svg#on-surface--hover'); - --icon__system_chevron-down_on-surface--active: url('#{$icons-path}system/light/chevron-down.svg#on-surface--active'); - --icon__system_chevron-down_on-surface--disabled: url('#{$icons-path}system/light/chevron-down.svg#on-surface--disabled'); - --icon__system_chevron-down_on-primary--enabled: url('#{$icons-path}system/light/chevron-down.svg#on-primary--enabled'); - --icon__system_chevron-down_on-primary--hover: url('#{$icons-path}system/light/chevron-down.svg#on-primary--hover'); - --icon__system_chevron-down_on-primary--active: url('#{$icons-path}system/light/chevron-down.svg#on-primary--active'); - --icon__system_chevron-down_on-primary--disabled: url('#{$icons-path}system/light/chevron-down.svg#on-primary--disabled'); - --icon__system_chevron-down_on-disabled--enabled: url('#{$icons-path}system/light/chevron-down.svg#on-disabled--enabled'); - --icon__system_chevron-down_on-message--enabled: url('#{$icons-path}system/light/chevron-down.svg#on-message--enabled'); - --icon__system_chevron-down_on-elevation--enabled: url('#{$icons-path}system/light/chevron-down.svg#on-elevation--enabled'); - --icon__system_chevron-down_primary--enabled: url('#{$icons-path}system/light/chevron-down.svg#primary--enabled'); - --icon__system_chevron-down_primary--hover: url('#{$icons-path}system/light/chevron-down.svg#primary--hover'); - --icon__system_chevron-down_primary--active: url('#{$icons-path}system/light/chevron-down.svg#primary--active'); - --icon__system_chevron-down_primary--disabled: url('#{$icons-path}system/light/chevron-down.svg#primary--disabled'); - --icon__system_chevron-down_error--enabled: url('#{$icons-path}system/light/chevron-down.svg#error--enabled'); - --icon__system_chevron-down_error-actionable--enabled: url('#{$icons-path}system/light/chevron-down.svg#error-actionable--enabled'); - --icon__system_chevron-down_error-actionable--hover: url('#{$icons-path}system/light/chevron-down.svg#error-actionable--hover'); - --icon__system_chevron-down_error-actionable--active: url('#{$icons-path}system/light/chevron-down.svg#error-actionable--active'); - --icon__system_chevron-down_error-actionable--disabled: url('#{$icons-path}system/light/chevron-down.svg#error-actionable--disabled'); - --icon__system_chevron-down_warning--enabled: url('#{$icons-path}system/light/chevron-down.svg#warning--enabled'); - --icon__system_chevron-down_success--enabled: url('#{$icons-path}system/light/chevron-down.svg#success--enabled'); - --icon__system_chevron-down_neutral--enabled: url('#{$icons-path}system/light/chevron-down.svg#neutral--enabled'); - --icon__system_chevron-down_neutral--hover: url('#{$icons-path}system/light/chevron-down.svg#neutral--hover'); - --icon__system_chevron-down_neutral--active: url('#{$icons-path}system/light/chevron-down.svg#neutral--active'); - --icon__system_chevron-down_neutral--disabled: url('#{$icons-path}system/light/chevron-down.svg#neutral--disabled'); - --icon__system_chevron-down_highlighted--enabled: url('#{$icons-path}system/light/chevron-down.svg#highlighted--enabled'); - --icon__system_chevron-down_bright--enabled: url('#{$icons-path}system/light/chevron-down.svg#bright--enabled'); - --icon__system_check_on-surface--enabled: url('#{$icons-path}system/light/check.svg#on-surface--enabled'); - --icon__system_check_on-surface--hover: url('#{$icons-path}system/light/check.svg#on-surface--hover'); - --icon__system_check_on-surface--active: url('#{$icons-path}system/light/check.svg#on-surface--active'); - --icon__system_check_on-surface--disabled: url('#{$icons-path}system/light/check.svg#on-surface--disabled'); - --icon__system_check_on-primary--enabled: url('#{$icons-path}system/light/check.svg#on-primary--enabled'); - --icon__system_check_on-primary--hover: url('#{$icons-path}system/light/check.svg#on-primary--hover'); - --icon__system_check_on-primary--active: url('#{$icons-path}system/light/check.svg#on-primary--active'); - --icon__system_check_on-primary--disabled: url('#{$icons-path}system/light/check.svg#on-primary--disabled'); - --icon__system_check_on-disabled--enabled: url('#{$icons-path}system/light/check.svg#on-disabled--enabled'); - --icon__system_check_on-message--enabled: url('#{$icons-path}system/light/check.svg#on-message--enabled'); - --icon__system_check_on-elevation--enabled: url('#{$icons-path}system/light/check.svg#on-elevation--enabled'); - --icon__system_check_primary--enabled: url('#{$icons-path}system/light/check.svg#primary--enabled'); - --icon__system_check_primary--hover: url('#{$icons-path}system/light/check.svg#primary--hover'); - --icon__system_check_primary--active: url('#{$icons-path}system/light/check.svg#primary--active'); - --icon__system_check_primary--disabled: url('#{$icons-path}system/light/check.svg#primary--disabled'); - --icon__system_check_error--enabled: url('#{$icons-path}system/light/check.svg#error--enabled'); - --icon__system_check_error-actionable--enabled: url('#{$icons-path}system/light/check.svg#error-actionable--enabled'); - --icon__system_check_error-actionable--hover: url('#{$icons-path}system/light/check.svg#error-actionable--hover'); - --icon__system_check_error-actionable--active: url('#{$icons-path}system/light/check.svg#error-actionable--active'); - --icon__system_check_error-actionable--disabled: url('#{$icons-path}system/light/check.svg#error-actionable--disabled'); - --icon__system_check_warning--enabled: url('#{$icons-path}system/light/check.svg#warning--enabled'); - --icon__system_check_success--enabled: url('#{$icons-path}system/light/check.svg#success--enabled'); - --icon__system_check_neutral--enabled: url('#{$icons-path}system/light/check.svg#neutral--enabled'); - --icon__system_check_neutral--hover: url('#{$icons-path}system/light/check.svg#neutral--hover'); - --icon__system_check_neutral--active: url('#{$icons-path}system/light/check.svg#neutral--active'); - --icon__system_check_neutral--disabled: url('#{$icons-path}system/light/check.svg#neutral--disabled'); - --icon__system_check_highlighted--enabled: url('#{$icons-path}system/light/check.svg#highlighted--enabled'); - --icon__system_check_bright--enabled: url('#{$icons-path}system/light/check.svg#bright--enabled'); - --icon__system_check-circle_on-surface--enabled: url('#{$icons-path}system/light/check-circle.svg#on-surface--enabled'); - --icon__system_check-circle_on-surface--hover: url('#{$icons-path}system/light/check-circle.svg#on-surface--hover'); - --icon__system_check-circle_on-surface--active: url('#{$icons-path}system/light/check-circle.svg#on-surface--active'); - --icon__system_check-circle_on-surface--disabled: url('#{$icons-path}system/light/check-circle.svg#on-surface--disabled'); - --icon__system_check-circle_on-primary--enabled: url('#{$icons-path}system/light/check-circle.svg#on-primary--enabled'); - --icon__system_check-circle_on-primary--hover: url('#{$icons-path}system/light/check-circle.svg#on-primary--hover'); - --icon__system_check-circle_on-primary--active: url('#{$icons-path}system/light/check-circle.svg#on-primary--active'); - --icon__system_check-circle_on-primary--disabled: url('#{$icons-path}system/light/check-circle.svg#on-primary--disabled'); - --icon__system_check-circle_on-disabled--enabled: url('#{$icons-path}system/light/check-circle.svg#on-disabled--enabled'); - --icon__system_check-circle_on-message--enabled: url('#{$icons-path}system/light/check-circle.svg#on-message--enabled'); - --icon__system_check-circle_on-elevation--enabled: url('#{$icons-path}system/light/check-circle.svg#on-elevation--enabled'); - --icon__system_check-circle_primary--enabled: url('#{$icons-path}system/light/check-circle.svg#primary--enabled'); - --icon__system_check-circle_primary--hover: url('#{$icons-path}system/light/check-circle.svg#primary--hover'); - --icon__system_check-circle_primary--active: url('#{$icons-path}system/light/check-circle.svg#primary--active'); - --icon__system_check-circle_primary--disabled: url('#{$icons-path}system/light/check-circle.svg#primary--disabled'); - --icon__system_check-circle_error--enabled: url('#{$icons-path}system/light/check-circle.svg#error--enabled'); - --icon__system_check-circle_error-actionable--enabled: url('#{$icons-path}system/light/check-circle.svg#error-actionable--enabled'); - --icon__system_check-circle_error-actionable--hover: url('#{$icons-path}system/light/check-circle.svg#error-actionable--hover'); - --icon__system_check-circle_error-actionable--active: url('#{$icons-path}system/light/check-circle.svg#error-actionable--active'); - --icon__system_check-circle_error-actionable--disabled: url('#{$icons-path}system/light/check-circle.svg#error-actionable--disabled'); - --icon__system_check-circle_warning--enabled: url('#{$icons-path}system/light/check-circle.svg#warning--enabled'); - --icon__system_check-circle_success--enabled: url('#{$icons-path}system/light/check-circle.svg#success--enabled'); - --icon__system_check-circle_neutral--enabled: url('#{$icons-path}system/light/check-circle.svg#neutral--enabled'); - --icon__system_check-circle_neutral--hover: url('#{$icons-path}system/light/check-circle.svg#neutral--hover'); - --icon__system_check-circle_neutral--active: url('#{$icons-path}system/light/check-circle.svg#neutral--active'); - --icon__system_check-circle_neutral--disabled: url('#{$icons-path}system/light/check-circle.svg#neutral--disabled'); - --icon__system_check-circle_highlighted--enabled: url('#{$icons-path}system/light/check-circle.svg#highlighted--enabled'); - --icon__system_check-circle_bright--enabled: url('#{$icons-path}system/light/check-circle.svg#bright--enabled'); - --icon__system_card_on-surface--enabled: url('#{$icons-path}system/light/card.svg#on-surface--enabled'); - --icon__system_card_on-surface--hover: url('#{$icons-path}system/light/card.svg#on-surface--hover'); - --icon__system_card_on-surface--active: url('#{$icons-path}system/light/card.svg#on-surface--active'); - --icon__system_card_on-surface--disabled: url('#{$icons-path}system/light/card.svg#on-surface--disabled'); - --icon__system_card_on-primary--enabled: url('#{$icons-path}system/light/card.svg#on-primary--enabled'); - --icon__system_card_on-primary--hover: url('#{$icons-path}system/light/card.svg#on-primary--hover'); - --icon__system_card_on-primary--active: url('#{$icons-path}system/light/card.svg#on-primary--active'); - --icon__system_card_on-primary--disabled: url('#{$icons-path}system/light/card.svg#on-primary--disabled'); - --icon__system_card_on-disabled--enabled: url('#{$icons-path}system/light/card.svg#on-disabled--enabled'); - --icon__system_card_on-message--enabled: url('#{$icons-path}system/light/card.svg#on-message--enabled'); - --icon__system_card_on-elevation--enabled: url('#{$icons-path}system/light/card.svg#on-elevation--enabled'); - --icon__system_card_primary--enabled: url('#{$icons-path}system/light/card.svg#primary--enabled'); - --icon__system_card_primary--hover: url('#{$icons-path}system/light/card.svg#primary--hover'); - --icon__system_card_primary--active: url('#{$icons-path}system/light/card.svg#primary--active'); - --icon__system_card_primary--disabled: url('#{$icons-path}system/light/card.svg#primary--disabled'); - --icon__system_card_error--enabled: url('#{$icons-path}system/light/card.svg#error--enabled'); - --icon__system_card_error-actionable--enabled: url('#{$icons-path}system/light/card.svg#error-actionable--enabled'); - --icon__system_card_error-actionable--hover: url('#{$icons-path}system/light/card.svg#error-actionable--hover'); - --icon__system_card_error-actionable--active: url('#{$icons-path}system/light/card.svg#error-actionable--active'); - --icon__system_card_error-actionable--disabled: url('#{$icons-path}system/light/card.svg#error-actionable--disabled'); - --icon__system_card_warning--enabled: url('#{$icons-path}system/light/card.svg#warning--enabled'); - --icon__system_card_success--enabled: url('#{$icons-path}system/light/card.svg#success--enabled'); - --icon__system_card_neutral--enabled: url('#{$icons-path}system/light/card.svg#neutral--enabled'); - --icon__system_card_neutral--hover: url('#{$icons-path}system/light/card.svg#neutral--hover'); - --icon__system_card_neutral--active: url('#{$icons-path}system/light/card.svg#neutral--active'); - --icon__system_card_neutral--disabled: url('#{$icons-path}system/light/card.svg#neutral--disabled'); - --icon__system_card_highlighted--enabled: url('#{$icons-path}system/light/card.svg#highlighted--enabled'); - --icon__system_card_bright--enabled: url('#{$icons-path}system/light/card.svg#bright--enabled'); - --icon__system_cancel-circle_on-surface--enabled: url('#{$icons-path}system/light/cancel-circle.svg#on-surface--enabled'); - --icon__system_cancel-circle_on-surface--hover: url('#{$icons-path}system/light/cancel-circle.svg#on-surface--hover'); - --icon__system_cancel-circle_on-surface--active: url('#{$icons-path}system/light/cancel-circle.svg#on-surface--active'); - --icon__system_cancel-circle_on-surface--disabled: url('#{$icons-path}system/light/cancel-circle.svg#on-surface--disabled'); - --icon__system_cancel-circle_on-primary--enabled: url('#{$icons-path}system/light/cancel-circle.svg#on-primary--enabled'); - --icon__system_cancel-circle_on-primary--hover: url('#{$icons-path}system/light/cancel-circle.svg#on-primary--hover'); - --icon__system_cancel-circle_on-primary--active: url('#{$icons-path}system/light/cancel-circle.svg#on-primary--active'); - --icon__system_cancel-circle_on-primary--disabled: url('#{$icons-path}system/light/cancel-circle.svg#on-primary--disabled'); - --icon__system_cancel-circle_on-disabled--enabled: url('#{$icons-path}system/light/cancel-circle.svg#on-disabled--enabled'); - --icon__system_cancel-circle_on-message--enabled: url('#{$icons-path}system/light/cancel-circle.svg#on-message--enabled'); - --icon__system_cancel-circle_on-elevation--enabled: url('#{$icons-path}system/light/cancel-circle.svg#on-elevation--enabled'); - --icon__system_cancel-circle_primary--enabled: url('#{$icons-path}system/light/cancel-circle.svg#primary--enabled'); - --icon__system_cancel-circle_primary--hover: url('#{$icons-path}system/light/cancel-circle.svg#primary--hover'); - --icon__system_cancel-circle_primary--active: url('#{$icons-path}system/light/cancel-circle.svg#primary--active'); - --icon__system_cancel-circle_primary--disabled: url('#{$icons-path}system/light/cancel-circle.svg#primary--disabled'); - --icon__system_cancel-circle_error--enabled: url('#{$icons-path}system/light/cancel-circle.svg#error--enabled'); - --icon__system_cancel-circle_error-actionable--enabled: url('#{$icons-path}system/light/cancel-circle.svg#error-actionable--enabled'); - --icon__system_cancel-circle_error-actionable--hover: url('#{$icons-path}system/light/cancel-circle.svg#error-actionable--hover'); - --icon__system_cancel-circle_error-actionable--active: url('#{$icons-path}system/light/cancel-circle.svg#error-actionable--active'); - --icon__system_cancel-circle_error-actionable--disabled: url('#{$icons-path}system/light/cancel-circle.svg#error-actionable--disabled'); - --icon__system_cancel-circle_warning--enabled: url('#{$icons-path}system/light/cancel-circle.svg#warning--enabled'); - --icon__system_cancel-circle_success--enabled: url('#{$icons-path}system/light/cancel-circle.svg#success--enabled'); - --icon__system_cancel-circle_neutral--enabled: url('#{$icons-path}system/light/cancel-circle.svg#neutral--enabled'); - --icon__system_cancel-circle_neutral--hover: url('#{$icons-path}system/light/cancel-circle.svg#neutral--hover'); - --icon__system_cancel-circle_neutral--active: url('#{$icons-path}system/light/cancel-circle.svg#neutral--active'); - --icon__system_cancel-circle_neutral--disabled: url('#{$icons-path}system/light/cancel-circle.svg#neutral--disabled'); - --icon__system_cancel-circle_highlighted--enabled: url('#{$icons-path}system/light/cancel-circle.svg#highlighted--enabled'); - --icon__system_cancel-circle_bright--enabled: url('#{$icons-path}system/light/cancel-circle.svg#bright--enabled'); - --icon__system_calendar_on-surface--enabled: url('#{$icons-path}system/light/calendar.svg#on-surface--enabled'); - --icon__system_calendar_on-surface--hover: url('#{$icons-path}system/light/calendar.svg#on-surface--hover'); - --icon__system_calendar_on-surface--active: url('#{$icons-path}system/light/calendar.svg#on-surface--active'); - --icon__system_calendar_on-surface--disabled: url('#{$icons-path}system/light/calendar.svg#on-surface--disabled'); - --icon__system_calendar_on-primary--enabled: url('#{$icons-path}system/light/calendar.svg#on-primary--enabled'); - --icon__system_calendar_on-primary--hover: url('#{$icons-path}system/light/calendar.svg#on-primary--hover'); - --icon__system_calendar_on-primary--active: url('#{$icons-path}system/light/calendar.svg#on-primary--active'); - --icon__system_calendar_on-primary--disabled: url('#{$icons-path}system/light/calendar.svg#on-primary--disabled'); - --icon__system_calendar_on-disabled--enabled: url('#{$icons-path}system/light/calendar.svg#on-disabled--enabled'); - --icon__system_calendar_on-message--enabled: url('#{$icons-path}system/light/calendar.svg#on-message--enabled'); - --icon__system_calendar_on-elevation--enabled: url('#{$icons-path}system/light/calendar.svg#on-elevation--enabled'); - --icon__system_calendar_primary--enabled: url('#{$icons-path}system/light/calendar.svg#primary--enabled'); - --icon__system_calendar_primary--hover: url('#{$icons-path}system/light/calendar.svg#primary--hover'); - --icon__system_calendar_primary--active: url('#{$icons-path}system/light/calendar.svg#primary--active'); - --icon__system_calendar_primary--disabled: url('#{$icons-path}system/light/calendar.svg#primary--disabled'); - --icon__system_calendar_error--enabled: url('#{$icons-path}system/light/calendar.svg#error--enabled'); - --icon__system_calendar_error-actionable--enabled: url('#{$icons-path}system/light/calendar.svg#error-actionable--enabled'); - --icon__system_calendar_error-actionable--hover: url('#{$icons-path}system/light/calendar.svg#error-actionable--hover'); - --icon__system_calendar_error-actionable--active: url('#{$icons-path}system/light/calendar.svg#error-actionable--active'); - --icon__system_calendar_error-actionable--disabled: url('#{$icons-path}system/light/calendar.svg#error-actionable--disabled'); - --icon__system_calendar_warning--enabled: url('#{$icons-path}system/light/calendar.svg#warning--enabled'); - --icon__system_calendar_success--enabled: url('#{$icons-path}system/light/calendar.svg#success--enabled'); - --icon__system_calendar_neutral--enabled: url('#{$icons-path}system/light/calendar.svg#neutral--enabled'); - --icon__system_calendar_neutral--hover: url('#{$icons-path}system/light/calendar.svg#neutral--hover'); - --icon__system_calendar_neutral--active: url('#{$icons-path}system/light/calendar.svg#neutral--active'); - --icon__system_calendar_neutral--disabled: url('#{$icons-path}system/light/calendar.svg#neutral--disabled'); - --icon__system_calendar_highlighted--enabled: url('#{$icons-path}system/light/calendar.svg#highlighted--enabled'); - --icon__system_calendar_bright--enabled: url('#{$icons-path}system/light/calendar.svg#bright--enabled'); - --icon__system_assistant_on-surface--enabled: url('#{$icons-path}system/light/assistant.svg#on-surface--enabled'); - --icon__system_assistant_on-surface--hover: url('#{$icons-path}system/light/assistant.svg#on-surface--hover'); - --icon__system_assistant_on-surface--active: url('#{$icons-path}system/light/assistant.svg#on-surface--active'); - --icon__system_assistant_on-surface--disabled: url('#{$icons-path}system/light/assistant.svg#on-surface--disabled'); - --icon__system_assistant_on-primary--enabled: url('#{$icons-path}system/light/assistant.svg#on-primary--enabled'); - --icon__system_assistant_on-primary--hover: url('#{$icons-path}system/light/assistant.svg#on-primary--hover'); - --icon__system_assistant_on-primary--active: url('#{$icons-path}system/light/assistant.svg#on-primary--active'); - --icon__system_assistant_on-primary--disabled: url('#{$icons-path}system/light/assistant.svg#on-primary--disabled'); - --icon__system_assistant_on-disabled--enabled: url('#{$icons-path}system/light/assistant.svg#on-disabled--enabled'); - --icon__system_assistant_on-message--enabled: url('#{$icons-path}system/light/assistant.svg#on-message--enabled'); - --icon__system_assistant_on-elevation--enabled: url('#{$icons-path}system/light/assistant.svg#on-elevation--enabled'); - --icon__system_assistant_primary--enabled: url('#{$icons-path}system/light/assistant.svg#primary--enabled'); - --icon__system_assistant_primary--hover: url('#{$icons-path}system/light/assistant.svg#primary--hover'); - --icon__system_assistant_primary--active: url('#{$icons-path}system/light/assistant.svg#primary--active'); - --icon__system_assistant_primary--disabled: url('#{$icons-path}system/light/assistant.svg#primary--disabled'); - --icon__system_assistant_error--enabled: url('#{$icons-path}system/light/assistant.svg#error--enabled'); - --icon__system_assistant_error-actionable--enabled: url('#{$icons-path}system/light/assistant.svg#error-actionable--enabled'); - --icon__system_assistant_error-actionable--hover: url('#{$icons-path}system/light/assistant.svg#error-actionable--hover'); - --icon__system_assistant_error-actionable--active: url('#{$icons-path}system/light/assistant.svg#error-actionable--active'); - --icon__system_assistant_error-actionable--disabled: url('#{$icons-path}system/light/assistant.svg#error-actionable--disabled'); - --icon__system_assistant_warning--enabled: url('#{$icons-path}system/light/assistant.svg#warning--enabled'); - --icon__system_assistant_success--enabled: url('#{$icons-path}system/light/assistant.svg#success--enabled'); - --icon__system_assistant_neutral--enabled: url('#{$icons-path}system/light/assistant.svg#neutral--enabled'); - --icon__system_assistant_neutral--hover: url('#{$icons-path}system/light/assistant.svg#neutral--hover'); - --icon__system_assistant_neutral--active: url('#{$icons-path}system/light/assistant.svg#neutral--active'); - --icon__system_assistant_neutral--disabled: url('#{$icons-path}system/light/assistant.svg#neutral--disabled'); - --icon__system_assistant_highlighted--enabled: url('#{$icons-path}system/light/assistant.svg#highlighted--enabled'); - --icon__system_assistant_bright--enabled: url('#{$icons-path}system/light/assistant.svg#bright--enabled'); - --icon__system_arrow-right_on-surface--enabled: url('#{$icons-path}system/light/arrow-right.svg#on-surface--enabled'); - --icon__system_arrow-right_on-surface--hover: url('#{$icons-path}system/light/arrow-right.svg#on-surface--hover'); - --icon__system_arrow-right_on-surface--active: url('#{$icons-path}system/light/arrow-right.svg#on-surface--active'); - --icon__system_arrow-right_on-surface--disabled: url('#{$icons-path}system/light/arrow-right.svg#on-surface--disabled'); - --icon__system_arrow-right_on-primary--enabled: url('#{$icons-path}system/light/arrow-right.svg#on-primary--enabled'); - --icon__system_arrow-right_on-primary--hover: url('#{$icons-path}system/light/arrow-right.svg#on-primary--hover'); - --icon__system_arrow-right_on-primary--active: url('#{$icons-path}system/light/arrow-right.svg#on-primary--active'); - --icon__system_arrow-right_on-primary--disabled: url('#{$icons-path}system/light/arrow-right.svg#on-primary--disabled'); - --icon__system_arrow-right_on-disabled--enabled: url('#{$icons-path}system/light/arrow-right.svg#on-disabled--enabled'); - --icon__system_arrow-right_on-message--enabled: url('#{$icons-path}system/light/arrow-right.svg#on-message--enabled'); - --icon__system_arrow-right_on-elevation--enabled: url('#{$icons-path}system/light/arrow-right.svg#on-elevation--enabled'); - --icon__system_arrow-right_primary--enabled: url('#{$icons-path}system/light/arrow-right.svg#primary--enabled'); - --icon__system_arrow-right_primary--hover: url('#{$icons-path}system/light/arrow-right.svg#primary--hover'); - --icon__system_arrow-right_primary--active: url('#{$icons-path}system/light/arrow-right.svg#primary--active'); - --icon__system_arrow-right_primary--disabled: url('#{$icons-path}system/light/arrow-right.svg#primary--disabled'); - --icon__system_arrow-right_error--enabled: url('#{$icons-path}system/light/arrow-right.svg#error--enabled'); - --icon__system_arrow-right_error-actionable--enabled: url('#{$icons-path}system/light/arrow-right.svg#error-actionable--enabled'); - --icon__system_arrow-right_error-actionable--hover: url('#{$icons-path}system/light/arrow-right.svg#error-actionable--hover'); - --icon__system_arrow-right_error-actionable--active: url('#{$icons-path}system/light/arrow-right.svg#error-actionable--active'); - --icon__system_arrow-right_error-actionable--disabled: url('#{$icons-path}system/light/arrow-right.svg#error-actionable--disabled'); - --icon__system_arrow-right_warning--enabled: url('#{$icons-path}system/light/arrow-right.svg#warning--enabled'); - --icon__system_arrow-right_success--enabled: url('#{$icons-path}system/light/arrow-right.svg#success--enabled'); - --icon__system_arrow-right_neutral--enabled: url('#{$icons-path}system/light/arrow-right.svg#neutral--enabled'); - --icon__system_arrow-right_neutral--hover: url('#{$icons-path}system/light/arrow-right.svg#neutral--hover'); - --icon__system_arrow-right_neutral--active: url('#{$icons-path}system/light/arrow-right.svg#neutral--active'); - --icon__system_arrow-right_neutral--disabled: url('#{$icons-path}system/light/arrow-right.svg#neutral--disabled'); - --icon__system_arrow-right_highlighted--enabled: url('#{$icons-path}system/light/arrow-right.svg#highlighted--enabled'); - --icon__system_arrow-right_bright--enabled: url('#{$icons-path}system/light/arrow-right.svg#bright--enabled'); - --icon__system_arrow-left_on-surface--enabled: url('#{$icons-path}system/light/arrow-left.svg#on-surface--enabled'); - --icon__system_arrow-left_on-surface--hover: url('#{$icons-path}system/light/arrow-left.svg#on-surface--hover'); - --icon__system_arrow-left_on-surface--active: url('#{$icons-path}system/light/arrow-left.svg#on-surface--active'); - --icon__system_arrow-left_on-surface--disabled: url('#{$icons-path}system/light/arrow-left.svg#on-surface--disabled'); - --icon__system_arrow-left_on-primary--enabled: url('#{$icons-path}system/light/arrow-left.svg#on-primary--enabled'); - --icon__system_arrow-left_on-primary--hover: url('#{$icons-path}system/light/arrow-left.svg#on-primary--hover'); - --icon__system_arrow-left_on-primary--active: url('#{$icons-path}system/light/arrow-left.svg#on-primary--active'); - --icon__system_arrow-left_on-primary--disabled: url('#{$icons-path}system/light/arrow-left.svg#on-primary--disabled'); - --icon__system_arrow-left_on-disabled--enabled: url('#{$icons-path}system/light/arrow-left.svg#on-disabled--enabled'); - --icon__system_arrow-left_on-message--enabled: url('#{$icons-path}system/light/arrow-left.svg#on-message--enabled'); - --icon__system_arrow-left_on-elevation--enabled: url('#{$icons-path}system/light/arrow-left.svg#on-elevation--enabled'); - --icon__system_arrow-left_primary--enabled: url('#{$icons-path}system/light/arrow-left.svg#primary--enabled'); - --icon__system_arrow-left_primary--hover: url('#{$icons-path}system/light/arrow-left.svg#primary--hover'); - --icon__system_arrow-left_primary--active: url('#{$icons-path}system/light/arrow-left.svg#primary--active'); - --icon__system_arrow-left_primary--disabled: url('#{$icons-path}system/light/arrow-left.svg#primary--disabled'); - --icon__system_arrow-left_error--enabled: url('#{$icons-path}system/light/arrow-left.svg#error--enabled'); - --icon__system_arrow-left_error-actionable--enabled: url('#{$icons-path}system/light/arrow-left.svg#error-actionable--enabled'); - --icon__system_arrow-left_error-actionable--hover: url('#{$icons-path}system/light/arrow-left.svg#error-actionable--hover'); - --icon__system_arrow-left_error-actionable--active: url('#{$icons-path}system/light/arrow-left.svg#error-actionable--active'); - --icon__system_arrow-left_error-actionable--disabled: url('#{$icons-path}system/light/arrow-left.svg#error-actionable--disabled'); - --icon__system_arrow-left_warning--enabled: url('#{$icons-path}system/light/arrow-left.svg#warning--enabled'); - --icon__system_arrow-left_success--enabled: url('#{$icons-path}system/light/arrow-left.svg#success--enabled'); - --icon__system_arrow-left_neutral--enabled: url('#{$icons-path}system/light/arrow-left.svg#neutral--enabled'); - --icon__system_arrow-left_neutral--hover: url('#{$icons-path}system/light/arrow-left.svg#neutral--hover'); - --icon__system_arrow-left_neutral--active: url('#{$icons-path}system/light/arrow-left.svg#neutral--active'); - --icon__system_arrow-left_neutral--disabled: url('#{$icons-path}system/light/arrow-left.svg#neutral--disabled'); - --icon__system_arrow-left_highlighted--enabled: url('#{$icons-path}system/light/arrow-left.svg#highlighted--enabled'); - --icon__system_arrow-left_bright--enabled: url('#{$icons-path}system/light/arrow-left.svg#bright--enabled'); - --icon__system_arrow-drop-up_on-surface--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#on-surface--enabled'); - --icon__system_arrow-drop-up_on-surface--hover: url('#{$icons-path}system/light/arrow-drop-up.svg#on-surface--hover'); - --icon__system_arrow-drop-up_on-surface--active: url('#{$icons-path}system/light/arrow-drop-up.svg#on-surface--active'); - --icon__system_arrow-drop-up_on-surface--disabled: url('#{$icons-path}system/light/arrow-drop-up.svg#on-surface--disabled'); - --icon__system_arrow-drop-up_on-primary--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#on-primary--enabled'); - --icon__system_arrow-drop-up_on-primary--hover: url('#{$icons-path}system/light/arrow-drop-up.svg#on-primary--hover'); - --icon__system_arrow-drop-up_on-primary--active: url('#{$icons-path}system/light/arrow-drop-up.svg#on-primary--active'); - --icon__system_arrow-drop-up_on-primary--disabled: url('#{$icons-path}system/light/arrow-drop-up.svg#on-primary--disabled'); - --icon__system_arrow-drop-up_on-disabled--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#on-disabled--enabled'); - --icon__system_arrow-drop-up_on-message--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#on-message--enabled'); - --icon__system_arrow-drop-up_on-elevation--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#on-elevation--enabled'); - --icon__system_arrow-drop-up_primary--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#primary--enabled'); - --icon__system_arrow-drop-up_primary--hover: url('#{$icons-path}system/light/arrow-drop-up.svg#primary--hover'); - --icon__system_arrow-drop-up_primary--active: url('#{$icons-path}system/light/arrow-drop-up.svg#primary--active'); - --icon__system_arrow-drop-up_primary--disabled: url('#{$icons-path}system/light/arrow-drop-up.svg#primary--disabled'); - --icon__system_arrow-drop-up_error--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#error--enabled'); - --icon__system_arrow-drop-up_error-actionable--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#error-actionable--enabled'); - --icon__system_arrow-drop-up_error-actionable--hover: url('#{$icons-path}system/light/arrow-drop-up.svg#error-actionable--hover'); - --icon__system_arrow-drop-up_error-actionable--active: url('#{$icons-path}system/light/arrow-drop-up.svg#error-actionable--active'); - --icon__system_arrow-drop-up_error-actionable--disabled: url('#{$icons-path}system/light/arrow-drop-up.svg#error-actionable--disabled'); - --icon__system_arrow-drop-up_warning--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#warning--enabled'); - --icon__system_arrow-drop-up_success--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#success--enabled'); - --icon__system_arrow-drop-up_neutral--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#neutral--enabled'); - --icon__system_arrow-drop-up_neutral--hover: url('#{$icons-path}system/light/arrow-drop-up.svg#neutral--hover'); - --icon__system_arrow-drop-up_neutral--active: url('#{$icons-path}system/light/arrow-drop-up.svg#neutral--active'); - --icon__system_arrow-drop-up_neutral--disabled: url('#{$icons-path}system/light/arrow-drop-up.svg#neutral--disabled'); - --icon__system_arrow-drop-up_highlighted--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#highlighted--enabled'); - --icon__system_arrow-drop-up_bright--enabled: url('#{$icons-path}system/light/arrow-drop-up.svg#bright--enabled'); - --icon__system_arrow-drop-right_on-surface--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#on-surface--enabled'); - --icon__system_arrow-drop-right_on-surface--hover: url('#{$icons-path}system/light/arrow-drop-right.svg#on-surface--hover'); - --icon__system_arrow-drop-right_on-surface--active: url('#{$icons-path}system/light/arrow-drop-right.svg#on-surface--active'); - --icon__system_arrow-drop-right_on-surface--disabled: url('#{$icons-path}system/light/arrow-drop-right.svg#on-surface--disabled'); - --icon__system_arrow-drop-right_on-primary--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#on-primary--enabled'); - --icon__system_arrow-drop-right_on-primary--hover: url('#{$icons-path}system/light/arrow-drop-right.svg#on-primary--hover'); - --icon__system_arrow-drop-right_on-primary--active: url('#{$icons-path}system/light/arrow-drop-right.svg#on-primary--active'); - --icon__system_arrow-drop-right_on-primary--disabled: url('#{$icons-path}system/light/arrow-drop-right.svg#on-primary--disabled'); - --icon__system_arrow-drop-right_on-disabled--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#on-disabled--enabled'); - --icon__system_arrow-drop-right_on-message--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#on-message--enabled'); - --icon__system_arrow-drop-right_on-elevation--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#on-elevation--enabled'); - --icon__system_arrow-drop-right_primary--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#primary--enabled'); - --icon__system_arrow-drop-right_primary--hover: url('#{$icons-path}system/light/arrow-drop-right.svg#primary--hover'); - --icon__system_arrow-drop-right_primary--active: url('#{$icons-path}system/light/arrow-drop-right.svg#primary--active'); - --icon__system_arrow-drop-right_primary--disabled: url('#{$icons-path}system/light/arrow-drop-right.svg#primary--disabled'); - --icon__system_arrow-drop-right_error--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#error--enabled'); - --icon__system_arrow-drop-right_error-actionable--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#error-actionable--enabled'); - --icon__system_arrow-drop-right_error-actionable--hover: url('#{$icons-path}system/light/arrow-drop-right.svg#error-actionable--hover'); - --icon__system_arrow-drop-right_error-actionable--active: url('#{$icons-path}system/light/arrow-drop-right.svg#error-actionable--active'); - --icon__system_arrow-drop-right_error-actionable--disabled: url('#{$icons-path}system/light/arrow-drop-right.svg#error-actionable--disabled'); - --icon__system_arrow-drop-right_warning--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#warning--enabled'); - --icon__system_arrow-drop-right_success--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#success--enabled'); - --icon__system_arrow-drop-right_neutral--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#neutral--enabled'); - --icon__system_arrow-drop-right_neutral--hover: url('#{$icons-path}system/light/arrow-drop-right.svg#neutral--hover'); - --icon__system_arrow-drop-right_neutral--active: url('#{$icons-path}system/light/arrow-drop-right.svg#neutral--active'); - --icon__system_arrow-drop-right_neutral--disabled: url('#{$icons-path}system/light/arrow-drop-right.svg#neutral--disabled'); - --icon__system_arrow-drop-right_highlighted--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#highlighted--enabled'); - --icon__system_arrow-drop-right_bright--enabled: url('#{$icons-path}system/light/arrow-drop-right.svg#bright--enabled'); - --icon__system_arrow-drop-left_on-surface--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#on-surface--enabled'); - --icon__system_arrow-drop-left_on-surface--hover: url('#{$icons-path}system/light/arrow-drop-left.svg#on-surface--hover'); - --icon__system_arrow-drop-left_on-surface--active: url('#{$icons-path}system/light/arrow-drop-left.svg#on-surface--active'); - --icon__system_arrow-drop-left_on-surface--disabled: url('#{$icons-path}system/light/arrow-drop-left.svg#on-surface--disabled'); - --icon__system_arrow-drop-left_on-primary--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#on-primary--enabled'); - --icon__system_arrow-drop-left_on-primary--hover: url('#{$icons-path}system/light/arrow-drop-left.svg#on-primary--hover'); - --icon__system_arrow-drop-left_on-primary--active: url('#{$icons-path}system/light/arrow-drop-left.svg#on-primary--active'); - --icon__system_arrow-drop-left_on-primary--disabled: url('#{$icons-path}system/light/arrow-drop-left.svg#on-primary--disabled'); - --icon__system_arrow-drop-left_on-disabled--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#on-disabled--enabled'); - --icon__system_arrow-drop-left_on-message--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#on-message--enabled'); - --icon__system_arrow-drop-left_on-elevation--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#on-elevation--enabled'); - --icon__system_arrow-drop-left_primary--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#primary--enabled'); - --icon__system_arrow-drop-left_primary--hover: url('#{$icons-path}system/light/arrow-drop-left.svg#primary--hover'); - --icon__system_arrow-drop-left_primary--active: url('#{$icons-path}system/light/arrow-drop-left.svg#primary--active'); - --icon__system_arrow-drop-left_primary--disabled: url('#{$icons-path}system/light/arrow-drop-left.svg#primary--disabled'); - --icon__system_arrow-drop-left_error--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#error--enabled'); - --icon__system_arrow-drop-left_error-actionable--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#error-actionable--enabled'); - --icon__system_arrow-drop-left_error-actionable--hover: url('#{$icons-path}system/light/arrow-drop-left.svg#error-actionable--hover'); - --icon__system_arrow-drop-left_error-actionable--active: url('#{$icons-path}system/light/arrow-drop-left.svg#error-actionable--active'); - --icon__system_arrow-drop-left_error-actionable--disabled: url('#{$icons-path}system/light/arrow-drop-left.svg#error-actionable--disabled'); - --icon__system_arrow-drop-left_warning--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#warning--enabled'); - --icon__system_arrow-drop-left_success--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#success--enabled'); - --icon__system_arrow-drop-left_neutral--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#neutral--enabled'); - --icon__system_arrow-drop-left_neutral--hover: url('#{$icons-path}system/light/arrow-drop-left.svg#neutral--hover'); - --icon__system_arrow-drop-left_neutral--active: url('#{$icons-path}system/light/arrow-drop-left.svg#neutral--active'); - --icon__system_arrow-drop-left_neutral--disabled: url('#{$icons-path}system/light/arrow-drop-left.svg#neutral--disabled'); - --icon__system_arrow-drop-left_highlighted--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#highlighted--enabled'); - --icon__system_arrow-drop-left_bright--enabled: url('#{$icons-path}system/light/arrow-drop-left.svg#bright--enabled'); - --icon__system_arrow-drop-down_on-surface--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#on-surface--enabled'); - --icon__system_arrow-drop-down_on-surface--hover: url('#{$icons-path}system/light/arrow-drop-down.svg#on-surface--hover'); - --icon__system_arrow-drop-down_on-surface--active: url('#{$icons-path}system/light/arrow-drop-down.svg#on-surface--active'); - --icon__system_arrow-drop-down_on-surface--disabled: url('#{$icons-path}system/light/arrow-drop-down.svg#on-surface--disabled'); - --icon__system_arrow-drop-down_on-primary--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#on-primary--enabled'); - --icon__system_arrow-drop-down_on-primary--hover: url('#{$icons-path}system/light/arrow-drop-down.svg#on-primary--hover'); - --icon__system_arrow-drop-down_on-primary--active: url('#{$icons-path}system/light/arrow-drop-down.svg#on-primary--active'); - --icon__system_arrow-drop-down_on-primary--disabled: url('#{$icons-path}system/light/arrow-drop-down.svg#on-primary--disabled'); - --icon__system_arrow-drop-down_on-disabled--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#on-disabled--enabled'); - --icon__system_arrow-drop-down_on-message--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#on-message--enabled'); - --icon__system_arrow-drop-down_on-elevation--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#on-elevation--enabled'); - --icon__system_arrow-drop-down_primary--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#primary--enabled'); - --icon__system_arrow-drop-down_primary--hover: url('#{$icons-path}system/light/arrow-drop-down.svg#primary--hover'); - --icon__system_arrow-drop-down_primary--active: url('#{$icons-path}system/light/arrow-drop-down.svg#primary--active'); - --icon__system_arrow-drop-down_primary--disabled: url('#{$icons-path}system/light/arrow-drop-down.svg#primary--disabled'); - --icon__system_arrow-drop-down_error--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#error--enabled'); - --icon__system_arrow-drop-down_error-actionable--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#error-actionable--enabled'); - --icon__system_arrow-drop-down_error-actionable--hover: url('#{$icons-path}system/light/arrow-drop-down.svg#error-actionable--hover'); - --icon__system_arrow-drop-down_error-actionable--active: url('#{$icons-path}system/light/arrow-drop-down.svg#error-actionable--active'); - --icon__system_arrow-drop-down_error-actionable--disabled: url('#{$icons-path}system/light/arrow-drop-down.svg#error-actionable--disabled'); - --icon__system_arrow-drop-down_warning--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#warning--enabled'); - --icon__system_arrow-drop-down_success--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#success--enabled'); - --icon__system_arrow-drop-down_neutral--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#neutral--enabled'); - --icon__system_arrow-drop-down_neutral--hover: url('#{$icons-path}system/light/arrow-drop-down.svg#neutral--hover'); - --icon__system_arrow-drop-down_neutral--active: url('#{$icons-path}system/light/arrow-drop-down.svg#neutral--active'); - --icon__system_arrow-drop-down_neutral--disabled: url('#{$icons-path}system/light/arrow-drop-down.svg#neutral--disabled'); - --icon__system_arrow-drop-down_highlighted--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#highlighted--enabled'); - --icon__system_arrow-drop-down_bright--enabled: url('#{$icons-path}system/light/arrow-drop-down.svg#bright--enabled'); - --icon__system_applications_on-surface--enabled: url('#{$icons-path}system/light/applications.svg#on-surface--enabled'); - --icon__system_applications_on-surface--hover: url('#{$icons-path}system/light/applications.svg#on-surface--hover'); - --icon__system_applications_on-surface--active: url('#{$icons-path}system/light/applications.svg#on-surface--active'); - --icon__system_applications_on-surface--disabled: url('#{$icons-path}system/light/applications.svg#on-surface--disabled'); - --icon__system_applications_on-primary--enabled: url('#{$icons-path}system/light/applications.svg#on-primary--enabled'); - --icon__system_applications_on-primary--hover: url('#{$icons-path}system/light/applications.svg#on-primary--hover'); - --icon__system_applications_on-primary--active: url('#{$icons-path}system/light/applications.svg#on-primary--active'); - --icon__system_applications_on-primary--disabled: url('#{$icons-path}system/light/applications.svg#on-primary--disabled'); - --icon__system_applications_on-disabled--enabled: url('#{$icons-path}system/light/applications.svg#on-disabled--enabled'); - --icon__system_applications_on-message--enabled: url('#{$icons-path}system/light/applications.svg#on-message--enabled'); - --icon__system_applications_on-elevation--enabled: url('#{$icons-path}system/light/applications.svg#on-elevation--enabled'); - --icon__system_applications_primary--enabled: url('#{$icons-path}system/light/applications.svg#primary--enabled'); - --icon__system_applications_primary--hover: url('#{$icons-path}system/light/applications.svg#primary--hover'); - --icon__system_applications_primary--active: url('#{$icons-path}system/light/applications.svg#primary--active'); - --icon__system_applications_primary--disabled: url('#{$icons-path}system/light/applications.svg#primary--disabled'); - --icon__system_applications_error--enabled: url('#{$icons-path}system/light/applications.svg#error--enabled'); - --icon__system_applications_error-actionable--enabled: url('#{$icons-path}system/light/applications.svg#error-actionable--enabled'); - --icon__system_applications_error-actionable--hover: url('#{$icons-path}system/light/applications.svg#error-actionable--hover'); - --icon__system_applications_error-actionable--active: url('#{$icons-path}system/light/applications.svg#error-actionable--active'); - --icon__system_applications_error-actionable--disabled: url('#{$icons-path}system/light/applications.svg#error-actionable--disabled'); - --icon__system_applications_warning--enabled: url('#{$icons-path}system/light/applications.svg#warning--enabled'); - --icon__system_applications_success--enabled: url('#{$icons-path}system/light/applications.svg#success--enabled'); - --icon__system_applications_neutral--enabled: url('#{$icons-path}system/light/applications.svg#neutral--enabled'); - --icon__system_applications_neutral--hover: url('#{$icons-path}system/light/applications.svg#neutral--hover'); - --icon__system_applications_neutral--active: url('#{$icons-path}system/light/applications.svg#neutral--active'); - --icon__system_applications_neutral--disabled: url('#{$icons-path}system/light/applications.svg#neutral--disabled'); - --icon__system_applications_highlighted--enabled: url('#{$icons-path}system/light/applications.svg#highlighted--enabled'); - --icon__system_applications_bright--enabled: url('#{$icons-path}system/light/applications.svg#bright--enabled'); - --icon__system_add_on-surface--enabled: url('#{$icons-path}system/light/add.svg#on-surface--enabled'); - --icon__system_add_on-surface--hover: url('#{$icons-path}system/light/add.svg#on-surface--hover'); - --icon__system_add_on-surface--active: url('#{$icons-path}system/light/add.svg#on-surface--active'); - --icon__system_add_on-surface--disabled: url('#{$icons-path}system/light/add.svg#on-surface--disabled'); - --icon__system_add_on-primary--enabled: url('#{$icons-path}system/light/add.svg#on-primary--enabled'); - --icon__system_add_on-primary--hover: url('#{$icons-path}system/light/add.svg#on-primary--hover'); - --icon__system_add_on-primary--active: url('#{$icons-path}system/light/add.svg#on-primary--active'); - --icon__system_add_on-primary--disabled: url('#{$icons-path}system/light/add.svg#on-primary--disabled'); - --icon__system_add_on-disabled--enabled: url('#{$icons-path}system/light/add.svg#on-disabled--enabled'); - --icon__system_add_on-message--enabled: url('#{$icons-path}system/light/add.svg#on-message--enabled'); - --icon__system_add_on-elevation--enabled: url('#{$icons-path}system/light/add.svg#on-elevation--enabled'); - --icon__system_add_primary--enabled: url('#{$icons-path}system/light/add.svg#primary--enabled'); - --icon__system_add_primary--hover: url('#{$icons-path}system/light/add.svg#primary--hover'); - --icon__system_add_primary--active: url('#{$icons-path}system/light/add.svg#primary--active'); - --icon__system_add_primary--disabled: url('#{$icons-path}system/light/add.svg#primary--disabled'); - --icon__system_add_error--enabled: url('#{$icons-path}system/light/add.svg#error--enabled'); - --icon__system_add_error-actionable--enabled: url('#{$icons-path}system/light/add.svg#error-actionable--enabled'); - --icon__system_add_error-actionable--hover: url('#{$icons-path}system/light/add.svg#error-actionable--hover'); - --icon__system_add_error-actionable--active: url('#{$icons-path}system/light/add.svg#error-actionable--active'); - --icon__system_add_error-actionable--disabled: url('#{$icons-path}system/light/add.svg#error-actionable--disabled'); - --icon__system_add_warning--enabled: url('#{$icons-path}system/light/add.svg#warning--enabled'); - --icon__system_add_success--enabled: url('#{$icons-path}system/light/add.svg#success--enabled'); - --icon__system_add_neutral--enabled: url('#{$icons-path}system/light/add.svg#neutral--enabled'); - --icon__system_add_neutral--hover: url('#{$icons-path}system/light/add.svg#neutral--hover'); - --icon__system_add_neutral--active: url('#{$icons-path}system/light/add.svg#neutral--active'); - --icon__system_add_neutral--disabled: url('#{$icons-path}system/light/add.svg#neutral--disabled'); - --icon__system_add_highlighted--enabled: url('#{$icons-path}system/light/add.svg#highlighted--enabled'); - --icon__system_add_bright--enabled: url('#{$icons-path}system/light/add.svg#bright--enabled'); - --icon__system_add-circle_on-surface--enabled: url('#{$icons-path}system/light/add-circle.svg#on-surface--enabled'); - --icon__system_add-circle_on-surface--hover: url('#{$icons-path}system/light/add-circle.svg#on-surface--hover'); - --icon__system_add-circle_on-surface--active: url('#{$icons-path}system/light/add-circle.svg#on-surface--active'); - --icon__system_add-circle_on-surface--disabled: url('#{$icons-path}system/light/add-circle.svg#on-surface--disabled'); - --icon__system_add-circle_on-primary--enabled: url('#{$icons-path}system/light/add-circle.svg#on-primary--enabled'); - --icon__system_add-circle_on-primary--hover: url('#{$icons-path}system/light/add-circle.svg#on-primary--hover'); - --icon__system_add-circle_on-primary--active: url('#{$icons-path}system/light/add-circle.svg#on-primary--active'); - --icon__system_add-circle_on-primary--disabled: url('#{$icons-path}system/light/add-circle.svg#on-primary--disabled'); - --icon__system_add-circle_on-disabled--enabled: url('#{$icons-path}system/light/add-circle.svg#on-disabled--enabled'); - --icon__system_add-circle_on-message--enabled: url('#{$icons-path}system/light/add-circle.svg#on-message--enabled'); - --icon__system_add-circle_on-elevation--enabled: url('#{$icons-path}system/light/add-circle.svg#on-elevation--enabled'); - --icon__system_add-circle_primary--enabled: url('#{$icons-path}system/light/add-circle.svg#primary--enabled'); - --icon__system_add-circle_primary--hover: url('#{$icons-path}system/light/add-circle.svg#primary--hover'); - --icon__system_add-circle_primary--active: url('#{$icons-path}system/light/add-circle.svg#primary--active'); - --icon__system_add-circle_primary--disabled: url('#{$icons-path}system/light/add-circle.svg#primary--disabled'); - --icon__system_add-circle_error--enabled: url('#{$icons-path}system/light/add-circle.svg#error--enabled'); - --icon__system_add-circle_error-actionable--enabled: url('#{$icons-path}system/light/add-circle.svg#error-actionable--enabled'); - --icon__system_add-circle_error-actionable--hover: url('#{$icons-path}system/light/add-circle.svg#error-actionable--hover'); - --icon__system_add-circle_error-actionable--active: url('#{$icons-path}system/light/add-circle.svg#error-actionable--active'); - --icon__system_add-circle_error-actionable--disabled: url('#{$icons-path}system/light/add-circle.svg#error-actionable--disabled'); - --icon__system_add-circle_warning--enabled: url('#{$icons-path}system/light/add-circle.svg#warning--enabled'); - --icon__system_add-circle_success--enabled: url('#{$icons-path}system/light/add-circle.svg#success--enabled'); - --icon__system_add-circle_neutral--enabled: url('#{$icons-path}system/light/add-circle.svg#neutral--enabled'); - --icon__system_add-circle_neutral--hover: url('#{$icons-path}system/light/add-circle.svg#neutral--hover'); - --icon__system_add-circle_neutral--active: url('#{$icons-path}system/light/add-circle.svg#neutral--active'); - --icon__system_add-circle_neutral--disabled: url('#{$icons-path}system/light/add-circle.svg#neutral--disabled'); - --icon__system_add-circle_highlighted--enabled: url('#{$icons-path}system/light/add-circle.svg#highlighted--enabled'); - --icon__system_add-circle_bright--enabled: url('#{$icons-path}system/light/add-circle.svg#bright--enabled'); - --icon__system_accessibility-new_on-surface--enabled: url('#{$icons-path}system/light/accessibility-new.svg#on-surface--enabled'); - --icon__system_accessibility-new_on-surface--hover: url('#{$icons-path}system/light/accessibility-new.svg#on-surface--hover'); - --icon__system_accessibility-new_on-surface--active: url('#{$icons-path}system/light/accessibility-new.svg#on-surface--active'); - --icon__system_accessibility-new_on-surface--disabled: url('#{$icons-path}system/light/accessibility-new.svg#on-surface--disabled'); - --icon__system_accessibility-new_on-primary--enabled: url('#{$icons-path}system/light/accessibility-new.svg#on-primary--enabled'); - --icon__system_accessibility-new_on-primary--hover: url('#{$icons-path}system/light/accessibility-new.svg#on-primary--hover'); - --icon__system_accessibility-new_on-primary--active: url('#{$icons-path}system/light/accessibility-new.svg#on-primary--active'); - --icon__system_accessibility-new_on-primary--disabled: url('#{$icons-path}system/light/accessibility-new.svg#on-primary--disabled'); - --icon__system_accessibility-new_on-disabled--enabled: url('#{$icons-path}system/light/accessibility-new.svg#on-disabled--enabled'); - --icon__system_accessibility-new_on-message--enabled: url('#{$icons-path}system/light/accessibility-new.svg#on-message--enabled'); - --icon__system_accessibility-new_on-elevation--enabled: url('#{$icons-path}system/light/accessibility-new.svg#on-elevation--enabled'); - --icon__system_accessibility-new_primary--enabled: url('#{$icons-path}system/light/accessibility-new.svg#primary--enabled'); - --icon__system_accessibility-new_primary--hover: url('#{$icons-path}system/light/accessibility-new.svg#primary--hover'); - --icon__system_accessibility-new_primary--active: url('#{$icons-path}system/light/accessibility-new.svg#primary--active'); - --icon__system_accessibility-new_primary--disabled: url('#{$icons-path}system/light/accessibility-new.svg#primary--disabled'); - --icon__system_accessibility-new_error--enabled: url('#{$icons-path}system/light/accessibility-new.svg#error--enabled'); - --icon__system_accessibility-new_error-actionable--enabled: url('#{$icons-path}system/light/accessibility-new.svg#error-actionable--enabled'); - --icon__system_accessibility-new_error-actionable--hover: url('#{$icons-path}system/light/accessibility-new.svg#error-actionable--hover'); - --icon__system_accessibility-new_error-actionable--active: url('#{$icons-path}system/light/accessibility-new.svg#error-actionable--active'); - --icon__system_accessibility-new_error-actionable--disabled: url('#{$icons-path}system/light/accessibility-new.svg#error-actionable--disabled'); - --icon__system_accessibility-new_warning--enabled: url('#{$icons-path}system/light/accessibility-new.svg#warning--enabled'); - --icon__system_accessibility-new_success--enabled: url('#{$icons-path}system/light/accessibility-new.svg#success--enabled'); - --icon__system_accessibility-new_neutral--enabled: url('#{$icons-path}system/light/accessibility-new.svg#neutral--enabled'); - --icon__system_accessibility-new_neutral--hover: url('#{$icons-path}system/light/accessibility-new.svg#neutral--hover'); - --icon__system_accessibility-new_neutral--active: url('#{$icons-path}system/light/accessibility-new.svg#neutral--active'); - --icon__system_accessibility-new_neutral--disabled: url('#{$icons-path}system/light/accessibility-new.svg#neutral--disabled'); - --icon__system_accessibility-new_highlighted--enabled: url('#{$icons-path}system/light/accessibility-new.svg#highlighted--enabled'); - --icon__system_accessibility-new_bright--enabled: url('#{$icons-path}system/light/accessibility-new.svg#bright--enabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*system*/ - --icon__system_zoom-out_on-surface--enabled: url('#{$icons-path}system/dark/zoom-out.svg#on-surface--enabled'); - --icon__system_zoom-out_on-surface--hover: url('#{$icons-path}system/dark/zoom-out.svg#on-surface--hover'); - --icon__system_zoom-out_on-surface--active: url('#{$icons-path}system/dark/zoom-out.svg#on-surface--active'); - --icon__system_zoom-out_on-surface--disabled: url('#{$icons-path}system/dark/zoom-out.svg#on-surface--disabled'); - --icon__system_zoom-out_on-primary--enabled: url('#{$icons-path}system/dark/zoom-out.svg#on-primary--enabled'); - --icon__system_zoom-out_on-primary--hover: url('#{$icons-path}system/dark/zoom-out.svg#on-primary--hover'); - --icon__system_zoom-out_on-primary--active: url('#{$icons-path}system/dark/zoom-out.svg#on-primary--active'); - --icon__system_zoom-out_on-primary--disabled: url('#{$icons-path}system/dark/zoom-out.svg#on-primary--disabled'); - --icon__system_zoom-out_on-disabled--enabled: url('#{$icons-path}system/dark/zoom-out.svg#on-disabled--enabled'); - --icon__system_zoom-out_on-message--enabled: url('#{$icons-path}system/dark/zoom-out.svg#on-message--enabled'); - --icon__system_zoom-out_on-elevation--enabled: url('#{$icons-path}system/dark/zoom-out.svg#on-elevation--enabled'); - --icon__system_zoom-out_primary--enabled: url('#{$icons-path}system/dark/zoom-out.svg#primary--enabled'); - --icon__system_zoom-out_primary--hover: url('#{$icons-path}system/dark/zoom-out.svg#primary--hover'); - --icon__system_zoom-out_primary--active: url('#{$icons-path}system/dark/zoom-out.svg#primary--active'); - --icon__system_zoom-out_primary--disabled: url('#{$icons-path}system/dark/zoom-out.svg#primary--disabled'); - --icon__system_zoom-out_error--enabled: url('#{$icons-path}system/dark/zoom-out.svg#error--enabled'); - --icon__system_zoom-out_error-actionable--enabled: url('#{$icons-path}system/dark/zoom-out.svg#error-actionable--enabled'); - --icon__system_zoom-out_error-actionable--hover: url('#{$icons-path}system/dark/zoom-out.svg#error-actionable--hover'); - --icon__system_zoom-out_error-actionable--active: url('#{$icons-path}system/dark/zoom-out.svg#error-actionable--active'); - --icon__system_zoom-out_error-actionable--disabled: url('#{$icons-path}system/dark/zoom-out.svg#error-actionable--disabled'); - --icon__system_zoom-out_warning--enabled: url('#{$icons-path}system/dark/zoom-out.svg#warning--enabled'); - --icon__system_zoom-out_success--enabled: url('#{$icons-path}system/dark/zoom-out.svg#success--enabled'); - --icon__system_zoom-out_neutral--enabled: url('#{$icons-path}system/dark/zoom-out.svg#neutral--enabled'); - --icon__system_zoom-out_neutral--hover: url('#{$icons-path}system/dark/zoom-out.svg#neutral--hover'); - --icon__system_zoom-out_neutral--active: url('#{$icons-path}system/dark/zoom-out.svg#neutral--active'); - --icon__system_zoom-out_neutral--disabled: url('#{$icons-path}system/dark/zoom-out.svg#neutral--disabled'); - --icon__system_zoom-out_highlighted--enabled: url('#{$icons-path}system/dark/zoom-out.svg#highlighted--enabled'); - --icon__system_zoom-out_bright--enabled: url('#{$icons-path}system/dark/zoom-out.svg#bright--enabled'); - --icon__system_zoom-in_on-surface--enabled: url('#{$icons-path}system/dark/zoom-in.svg#on-surface--enabled'); - --icon__system_zoom-in_on-surface--hover: url('#{$icons-path}system/dark/zoom-in.svg#on-surface--hover'); - --icon__system_zoom-in_on-surface--active: url('#{$icons-path}system/dark/zoom-in.svg#on-surface--active'); - --icon__system_zoom-in_on-surface--disabled: url('#{$icons-path}system/dark/zoom-in.svg#on-surface--disabled'); - --icon__system_zoom-in_on-primary--enabled: url('#{$icons-path}system/dark/zoom-in.svg#on-primary--enabled'); - --icon__system_zoom-in_on-primary--hover: url('#{$icons-path}system/dark/zoom-in.svg#on-primary--hover'); - --icon__system_zoom-in_on-primary--active: url('#{$icons-path}system/dark/zoom-in.svg#on-primary--active'); - --icon__system_zoom-in_on-primary--disabled: url('#{$icons-path}system/dark/zoom-in.svg#on-primary--disabled'); - --icon__system_zoom-in_on-disabled--enabled: url('#{$icons-path}system/dark/zoom-in.svg#on-disabled--enabled'); - --icon__system_zoom-in_on-message--enabled: url('#{$icons-path}system/dark/zoom-in.svg#on-message--enabled'); - --icon__system_zoom-in_on-elevation--enabled: url('#{$icons-path}system/dark/zoom-in.svg#on-elevation--enabled'); - --icon__system_zoom-in_primary--enabled: url('#{$icons-path}system/dark/zoom-in.svg#primary--enabled'); - --icon__system_zoom-in_primary--hover: url('#{$icons-path}system/dark/zoom-in.svg#primary--hover'); - --icon__system_zoom-in_primary--active: url('#{$icons-path}system/dark/zoom-in.svg#primary--active'); - --icon__system_zoom-in_primary--disabled: url('#{$icons-path}system/dark/zoom-in.svg#primary--disabled'); - --icon__system_zoom-in_error--enabled: url('#{$icons-path}system/dark/zoom-in.svg#error--enabled'); - --icon__system_zoom-in_error-actionable--enabled: url('#{$icons-path}system/dark/zoom-in.svg#error-actionable--enabled'); - --icon__system_zoom-in_error-actionable--hover: url('#{$icons-path}system/dark/zoom-in.svg#error-actionable--hover'); - --icon__system_zoom-in_error-actionable--active: url('#{$icons-path}system/dark/zoom-in.svg#error-actionable--active'); - --icon__system_zoom-in_error-actionable--disabled: url('#{$icons-path}system/dark/zoom-in.svg#error-actionable--disabled'); - --icon__system_zoom-in_warning--enabled: url('#{$icons-path}system/dark/zoom-in.svg#warning--enabled'); - --icon__system_zoom-in_success--enabled: url('#{$icons-path}system/dark/zoom-in.svg#success--enabled'); - --icon__system_zoom-in_neutral--enabled: url('#{$icons-path}system/dark/zoom-in.svg#neutral--enabled'); - --icon__system_zoom-in_neutral--hover: url('#{$icons-path}system/dark/zoom-in.svg#neutral--hover'); - --icon__system_zoom-in_neutral--active: url('#{$icons-path}system/dark/zoom-in.svg#neutral--active'); - --icon__system_zoom-in_neutral--disabled: url('#{$icons-path}system/dark/zoom-in.svg#neutral--disabled'); - --icon__system_zoom-in_highlighted--enabled: url('#{$icons-path}system/dark/zoom-in.svg#highlighted--enabled'); - --icon__system_zoom-in_bright--enabled: url('#{$icons-path}system/dark/zoom-in.svg#bright--enabled'); - --icon__system_warning_on-surface--enabled: url('#{$icons-path}system/dark/warning.svg#on-surface--enabled'); - --icon__system_warning_on-surface--hover: url('#{$icons-path}system/dark/warning.svg#on-surface--hover'); - --icon__system_warning_on-surface--active: url('#{$icons-path}system/dark/warning.svg#on-surface--active'); - --icon__system_warning_on-surface--disabled: url('#{$icons-path}system/dark/warning.svg#on-surface--disabled'); - --icon__system_warning_on-primary--enabled: url('#{$icons-path}system/dark/warning.svg#on-primary--enabled'); - --icon__system_warning_on-primary--hover: url('#{$icons-path}system/dark/warning.svg#on-primary--hover'); - --icon__system_warning_on-primary--active: url('#{$icons-path}system/dark/warning.svg#on-primary--active'); - --icon__system_warning_on-primary--disabled: url('#{$icons-path}system/dark/warning.svg#on-primary--disabled'); - --icon__system_warning_on-disabled--enabled: url('#{$icons-path}system/dark/warning.svg#on-disabled--enabled'); - --icon__system_warning_on-message--enabled: url('#{$icons-path}system/dark/warning.svg#on-message--enabled'); - --icon__system_warning_on-elevation--enabled: url('#{$icons-path}system/dark/warning.svg#on-elevation--enabled'); - --icon__system_warning_primary--enabled: url('#{$icons-path}system/dark/warning.svg#primary--enabled'); - --icon__system_warning_primary--hover: url('#{$icons-path}system/dark/warning.svg#primary--hover'); - --icon__system_warning_primary--active: url('#{$icons-path}system/dark/warning.svg#primary--active'); - --icon__system_warning_primary--disabled: url('#{$icons-path}system/dark/warning.svg#primary--disabled'); - --icon__system_warning_error--enabled: url('#{$icons-path}system/dark/warning.svg#error--enabled'); - --icon__system_warning_error-actionable--enabled: url('#{$icons-path}system/dark/warning.svg#error-actionable--enabled'); - --icon__system_warning_error-actionable--hover: url('#{$icons-path}system/dark/warning.svg#error-actionable--hover'); - --icon__system_warning_error-actionable--active: url('#{$icons-path}system/dark/warning.svg#error-actionable--active'); - --icon__system_warning_error-actionable--disabled: url('#{$icons-path}system/dark/warning.svg#error-actionable--disabled'); - --icon__system_warning_warning--enabled: url('#{$icons-path}system/dark/warning.svg#warning--enabled'); - --icon__system_warning_success--enabled: url('#{$icons-path}system/dark/warning.svg#success--enabled'); - --icon__system_warning_neutral--enabled: url('#{$icons-path}system/dark/warning.svg#neutral--enabled'); - --icon__system_warning_neutral--hover: url('#{$icons-path}system/dark/warning.svg#neutral--hover'); - --icon__system_warning_neutral--active: url('#{$icons-path}system/dark/warning.svg#neutral--active'); - --icon__system_warning_neutral--disabled: url('#{$icons-path}system/dark/warning.svg#neutral--disabled'); - --icon__system_warning_highlighted--enabled: url('#{$icons-path}system/dark/warning.svg#highlighted--enabled'); - --icon__system_warning_bright--enabled: url('#{$icons-path}system/dark/warning.svg#bright--enabled'); - --icon__system_version_on-surface--enabled: url('#{$icons-path}system/dark/version.svg#on-surface--enabled'); - --icon__system_version_on-surface--hover: url('#{$icons-path}system/dark/version.svg#on-surface--hover'); - --icon__system_version_on-surface--active: url('#{$icons-path}system/dark/version.svg#on-surface--active'); - --icon__system_version_on-surface--disabled: url('#{$icons-path}system/dark/version.svg#on-surface--disabled'); - --icon__system_version_on-primary--enabled: url('#{$icons-path}system/dark/version.svg#on-primary--enabled'); - --icon__system_version_on-primary--hover: url('#{$icons-path}system/dark/version.svg#on-primary--hover'); - --icon__system_version_on-primary--active: url('#{$icons-path}system/dark/version.svg#on-primary--active'); - --icon__system_version_on-primary--disabled: url('#{$icons-path}system/dark/version.svg#on-primary--disabled'); - --icon__system_version_on-disabled--enabled: url('#{$icons-path}system/dark/version.svg#on-disabled--enabled'); - --icon__system_version_on-message--enabled: url('#{$icons-path}system/dark/version.svg#on-message--enabled'); - --icon__system_version_on-elevation--enabled: url('#{$icons-path}system/dark/version.svg#on-elevation--enabled'); - --icon__system_version_primary--enabled: url('#{$icons-path}system/dark/version.svg#primary--enabled'); - --icon__system_version_primary--hover: url('#{$icons-path}system/dark/version.svg#primary--hover'); - --icon__system_version_primary--active: url('#{$icons-path}system/dark/version.svg#primary--active'); - --icon__system_version_primary--disabled: url('#{$icons-path}system/dark/version.svg#primary--disabled'); - --icon__system_version_error--enabled: url('#{$icons-path}system/dark/version.svg#error--enabled'); - --icon__system_version_error-actionable--enabled: url('#{$icons-path}system/dark/version.svg#error-actionable--enabled'); - --icon__system_version_error-actionable--hover: url('#{$icons-path}system/dark/version.svg#error-actionable--hover'); - --icon__system_version_error-actionable--active: url('#{$icons-path}system/dark/version.svg#error-actionable--active'); - --icon__system_version_error-actionable--disabled: url('#{$icons-path}system/dark/version.svg#error-actionable--disabled'); - --icon__system_version_warning--enabled: url('#{$icons-path}system/dark/version.svg#warning--enabled'); - --icon__system_version_success--enabled: url('#{$icons-path}system/dark/version.svg#success--enabled'); - --icon__system_version_neutral--enabled: url('#{$icons-path}system/dark/version.svg#neutral--enabled'); - --icon__system_version_neutral--hover: url('#{$icons-path}system/dark/version.svg#neutral--hover'); - --icon__system_version_neutral--active: url('#{$icons-path}system/dark/version.svg#neutral--active'); - --icon__system_version_neutral--disabled: url('#{$icons-path}system/dark/version.svg#neutral--disabled'); - --icon__system_version_highlighted--enabled: url('#{$icons-path}system/dark/version.svg#highlighted--enabled'); - --icon__system_version_bright--enabled: url('#{$icons-path}system/dark/version.svg#bright--enabled'); - --icon__system_user_on-surface--enabled: url('#{$icons-path}system/dark/user.svg#on-surface--enabled'); - --icon__system_user_on-surface--hover: url('#{$icons-path}system/dark/user.svg#on-surface--hover'); - --icon__system_user_on-surface--active: url('#{$icons-path}system/dark/user.svg#on-surface--active'); - --icon__system_user_on-surface--disabled: url('#{$icons-path}system/dark/user.svg#on-surface--disabled'); - --icon__system_user_on-primary--enabled: url('#{$icons-path}system/dark/user.svg#on-primary--enabled'); - --icon__system_user_on-primary--hover: url('#{$icons-path}system/dark/user.svg#on-primary--hover'); - --icon__system_user_on-primary--active: url('#{$icons-path}system/dark/user.svg#on-primary--active'); - --icon__system_user_on-primary--disabled: url('#{$icons-path}system/dark/user.svg#on-primary--disabled'); - --icon__system_user_on-disabled--enabled: url('#{$icons-path}system/dark/user.svg#on-disabled--enabled'); - --icon__system_user_on-message--enabled: url('#{$icons-path}system/dark/user.svg#on-message--enabled'); - --icon__system_user_on-elevation--enabled: url('#{$icons-path}system/dark/user.svg#on-elevation--enabled'); - --icon__system_user_primary--enabled: url('#{$icons-path}system/dark/user.svg#primary--enabled'); - --icon__system_user_primary--hover: url('#{$icons-path}system/dark/user.svg#primary--hover'); - --icon__system_user_primary--active: url('#{$icons-path}system/dark/user.svg#primary--active'); - --icon__system_user_primary--disabled: url('#{$icons-path}system/dark/user.svg#primary--disabled'); - --icon__system_user_error--enabled: url('#{$icons-path}system/dark/user.svg#error--enabled'); - --icon__system_user_error-actionable--enabled: url('#{$icons-path}system/dark/user.svg#error-actionable--enabled'); - --icon__system_user_error-actionable--hover: url('#{$icons-path}system/dark/user.svg#error-actionable--hover'); - --icon__system_user_error-actionable--active: url('#{$icons-path}system/dark/user.svg#error-actionable--active'); - --icon__system_user_error-actionable--disabled: url('#{$icons-path}system/dark/user.svg#error-actionable--disabled'); - --icon__system_user_warning--enabled: url('#{$icons-path}system/dark/user.svg#warning--enabled'); - --icon__system_user_success--enabled: url('#{$icons-path}system/dark/user.svg#success--enabled'); - --icon__system_user_neutral--enabled: url('#{$icons-path}system/dark/user.svg#neutral--enabled'); - --icon__system_user_neutral--hover: url('#{$icons-path}system/dark/user.svg#neutral--hover'); - --icon__system_user_neutral--active: url('#{$icons-path}system/dark/user.svg#neutral--active'); - --icon__system_user_neutral--disabled: url('#{$icons-path}system/dark/user.svg#neutral--disabled'); - --icon__system_user_highlighted--enabled: url('#{$icons-path}system/dark/user.svg#highlighted--enabled'); - --icon__system_user_bright--enabled: url('#{$icons-path}system/dark/user.svg#bright--enabled'); - --icon__system_upload_on-surface--enabled: url('#{$icons-path}system/dark/upload.svg#on-surface--enabled'); - --icon__system_upload_on-surface--hover: url('#{$icons-path}system/dark/upload.svg#on-surface--hover'); - --icon__system_upload_on-surface--active: url('#{$icons-path}system/dark/upload.svg#on-surface--active'); - --icon__system_upload_on-surface--disabled: url('#{$icons-path}system/dark/upload.svg#on-surface--disabled'); - --icon__system_upload_on-primary--enabled: url('#{$icons-path}system/dark/upload.svg#on-primary--enabled'); - --icon__system_upload_on-primary--hover: url('#{$icons-path}system/dark/upload.svg#on-primary--hover'); - --icon__system_upload_on-primary--active: url('#{$icons-path}system/dark/upload.svg#on-primary--active'); - --icon__system_upload_on-primary--disabled: url('#{$icons-path}system/dark/upload.svg#on-primary--disabled'); - --icon__system_upload_on-disabled--enabled: url('#{$icons-path}system/dark/upload.svg#on-disabled--enabled'); - --icon__system_upload_on-message--enabled: url('#{$icons-path}system/dark/upload.svg#on-message--enabled'); - --icon__system_upload_on-elevation--enabled: url('#{$icons-path}system/dark/upload.svg#on-elevation--enabled'); - --icon__system_upload_primary--enabled: url('#{$icons-path}system/dark/upload.svg#primary--enabled'); - --icon__system_upload_primary--hover: url('#{$icons-path}system/dark/upload.svg#primary--hover'); - --icon__system_upload_primary--active: url('#{$icons-path}system/dark/upload.svg#primary--active'); - --icon__system_upload_primary--disabled: url('#{$icons-path}system/dark/upload.svg#primary--disabled'); - --icon__system_upload_error--enabled: url('#{$icons-path}system/dark/upload.svg#error--enabled'); - --icon__system_upload_error-actionable--enabled: url('#{$icons-path}system/dark/upload.svg#error-actionable--enabled'); - --icon__system_upload_error-actionable--hover: url('#{$icons-path}system/dark/upload.svg#error-actionable--hover'); - --icon__system_upload_error-actionable--active: url('#{$icons-path}system/dark/upload.svg#error-actionable--active'); - --icon__system_upload_error-actionable--disabled: url('#{$icons-path}system/dark/upload.svg#error-actionable--disabled'); - --icon__system_upload_warning--enabled: url('#{$icons-path}system/dark/upload.svg#warning--enabled'); - --icon__system_upload_success--enabled: url('#{$icons-path}system/dark/upload.svg#success--enabled'); - --icon__system_upload_neutral--enabled: url('#{$icons-path}system/dark/upload.svg#neutral--enabled'); - --icon__system_upload_neutral--hover: url('#{$icons-path}system/dark/upload.svg#neutral--hover'); - --icon__system_upload_neutral--active: url('#{$icons-path}system/dark/upload.svg#neutral--active'); - --icon__system_upload_neutral--disabled: url('#{$icons-path}system/dark/upload.svg#neutral--disabled'); - --icon__system_upload_highlighted--enabled: url('#{$icons-path}system/dark/upload.svg#highlighted--enabled'); - --icon__system_upload_bright--enabled: url('#{$icons-path}system/dark/upload.svg#bright--enabled'); - --icon__system_undo_on-surface--enabled: url('#{$icons-path}system/dark/undo.svg#on-surface--enabled'); - --icon__system_undo_on-surface--hover: url('#{$icons-path}system/dark/undo.svg#on-surface--hover'); - --icon__system_undo_on-surface--active: url('#{$icons-path}system/dark/undo.svg#on-surface--active'); - --icon__system_undo_on-surface--disabled: url('#{$icons-path}system/dark/undo.svg#on-surface--disabled'); - --icon__system_undo_on-primary--enabled: url('#{$icons-path}system/dark/undo.svg#on-primary--enabled'); - --icon__system_undo_on-primary--hover: url('#{$icons-path}system/dark/undo.svg#on-primary--hover'); - --icon__system_undo_on-primary--active: url('#{$icons-path}system/dark/undo.svg#on-primary--active'); - --icon__system_undo_on-primary--disabled: url('#{$icons-path}system/dark/undo.svg#on-primary--disabled'); - --icon__system_undo_on-disabled--enabled: url('#{$icons-path}system/dark/undo.svg#on-disabled--enabled'); - --icon__system_undo_on-message--enabled: url('#{$icons-path}system/dark/undo.svg#on-message--enabled'); - --icon__system_undo_on-elevation--enabled: url('#{$icons-path}system/dark/undo.svg#on-elevation--enabled'); - --icon__system_undo_primary--enabled: url('#{$icons-path}system/dark/undo.svg#primary--enabled'); - --icon__system_undo_primary--hover: url('#{$icons-path}system/dark/undo.svg#primary--hover'); - --icon__system_undo_primary--active: url('#{$icons-path}system/dark/undo.svg#primary--active'); - --icon__system_undo_primary--disabled: url('#{$icons-path}system/dark/undo.svg#primary--disabled'); - --icon__system_undo_error--enabled: url('#{$icons-path}system/dark/undo.svg#error--enabled'); - --icon__system_undo_error-actionable--enabled: url('#{$icons-path}system/dark/undo.svg#error-actionable--enabled'); - --icon__system_undo_error-actionable--hover: url('#{$icons-path}system/dark/undo.svg#error-actionable--hover'); - --icon__system_undo_error-actionable--active: url('#{$icons-path}system/dark/undo.svg#error-actionable--active'); - --icon__system_undo_error-actionable--disabled: url('#{$icons-path}system/dark/undo.svg#error-actionable--disabled'); - --icon__system_undo_warning--enabled: url('#{$icons-path}system/dark/undo.svg#warning--enabled'); - --icon__system_undo_success--enabled: url('#{$icons-path}system/dark/undo.svg#success--enabled'); - --icon__system_undo_neutral--enabled: url('#{$icons-path}system/dark/undo.svg#neutral--enabled'); - --icon__system_undo_neutral--hover: url('#{$icons-path}system/dark/undo.svg#neutral--hover'); - --icon__system_undo_neutral--active: url('#{$icons-path}system/dark/undo.svg#neutral--active'); - --icon__system_undo_neutral--disabled: url('#{$icons-path}system/dark/undo.svg#neutral--disabled'); - --icon__system_undo_highlighted--enabled: url('#{$icons-path}system/dark/undo.svg#highlighted--enabled'); - --icon__system_undo_bright--enabled: url('#{$icons-path}system/dark/undo.svg#bright--enabled'); - --icon__system_tools_on-surface--enabled: url('#{$icons-path}system/dark/tools.svg#on-surface--enabled'); - --icon__system_tools_on-surface--hover: url('#{$icons-path}system/dark/tools.svg#on-surface--hover'); - --icon__system_tools_on-surface--active: url('#{$icons-path}system/dark/tools.svg#on-surface--active'); - --icon__system_tools_on-surface--disabled: url('#{$icons-path}system/dark/tools.svg#on-surface--disabled'); - --icon__system_tools_on-primary--enabled: url('#{$icons-path}system/dark/tools.svg#on-primary--enabled'); - --icon__system_tools_on-primary--hover: url('#{$icons-path}system/dark/tools.svg#on-primary--hover'); - --icon__system_tools_on-primary--active: url('#{$icons-path}system/dark/tools.svg#on-primary--active'); - --icon__system_tools_on-primary--disabled: url('#{$icons-path}system/dark/tools.svg#on-primary--disabled'); - --icon__system_tools_on-disabled--enabled: url('#{$icons-path}system/dark/tools.svg#on-disabled--enabled'); - --icon__system_tools_on-message--enabled: url('#{$icons-path}system/dark/tools.svg#on-message--enabled'); - --icon__system_tools_on-elevation--enabled: url('#{$icons-path}system/dark/tools.svg#on-elevation--enabled'); - --icon__system_tools_primary--enabled: url('#{$icons-path}system/dark/tools.svg#primary--enabled'); - --icon__system_tools_primary--hover: url('#{$icons-path}system/dark/tools.svg#primary--hover'); - --icon__system_tools_primary--active: url('#{$icons-path}system/dark/tools.svg#primary--active'); - --icon__system_tools_primary--disabled: url('#{$icons-path}system/dark/tools.svg#primary--disabled'); - --icon__system_tools_error--enabled: url('#{$icons-path}system/dark/tools.svg#error--enabled'); - --icon__system_tools_error-actionable--enabled: url('#{$icons-path}system/dark/tools.svg#error-actionable--enabled'); - --icon__system_tools_error-actionable--hover: url('#{$icons-path}system/dark/tools.svg#error-actionable--hover'); - --icon__system_tools_error-actionable--active: url('#{$icons-path}system/dark/tools.svg#error-actionable--active'); - --icon__system_tools_error-actionable--disabled: url('#{$icons-path}system/dark/tools.svg#error-actionable--disabled'); - --icon__system_tools_warning--enabled: url('#{$icons-path}system/dark/tools.svg#warning--enabled'); - --icon__system_tools_success--enabled: url('#{$icons-path}system/dark/tools.svg#success--enabled'); - --icon__system_tools_neutral--enabled: url('#{$icons-path}system/dark/tools.svg#neutral--enabled'); - --icon__system_tools_neutral--hover: url('#{$icons-path}system/dark/tools.svg#neutral--hover'); - --icon__system_tools_neutral--active: url('#{$icons-path}system/dark/tools.svg#neutral--active'); - --icon__system_tools_neutral--disabled: url('#{$icons-path}system/dark/tools.svg#neutral--disabled'); - --icon__system_tools_highlighted--enabled: url('#{$icons-path}system/dark/tools.svg#highlighted--enabled'); - --icon__system_tools_bright--enabled: url('#{$icons-path}system/dark/tools.svg#bright--enabled'); - --icon__system_toggle-theme_on-surface--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#on-surface--enabled'); - --icon__system_toggle-theme_on-surface--hover: url('#{$icons-path}system/dark/toggle-theme.svg#on-surface--hover'); - --icon__system_toggle-theme_on-surface--active: url('#{$icons-path}system/dark/toggle-theme.svg#on-surface--active'); - --icon__system_toggle-theme_on-surface--disabled: url('#{$icons-path}system/dark/toggle-theme.svg#on-surface--disabled'); - --icon__system_toggle-theme_on-primary--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#on-primary--enabled'); - --icon__system_toggle-theme_on-primary--hover: url('#{$icons-path}system/dark/toggle-theme.svg#on-primary--hover'); - --icon__system_toggle-theme_on-primary--active: url('#{$icons-path}system/dark/toggle-theme.svg#on-primary--active'); - --icon__system_toggle-theme_on-primary--disabled: url('#{$icons-path}system/dark/toggle-theme.svg#on-primary--disabled'); - --icon__system_toggle-theme_on-disabled--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#on-disabled--enabled'); - --icon__system_toggle-theme_on-message--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#on-message--enabled'); - --icon__system_toggle-theme_on-elevation--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#on-elevation--enabled'); - --icon__system_toggle-theme_primary--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#primary--enabled'); - --icon__system_toggle-theme_primary--hover: url('#{$icons-path}system/dark/toggle-theme.svg#primary--hover'); - --icon__system_toggle-theme_primary--active: url('#{$icons-path}system/dark/toggle-theme.svg#primary--active'); - --icon__system_toggle-theme_primary--disabled: url('#{$icons-path}system/dark/toggle-theme.svg#primary--disabled'); - --icon__system_toggle-theme_error--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#error--enabled'); - --icon__system_toggle-theme_error-actionable--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#error-actionable--enabled'); - --icon__system_toggle-theme_error-actionable--hover: url('#{$icons-path}system/dark/toggle-theme.svg#error-actionable--hover'); - --icon__system_toggle-theme_error-actionable--active: url('#{$icons-path}system/dark/toggle-theme.svg#error-actionable--active'); - --icon__system_toggle-theme_error-actionable--disabled: url('#{$icons-path}system/dark/toggle-theme.svg#error-actionable--disabled'); - --icon__system_toggle-theme_warning--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#warning--enabled'); - --icon__system_toggle-theme_success--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#success--enabled'); - --icon__system_toggle-theme_neutral--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#neutral--enabled'); - --icon__system_toggle-theme_neutral--hover: url('#{$icons-path}system/dark/toggle-theme.svg#neutral--hover'); - --icon__system_toggle-theme_neutral--active: url('#{$icons-path}system/dark/toggle-theme.svg#neutral--active'); - --icon__system_toggle-theme_neutral--disabled: url('#{$icons-path}system/dark/toggle-theme.svg#neutral--disabled'); - --icon__system_toggle-theme_highlighted--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#highlighted--enabled'); - --icon__system_toggle-theme_bright--enabled: url('#{$icons-path}system/dark/toggle-theme.svg#bright--enabled'); - --icon__system_time_on-surface--enabled: url('#{$icons-path}system/dark/time.svg#on-surface--enabled'); - --icon__system_time_on-surface--hover: url('#{$icons-path}system/dark/time.svg#on-surface--hover'); - --icon__system_time_on-surface--active: url('#{$icons-path}system/dark/time.svg#on-surface--active'); - --icon__system_time_on-surface--disabled: url('#{$icons-path}system/dark/time.svg#on-surface--disabled'); - --icon__system_time_on-primary--enabled: url('#{$icons-path}system/dark/time.svg#on-primary--enabled'); - --icon__system_time_on-primary--hover: url('#{$icons-path}system/dark/time.svg#on-primary--hover'); - --icon__system_time_on-primary--active: url('#{$icons-path}system/dark/time.svg#on-primary--active'); - --icon__system_time_on-primary--disabled: url('#{$icons-path}system/dark/time.svg#on-primary--disabled'); - --icon__system_time_on-disabled--enabled: url('#{$icons-path}system/dark/time.svg#on-disabled--enabled'); - --icon__system_time_on-message--enabled: url('#{$icons-path}system/dark/time.svg#on-message--enabled'); - --icon__system_time_on-elevation--enabled: url('#{$icons-path}system/dark/time.svg#on-elevation--enabled'); - --icon__system_time_primary--enabled: url('#{$icons-path}system/dark/time.svg#primary--enabled'); - --icon__system_time_primary--hover: url('#{$icons-path}system/dark/time.svg#primary--hover'); - --icon__system_time_primary--active: url('#{$icons-path}system/dark/time.svg#primary--active'); - --icon__system_time_primary--disabled: url('#{$icons-path}system/dark/time.svg#primary--disabled'); - --icon__system_time_error--enabled: url('#{$icons-path}system/dark/time.svg#error--enabled'); - --icon__system_time_error-actionable--enabled: url('#{$icons-path}system/dark/time.svg#error-actionable--enabled'); - --icon__system_time_error-actionable--hover: url('#{$icons-path}system/dark/time.svg#error-actionable--hover'); - --icon__system_time_error-actionable--active: url('#{$icons-path}system/dark/time.svg#error-actionable--active'); - --icon__system_time_error-actionable--disabled: url('#{$icons-path}system/dark/time.svg#error-actionable--disabled'); - --icon__system_time_warning--enabled: url('#{$icons-path}system/dark/time.svg#warning--enabled'); - --icon__system_time_success--enabled: url('#{$icons-path}system/dark/time.svg#success--enabled'); - --icon__system_time_neutral--enabled: url('#{$icons-path}system/dark/time.svg#neutral--enabled'); - --icon__system_time_neutral--hover: url('#{$icons-path}system/dark/time.svg#neutral--hover'); - --icon__system_time_neutral--active: url('#{$icons-path}system/dark/time.svg#neutral--active'); - --icon__system_time_neutral--disabled: url('#{$icons-path}system/dark/time.svg#neutral--disabled'); - --icon__system_time_highlighted--enabled: url('#{$icons-path}system/dark/time.svg#highlighted--enabled'); - --icon__system_time_bright--enabled: url('#{$icons-path}system/dark/time.svg#bright--enabled'); - --icon__system_thunder_on-surface--enabled: url('#{$icons-path}system/dark/thunder.svg#on-surface--enabled'); - --icon__system_thunder_on-surface--hover: url('#{$icons-path}system/dark/thunder.svg#on-surface--hover'); - --icon__system_thunder_on-surface--active: url('#{$icons-path}system/dark/thunder.svg#on-surface--active'); - --icon__system_thunder_on-surface--disabled: url('#{$icons-path}system/dark/thunder.svg#on-surface--disabled'); - --icon__system_thunder_on-primary--enabled: url('#{$icons-path}system/dark/thunder.svg#on-primary--enabled'); - --icon__system_thunder_on-primary--hover: url('#{$icons-path}system/dark/thunder.svg#on-primary--hover'); - --icon__system_thunder_on-primary--active: url('#{$icons-path}system/dark/thunder.svg#on-primary--active'); - --icon__system_thunder_on-primary--disabled: url('#{$icons-path}system/dark/thunder.svg#on-primary--disabled'); - --icon__system_thunder_on-disabled--enabled: url('#{$icons-path}system/dark/thunder.svg#on-disabled--enabled'); - --icon__system_thunder_on-message--enabled: url('#{$icons-path}system/dark/thunder.svg#on-message--enabled'); - --icon__system_thunder_on-elevation--enabled: url('#{$icons-path}system/dark/thunder.svg#on-elevation--enabled'); - --icon__system_thunder_primary--enabled: url('#{$icons-path}system/dark/thunder.svg#primary--enabled'); - --icon__system_thunder_primary--hover: url('#{$icons-path}system/dark/thunder.svg#primary--hover'); - --icon__system_thunder_primary--active: url('#{$icons-path}system/dark/thunder.svg#primary--active'); - --icon__system_thunder_primary--disabled: url('#{$icons-path}system/dark/thunder.svg#primary--disabled'); - --icon__system_thunder_error--enabled: url('#{$icons-path}system/dark/thunder.svg#error--enabled'); - --icon__system_thunder_error-actionable--enabled: url('#{$icons-path}system/dark/thunder.svg#error-actionable--enabled'); - --icon__system_thunder_error-actionable--hover: url('#{$icons-path}system/dark/thunder.svg#error-actionable--hover'); - --icon__system_thunder_error-actionable--active: url('#{$icons-path}system/dark/thunder.svg#error-actionable--active'); - --icon__system_thunder_error-actionable--disabled: url('#{$icons-path}system/dark/thunder.svg#error-actionable--disabled'); - --icon__system_thunder_warning--enabled: url('#{$icons-path}system/dark/thunder.svg#warning--enabled'); - --icon__system_thunder_success--enabled: url('#{$icons-path}system/dark/thunder.svg#success--enabled'); - --icon__system_thunder_neutral--enabled: url('#{$icons-path}system/dark/thunder.svg#neutral--enabled'); - --icon__system_thunder_neutral--hover: url('#{$icons-path}system/dark/thunder.svg#neutral--hover'); - --icon__system_thunder_neutral--active: url('#{$icons-path}system/dark/thunder.svg#neutral--active'); - --icon__system_thunder_neutral--disabled: url('#{$icons-path}system/dark/thunder.svg#neutral--disabled'); - --icon__system_thunder_highlighted--enabled: url('#{$icons-path}system/dark/thunder.svg#highlighted--enabled'); - --icon__system_thunder_bright--enabled: url('#{$icons-path}system/dark/thunder.svg#bright--enabled'); - --icon__system_thumb-up_on-surface--enabled: url('#{$icons-path}system/dark/thumb-up.svg#on-surface--enabled'); - --icon__system_thumb-up_on-surface--hover: url('#{$icons-path}system/dark/thumb-up.svg#on-surface--hover'); - --icon__system_thumb-up_on-surface--active: url('#{$icons-path}system/dark/thumb-up.svg#on-surface--active'); - --icon__system_thumb-up_on-surface--disabled: url('#{$icons-path}system/dark/thumb-up.svg#on-surface--disabled'); - --icon__system_thumb-up_on-primary--enabled: url('#{$icons-path}system/dark/thumb-up.svg#on-primary--enabled'); - --icon__system_thumb-up_on-primary--hover: url('#{$icons-path}system/dark/thumb-up.svg#on-primary--hover'); - --icon__system_thumb-up_on-primary--active: url('#{$icons-path}system/dark/thumb-up.svg#on-primary--active'); - --icon__system_thumb-up_on-primary--disabled: url('#{$icons-path}system/dark/thumb-up.svg#on-primary--disabled'); - --icon__system_thumb-up_on-disabled--enabled: url('#{$icons-path}system/dark/thumb-up.svg#on-disabled--enabled'); - --icon__system_thumb-up_on-message--enabled: url('#{$icons-path}system/dark/thumb-up.svg#on-message--enabled'); - --icon__system_thumb-up_on-elevation--enabled: url('#{$icons-path}system/dark/thumb-up.svg#on-elevation--enabled'); - --icon__system_thumb-up_primary--enabled: url('#{$icons-path}system/dark/thumb-up.svg#primary--enabled'); - --icon__system_thumb-up_primary--hover: url('#{$icons-path}system/dark/thumb-up.svg#primary--hover'); - --icon__system_thumb-up_primary--active: url('#{$icons-path}system/dark/thumb-up.svg#primary--active'); - --icon__system_thumb-up_primary--disabled: url('#{$icons-path}system/dark/thumb-up.svg#primary--disabled'); - --icon__system_thumb-up_error--enabled: url('#{$icons-path}system/dark/thumb-up.svg#error--enabled'); - --icon__system_thumb-up_error-actionable--enabled: url('#{$icons-path}system/dark/thumb-up.svg#error-actionable--enabled'); - --icon__system_thumb-up_error-actionable--hover: url('#{$icons-path}system/dark/thumb-up.svg#error-actionable--hover'); - --icon__system_thumb-up_error-actionable--active: url('#{$icons-path}system/dark/thumb-up.svg#error-actionable--active'); - --icon__system_thumb-up_error-actionable--disabled: url('#{$icons-path}system/dark/thumb-up.svg#error-actionable--disabled'); - --icon__system_thumb-up_warning--enabled: url('#{$icons-path}system/dark/thumb-up.svg#warning--enabled'); - --icon__system_thumb-up_success--enabled: url('#{$icons-path}system/dark/thumb-up.svg#success--enabled'); - --icon__system_thumb-up_neutral--enabled: url('#{$icons-path}system/dark/thumb-up.svg#neutral--enabled'); - --icon__system_thumb-up_neutral--hover: url('#{$icons-path}system/dark/thumb-up.svg#neutral--hover'); - --icon__system_thumb-up_neutral--active: url('#{$icons-path}system/dark/thumb-up.svg#neutral--active'); - --icon__system_thumb-up_neutral--disabled: url('#{$icons-path}system/dark/thumb-up.svg#neutral--disabled'); - --icon__system_thumb-up_highlighted--enabled: url('#{$icons-path}system/dark/thumb-up.svg#highlighted--enabled'); - --icon__system_thumb-up_bright--enabled: url('#{$icons-path}system/dark/thumb-up.svg#bright--enabled'); - --icon__system_thumb-down_on-surface--enabled: url('#{$icons-path}system/dark/thumb-down.svg#on-surface--enabled'); - --icon__system_thumb-down_on-surface--hover: url('#{$icons-path}system/dark/thumb-down.svg#on-surface--hover'); - --icon__system_thumb-down_on-surface--active: url('#{$icons-path}system/dark/thumb-down.svg#on-surface--active'); - --icon__system_thumb-down_on-surface--disabled: url('#{$icons-path}system/dark/thumb-down.svg#on-surface--disabled'); - --icon__system_thumb-down_on-primary--enabled: url('#{$icons-path}system/dark/thumb-down.svg#on-primary--enabled'); - --icon__system_thumb-down_on-primary--hover: url('#{$icons-path}system/dark/thumb-down.svg#on-primary--hover'); - --icon__system_thumb-down_on-primary--active: url('#{$icons-path}system/dark/thumb-down.svg#on-primary--active'); - --icon__system_thumb-down_on-primary--disabled: url('#{$icons-path}system/dark/thumb-down.svg#on-primary--disabled'); - --icon__system_thumb-down_on-disabled--enabled: url('#{$icons-path}system/dark/thumb-down.svg#on-disabled--enabled'); - --icon__system_thumb-down_on-message--enabled: url('#{$icons-path}system/dark/thumb-down.svg#on-message--enabled'); - --icon__system_thumb-down_on-elevation--enabled: url('#{$icons-path}system/dark/thumb-down.svg#on-elevation--enabled'); - --icon__system_thumb-down_primary--enabled: url('#{$icons-path}system/dark/thumb-down.svg#primary--enabled'); - --icon__system_thumb-down_primary--hover: url('#{$icons-path}system/dark/thumb-down.svg#primary--hover'); - --icon__system_thumb-down_primary--active: url('#{$icons-path}system/dark/thumb-down.svg#primary--active'); - --icon__system_thumb-down_primary--disabled: url('#{$icons-path}system/dark/thumb-down.svg#primary--disabled'); - --icon__system_thumb-down_error--enabled: url('#{$icons-path}system/dark/thumb-down.svg#error--enabled'); - --icon__system_thumb-down_error-actionable--enabled: url('#{$icons-path}system/dark/thumb-down.svg#error-actionable--enabled'); - --icon__system_thumb-down_error-actionable--hover: url('#{$icons-path}system/dark/thumb-down.svg#error-actionable--hover'); - --icon__system_thumb-down_error-actionable--active: url('#{$icons-path}system/dark/thumb-down.svg#error-actionable--active'); - --icon__system_thumb-down_error-actionable--disabled: url('#{$icons-path}system/dark/thumb-down.svg#error-actionable--disabled'); - --icon__system_thumb-down_warning--enabled: url('#{$icons-path}system/dark/thumb-down.svg#warning--enabled'); - --icon__system_thumb-down_success--enabled: url('#{$icons-path}system/dark/thumb-down.svg#success--enabled'); - --icon__system_thumb-down_neutral--enabled: url('#{$icons-path}system/dark/thumb-down.svg#neutral--enabled'); - --icon__system_thumb-down_neutral--hover: url('#{$icons-path}system/dark/thumb-down.svg#neutral--hover'); - --icon__system_thumb-down_neutral--active: url('#{$icons-path}system/dark/thumb-down.svg#neutral--active'); - --icon__system_thumb-down_neutral--disabled: url('#{$icons-path}system/dark/thumb-down.svg#neutral--disabled'); - --icon__system_thumb-down_highlighted--enabled: url('#{$icons-path}system/dark/thumb-down.svg#highlighted--enabled'); - --icon__system_thumb-down_bright--enabled: url('#{$icons-path}system/dark/thumb-down.svg#bright--enabled'); - --icon__system_text-compare_on-surface--enabled: url('#{$icons-path}system/dark/text-compare.svg#on-surface--enabled'); - --icon__system_text-compare_on-surface--hover: url('#{$icons-path}system/dark/text-compare.svg#on-surface--hover'); - --icon__system_text-compare_on-surface--active: url('#{$icons-path}system/dark/text-compare.svg#on-surface--active'); - --icon__system_text-compare_on-surface--disabled: url('#{$icons-path}system/dark/text-compare.svg#on-surface--disabled'); - --icon__system_text-compare_on-primary--enabled: url('#{$icons-path}system/dark/text-compare.svg#on-primary--enabled'); - --icon__system_text-compare_on-primary--hover: url('#{$icons-path}system/dark/text-compare.svg#on-primary--hover'); - --icon__system_text-compare_on-primary--active: url('#{$icons-path}system/dark/text-compare.svg#on-primary--active'); - --icon__system_text-compare_on-primary--disabled: url('#{$icons-path}system/dark/text-compare.svg#on-primary--disabled'); - --icon__system_text-compare_on-disabled--enabled: url('#{$icons-path}system/dark/text-compare.svg#on-disabled--enabled'); - --icon__system_text-compare_on-message--enabled: url('#{$icons-path}system/dark/text-compare.svg#on-message--enabled'); - --icon__system_text-compare_on-elevation--enabled: url('#{$icons-path}system/dark/text-compare.svg#on-elevation--enabled'); - --icon__system_text-compare_primary--enabled: url('#{$icons-path}system/dark/text-compare.svg#primary--enabled'); - --icon__system_text-compare_primary--hover: url('#{$icons-path}system/dark/text-compare.svg#primary--hover'); - --icon__system_text-compare_primary--active: url('#{$icons-path}system/dark/text-compare.svg#primary--active'); - --icon__system_text-compare_primary--disabled: url('#{$icons-path}system/dark/text-compare.svg#primary--disabled'); - --icon__system_text-compare_error--enabled: url('#{$icons-path}system/dark/text-compare.svg#error--enabled'); - --icon__system_text-compare_error-actionable--enabled: url('#{$icons-path}system/dark/text-compare.svg#error-actionable--enabled'); - --icon__system_text-compare_error-actionable--hover: url('#{$icons-path}system/dark/text-compare.svg#error-actionable--hover'); - --icon__system_text-compare_error-actionable--active: url('#{$icons-path}system/dark/text-compare.svg#error-actionable--active'); - --icon__system_text-compare_error-actionable--disabled: url('#{$icons-path}system/dark/text-compare.svg#error-actionable--disabled'); - --icon__system_text-compare_warning--enabled: url('#{$icons-path}system/dark/text-compare.svg#warning--enabled'); - --icon__system_text-compare_success--enabled: url('#{$icons-path}system/dark/text-compare.svg#success--enabled'); - --icon__system_text-compare_neutral--enabled: url('#{$icons-path}system/dark/text-compare.svg#neutral--enabled'); - --icon__system_text-compare_neutral--hover: url('#{$icons-path}system/dark/text-compare.svg#neutral--hover'); - --icon__system_text-compare_neutral--active: url('#{$icons-path}system/dark/text-compare.svg#neutral--active'); - --icon__system_text-compare_neutral--disabled: url('#{$icons-path}system/dark/text-compare.svg#neutral--disabled'); - --icon__system_text-compare_highlighted--enabled: url('#{$icons-path}system/dark/text-compare.svg#highlighted--enabled'); - --icon__system_text-compare_bright--enabled: url('#{$icons-path}system/dark/text-compare.svg#bright--enabled'); - --icon__system_table_on-surface--enabled: url('#{$icons-path}system/dark/table.svg#on-surface--enabled'); - --icon__system_table_on-surface--hover: url('#{$icons-path}system/dark/table.svg#on-surface--hover'); - --icon__system_table_on-surface--active: url('#{$icons-path}system/dark/table.svg#on-surface--active'); - --icon__system_table_on-surface--disabled: url('#{$icons-path}system/dark/table.svg#on-surface--disabled'); - --icon__system_table_on-primary--enabled: url('#{$icons-path}system/dark/table.svg#on-primary--enabled'); - --icon__system_table_on-primary--hover: url('#{$icons-path}system/dark/table.svg#on-primary--hover'); - --icon__system_table_on-primary--active: url('#{$icons-path}system/dark/table.svg#on-primary--active'); - --icon__system_table_on-primary--disabled: url('#{$icons-path}system/dark/table.svg#on-primary--disabled'); - --icon__system_table_on-disabled--enabled: url('#{$icons-path}system/dark/table.svg#on-disabled--enabled'); - --icon__system_table_on-message--enabled: url('#{$icons-path}system/dark/table.svg#on-message--enabled'); - --icon__system_table_on-elevation--enabled: url('#{$icons-path}system/dark/table.svg#on-elevation--enabled'); - --icon__system_table_primary--enabled: url('#{$icons-path}system/dark/table.svg#primary--enabled'); - --icon__system_table_primary--hover: url('#{$icons-path}system/dark/table.svg#primary--hover'); - --icon__system_table_primary--active: url('#{$icons-path}system/dark/table.svg#primary--active'); - --icon__system_table_primary--disabled: url('#{$icons-path}system/dark/table.svg#primary--disabled'); - --icon__system_table_error--enabled: url('#{$icons-path}system/dark/table.svg#error--enabled'); - --icon__system_table_error-actionable--enabled: url('#{$icons-path}system/dark/table.svg#error-actionable--enabled'); - --icon__system_table_error-actionable--hover: url('#{$icons-path}system/dark/table.svg#error-actionable--hover'); - --icon__system_table_error-actionable--active: url('#{$icons-path}system/dark/table.svg#error-actionable--active'); - --icon__system_table_error-actionable--disabled: url('#{$icons-path}system/dark/table.svg#error-actionable--disabled'); - --icon__system_table_warning--enabled: url('#{$icons-path}system/dark/table.svg#warning--enabled'); - --icon__system_table_success--enabled: url('#{$icons-path}system/dark/table.svg#success--enabled'); - --icon__system_table_neutral--enabled: url('#{$icons-path}system/dark/table.svg#neutral--enabled'); - --icon__system_table_neutral--hover: url('#{$icons-path}system/dark/table.svg#neutral--hover'); - --icon__system_table_neutral--active: url('#{$icons-path}system/dark/table.svg#neutral--active'); - --icon__system_table_neutral--disabled: url('#{$icons-path}system/dark/table.svg#neutral--disabled'); - --icon__system_table_highlighted--enabled: url('#{$icons-path}system/dark/table.svg#highlighted--enabled'); - --icon__system_table_bright--enabled: url('#{$icons-path}system/dark/table.svg#bright--enabled'); - --icon__system_substract_on-surface--enabled: url('#{$icons-path}system/dark/substract.svg#on-surface--enabled'); - --icon__system_substract_on-surface--hover: url('#{$icons-path}system/dark/substract.svg#on-surface--hover'); - --icon__system_substract_on-surface--active: url('#{$icons-path}system/dark/substract.svg#on-surface--active'); - --icon__system_substract_on-surface--disabled: url('#{$icons-path}system/dark/substract.svg#on-surface--disabled'); - --icon__system_substract_on-primary--enabled: url('#{$icons-path}system/dark/substract.svg#on-primary--enabled'); - --icon__system_substract_on-primary--hover: url('#{$icons-path}system/dark/substract.svg#on-primary--hover'); - --icon__system_substract_on-primary--active: url('#{$icons-path}system/dark/substract.svg#on-primary--active'); - --icon__system_substract_on-primary--disabled: url('#{$icons-path}system/dark/substract.svg#on-primary--disabled'); - --icon__system_substract_on-disabled--enabled: url('#{$icons-path}system/dark/substract.svg#on-disabled--enabled'); - --icon__system_substract_on-message--enabled: url('#{$icons-path}system/dark/substract.svg#on-message--enabled'); - --icon__system_substract_on-elevation--enabled: url('#{$icons-path}system/dark/substract.svg#on-elevation--enabled'); - --icon__system_substract_primary--enabled: url('#{$icons-path}system/dark/substract.svg#primary--enabled'); - --icon__system_substract_primary--hover: url('#{$icons-path}system/dark/substract.svg#primary--hover'); - --icon__system_substract_primary--active: url('#{$icons-path}system/dark/substract.svg#primary--active'); - --icon__system_substract_primary--disabled: url('#{$icons-path}system/dark/substract.svg#primary--disabled'); - --icon__system_substract_error--enabled: url('#{$icons-path}system/dark/substract.svg#error--enabled'); - --icon__system_substract_error-actionable--enabled: url('#{$icons-path}system/dark/substract.svg#error-actionable--enabled'); - --icon__system_substract_error-actionable--hover: url('#{$icons-path}system/dark/substract.svg#error-actionable--hover'); - --icon__system_substract_error-actionable--active: url('#{$icons-path}system/dark/substract.svg#error-actionable--active'); - --icon__system_substract_error-actionable--disabled: url('#{$icons-path}system/dark/substract.svg#error-actionable--disabled'); - --icon__system_substract_warning--enabled: url('#{$icons-path}system/dark/substract.svg#warning--enabled'); - --icon__system_substract_success--enabled: url('#{$icons-path}system/dark/substract.svg#success--enabled'); - --icon__system_substract_neutral--enabled: url('#{$icons-path}system/dark/substract.svg#neutral--enabled'); - --icon__system_substract_neutral--hover: url('#{$icons-path}system/dark/substract.svg#neutral--hover'); - --icon__system_substract_neutral--active: url('#{$icons-path}system/dark/substract.svg#neutral--active'); - --icon__system_substract_neutral--disabled: url('#{$icons-path}system/dark/substract.svg#neutral--disabled'); - --icon__system_substract_highlighted--enabled: url('#{$icons-path}system/dark/substract.svg#highlighted--enabled'); - --icon__system_substract_bright--enabled: url('#{$icons-path}system/dark/substract.svg#bright--enabled'); - --icon__system_star_on-surface--enabled: url('#{$icons-path}system/dark/star.svg#on-surface--enabled'); - --icon__system_star_on-surface--hover: url('#{$icons-path}system/dark/star.svg#on-surface--hover'); - --icon__system_star_on-surface--active: url('#{$icons-path}system/dark/star.svg#on-surface--active'); - --icon__system_star_on-surface--disabled: url('#{$icons-path}system/dark/star.svg#on-surface--disabled'); - --icon__system_star_on-primary--enabled: url('#{$icons-path}system/dark/star.svg#on-primary--enabled'); - --icon__system_star_on-primary--hover: url('#{$icons-path}system/dark/star.svg#on-primary--hover'); - --icon__system_star_on-primary--active: url('#{$icons-path}system/dark/star.svg#on-primary--active'); - --icon__system_star_on-primary--disabled: url('#{$icons-path}system/dark/star.svg#on-primary--disabled'); - --icon__system_star_on-disabled--enabled: url('#{$icons-path}system/dark/star.svg#on-disabled--enabled'); - --icon__system_star_on-message--enabled: url('#{$icons-path}system/dark/star.svg#on-message--enabled'); - --icon__system_star_on-elevation--enabled: url('#{$icons-path}system/dark/star.svg#on-elevation--enabled'); - --icon__system_star_primary--enabled: url('#{$icons-path}system/dark/star.svg#primary--enabled'); - --icon__system_star_primary--hover: url('#{$icons-path}system/dark/star.svg#primary--hover'); - --icon__system_star_primary--active: url('#{$icons-path}system/dark/star.svg#primary--active'); - --icon__system_star_primary--disabled: url('#{$icons-path}system/dark/star.svg#primary--disabled'); - --icon__system_star_error--enabled: url('#{$icons-path}system/dark/star.svg#error--enabled'); - --icon__system_star_error-actionable--enabled: url('#{$icons-path}system/dark/star.svg#error-actionable--enabled'); - --icon__system_star_error-actionable--hover: url('#{$icons-path}system/dark/star.svg#error-actionable--hover'); - --icon__system_star_error-actionable--active: url('#{$icons-path}system/dark/star.svg#error-actionable--active'); - --icon__system_star_error-actionable--disabled: url('#{$icons-path}system/dark/star.svg#error-actionable--disabled'); - --icon__system_star_warning--enabled: url('#{$icons-path}system/dark/star.svg#warning--enabled'); - --icon__system_star_success--enabled: url('#{$icons-path}system/dark/star.svg#success--enabled'); - --icon__system_star_neutral--enabled: url('#{$icons-path}system/dark/star.svg#neutral--enabled'); - --icon__system_star_neutral--hover: url('#{$icons-path}system/dark/star.svg#neutral--hover'); - --icon__system_star_neutral--active: url('#{$icons-path}system/dark/star.svg#neutral--active'); - --icon__system_star_neutral--disabled: url('#{$icons-path}system/dark/star.svg#neutral--disabled'); - --icon__system_star_highlighted--enabled: url('#{$icons-path}system/dark/star.svg#highlighted--enabled'); - --icon__system_star_bright--enabled: url('#{$icons-path}system/dark/star.svg#bright--enabled'); - --icon__system_star-unselected_on-surface--enabled: url('#{$icons-path}system/dark/star-unselected.svg#on-surface--enabled'); - --icon__system_star-unselected_on-surface--hover: url('#{$icons-path}system/dark/star-unselected.svg#on-surface--hover'); - --icon__system_star-unselected_on-surface--active: url('#{$icons-path}system/dark/star-unselected.svg#on-surface--active'); - --icon__system_star-unselected_on-surface--disabled: url('#{$icons-path}system/dark/star-unselected.svg#on-surface--disabled'); - --icon__system_star-unselected_on-primary--enabled: url('#{$icons-path}system/dark/star-unselected.svg#on-primary--enabled'); - --icon__system_star-unselected_on-primary--hover: url('#{$icons-path}system/dark/star-unselected.svg#on-primary--hover'); - --icon__system_star-unselected_on-primary--active: url('#{$icons-path}system/dark/star-unselected.svg#on-primary--active'); - --icon__system_star-unselected_on-primary--disabled: url('#{$icons-path}system/dark/star-unselected.svg#on-primary--disabled'); - --icon__system_star-unselected_on-disabled--enabled: url('#{$icons-path}system/dark/star-unselected.svg#on-disabled--enabled'); - --icon__system_star-unselected_on-message--enabled: url('#{$icons-path}system/dark/star-unselected.svg#on-message--enabled'); - --icon__system_star-unselected_on-elevation--enabled: url('#{$icons-path}system/dark/star-unselected.svg#on-elevation--enabled'); - --icon__system_star-unselected_primary--enabled: url('#{$icons-path}system/dark/star-unselected.svg#primary--enabled'); - --icon__system_star-unselected_primary--hover: url('#{$icons-path}system/dark/star-unselected.svg#primary--hover'); - --icon__system_star-unselected_primary--active: url('#{$icons-path}system/dark/star-unselected.svg#primary--active'); - --icon__system_star-unselected_primary--disabled: url('#{$icons-path}system/dark/star-unselected.svg#primary--disabled'); - --icon__system_star-unselected_error--enabled: url('#{$icons-path}system/dark/star-unselected.svg#error--enabled'); - --icon__system_star-unselected_error-actionable--enabled: url('#{$icons-path}system/dark/star-unselected.svg#error-actionable--enabled'); - --icon__system_star-unselected_error-actionable--hover: url('#{$icons-path}system/dark/star-unselected.svg#error-actionable--hover'); - --icon__system_star-unselected_error-actionable--active: url('#{$icons-path}system/dark/star-unselected.svg#error-actionable--active'); - --icon__system_star-unselected_error-actionable--disabled: url('#{$icons-path}system/dark/star-unselected.svg#error-actionable--disabled'); - --icon__system_star-unselected_warning--enabled: url('#{$icons-path}system/dark/star-unselected.svg#warning--enabled'); - --icon__system_star-unselected_success--enabled: url('#{$icons-path}system/dark/star-unselected.svg#success--enabled'); - --icon__system_star-unselected_neutral--enabled: url('#{$icons-path}system/dark/star-unselected.svg#neutral--enabled'); - --icon__system_star-unselected_neutral--hover: url('#{$icons-path}system/dark/star-unselected.svg#neutral--hover'); - --icon__system_star-unselected_neutral--active: url('#{$icons-path}system/dark/star-unselected.svg#neutral--active'); - --icon__system_star-unselected_neutral--disabled: url('#{$icons-path}system/dark/star-unselected.svg#neutral--disabled'); - --icon__system_star-unselected_highlighted--enabled: url('#{$icons-path}system/dark/star-unselected.svg#highlighted--enabled'); - --icon__system_star-unselected_bright--enabled: url('#{$icons-path}system/dark/star-unselected.svg#bright--enabled'); - --icon__system_show_on-surface--enabled: url('#{$icons-path}system/dark/show.svg#on-surface--enabled'); - --icon__system_show_on-surface--hover: url('#{$icons-path}system/dark/show.svg#on-surface--hover'); - --icon__system_show_on-surface--active: url('#{$icons-path}system/dark/show.svg#on-surface--active'); - --icon__system_show_on-surface--disabled: url('#{$icons-path}system/dark/show.svg#on-surface--disabled'); - --icon__system_show_on-primary--enabled: url('#{$icons-path}system/dark/show.svg#on-primary--enabled'); - --icon__system_show_on-primary--hover: url('#{$icons-path}system/dark/show.svg#on-primary--hover'); - --icon__system_show_on-primary--active: url('#{$icons-path}system/dark/show.svg#on-primary--active'); - --icon__system_show_on-primary--disabled: url('#{$icons-path}system/dark/show.svg#on-primary--disabled'); - --icon__system_show_on-disabled--enabled: url('#{$icons-path}system/dark/show.svg#on-disabled--enabled'); - --icon__system_show_on-message--enabled: url('#{$icons-path}system/dark/show.svg#on-message--enabled'); - --icon__system_show_on-elevation--enabled: url('#{$icons-path}system/dark/show.svg#on-elevation--enabled'); - --icon__system_show_primary--enabled: url('#{$icons-path}system/dark/show.svg#primary--enabled'); - --icon__system_show_primary--hover: url('#{$icons-path}system/dark/show.svg#primary--hover'); - --icon__system_show_primary--active: url('#{$icons-path}system/dark/show.svg#primary--active'); - --icon__system_show_primary--disabled: url('#{$icons-path}system/dark/show.svg#primary--disabled'); - --icon__system_show_error--enabled: url('#{$icons-path}system/dark/show.svg#error--enabled'); - --icon__system_show_error-actionable--enabled: url('#{$icons-path}system/dark/show.svg#error-actionable--enabled'); - --icon__system_show_error-actionable--hover: url('#{$icons-path}system/dark/show.svg#error-actionable--hover'); - --icon__system_show_error-actionable--active: url('#{$icons-path}system/dark/show.svg#error-actionable--active'); - --icon__system_show_error-actionable--disabled: url('#{$icons-path}system/dark/show.svg#error-actionable--disabled'); - --icon__system_show_warning--enabled: url('#{$icons-path}system/dark/show.svg#warning--enabled'); - --icon__system_show_success--enabled: url('#{$icons-path}system/dark/show.svg#success--enabled'); - --icon__system_show_neutral--enabled: url('#{$icons-path}system/dark/show.svg#neutral--enabled'); - --icon__system_show_neutral--hover: url('#{$icons-path}system/dark/show.svg#neutral--hover'); - --icon__system_show_neutral--active: url('#{$icons-path}system/dark/show.svg#neutral--active'); - --icon__system_show_neutral--disabled: url('#{$icons-path}system/dark/show.svg#neutral--disabled'); - --icon__system_show_highlighted--enabled: url('#{$icons-path}system/dark/show.svg#highlighted--enabled'); - --icon__system_show_bright--enabled: url('#{$icons-path}system/dark/show.svg#bright--enabled'); - --icon__system_share_on-surface--enabled: url('#{$icons-path}system/dark/share.svg#on-surface--enabled'); - --icon__system_share_on-surface--hover: url('#{$icons-path}system/dark/share.svg#on-surface--hover'); - --icon__system_share_on-surface--active: url('#{$icons-path}system/dark/share.svg#on-surface--active'); - --icon__system_share_on-surface--disabled: url('#{$icons-path}system/dark/share.svg#on-surface--disabled'); - --icon__system_share_on-primary--enabled: url('#{$icons-path}system/dark/share.svg#on-primary--enabled'); - --icon__system_share_on-primary--hover: url('#{$icons-path}system/dark/share.svg#on-primary--hover'); - --icon__system_share_on-primary--active: url('#{$icons-path}system/dark/share.svg#on-primary--active'); - --icon__system_share_on-primary--disabled: url('#{$icons-path}system/dark/share.svg#on-primary--disabled'); - --icon__system_share_on-disabled--enabled: url('#{$icons-path}system/dark/share.svg#on-disabled--enabled'); - --icon__system_share_on-message--enabled: url('#{$icons-path}system/dark/share.svg#on-message--enabled'); - --icon__system_share_on-elevation--enabled: url('#{$icons-path}system/dark/share.svg#on-elevation--enabled'); - --icon__system_share_primary--enabled: url('#{$icons-path}system/dark/share.svg#primary--enabled'); - --icon__system_share_primary--hover: url('#{$icons-path}system/dark/share.svg#primary--hover'); - --icon__system_share_primary--active: url('#{$icons-path}system/dark/share.svg#primary--active'); - --icon__system_share_primary--disabled: url('#{$icons-path}system/dark/share.svg#primary--disabled'); - --icon__system_share_error--enabled: url('#{$icons-path}system/dark/share.svg#error--enabled'); - --icon__system_share_error-actionable--enabled: url('#{$icons-path}system/dark/share.svg#error-actionable--enabled'); - --icon__system_share_error-actionable--hover: url('#{$icons-path}system/dark/share.svg#error-actionable--hover'); - --icon__system_share_error-actionable--active: url('#{$icons-path}system/dark/share.svg#error-actionable--active'); - --icon__system_share_error-actionable--disabled: url('#{$icons-path}system/dark/share.svg#error-actionable--disabled'); - --icon__system_share_warning--enabled: url('#{$icons-path}system/dark/share.svg#warning--enabled'); - --icon__system_share_success--enabled: url('#{$icons-path}system/dark/share.svg#success--enabled'); - --icon__system_share_neutral--enabled: url('#{$icons-path}system/dark/share.svg#neutral--enabled'); - --icon__system_share_neutral--hover: url('#{$icons-path}system/dark/share.svg#neutral--hover'); - --icon__system_share_neutral--active: url('#{$icons-path}system/dark/share.svg#neutral--active'); - --icon__system_share_neutral--disabled: url('#{$icons-path}system/dark/share.svg#neutral--disabled'); - --icon__system_share_highlighted--enabled: url('#{$icons-path}system/dark/share.svg#highlighted--enabled'); - --icon__system_share_bright--enabled: url('#{$icons-path}system/dark/share.svg#bright--enabled'); - --icon__system_settings_on-surface--enabled: url('#{$icons-path}system/dark/settings.svg#on-surface--enabled'); - --icon__system_settings_on-surface--hover: url('#{$icons-path}system/dark/settings.svg#on-surface--hover'); - --icon__system_settings_on-surface--active: url('#{$icons-path}system/dark/settings.svg#on-surface--active'); - --icon__system_settings_on-surface--disabled: url('#{$icons-path}system/dark/settings.svg#on-surface--disabled'); - --icon__system_settings_on-primary--enabled: url('#{$icons-path}system/dark/settings.svg#on-primary--enabled'); - --icon__system_settings_on-primary--hover: url('#{$icons-path}system/dark/settings.svg#on-primary--hover'); - --icon__system_settings_on-primary--active: url('#{$icons-path}system/dark/settings.svg#on-primary--active'); - --icon__system_settings_on-primary--disabled: url('#{$icons-path}system/dark/settings.svg#on-primary--disabled'); - --icon__system_settings_on-disabled--enabled: url('#{$icons-path}system/dark/settings.svg#on-disabled--enabled'); - --icon__system_settings_on-message--enabled: url('#{$icons-path}system/dark/settings.svg#on-message--enabled'); - --icon__system_settings_on-elevation--enabled: url('#{$icons-path}system/dark/settings.svg#on-elevation--enabled'); - --icon__system_settings_primary--enabled: url('#{$icons-path}system/dark/settings.svg#primary--enabled'); - --icon__system_settings_primary--hover: url('#{$icons-path}system/dark/settings.svg#primary--hover'); - --icon__system_settings_primary--active: url('#{$icons-path}system/dark/settings.svg#primary--active'); - --icon__system_settings_primary--disabled: url('#{$icons-path}system/dark/settings.svg#primary--disabled'); - --icon__system_settings_error--enabled: url('#{$icons-path}system/dark/settings.svg#error--enabled'); - --icon__system_settings_error-actionable--enabled: url('#{$icons-path}system/dark/settings.svg#error-actionable--enabled'); - --icon__system_settings_error-actionable--hover: url('#{$icons-path}system/dark/settings.svg#error-actionable--hover'); - --icon__system_settings_error-actionable--active: url('#{$icons-path}system/dark/settings.svg#error-actionable--active'); - --icon__system_settings_error-actionable--disabled: url('#{$icons-path}system/dark/settings.svg#error-actionable--disabled'); - --icon__system_settings_warning--enabled: url('#{$icons-path}system/dark/settings.svg#warning--enabled'); - --icon__system_settings_success--enabled: url('#{$icons-path}system/dark/settings.svg#success--enabled'); - --icon__system_settings_neutral--enabled: url('#{$icons-path}system/dark/settings.svg#neutral--enabled'); - --icon__system_settings_neutral--hover: url('#{$icons-path}system/dark/settings.svg#neutral--hover'); - --icon__system_settings_neutral--active: url('#{$icons-path}system/dark/settings.svg#neutral--active'); - --icon__system_settings_neutral--disabled: url('#{$icons-path}system/dark/settings.svg#neutral--disabled'); - --icon__system_settings_highlighted--enabled: url('#{$icons-path}system/dark/settings.svg#highlighted--enabled'); - --icon__system_settings_bright--enabled: url('#{$icons-path}system/dark/settings.svg#bright--enabled'); - --icon__system_send_on-surface--enabled: url('#{$icons-path}system/dark/send.svg#on-surface--enabled'); - --icon__system_send_on-surface--hover: url('#{$icons-path}system/dark/send.svg#on-surface--hover'); - --icon__system_send_on-surface--active: url('#{$icons-path}system/dark/send.svg#on-surface--active'); - --icon__system_send_on-surface--disabled: url('#{$icons-path}system/dark/send.svg#on-surface--disabled'); - --icon__system_send_on-primary--enabled: url('#{$icons-path}system/dark/send.svg#on-primary--enabled'); - --icon__system_send_on-primary--hover: url('#{$icons-path}system/dark/send.svg#on-primary--hover'); - --icon__system_send_on-primary--active: url('#{$icons-path}system/dark/send.svg#on-primary--active'); - --icon__system_send_on-primary--disabled: url('#{$icons-path}system/dark/send.svg#on-primary--disabled'); - --icon__system_send_on-disabled--enabled: url('#{$icons-path}system/dark/send.svg#on-disabled--enabled'); - --icon__system_send_on-message--enabled: url('#{$icons-path}system/dark/send.svg#on-message--enabled'); - --icon__system_send_on-elevation--enabled: url('#{$icons-path}system/dark/send.svg#on-elevation--enabled'); - --icon__system_send_primary--enabled: url('#{$icons-path}system/dark/send.svg#primary--enabled'); - --icon__system_send_primary--hover: url('#{$icons-path}system/dark/send.svg#primary--hover'); - --icon__system_send_primary--active: url('#{$icons-path}system/dark/send.svg#primary--active'); - --icon__system_send_primary--disabled: url('#{$icons-path}system/dark/send.svg#primary--disabled'); - --icon__system_send_error--enabled: url('#{$icons-path}system/dark/send.svg#error--enabled'); - --icon__system_send_error-actionable--enabled: url('#{$icons-path}system/dark/send.svg#error-actionable--enabled'); - --icon__system_send_error-actionable--hover: url('#{$icons-path}system/dark/send.svg#error-actionable--hover'); - --icon__system_send_error-actionable--active: url('#{$icons-path}system/dark/send.svg#error-actionable--active'); - --icon__system_send_error-actionable--disabled: url('#{$icons-path}system/dark/send.svg#error-actionable--disabled'); - --icon__system_send_warning--enabled: url('#{$icons-path}system/dark/send.svg#warning--enabled'); - --icon__system_send_success--enabled: url('#{$icons-path}system/dark/send.svg#success--enabled'); - --icon__system_send_neutral--enabled: url('#{$icons-path}system/dark/send.svg#neutral--enabled'); - --icon__system_send_neutral--hover: url('#{$icons-path}system/dark/send.svg#neutral--hover'); - --icon__system_send_neutral--active: url('#{$icons-path}system/dark/send.svg#neutral--active'); - --icon__system_send_neutral--disabled: url('#{$icons-path}system/dark/send.svg#neutral--disabled'); - --icon__system_send_highlighted--enabled: url('#{$icons-path}system/dark/send.svg#highlighted--enabled'); - --icon__system_send_bright--enabled: url('#{$icons-path}system/dark/send.svg#bright--enabled'); - --icon__system_search_on-surface--enabled: url('#{$icons-path}system/dark/search.svg#on-surface--enabled'); - --icon__system_search_on-surface--hover: url('#{$icons-path}system/dark/search.svg#on-surface--hover'); - --icon__system_search_on-surface--active: url('#{$icons-path}system/dark/search.svg#on-surface--active'); - --icon__system_search_on-surface--disabled: url('#{$icons-path}system/dark/search.svg#on-surface--disabled'); - --icon__system_search_on-primary--enabled: url('#{$icons-path}system/dark/search.svg#on-primary--enabled'); - --icon__system_search_on-primary--hover: url('#{$icons-path}system/dark/search.svg#on-primary--hover'); - --icon__system_search_on-primary--active: url('#{$icons-path}system/dark/search.svg#on-primary--active'); - --icon__system_search_on-primary--disabled: url('#{$icons-path}system/dark/search.svg#on-primary--disabled'); - --icon__system_search_on-disabled--enabled: url('#{$icons-path}system/dark/search.svg#on-disabled--enabled'); - --icon__system_search_on-message--enabled: url('#{$icons-path}system/dark/search.svg#on-message--enabled'); - --icon__system_search_on-elevation--enabled: url('#{$icons-path}system/dark/search.svg#on-elevation--enabled'); - --icon__system_search_primary--enabled: url('#{$icons-path}system/dark/search.svg#primary--enabled'); - --icon__system_search_primary--hover: url('#{$icons-path}system/dark/search.svg#primary--hover'); - --icon__system_search_primary--active: url('#{$icons-path}system/dark/search.svg#primary--active'); - --icon__system_search_primary--disabled: url('#{$icons-path}system/dark/search.svg#primary--disabled'); - --icon__system_search_error--enabled: url('#{$icons-path}system/dark/search.svg#error--enabled'); - --icon__system_search_error-actionable--enabled: url('#{$icons-path}system/dark/search.svg#error-actionable--enabled'); - --icon__system_search_error-actionable--hover: url('#{$icons-path}system/dark/search.svg#error-actionable--hover'); - --icon__system_search_error-actionable--active: url('#{$icons-path}system/dark/search.svg#error-actionable--active'); - --icon__system_search_error-actionable--disabled: url('#{$icons-path}system/dark/search.svg#error-actionable--disabled'); - --icon__system_search_warning--enabled: url('#{$icons-path}system/dark/search.svg#warning--enabled'); - --icon__system_search_success--enabled: url('#{$icons-path}system/dark/search.svg#success--enabled'); - --icon__system_search_neutral--enabled: url('#{$icons-path}system/dark/search.svg#neutral--enabled'); - --icon__system_search_neutral--hover: url('#{$icons-path}system/dark/search.svg#neutral--hover'); - --icon__system_search_neutral--active: url('#{$icons-path}system/dark/search.svg#neutral--active'); - --icon__system_search_neutral--disabled: url('#{$icons-path}system/dark/search.svg#neutral--disabled'); - --icon__system_search_highlighted--enabled: url('#{$icons-path}system/dark/search.svg#highlighted--enabled'); - --icon__system_search_bright--enabled: url('#{$icons-path}system/dark/search.svg#bright--enabled'); - --icon__system_save_on-surface--enabled: url('#{$icons-path}system/dark/save.svg#on-surface--enabled'); - --icon__system_save_on-surface--hover: url('#{$icons-path}system/dark/save.svg#on-surface--hover'); - --icon__system_save_on-surface--active: url('#{$icons-path}system/dark/save.svg#on-surface--active'); - --icon__system_save_on-surface--disabled: url('#{$icons-path}system/dark/save.svg#on-surface--disabled'); - --icon__system_save_on-primary--enabled: url('#{$icons-path}system/dark/save.svg#on-primary--enabled'); - --icon__system_save_on-primary--hover: url('#{$icons-path}system/dark/save.svg#on-primary--hover'); - --icon__system_save_on-primary--active: url('#{$icons-path}system/dark/save.svg#on-primary--active'); - --icon__system_save_on-primary--disabled: url('#{$icons-path}system/dark/save.svg#on-primary--disabled'); - --icon__system_save_on-disabled--enabled: url('#{$icons-path}system/dark/save.svg#on-disabled--enabled'); - --icon__system_save_on-message--enabled: url('#{$icons-path}system/dark/save.svg#on-message--enabled'); - --icon__system_save_on-elevation--enabled: url('#{$icons-path}system/dark/save.svg#on-elevation--enabled'); - --icon__system_save_primary--enabled: url('#{$icons-path}system/dark/save.svg#primary--enabled'); - --icon__system_save_primary--hover: url('#{$icons-path}system/dark/save.svg#primary--hover'); - --icon__system_save_primary--active: url('#{$icons-path}system/dark/save.svg#primary--active'); - --icon__system_save_primary--disabled: url('#{$icons-path}system/dark/save.svg#primary--disabled'); - --icon__system_save_error--enabled: url('#{$icons-path}system/dark/save.svg#error--enabled'); - --icon__system_save_error-actionable--enabled: url('#{$icons-path}system/dark/save.svg#error-actionable--enabled'); - --icon__system_save_error-actionable--hover: url('#{$icons-path}system/dark/save.svg#error-actionable--hover'); - --icon__system_save_error-actionable--active: url('#{$icons-path}system/dark/save.svg#error-actionable--active'); - --icon__system_save_error-actionable--disabled: url('#{$icons-path}system/dark/save.svg#error-actionable--disabled'); - --icon__system_save_warning--enabled: url('#{$icons-path}system/dark/save.svg#warning--enabled'); - --icon__system_save_success--enabled: url('#{$icons-path}system/dark/save.svg#success--enabled'); - --icon__system_save_neutral--enabled: url('#{$icons-path}system/dark/save.svg#neutral--enabled'); - --icon__system_save_neutral--hover: url('#{$icons-path}system/dark/save.svg#neutral--hover'); - --icon__system_save_neutral--active: url('#{$icons-path}system/dark/save.svg#neutral--active'); - --icon__system_save_neutral--disabled: url('#{$icons-path}system/dark/save.svg#neutral--disabled'); - --icon__system_save_highlighted--enabled: url('#{$icons-path}system/dark/save.svg#highlighted--enabled'); - --icon__system_save_bright--enabled: url('#{$icons-path}system/dark/save.svg#bright--enabled'); - --icon__system_run_on-surface--enabled: url('#{$icons-path}system/dark/run.svg#on-surface--enabled'); - --icon__system_run_on-surface--hover: url('#{$icons-path}system/dark/run.svg#on-surface--hover'); - --icon__system_run_on-surface--active: url('#{$icons-path}system/dark/run.svg#on-surface--active'); - --icon__system_run_on-surface--disabled: url('#{$icons-path}system/dark/run.svg#on-surface--disabled'); - --icon__system_run_on-primary--enabled: url('#{$icons-path}system/dark/run.svg#on-primary--enabled'); - --icon__system_run_on-primary--hover: url('#{$icons-path}system/dark/run.svg#on-primary--hover'); - --icon__system_run_on-primary--active: url('#{$icons-path}system/dark/run.svg#on-primary--active'); - --icon__system_run_on-primary--disabled: url('#{$icons-path}system/dark/run.svg#on-primary--disabled'); - --icon__system_run_on-disabled--enabled: url('#{$icons-path}system/dark/run.svg#on-disabled--enabled'); - --icon__system_run_on-message--enabled: url('#{$icons-path}system/dark/run.svg#on-message--enabled'); - --icon__system_run_on-elevation--enabled: url('#{$icons-path}system/dark/run.svg#on-elevation--enabled'); - --icon__system_run_primary--enabled: url('#{$icons-path}system/dark/run.svg#primary--enabled'); - --icon__system_run_primary--hover: url('#{$icons-path}system/dark/run.svg#primary--hover'); - --icon__system_run_primary--active: url('#{$icons-path}system/dark/run.svg#primary--active'); - --icon__system_run_primary--disabled: url('#{$icons-path}system/dark/run.svg#primary--disabled'); - --icon__system_run_error--enabled: url('#{$icons-path}system/dark/run.svg#error--enabled'); - --icon__system_run_error-actionable--enabled: url('#{$icons-path}system/dark/run.svg#error-actionable--enabled'); - --icon__system_run_error-actionable--hover: url('#{$icons-path}system/dark/run.svg#error-actionable--hover'); - --icon__system_run_error-actionable--active: url('#{$icons-path}system/dark/run.svg#error-actionable--active'); - --icon__system_run_error-actionable--disabled: url('#{$icons-path}system/dark/run.svg#error-actionable--disabled'); - --icon__system_run_warning--enabled: url('#{$icons-path}system/dark/run.svg#warning--enabled'); - --icon__system_run_success--enabled: url('#{$icons-path}system/dark/run.svg#success--enabled'); - --icon__system_run_neutral--enabled: url('#{$icons-path}system/dark/run.svg#neutral--enabled'); - --icon__system_run_neutral--hover: url('#{$icons-path}system/dark/run.svg#neutral--hover'); - --icon__system_run_neutral--active: url('#{$icons-path}system/dark/run.svg#neutral--active'); - --icon__system_run_neutral--disabled: url('#{$icons-path}system/dark/run.svg#neutral--disabled'); - --icon__system_run_highlighted--enabled: url('#{$icons-path}system/dark/run.svg#highlighted--enabled'); - --icon__system_run_bright--enabled: url('#{$icons-path}system/dark/run.svg#bright--enabled'); - --icon__system_right-panel-open_on-surface--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#on-surface--enabled'); - --icon__system_right-panel-open_on-surface--hover: url('#{$icons-path}system/dark/right-panel-open.svg#on-surface--hover'); - --icon__system_right-panel-open_on-surface--active: url('#{$icons-path}system/dark/right-panel-open.svg#on-surface--active'); - --icon__system_right-panel-open_on-surface--disabled: url('#{$icons-path}system/dark/right-panel-open.svg#on-surface--disabled'); - --icon__system_right-panel-open_on-primary--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#on-primary--enabled'); - --icon__system_right-panel-open_on-primary--hover: url('#{$icons-path}system/dark/right-panel-open.svg#on-primary--hover'); - --icon__system_right-panel-open_on-primary--active: url('#{$icons-path}system/dark/right-panel-open.svg#on-primary--active'); - --icon__system_right-panel-open_on-primary--disabled: url('#{$icons-path}system/dark/right-panel-open.svg#on-primary--disabled'); - --icon__system_right-panel-open_on-disabled--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#on-disabled--enabled'); - --icon__system_right-panel-open_on-message--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#on-message--enabled'); - --icon__system_right-panel-open_on-elevation--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#on-elevation--enabled'); - --icon__system_right-panel-open_primary--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#primary--enabled'); - --icon__system_right-panel-open_primary--hover: url('#{$icons-path}system/dark/right-panel-open.svg#primary--hover'); - --icon__system_right-panel-open_primary--active: url('#{$icons-path}system/dark/right-panel-open.svg#primary--active'); - --icon__system_right-panel-open_primary--disabled: url('#{$icons-path}system/dark/right-panel-open.svg#primary--disabled'); - --icon__system_right-panel-open_error--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#error--enabled'); - --icon__system_right-panel-open_error-actionable--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#error-actionable--enabled'); - --icon__system_right-panel-open_error-actionable--hover: url('#{$icons-path}system/dark/right-panel-open.svg#error-actionable--hover'); - --icon__system_right-panel-open_error-actionable--active: url('#{$icons-path}system/dark/right-panel-open.svg#error-actionable--active'); - --icon__system_right-panel-open_error-actionable--disabled: url('#{$icons-path}system/dark/right-panel-open.svg#error-actionable--disabled'); - --icon__system_right-panel-open_warning--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#warning--enabled'); - --icon__system_right-panel-open_success--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#success--enabled'); - --icon__system_right-panel-open_neutral--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#neutral--enabled'); - --icon__system_right-panel-open_neutral--hover: url('#{$icons-path}system/dark/right-panel-open.svg#neutral--hover'); - --icon__system_right-panel-open_neutral--active: url('#{$icons-path}system/dark/right-panel-open.svg#neutral--active'); - --icon__system_right-panel-open_neutral--disabled: url('#{$icons-path}system/dark/right-panel-open.svg#neutral--disabled'); - --icon__system_right-panel-open_highlighted--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#highlighted--enabled'); - --icon__system_right-panel-open_bright--enabled: url('#{$icons-path}system/dark/right-panel-open.svg#bright--enabled'); - --icon__system_retry_on-surface--enabled: url('#{$icons-path}system/dark/retry.svg#on-surface--enabled'); - --icon__system_retry_on-surface--hover: url('#{$icons-path}system/dark/retry.svg#on-surface--hover'); - --icon__system_retry_on-surface--active: url('#{$icons-path}system/dark/retry.svg#on-surface--active'); - --icon__system_retry_on-surface--disabled: url('#{$icons-path}system/dark/retry.svg#on-surface--disabled'); - --icon__system_retry_on-primary--enabled: url('#{$icons-path}system/dark/retry.svg#on-primary--enabled'); - --icon__system_retry_on-primary--hover: url('#{$icons-path}system/dark/retry.svg#on-primary--hover'); - --icon__system_retry_on-primary--active: url('#{$icons-path}system/dark/retry.svg#on-primary--active'); - --icon__system_retry_on-primary--disabled: url('#{$icons-path}system/dark/retry.svg#on-primary--disabled'); - --icon__system_retry_on-disabled--enabled: url('#{$icons-path}system/dark/retry.svg#on-disabled--enabled'); - --icon__system_retry_on-message--enabled: url('#{$icons-path}system/dark/retry.svg#on-message--enabled'); - --icon__system_retry_on-elevation--enabled: url('#{$icons-path}system/dark/retry.svg#on-elevation--enabled'); - --icon__system_retry_primary--enabled: url('#{$icons-path}system/dark/retry.svg#primary--enabled'); - --icon__system_retry_primary--hover: url('#{$icons-path}system/dark/retry.svg#primary--hover'); - --icon__system_retry_primary--active: url('#{$icons-path}system/dark/retry.svg#primary--active'); - --icon__system_retry_primary--disabled: url('#{$icons-path}system/dark/retry.svg#primary--disabled'); - --icon__system_retry_error--enabled: url('#{$icons-path}system/dark/retry.svg#error--enabled'); - --icon__system_retry_error-actionable--enabled: url('#{$icons-path}system/dark/retry.svg#error-actionable--enabled'); - --icon__system_retry_error-actionable--hover: url('#{$icons-path}system/dark/retry.svg#error-actionable--hover'); - --icon__system_retry_error-actionable--active: url('#{$icons-path}system/dark/retry.svg#error-actionable--active'); - --icon__system_retry_error-actionable--disabled: url('#{$icons-path}system/dark/retry.svg#error-actionable--disabled'); - --icon__system_retry_warning--enabled: url('#{$icons-path}system/dark/retry.svg#warning--enabled'); - --icon__system_retry_success--enabled: url('#{$icons-path}system/dark/retry.svg#success--enabled'); - --icon__system_retry_neutral--enabled: url('#{$icons-path}system/dark/retry.svg#neutral--enabled'); - --icon__system_retry_neutral--hover: url('#{$icons-path}system/dark/retry.svg#neutral--hover'); - --icon__system_retry_neutral--active: url('#{$icons-path}system/dark/retry.svg#neutral--active'); - --icon__system_retry_neutral--disabled: url('#{$icons-path}system/dark/retry.svg#neutral--disabled'); - --icon__system_retry_highlighted--enabled: url('#{$icons-path}system/dark/retry.svg#highlighted--enabled'); - --icon__system_retry_bright--enabled: url('#{$icons-path}system/dark/retry.svg#bright--enabled'); - --icon__system_refresh_on-surface--enabled: url('#{$icons-path}system/dark/refresh.svg#on-surface--enabled'); - --icon__system_refresh_on-surface--hover: url('#{$icons-path}system/dark/refresh.svg#on-surface--hover'); - --icon__system_refresh_on-surface--active: url('#{$icons-path}system/dark/refresh.svg#on-surface--active'); - --icon__system_refresh_on-surface--disabled: url('#{$icons-path}system/dark/refresh.svg#on-surface--disabled'); - --icon__system_refresh_on-primary--enabled: url('#{$icons-path}system/dark/refresh.svg#on-primary--enabled'); - --icon__system_refresh_on-primary--hover: url('#{$icons-path}system/dark/refresh.svg#on-primary--hover'); - --icon__system_refresh_on-primary--active: url('#{$icons-path}system/dark/refresh.svg#on-primary--active'); - --icon__system_refresh_on-primary--disabled: url('#{$icons-path}system/dark/refresh.svg#on-primary--disabled'); - --icon__system_refresh_on-disabled--enabled: url('#{$icons-path}system/dark/refresh.svg#on-disabled--enabled'); - --icon__system_refresh_on-message--enabled: url('#{$icons-path}system/dark/refresh.svg#on-message--enabled'); - --icon__system_refresh_on-elevation--enabled: url('#{$icons-path}system/dark/refresh.svg#on-elevation--enabled'); - --icon__system_refresh_primary--enabled: url('#{$icons-path}system/dark/refresh.svg#primary--enabled'); - --icon__system_refresh_primary--hover: url('#{$icons-path}system/dark/refresh.svg#primary--hover'); - --icon__system_refresh_primary--active: url('#{$icons-path}system/dark/refresh.svg#primary--active'); - --icon__system_refresh_primary--disabled: url('#{$icons-path}system/dark/refresh.svg#primary--disabled'); - --icon__system_refresh_error--enabled: url('#{$icons-path}system/dark/refresh.svg#error--enabled'); - --icon__system_refresh_error-actionable--enabled: url('#{$icons-path}system/dark/refresh.svg#error-actionable--enabled'); - --icon__system_refresh_error-actionable--hover: url('#{$icons-path}system/dark/refresh.svg#error-actionable--hover'); - --icon__system_refresh_error-actionable--active: url('#{$icons-path}system/dark/refresh.svg#error-actionable--active'); - --icon__system_refresh_error-actionable--disabled: url('#{$icons-path}system/dark/refresh.svg#error-actionable--disabled'); - --icon__system_refresh_warning--enabled: url('#{$icons-path}system/dark/refresh.svg#warning--enabled'); - --icon__system_refresh_success--enabled: url('#{$icons-path}system/dark/refresh.svg#success--enabled'); - --icon__system_refresh_neutral--enabled: url('#{$icons-path}system/dark/refresh.svg#neutral--enabled'); - --icon__system_refresh_neutral--hover: url('#{$icons-path}system/dark/refresh.svg#neutral--hover'); - --icon__system_refresh_neutral--active: url('#{$icons-path}system/dark/refresh.svg#neutral--active'); - --icon__system_refresh_neutral--disabled: url('#{$icons-path}system/dark/refresh.svg#neutral--disabled'); - --icon__system_refresh_highlighted--enabled: url('#{$icons-path}system/dark/refresh.svg#highlighted--enabled'); - --icon__system_refresh_bright--enabled: url('#{$icons-path}system/dark/refresh.svg#bright--enabled'); - --icon__system_query_on-surface--enabled: url('#{$icons-path}system/dark/query.svg#on-surface--enabled'); - --icon__system_query_on-surface--hover: url('#{$icons-path}system/dark/query.svg#on-surface--hover'); - --icon__system_query_on-surface--active: url('#{$icons-path}system/dark/query.svg#on-surface--active'); - --icon__system_query_on-surface--disabled: url('#{$icons-path}system/dark/query.svg#on-surface--disabled'); - --icon__system_query_on-primary--enabled: url('#{$icons-path}system/dark/query.svg#on-primary--enabled'); - --icon__system_query_on-primary--hover: url('#{$icons-path}system/dark/query.svg#on-primary--hover'); - --icon__system_query_on-primary--active: url('#{$icons-path}system/dark/query.svg#on-primary--active'); - --icon__system_query_on-primary--disabled: url('#{$icons-path}system/dark/query.svg#on-primary--disabled'); - --icon__system_query_on-disabled--enabled: url('#{$icons-path}system/dark/query.svg#on-disabled--enabled'); - --icon__system_query_on-message--enabled: url('#{$icons-path}system/dark/query.svg#on-message--enabled'); - --icon__system_query_on-elevation--enabled: url('#{$icons-path}system/dark/query.svg#on-elevation--enabled'); - --icon__system_query_primary--enabled: url('#{$icons-path}system/dark/query.svg#primary--enabled'); - --icon__system_query_primary--hover: url('#{$icons-path}system/dark/query.svg#primary--hover'); - --icon__system_query_primary--active: url('#{$icons-path}system/dark/query.svg#primary--active'); - --icon__system_query_primary--disabled: url('#{$icons-path}system/dark/query.svg#primary--disabled'); - --icon__system_query_error--enabled: url('#{$icons-path}system/dark/query.svg#error--enabled'); - --icon__system_query_error-actionable--enabled: url('#{$icons-path}system/dark/query.svg#error-actionable--enabled'); - --icon__system_query_error-actionable--hover: url('#{$icons-path}system/dark/query.svg#error-actionable--hover'); - --icon__system_query_error-actionable--active: url('#{$icons-path}system/dark/query.svg#error-actionable--active'); - --icon__system_query_error-actionable--disabled: url('#{$icons-path}system/dark/query.svg#error-actionable--disabled'); - --icon__system_query_warning--enabled: url('#{$icons-path}system/dark/query.svg#warning--enabled'); - --icon__system_query_success--enabled: url('#{$icons-path}system/dark/query.svg#success--enabled'); - --icon__system_query_neutral--enabled: url('#{$icons-path}system/dark/query.svg#neutral--enabled'); - --icon__system_query_neutral--hover: url('#{$icons-path}system/dark/query.svg#neutral--hover'); - --icon__system_query_neutral--active: url('#{$icons-path}system/dark/query.svg#neutral--active'); - --icon__system_query_neutral--disabled: url('#{$icons-path}system/dark/query.svg#neutral--disabled'); - --icon__system_query_highlighted--enabled: url('#{$icons-path}system/dark/query.svg#highlighted--enabled'); - --icon__system_query_bright--enabled: url('#{$icons-path}system/dark/query.svg#bright--enabled'); - --icon__system_qr-code_on-surface--enabled: url('#{$icons-path}system/dark/qr-code.svg#on-surface--enabled'); - --icon__system_qr-code_on-surface--hover: url('#{$icons-path}system/dark/qr-code.svg#on-surface--hover'); - --icon__system_qr-code_on-surface--active: url('#{$icons-path}system/dark/qr-code.svg#on-surface--active'); - --icon__system_qr-code_on-surface--disabled: url('#{$icons-path}system/dark/qr-code.svg#on-surface--disabled'); - --icon__system_qr-code_on-primary--enabled: url('#{$icons-path}system/dark/qr-code.svg#on-primary--enabled'); - --icon__system_qr-code_on-primary--hover: url('#{$icons-path}system/dark/qr-code.svg#on-primary--hover'); - --icon__system_qr-code_on-primary--active: url('#{$icons-path}system/dark/qr-code.svg#on-primary--active'); - --icon__system_qr-code_on-primary--disabled: url('#{$icons-path}system/dark/qr-code.svg#on-primary--disabled'); - --icon__system_qr-code_on-disabled--enabled: url('#{$icons-path}system/dark/qr-code.svg#on-disabled--enabled'); - --icon__system_qr-code_on-message--enabled: url('#{$icons-path}system/dark/qr-code.svg#on-message--enabled'); - --icon__system_qr-code_on-elevation--enabled: url('#{$icons-path}system/dark/qr-code.svg#on-elevation--enabled'); - --icon__system_qr-code_primary--enabled: url('#{$icons-path}system/dark/qr-code.svg#primary--enabled'); - --icon__system_qr-code_primary--hover: url('#{$icons-path}system/dark/qr-code.svg#primary--hover'); - --icon__system_qr-code_primary--active: url('#{$icons-path}system/dark/qr-code.svg#primary--active'); - --icon__system_qr-code_primary--disabled: url('#{$icons-path}system/dark/qr-code.svg#primary--disabled'); - --icon__system_qr-code_error--enabled: url('#{$icons-path}system/dark/qr-code.svg#error--enabled'); - --icon__system_qr-code_error-actionable--enabled: url('#{$icons-path}system/dark/qr-code.svg#error-actionable--enabled'); - --icon__system_qr-code_error-actionable--hover: url('#{$icons-path}system/dark/qr-code.svg#error-actionable--hover'); - --icon__system_qr-code_error-actionable--active: url('#{$icons-path}system/dark/qr-code.svg#error-actionable--active'); - --icon__system_qr-code_error-actionable--disabled: url('#{$icons-path}system/dark/qr-code.svg#error-actionable--disabled'); - --icon__system_qr-code_warning--enabled: url('#{$icons-path}system/dark/qr-code.svg#warning--enabled'); - --icon__system_qr-code_success--enabled: url('#{$icons-path}system/dark/qr-code.svg#success--enabled'); - --icon__system_qr-code_neutral--enabled: url('#{$icons-path}system/dark/qr-code.svg#neutral--enabled'); - --icon__system_qr-code_neutral--hover: url('#{$icons-path}system/dark/qr-code.svg#neutral--hover'); - --icon__system_qr-code_neutral--active: url('#{$icons-path}system/dark/qr-code.svg#neutral--active'); - --icon__system_qr-code_neutral--disabled: url('#{$icons-path}system/dark/qr-code.svg#neutral--disabled'); - --icon__system_qr-code_highlighted--enabled: url('#{$icons-path}system/dark/qr-code.svg#highlighted--enabled'); - --icon__system_qr-code_bright--enabled: url('#{$icons-path}system/dark/qr-code.svg#bright--enabled'); - --icon__system_publish_on-surface--enabled: url('#{$icons-path}system/dark/publish.svg#on-surface--enabled'); - --icon__system_publish_on-surface--hover: url('#{$icons-path}system/dark/publish.svg#on-surface--hover'); - --icon__system_publish_on-surface--active: url('#{$icons-path}system/dark/publish.svg#on-surface--active'); - --icon__system_publish_on-surface--disabled: url('#{$icons-path}system/dark/publish.svg#on-surface--disabled'); - --icon__system_publish_on-primary--enabled: url('#{$icons-path}system/dark/publish.svg#on-primary--enabled'); - --icon__system_publish_on-primary--hover: url('#{$icons-path}system/dark/publish.svg#on-primary--hover'); - --icon__system_publish_on-primary--active: url('#{$icons-path}system/dark/publish.svg#on-primary--active'); - --icon__system_publish_on-primary--disabled: url('#{$icons-path}system/dark/publish.svg#on-primary--disabled'); - --icon__system_publish_on-disabled--enabled: url('#{$icons-path}system/dark/publish.svg#on-disabled--enabled'); - --icon__system_publish_on-message--enabled: url('#{$icons-path}system/dark/publish.svg#on-message--enabled'); - --icon__system_publish_on-elevation--enabled: url('#{$icons-path}system/dark/publish.svg#on-elevation--enabled'); - --icon__system_publish_primary--enabled: url('#{$icons-path}system/dark/publish.svg#primary--enabled'); - --icon__system_publish_primary--hover: url('#{$icons-path}system/dark/publish.svg#primary--hover'); - --icon__system_publish_primary--active: url('#{$icons-path}system/dark/publish.svg#primary--active'); - --icon__system_publish_primary--disabled: url('#{$icons-path}system/dark/publish.svg#primary--disabled'); - --icon__system_publish_error--enabled: url('#{$icons-path}system/dark/publish.svg#error--enabled'); - --icon__system_publish_error-actionable--enabled: url('#{$icons-path}system/dark/publish.svg#error-actionable--enabled'); - --icon__system_publish_error-actionable--hover: url('#{$icons-path}system/dark/publish.svg#error-actionable--hover'); - --icon__system_publish_error-actionable--active: url('#{$icons-path}system/dark/publish.svg#error-actionable--active'); - --icon__system_publish_error-actionable--disabled: url('#{$icons-path}system/dark/publish.svg#error-actionable--disabled'); - --icon__system_publish_warning--enabled: url('#{$icons-path}system/dark/publish.svg#warning--enabled'); - --icon__system_publish_success--enabled: url('#{$icons-path}system/dark/publish.svg#success--enabled'); - --icon__system_publish_neutral--enabled: url('#{$icons-path}system/dark/publish.svg#neutral--enabled'); - --icon__system_publish_neutral--hover: url('#{$icons-path}system/dark/publish.svg#neutral--hover'); - --icon__system_publish_neutral--active: url('#{$icons-path}system/dark/publish.svg#neutral--active'); - --icon__system_publish_neutral--disabled: url('#{$icons-path}system/dark/publish.svg#neutral--disabled'); - --icon__system_publish_highlighted--enabled: url('#{$icons-path}system/dark/publish.svg#highlighted--enabled'); - --icon__system_publish_bright--enabled: url('#{$icons-path}system/dark/publish.svg#bright--enabled'); - --icon__system_property_on-surface--enabled: url('#{$icons-path}system/dark/property.svg#on-surface--enabled'); - --icon__system_property_on-surface--hover: url('#{$icons-path}system/dark/property.svg#on-surface--hover'); - --icon__system_property_on-surface--active: url('#{$icons-path}system/dark/property.svg#on-surface--active'); - --icon__system_property_on-surface--disabled: url('#{$icons-path}system/dark/property.svg#on-surface--disabled'); - --icon__system_property_on-primary--enabled: url('#{$icons-path}system/dark/property.svg#on-primary--enabled'); - --icon__system_property_on-primary--hover: url('#{$icons-path}system/dark/property.svg#on-primary--hover'); - --icon__system_property_on-primary--active: url('#{$icons-path}system/dark/property.svg#on-primary--active'); - --icon__system_property_on-primary--disabled: url('#{$icons-path}system/dark/property.svg#on-primary--disabled'); - --icon__system_property_on-disabled--enabled: url('#{$icons-path}system/dark/property.svg#on-disabled--enabled'); - --icon__system_property_on-message--enabled: url('#{$icons-path}system/dark/property.svg#on-message--enabled'); - --icon__system_property_on-elevation--enabled: url('#{$icons-path}system/dark/property.svg#on-elevation--enabled'); - --icon__system_property_primary--enabled: url('#{$icons-path}system/dark/property.svg#primary--enabled'); - --icon__system_property_primary--hover: url('#{$icons-path}system/dark/property.svg#primary--hover'); - --icon__system_property_primary--active: url('#{$icons-path}system/dark/property.svg#primary--active'); - --icon__system_property_primary--disabled: url('#{$icons-path}system/dark/property.svg#primary--disabled'); - --icon__system_property_error--enabled: url('#{$icons-path}system/dark/property.svg#error--enabled'); - --icon__system_property_error-actionable--enabled: url('#{$icons-path}system/dark/property.svg#error-actionable--enabled'); - --icon__system_property_error-actionable--hover: url('#{$icons-path}system/dark/property.svg#error-actionable--hover'); - --icon__system_property_error-actionable--active: url('#{$icons-path}system/dark/property.svg#error-actionable--active'); - --icon__system_property_error-actionable--disabled: url('#{$icons-path}system/dark/property.svg#error-actionable--disabled'); - --icon__system_property_warning--enabled: url('#{$icons-path}system/dark/property.svg#warning--enabled'); - --icon__system_property_success--enabled: url('#{$icons-path}system/dark/property.svg#success--enabled'); - --icon__system_property_neutral--enabled: url('#{$icons-path}system/dark/property.svg#neutral--enabled'); - --icon__system_property_neutral--hover: url('#{$icons-path}system/dark/property.svg#neutral--hover'); - --icon__system_property_neutral--active: url('#{$icons-path}system/dark/property.svg#neutral--active'); - --icon__system_property_neutral--disabled: url('#{$icons-path}system/dark/property.svg#neutral--disabled'); - --icon__system_property_highlighted--enabled: url('#{$icons-path}system/dark/property.svg#highlighted--enabled'); - --icon__system_property_bright--enabled: url('#{$icons-path}system/dark/property.svg#bright--enabled'); - --icon__system_photo_on-surface--enabled: url('#{$icons-path}system/dark/photo.svg#on-surface--enabled'); - --icon__system_photo_on-surface--hover: url('#{$icons-path}system/dark/photo.svg#on-surface--hover'); - --icon__system_photo_on-surface--active: url('#{$icons-path}system/dark/photo.svg#on-surface--active'); - --icon__system_photo_on-surface--disabled: url('#{$icons-path}system/dark/photo.svg#on-surface--disabled'); - --icon__system_photo_on-primary--enabled: url('#{$icons-path}system/dark/photo.svg#on-primary--enabled'); - --icon__system_photo_on-primary--hover: url('#{$icons-path}system/dark/photo.svg#on-primary--hover'); - --icon__system_photo_on-primary--active: url('#{$icons-path}system/dark/photo.svg#on-primary--active'); - --icon__system_photo_on-primary--disabled: url('#{$icons-path}system/dark/photo.svg#on-primary--disabled'); - --icon__system_photo_on-disabled--enabled: url('#{$icons-path}system/dark/photo.svg#on-disabled--enabled'); - --icon__system_photo_on-message--enabled: url('#{$icons-path}system/dark/photo.svg#on-message--enabled'); - --icon__system_photo_on-elevation--enabled: url('#{$icons-path}system/dark/photo.svg#on-elevation--enabled'); - --icon__system_photo_primary--enabled: url('#{$icons-path}system/dark/photo.svg#primary--enabled'); - --icon__system_photo_primary--hover: url('#{$icons-path}system/dark/photo.svg#primary--hover'); - --icon__system_photo_primary--active: url('#{$icons-path}system/dark/photo.svg#primary--active'); - --icon__system_photo_primary--disabled: url('#{$icons-path}system/dark/photo.svg#primary--disabled'); - --icon__system_photo_error--enabled: url('#{$icons-path}system/dark/photo.svg#error--enabled'); - --icon__system_photo_error-actionable--enabled: url('#{$icons-path}system/dark/photo.svg#error-actionable--enabled'); - --icon__system_photo_error-actionable--hover: url('#{$icons-path}system/dark/photo.svg#error-actionable--hover'); - --icon__system_photo_error-actionable--active: url('#{$icons-path}system/dark/photo.svg#error-actionable--active'); - --icon__system_photo_error-actionable--disabled: url('#{$icons-path}system/dark/photo.svg#error-actionable--disabled'); - --icon__system_photo_warning--enabled: url('#{$icons-path}system/dark/photo.svg#warning--enabled'); - --icon__system_photo_success--enabled: url('#{$icons-path}system/dark/photo.svg#success--enabled'); - --icon__system_photo_neutral--enabled: url('#{$icons-path}system/dark/photo.svg#neutral--enabled'); - --icon__system_photo_neutral--hover: url('#{$icons-path}system/dark/photo.svg#neutral--hover'); - --icon__system_photo_neutral--active: url('#{$icons-path}system/dark/photo.svg#neutral--active'); - --icon__system_photo_neutral--disabled: url('#{$icons-path}system/dark/photo.svg#neutral--disabled'); - --icon__system_photo_highlighted--enabled: url('#{$icons-path}system/dark/photo.svg#highlighted--enabled'); - --icon__system_photo_bright--enabled: url('#{$icons-path}system/dark/photo.svg#bright--enabled'); - --icon__system_pause_on-surface--enabled: url('#{$icons-path}system/dark/pause.svg#on-surface--enabled'); - --icon__system_pause_on-surface--hover: url('#{$icons-path}system/dark/pause.svg#on-surface--hover'); - --icon__system_pause_on-surface--active: url('#{$icons-path}system/dark/pause.svg#on-surface--active'); - --icon__system_pause_on-surface--disabled: url('#{$icons-path}system/dark/pause.svg#on-surface--disabled'); - --icon__system_pause_on-primary--enabled: url('#{$icons-path}system/dark/pause.svg#on-primary--enabled'); - --icon__system_pause_on-primary--hover: url('#{$icons-path}system/dark/pause.svg#on-primary--hover'); - --icon__system_pause_on-primary--active: url('#{$icons-path}system/dark/pause.svg#on-primary--active'); - --icon__system_pause_on-primary--disabled: url('#{$icons-path}system/dark/pause.svg#on-primary--disabled'); - --icon__system_pause_on-disabled--enabled: url('#{$icons-path}system/dark/pause.svg#on-disabled--enabled'); - --icon__system_pause_on-message--enabled: url('#{$icons-path}system/dark/pause.svg#on-message--enabled'); - --icon__system_pause_on-elevation--enabled: url('#{$icons-path}system/dark/pause.svg#on-elevation--enabled'); - --icon__system_pause_primary--enabled: url('#{$icons-path}system/dark/pause.svg#primary--enabled'); - --icon__system_pause_primary--hover: url('#{$icons-path}system/dark/pause.svg#primary--hover'); - --icon__system_pause_primary--active: url('#{$icons-path}system/dark/pause.svg#primary--active'); - --icon__system_pause_primary--disabled: url('#{$icons-path}system/dark/pause.svg#primary--disabled'); - --icon__system_pause_error--enabled: url('#{$icons-path}system/dark/pause.svg#error--enabled'); - --icon__system_pause_error-actionable--enabled: url('#{$icons-path}system/dark/pause.svg#error-actionable--enabled'); - --icon__system_pause_error-actionable--hover: url('#{$icons-path}system/dark/pause.svg#error-actionable--hover'); - --icon__system_pause_error-actionable--active: url('#{$icons-path}system/dark/pause.svg#error-actionable--active'); - --icon__system_pause_error-actionable--disabled: url('#{$icons-path}system/dark/pause.svg#error-actionable--disabled'); - --icon__system_pause_warning--enabled: url('#{$icons-path}system/dark/pause.svg#warning--enabled'); - --icon__system_pause_success--enabled: url('#{$icons-path}system/dark/pause.svg#success--enabled'); - --icon__system_pause_neutral--enabled: url('#{$icons-path}system/dark/pause.svg#neutral--enabled'); - --icon__system_pause_neutral--hover: url('#{$icons-path}system/dark/pause.svg#neutral--hover'); - --icon__system_pause_neutral--active: url('#{$icons-path}system/dark/pause.svg#neutral--active'); - --icon__system_pause_neutral--disabled: url('#{$icons-path}system/dark/pause.svg#neutral--disabled'); - --icon__system_pause_highlighted--enabled: url('#{$icons-path}system/dark/pause.svg#highlighted--enabled'); - --icon__system_pause_bright--enabled: url('#{$icons-path}system/dark/pause.svg#bright--enabled'); - --icon__system_order-numberically_on-surface--enabled: url('#{$icons-path}system/dark/order-numberically.svg#on-surface--enabled'); - --icon__system_order-numberically_on-surface--hover: url('#{$icons-path}system/dark/order-numberically.svg#on-surface--hover'); - --icon__system_order-numberically_on-surface--active: url('#{$icons-path}system/dark/order-numberically.svg#on-surface--active'); - --icon__system_order-numberically_on-surface--disabled: url('#{$icons-path}system/dark/order-numberically.svg#on-surface--disabled'); - --icon__system_order-numberically_on-primary--enabled: url('#{$icons-path}system/dark/order-numberically.svg#on-primary--enabled'); - --icon__system_order-numberically_on-primary--hover: url('#{$icons-path}system/dark/order-numberically.svg#on-primary--hover'); - --icon__system_order-numberically_on-primary--active: url('#{$icons-path}system/dark/order-numberically.svg#on-primary--active'); - --icon__system_order-numberically_on-primary--disabled: url('#{$icons-path}system/dark/order-numberically.svg#on-primary--disabled'); - --icon__system_order-numberically_on-disabled--enabled: url('#{$icons-path}system/dark/order-numberically.svg#on-disabled--enabled'); - --icon__system_order-numberically_on-message--enabled: url('#{$icons-path}system/dark/order-numberically.svg#on-message--enabled'); - --icon__system_order-numberically_on-elevation--enabled: url('#{$icons-path}system/dark/order-numberically.svg#on-elevation--enabled'); - --icon__system_order-numberically_primary--enabled: url('#{$icons-path}system/dark/order-numberically.svg#primary--enabled'); - --icon__system_order-numberically_primary--hover: url('#{$icons-path}system/dark/order-numberically.svg#primary--hover'); - --icon__system_order-numberically_primary--active: url('#{$icons-path}system/dark/order-numberically.svg#primary--active'); - --icon__system_order-numberically_primary--disabled: url('#{$icons-path}system/dark/order-numberically.svg#primary--disabled'); - --icon__system_order-numberically_error--enabled: url('#{$icons-path}system/dark/order-numberically.svg#error--enabled'); - --icon__system_order-numberically_error-actionable--enabled: url('#{$icons-path}system/dark/order-numberically.svg#error-actionable--enabled'); - --icon__system_order-numberically_error-actionable--hover: url('#{$icons-path}system/dark/order-numberically.svg#error-actionable--hover'); - --icon__system_order-numberically_error-actionable--active: url('#{$icons-path}system/dark/order-numberically.svg#error-actionable--active'); - --icon__system_order-numberically_error-actionable--disabled: url('#{$icons-path}system/dark/order-numberically.svg#error-actionable--disabled'); - --icon__system_order-numberically_warning--enabled: url('#{$icons-path}system/dark/order-numberically.svg#warning--enabled'); - --icon__system_order-numberically_success--enabled: url('#{$icons-path}system/dark/order-numberically.svg#success--enabled'); - --icon__system_order-numberically_neutral--enabled: url('#{$icons-path}system/dark/order-numberically.svg#neutral--enabled'); - --icon__system_order-numberically_neutral--hover: url('#{$icons-path}system/dark/order-numberically.svg#neutral--hover'); - --icon__system_order-numberically_neutral--active: url('#{$icons-path}system/dark/order-numberically.svg#neutral--active'); - --icon__system_order-numberically_neutral--disabled: url('#{$icons-path}system/dark/order-numberically.svg#neutral--disabled'); - --icon__system_order-numberically_highlighted--enabled: url('#{$icons-path}system/dark/order-numberically.svg#highlighted--enabled'); - --icon__system_order-numberically_bright--enabled: url('#{$icons-path}system/dark/order-numberically.svg#bright--enabled'); - --icon__system_order-alphabetically_on-surface--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#on-surface--enabled'); - --icon__system_order-alphabetically_on-surface--hover: url('#{$icons-path}system/dark/order-alphabetically.svg#on-surface--hover'); - --icon__system_order-alphabetically_on-surface--active: url('#{$icons-path}system/dark/order-alphabetically.svg#on-surface--active'); - --icon__system_order-alphabetically_on-surface--disabled: url('#{$icons-path}system/dark/order-alphabetically.svg#on-surface--disabled'); - --icon__system_order-alphabetically_on-primary--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#on-primary--enabled'); - --icon__system_order-alphabetically_on-primary--hover: url('#{$icons-path}system/dark/order-alphabetically.svg#on-primary--hover'); - --icon__system_order-alphabetically_on-primary--active: url('#{$icons-path}system/dark/order-alphabetically.svg#on-primary--active'); - --icon__system_order-alphabetically_on-primary--disabled: url('#{$icons-path}system/dark/order-alphabetically.svg#on-primary--disabled'); - --icon__system_order-alphabetically_on-disabled--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#on-disabled--enabled'); - --icon__system_order-alphabetically_on-message--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#on-message--enabled'); - --icon__system_order-alphabetically_on-elevation--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#on-elevation--enabled'); - --icon__system_order-alphabetically_primary--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#primary--enabled'); - --icon__system_order-alphabetically_primary--hover: url('#{$icons-path}system/dark/order-alphabetically.svg#primary--hover'); - --icon__system_order-alphabetically_primary--active: url('#{$icons-path}system/dark/order-alphabetically.svg#primary--active'); - --icon__system_order-alphabetically_primary--disabled: url('#{$icons-path}system/dark/order-alphabetically.svg#primary--disabled'); - --icon__system_order-alphabetically_error--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#error--enabled'); - --icon__system_order-alphabetically_error-actionable--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#error-actionable--enabled'); - --icon__system_order-alphabetically_error-actionable--hover: url('#{$icons-path}system/dark/order-alphabetically.svg#error-actionable--hover'); - --icon__system_order-alphabetically_error-actionable--active: url('#{$icons-path}system/dark/order-alphabetically.svg#error-actionable--active'); - --icon__system_order-alphabetically_error-actionable--disabled: url('#{$icons-path}system/dark/order-alphabetically.svg#error-actionable--disabled'); - --icon__system_order-alphabetically_warning--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#warning--enabled'); - --icon__system_order-alphabetically_success--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#success--enabled'); - --icon__system_order-alphabetically_neutral--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#neutral--enabled'); - --icon__system_order-alphabetically_neutral--hover: url('#{$icons-path}system/dark/order-alphabetically.svg#neutral--hover'); - --icon__system_order-alphabetically_neutral--active: url('#{$icons-path}system/dark/order-alphabetically.svg#neutral--active'); - --icon__system_order-alphabetically_neutral--disabled: url('#{$icons-path}system/dark/order-alphabetically.svg#neutral--disabled'); - --icon__system_order-alphabetically_highlighted--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#highlighted--enabled'); - --icon__system_order-alphabetically_bright--enabled: url('#{$icons-path}system/dark/order-alphabetically.svg#bright--enabled'); - --icon__system_notification_on-surface--enabled: url('#{$icons-path}system/dark/notification.svg#on-surface--enabled'); - --icon__system_notification_on-surface--hover: url('#{$icons-path}system/dark/notification.svg#on-surface--hover'); - --icon__system_notification_on-surface--active: url('#{$icons-path}system/dark/notification.svg#on-surface--active'); - --icon__system_notification_on-surface--disabled: url('#{$icons-path}system/dark/notification.svg#on-surface--disabled'); - --icon__system_notification_on-primary--enabled: url('#{$icons-path}system/dark/notification.svg#on-primary--enabled'); - --icon__system_notification_on-primary--hover: url('#{$icons-path}system/dark/notification.svg#on-primary--hover'); - --icon__system_notification_on-primary--active: url('#{$icons-path}system/dark/notification.svg#on-primary--active'); - --icon__system_notification_on-primary--disabled: url('#{$icons-path}system/dark/notification.svg#on-primary--disabled'); - --icon__system_notification_on-disabled--enabled: url('#{$icons-path}system/dark/notification.svg#on-disabled--enabled'); - --icon__system_notification_on-message--enabled: url('#{$icons-path}system/dark/notification.svg#on-message--enabled'); - --icon__system_notification_on-elevation--enabled: url('#{$icons-path}system/dark/notification.svg#on-elevation--enabled'); - --icon__system_notification_primary--enabled: url('#{$icons-path}system/dark/notification.svg#primary--enabled'); - --icon__system_notification_primary--hover: url('#{$icons-path}system/dark/notification.svg#primary--hover'); - --icon__system_notification_primary--active: url('#{$icons-path}system/dark/notification.svg#primary--active'); - --icon__system_notification_primary--disabled: url('#{$icons-path}system/dark/notification.svg#primary--disabled'); - --icon__system_notification_error--enabled: url('#{$icons-path}system/dark/notification.svg#error--enabled'); - --icon__system_notification_error-actionable--enabled: url('#{$icons-path}system/dark/notification.svg#error-actionable--enabled'); - --icon__system_notification_error-actionable--hover: url('#{$icons-path}system/dark/notification.svg#error-actionable--hover'); - --icon__system_notification_error-actionable--active: url('#{$icons-path}system/dark/notification.svg#error-actionable--active'); - --icon__system_notification_error-actionable--disabled: url('#{$icons-path}system/dark/notification.svg#error-actionable--disabled'); - --icon__system_notification_warning--enabled: url('#{$icons-path}system/dark/notification.svg#warning--enabled'); - --icon__system_notification_success--enabled: url('#{$icons-path}system/dark/notification.svg#success--enabled'); - --icon__system_notification_neutral--enabled: url('#{$icons-path}system/dark/notification.svg#neutral--enabled'); - --icon__system_notification_neutral--hover: url('#{$icons-path}system/dark/notification.svg#neutral--hover'); - --icon__system_notification_neutral--active: url('#{$icons-path}system/dark/notification.svg#neutral--active'); - --icon__system_notification_neutral--disabled: url('#{$icons-path}system/dark/notification.svg#neutral--disabled'); - --icon__system_notification_highlighted--enabled: url('#{$icons-path}system/dark/notification.svg#highlighted--enabled'); - --icon__system_notification_bright--enabled: url('#{$icons-path}system/dark/notification.svg#bright--enabled'); - --icon__system_news_on-surface--enabled: url('#{$icons-path}system/dark/news.svg#on-surface--enabled'); - --icon__system_news_on-surface--hover: url('#{$icons-path}system/dark/news.svg#on-surface--hover'); - --icon__system_news_on-surface--active: url('#{$icons-path}system/dark/news.svg#on-surface--active'); - --icon__system_news_on-surface--disabled: url('#{$icons-path}system/dark/news.svg#on-surface--disabled'); - --icon__system_news_on-primary--enabled: url('#{$icons-path}system/dark/news.svg#on-primary--enabled'); - --icon__system_news_on-primary--hover: url('#{$icons-path}system/dark/news.svg#on-primary--hover'); - --icon__system_news_on-primary--active: url('#{$icons-path}system/dark/news.svg#on-primary--active'); - --icon__system_news_on-primary--disabled: url('#{$icons-path}system/dark/news.svg#on-primary--disabled'); - --icon__system_news_on-disabled--enabled: url('#{$icons-path}system/dark/news.svg#on-disabled--enabled'); - --icon__system_news_on-message--enabled: url('#{$icons-path}system/dark/news.svg#on-message--enabled'); - --icon__system_news_on-elevation--enabled: url('#{$icons-path}system/dark/news.svg#on-elevation--enabled'); - --icon__system_news_primary--enabled: url('#{$icons-path}system/dark/news.svg#primary--enabled'); - --icon__system_news_primary--hover: url('#{$icons-path}system/dark/news.svg#primary--hover'); - --icon__system_news_primary--active: url('#{$icons-path}system/dark/news.svg#primary--active'); - --icon__system_news_primary--disabled: url('#{$icons-path}system/dark/news.svg#primary--disabled'); - --icon__system_news_error--enabled: url('#{$icons-path}system/dark/news.svg#error--enabled'); - --icon__system_news_error-actionable--enabled: url('#{$icons-path}system/dark/news.svg#error-actionable--enabled'); - --icon__system_news_error-actionable--hover: url('#{$icons-path}system/dark/news.svg#error-actionable--hover'); - --icon__system_news_error-actionable--active: url('#{$icons-path}system/dark/news.svg#error-actionable--active'); - --icon__system_news_error-actionable--disabled: url('#{$icons-path}system/dark/news.svg#error-actionable--disabled'); - --icon__system_news_warning--enabled: url('#{$icons-path}system/dark/news.svg#warning--enabled'); - --icon__system_news_success--enabled: url('#{$icons-path}system/dark/news.svg#success--enabled'); - --icon__system_news_neutral--enabled: url('#{$icons-path}system/dark/news.svg#neutral--enabled'); - --icon__system_news_neutral--hover: url('#{$icons-path}system/dark/news.svg#neutral--hover'); - --icon__system_news_neutral--active: url('#{$icons-path}system/dark/news.svg#neutral--active'); - --icon__system_news_neutral--disabled: url('#{$icons-path}system/dark/news.svg#neutral--disabled'); - --icon__system_news_highlighted--enabled: url('#{$icons-path}system/dark/news.svg#highlighted--enabled'); - --icon__system_news_bright--enabled: url('#{$icons-path}system/dark/news.svg#bright--enabled'); - --icon__system_more-vertical_on-surface--enabled: url('#{$icons-path}system/dark/more-vertical.svg#on-surface--enabled'); - --icon__system_more-vertical_on-surface--hover: url('#{$icons-path}system/dark/more-vertical.svg#on-surface--hover'); - --icon__system_more-vertical_on-surface--active: url('#{$icons-path}system/dark/more-vertical.svg#on-surface--active'); - --icon__system_more-vertical_on-surface--disabled: url('#{$icons-path}system/dark/more-vertical.svg#on-surface--disabled'); - --icon__system_more-vertical_on-primary--enabled: url('#{$icons-path}system/dark/more-vertical.svg#on-primary--enabled'); - --icon__system_more-vertical_on-primary--hover: url('#{$icons-path}system/dark/more-vertical.svg#on-primary--hover'); - --icon__system_more-vertical_on-primary--active: url('#{$icons-path}system/dark/more-vertical.svg#on-primary--active'); - --icon__system_more-vertical_on-primary--disabled: url('#{$icons-path}system/dark/more-vertical.svg#on-primary--disabled'); - --icon__system_more-vertical_on-disabled--enabled: url('#{$icons-path}system/dark/more-vertical.svg#on-disabled--enabled'); - --icon__system_more-vertical_on-message--enabled: url('#{$icons-path}system/dark/more-vertical.svg#on-message--enabled'); - --icon__system_more-vertical_on-elevation--enabled: url('#{$icons-path}system/dark/more-vertical.svg#on-elevation--enabled'); - --icon__system_more-vertical_primary--enabled: url('#{$icons-path}system/dark/more-vertical.svg#primary--enabled'); - --icon__system_more-vertical_primary--hover: url('#{$icons-path}system/dark/more-vertical.svg#primary--hover'); - --icon__system_more-vertical_primary--active: url('#{$icons-path}system/dark/more-vertical.svg#primary--active'); - --icon__system_more-vertical_primary--disabled: url('#{$icons-path}system/dark/more-vertical.svg#primary--disabled'); - --icon__system_more-vertical_error--enabled: url('#{$icons-path}system/dark/more-vertical.svg#error--enabled'); - --icon__system_more-vertical_error-actionable--enabled: url('#{$icons-path}system/dark/more-vertical.svg#error-actionable--enabled'); - --icon__system_more-vertical_error-actionable--hover: url('#{$icons-path}system/dark/more-vertical.svg#error-actionable--hover'); - --icon__system_more-vertical_error-actionable--active: url('#{$icons-path}system/dark/more-vertical.svg#error-actionable--active'); - --icon__system_more-vertical_error-actionable--disabled: url('#{$icons-path}system/dark/more-vertical.svg#error-actionable--disabled'); - --icon__system_more-vertical_warning--enabled: url('#{$icons-path}system/dark/more-vertical.svg#warning--enabled'); - --icon__system_more-vertical_success--enabled: url('#{$icons-path}system/dark/more-vertical.svg#success--enabled'); - --icon__system_more-vertical_neutral--enabled: url('#{$icons-path}system/dark/more-vertical.svg#neutral--enabled'); - --icon__system_more-vertical_neutral--hover: url('#{$icons-path}system/dark/more-vertical.svg#neutral--hover'); - --icon__system_more-vertical_neutral--active: url('#{$icons-path}system/dark/more-vertical.svg#neutral--active'); - --icon__system_more-vertical_neutral--disabled: url('#{$icons-path}system/dark/more-vertical.svg#neutral--disabled'); - --icon__system_more-vertical_highlighted--enabled: url('#{$icons-path}system/dark/more-vertical.svg#highlighted--enabled'); - --icon__system_more-vertical_bright--enabled: url('#{$icons-path}system/dark/more-vertical.svg#bright--enabled'); - --icon__system_more-horizontal_on-surface--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#on-surface--enabled'); - --icon__system_more-horizontal_on-surface--hover: url('#{$icons-path}system/dark/more-horizontal.svg#on-surface--hover'); - --icon__system_more-horizontal_on-surface--active: url('#{$icons-path}system/dark/more-horizontal.svg#on-surface--active'); - --icon__system_more-horizontal_on-surface--disabled: url('#{$icons-path}system/dark/more-horizontal.svg#on-surface--disabled'); - --icon__system_more-horizontal_on-primary--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#on-primary--enabled'); - --icon__system_more-horizontal_on-primary--hover: url('#{$icons-path}system/dark/more-horizontal.svg#on-primary--hover'); - --icon__system_more-horizontal_on-primary--active: url('#{$icons-path}system/dark/more-horizontal.svg#on-primary--active'); - --icon__system_more-horizontal_on-primary--disabled: url('#{$icons-path}system/dark/more-horizontal.svg#on-primary--disabled'); - --icon__system_more-horizontal_on-disabled--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#on-disabled--enabled'); - --icon__system_more-horizontal_on-message--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#on-message--enabled'); - --icon__system_more-horizontal_on-elevation--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#on-elevation--enabled'); - --icon__system_more-horizontal_primary--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#primary--enabled'); - --icon__system_more-horizontal_primary--hover: url('#{$icons-path}system/dark/more-horizontal.svg#primary--hover'); - --icon__system_more-horizontal_primary--active: url('#{$icons-path}system/dark/more-horizontal.svg#primary--active'); - --icon__system_more-horizontal_primary--disabled: url('#{$icons-path}system/dark/more-horizontal.svg#primary--disabled'); - --icon__system_more-horizontal_error--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#error--enabled'); - --icon__system_more-horizontal_error-actionable--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#error-actionable--enabled'); - --icon__system_more-horizontal_error-actionable--hover: url('#{$icons-path}system/dark/more-horizontal.svg#error-actionable--hover'); - --icon__system_more-horizontal_error-actionable--active: url('#{$icons-path}system/dark/more-horizontal.svg#error-actionable--active'); - --icon__system_more-horizontal_error-actionable--disabled: url('#{$icons-path}system/dark/more-horizontal.svg#error-actionable--disabled'); - --icon__system_more-horizontal_warning--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#warning--enabled'); - --icon__system_more-horizontal_success--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#success--enabled'); - --icon__system_more-horizontal_neutral--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#neutral--enabled'); - --icon__system_more-horizontal_neutral--hover: url('#{$icons-path}system/dark/more-horizontal.svg#neutral--hover'); - --icon__system_more-horizontal_neutral--active: url('#{$icons-path}system/dark/more-horizontal.svg#neutral--active'); - --icon__system_more-horizontal_neutral--disabled: url('#{$icons-path}system/dark/more-horizontal.svg#neutral--disabled'); - --icon__system_more-horizontal_highlighted--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#highlighted--enabled'); - --icon__system_more-horizontal_bright--enabled: url('#{$icons-path}system/dark/more-horizontal.svg#bright--enabled'); - --icon__system_mobile_on-surface--enabled: url('#{$icons-path}system/dark/mobile.svg#on-surface--enabled'); - --icon__system_mobile_on-surface--hover: url('#{$icons-path}system/dark/mobile.svg#on-surface--hover'); - --icon__system_mobile_on-surface--active: url('#{$icons-path}system/dark/mobile.svg#on-surface--active'); - --icon__system_mobile_on-surface--disabled: url('#{$icons-path}system/dark/mobile.svg#on-surface--disabled'); - --icon__system_mobile_on-primary--enabled: url('#{$icons-path}system/dark/mobile.svg#on-primary--enabled'); - --icon__system_mobile_on-primary--hover: url('#{$icons-path}system/dark/mobile.svg#on-primary--hover'); - --icon__system_mobile_on-primary--active: url('#{$icons-path}system/dark/mobile.svg#on-primary--active'); - --icon__system_mobile_on-primary--disabled: url('#{$icons-path}system/dark/mobile.svg#on-primary--disabled'); - --icon__system_mobile_on-disabled--enabled: url('#{$icons-path}system/dark/mobile.svg#on-disabled--enabled'); - --icon__system_mobile_on-message--enabled: url('#{$icons-path}system/dark/mobile.svg#on-message--enabled'); - --icon__system_mobile_on-elevation--enabled: url('#{$icons-path}system/dark/mobile.svg#on-elevation--enabled'); - --icon__system_mobile_primary--enabled: url('#{$icons-path}system/dark/mobile.svg#primary--enabled'); - --icon__system_mobile_primary--hover: url('#{$icons-path}system/dark/mobile.svg#primary--hover'); - --icon__system_mobile_primary--active: url('#{$icons-path}system/dark/mobile.svg#primary--active'); - --icon__system_mobile_primary--disabled: url('#{$icons-path}system/dark/mobile.svg#primary--disabled'); - --icon__system_mobile_error--enabled: url('#{$icons-path}system/dark/mobile.svg#error--enabled'); - --icon__system_mobile_error-actionable--enabled: url('#{$icons-path}system/dark/mobile.svg#error-actionable--enabled'); - --icon__system_mobile_error-actionable--hover: url('#{$icons-path}system/dark/mobile.svg#error-actionable--hover'); - --icon__system_mobile_error-actionable--active: url('#{$icons-path}system/dark/mobile.svg#error-actionable--active'); - --icon__system_mobile_error-actionable--disabled: url('#{$icons-path}system/dark/mobile.svg#error-actionable--disabled'); - --icon__system_mobile_warning--enabled: url('#{$icons-path}system/dark/mobile.svg#warning--enabled'); - --icon__system_mobile_success--enabled: url('#{$icons-path}system/dark/mobile.svg#success--enabled'); - --icon__system_mobile_neutral--enabled: url('#{$icons-path}system/dark/mobile.svg#neutral--enabled'); - --icon__system_mobile_neutral--hover: url('#{$icons-path}system/dark/mobile.svg#neutral--hover'); - --icon__system_mobile_neutral--active: url('#{$icons-path}system/dark/mobile.svg#neutral--active'); - --icon__system_mobile_neutral--disabled: url('#{$icons-path}system/dark/mobile.svg#neutral--disabled'); - --icon__system_mobile_highlighted--enabled: url('#{$icons-path}system/dark/mobile.svg#highlighted--enabled'); - --icon__system_mobile_bright--enabled: url('#{$icons-path}system/dark/mobile.svg#bright--enabled'); - --icon__system_mic_on-surface--enabled: url('#{$icons-path}system/dark/mic.svg#on-surface--enabled'); - --icon__system_mic_on-surface--hover: url('#{$icons-path}system/dark/mic.svg#on-surface--hover'); - --icon__system_mic_on-surface--active: url('#{$icons-path}system/dark/mic.svg#on-surface--active'); - --icon__system_mic_on-surface--disabled: url('#{$icons-path}system/dark/mic.svg#on-surface--disabled'); - --icon__system_mic_on-primary--enabled: url('#{$icons-path}system/dark/mic.svg#on-primary--enabled'); - --icon__system_mic_on-primary--hover: url('#{$icons-path}system/dark/mic.svg#on-primary--hover'); - --icon__system_mic_on-primary--active: url('#{$icons-path}system/dark/mic.svg#on-primary--active'); - --icon__system_mic_on-primary--disabled: url('#{$icons-path}system/dark/mic.svg#on-primary--disabled'); - --icon__system_mic_on-disabled--enabled: url('#{$icons-path}system/dark/mic.svg#on-disabled--enabled'); - --icon__system_mic_on-message--enabled: url('#{$icons-path}system/dark/mic.svg#on-message--enabled'); - --icon__system_mic_on-elevation--enabled: url('#{$icons-path}system/dark/mic.svg#on-elevation--enabled'); - --icon__system_mic_primary--enabled: url('#{$icons-path}system/dark/mic.svg#primary--enabled'); - --icon__system_mic_primary--hover: url('#{$icons-path}system/dark/mic.svg#primary--hover'); - --icon__system_mic_primary--active: url('#{$icons-path}system/dark/mic.svg#primary--active'); - --icon__system_mic_primary--disabled: url('#{$icons-path}system/dark/mic.svg#primary--disabled'); - --icon__system_mic_error--enabled: url('#{$icons-path}system/dark/mic.svg#error--enabled'); - --icon__system_mic_error-actionable--enabled: url('#{$icons-path}system/dark/mic.svg#error-actionable--enabled'); - --icon__system_mic_error-actionable--hover: url('#{$icons-path}system/dark/mic.svg#error-actionable--hover'); - --icon__system_mic_error-actionable--active: url('#{$icons-path}system/dark/mic.svg#error-actionable--active'); - --icon__system_mic_error-actionable--disabled: url('#{$icons-path}system/dark/mic.svg#error-actionable--disabled'); - --icon__system_mic_warning--enabled: url('#{$icons-path}system/dark/mic.svg#warning--enabled'); - --icon__system_mic_success--enabled: url('#{$icons-path}system/dark/mic.svg#success--enabled'); - --icon__system_mic_neutral--enabled: url('#{$icons-path}system/dark/mic.svg#neutral--enabled'); - --icon__system_mic_neutral--hover: url('#{$icons-path}system/dark/mic.svg#neutral--hover'); - --icon__system_mic_neutral--active: url('#{$icons-path}system/dark/mic.svg#neutral--active'); - --icon__system_mic_neutral--disabled: url('#{$icons-path}system/dark/mic.svg#neutral--disabled'); - --icon__system_mic_highlighted--enabled: url('#{$icons-path}system/dark/mic.svg#highlighted--enabled'); - --icon__system_mic_bright--enabled: url('#{$icons-path}system/dark/mic.svg#bright--enabled'); - --icon__system_mic-off_on-surface--enabled: url('#{$icons-path}system/dark/mic-off.svg#on-surface--enabled'); - --icon__system_mic-off_on-surface--hover: url('#{$icons-path}system/dark/mic-off.svg#on-surface--hover'); - --icon__system_mic-off_on-surface--active: url('#{$icons-path}system/dark/mic-off.svg#on-surface--active'); - --icon__system_mic-off_on-surface--disabled: url('#{$icons-path}system/dark/mic-off.svg#on-surface--disabled'); - --icon__system_mic-off_on-primary--enabled: url('#{$icons-path}system/dark/mic-off.svg#on-primary--enabled'); - --icon__system_mic-off_on-primary--hover: url('#{$icons-path}system/dark/mic-off.svg#on-primary--hover'); - --icon__system_mic-off_on-primary--active: url('#{$icons-path}system/dark/mic-off.svg#on-primary--active'); - --icon__system_mic-off_on-primary--disabled: url('#{$icons-path}system/dark/mic-off.svg#on-primary--disabled'); - --icon__system_mic-off_on-disabled--enabled: url('#{$icons-path}system/dark/mic-off.svg#on-disabled--enabled'); - --icon__system_mic-off_on-message--enabled: url('#{$icons-path}system/dark/mic-off.svg#on-message--enabled'); - --icon__system_mic-off_on-elevation--enabled: url('#{$icons-path}system/dark/mic-off.svg#on-elevation--enabled'); - --icon__system_mic-off_primary--enabled: url('#{$icons-path}system/dark/mic-off.svg#primary--enabled'); - --icon__system_mic-off_primary--hover: url('#{$icons-path}system/dark/mic-off.svg#primary--hover'); - --icon__system_mic-off_primary--active: url('#{$icons-path}system/dark/mic-off.svg#primary--active'); - --icon__system_mic-off_primary--disabled: url('#{$icons-path}system/dark/mic-off.svg#primary--disabled'); - --icon__system_mic-off_error--enabled: url('#{$icons-path}system/dark/mic-off.svg#error--enabled'); - --icon__system_mic-off_error-actionable--enabled: url('#{$icons-path}system/dark/mic-off.svg#error-actionable--enabled'); - --icon__system_mic-off_error-actionable--hover: url('#{$icons-path}system/dark/mic-off.svg#error-actionable--hover'); - --icon__system_mic-off_error-actionable--active: url('#{$icons-path}system/dark/mic-off.svg#error-actionable--active'); - --icon__system_mic-off_error-actionable--disabled: url('#{$icons-path}system/dark/mic-off.svg#error-actionable--disabled'); - --icon__system_mic-off_warning--enabled: url('#{$icons-path}system/dark/mic-off.svg#warning--enabled'); - --icon__system_mic-off_success--enabled: url('#{$icons-path}system/dark/mic-off.svg#success--enabled'); - --icon__system_mic-off_neutral--enabled: url('#{$icons-path}system/dark/mic-off.svg#neutral--enabled'); - --icon__system_mic-off_neutral--hover: url('#{$icons-path}system/dark/mic-off.svg#neutral--hover'); - --icon__system_mic-off_neutral--active: url('#{$icons-path}system/dark/mic-off.svg#neutral--active'); - --icon__system_mic-off_neutral--disabled: url('#{$icons-path}system/dark/mic-off.svg#neutral--disabled'); - --icon__system_mic-off_highlighted--enabled: url('#{$icons-path}system/dark/mic-off.svg#highlighted--enabled'); - --icon__system_mic-off_bright--enabled: url('#{$icons-path}system/dark/mic-off.svg#bright--enabled'); - --icon__system_message_on-surface--enabled: url('#{$icons-path}system/dark/message.svg#on-surface--enabled'); - --icon__system_message_on-surface--hover: url('#{$icons-path}system/dark/message.svg#on-surface--hover'); - --icon__system_message_on-surface--active: url('#{$icons-path}system/dark/message.svg#on-surface--active'); - --icon__system_message_on-surface--disabled: url('#{$icons-path}system/dark/message.svg#on-surface--disabled'); - --icon__system_message_on-primary--enabled: url('#{$icons-path}system/dark/message.svg#on-primary--enabled'); - --icon__system_message_on-primary--hover: url('#{$icons-path}system/dark/message.svg#on-primary--hover'); - --icon__system_message_on-primary--active: url('#{$icons-path}system/dark/message.svg#on-primary--active'); - --icon__system_message_on-primary--disabled: url('#{$icons-path}system/dark/message.svg#on-primary--disabled'); - --icon__system_message_on-disabled--enabled: url('#{$icons-path}system/dark/message.svg#on-disabled--enabled'); - --icon__system_message_on-message--enabled: url('#{$icons-path}system/dark/message.svg#on-message--enabled'); - --icon__system_message_on-elevation--enabled: url('#{$icons-path}system/dark/message.svg#on-elevation--enabled'); - --icon__system_message_primary--enabled: url('#{$icons-path}system/dark/message.svg#primary--enabled'); - --icon__system_message_primary--hover: url('#{$icons-path}system/dark/message.svg#primary--hover'); - --icon__system_message_primary--active: url('#{$icons-path}system/dark/message.svg#primary--active'); - --icon__system_message_primary--disabled: url('#{$icons-path}system/dark/message.svg#primary--disabled'); - --icon__system_message_error--enabled: url('#{$icons-path}system/dark/message.svg#error--enabled'); - --icon__system_message_error-actionable--enabled: url('#{$icons-path}system/dark/message.svg#error-actionable--enabled'); - --icon__system_message_error-actionable--hover: url('#{$icons-path}system/dark/message.svg#error-actionable--hover'); - --icon__system_message_error-actionable--active: url('#{$icons-path}system/dark/message.svg#error-actionable--active'); - --icon__system_message_error-actionable--disabled: url('#{$icons-path}system/dark/message.svg#error-actionable--disabled'); - --icon__system_message_warning--enabled: url('#{$icons-path}system/dark/message.svg#warning--enabled'); - --icon__system_message_success--enabled: url('#{$icons-path}system/dark/message.svg#success--enabled'); - --icon__system_message_neutral--enabled: url('#{$icons-path}system/dark/message.svg#neutral--enabled'); - --icon__system_message_neutral--hover: url('#{$icons-path}system/dark/message.svg#neutral--hover'); - --icon__system_message_neutral--active: url('#{$icons-path}system/dark/message.svg#neutral--active'); - --icon__system_message_neutral--disabled: url('#{$icons-path}system/dark/message.svg#neutral--disabled'); - --icon__system_message_highlighted--enabled: url('#{$icons-path}system/dark/message.svg#highlighted--enabled'); - --icon__system_message_bright--enabled: url('#{$icons-path}system/dark/message.svg#bright--enabled'); - --icon__system_menu_on-surface--enabled: url('#{$icons-path}system/dark/menu.svg#on-surface--enabled'); - --icon__system_menu_on-surface--hover: url('#{$icons-path}system/dark/menu.svg#on-surface--hover'); - --icon__system_menu_on-surface--active: url('#{$icons-path}system/dark/menu.svg#on-surface--active'); - --icon__system_menu_on-surface--disabled: url('#{$icons-path}system/dark/menu.svg#on-surface--disabled'); - --icon__system_menu_on-primary--enabled: url('#{$icons-path}system/dark/menu.svg#on-primary--enabled'); - --icon__system_menu_on-primary--hover: url('#{$icons-path}system/dark/menu.svg#on-primary--hover'); - --icon__system_menu_on-primary--active: url('#{$icons-path}system/dark/menu.svg#on-primary--active'); - --icon__system_menu_on-primary--disabled: url('#{$icons-path}system/dark/menu.svg#on-primary--disabled'); - --icon__system_menu_on-disabled--enabled: url('#{$icons-path}system/dark/menu.svg#on-disabled--enabled'); - --icon__system_menu_on-message--enabled: url('#{$icons-path}system/dark/menu.svg#on-message--enabled'); - --icon__system_menu_on-elevation--enabled: url('#{$icons-path}system/dark/menu.svg#on-elevation--enabled'); - --icon__system_menu_primary--enabled: url('#{$icons-path}system/dark/menu.svg#primary--enabled'); - --icon__system_menu_primary--hover: url('#{$icons-path}system/dark/menu.svg#primary--hover'); - --icon__system_menu_primary--active: url('#{$icons-path}system/dark/menu.svg#primary--active'); - --icon__system_menu_primary--disabled: url('#{$icons-path}system/dark/menu.svg#primary--disabled'); - --icon__system_menu_error--enabled: url('#{$icons-path}system/dark/menu.svg#error--enabled'); - --icon__system_menu_error-actionable--enabled: url('#{$icons-path}system/dark/menu.svg#error-actionable--enabled'); - --icon__system_menu_error-actionable--hover: url('#{$icons-path}system/dark/menu.svg#error-actionable--hover'); - --icon__system_menu_error-actionable--active: url('#{$icons-path}system/dark/menu.svg#error-actionable--active'); - --icon__system_menu_error-actionable--disabled: url('#{$icons-path}system/dark/menu.svg#error-actionable--disabled'); - --icon__system_menu_warning--enabled: url('#{$icons-path}system/dark/menu.svg#warning--enabled'); - --icon__system_menu_success--enabled: url('#{$icons-path}system/dark/menu.svg#success--enabled'); - --icon__system_menu_neutral--enabled: url('#{$icons-path}system/dark/menu.svg#neutral--enabled'); - --icon__system_menu_neutral--hover: url('#{$icons-path}system/dark/menu.svg#neutral--hover'); - --icon__system_menu_neutral--active: url('#{$icons-path}system/dark/menu.svg#neutral--active'); - --icon__system_menu_neutral--disabled: url('#{$icons-path}system/dark/menu.svg#neutral--disabled'); - --icon__system_menu_highlighted--enabled: url('#{$icons-path}system/dark/menu.svg#highlighted--enabled'); - --icon__system_menu_bright--enabled: url('#{$icons-path}system/dark/menu.svg#bright--enabled'); - --icon__system_mail_on-surface--enabled: url('#{$icons-path}system/dark/mail.svg#on-surface--enabled'); - --icon__system_mail_on-surface--hover: url('#{$icons-path}system/dark/mail.svg#on-surface--hover'); - --icon__system_mail_on-surface--active: url('#{$icons-path}system/dark/mail.svg#on-surface--active'); - --icon__system_mail_on-surface--disabled: url('#{$icons-path}system/dark/mail.svg#on-surface--disabled'); - --icon__system_mail_on-primary--enabled: url('#{$icons-path}system/dark/mail.svg#on-primary--enabled'); - --icon__system_mail_on-primary--hover: url('#{$icons-path}system/dark/mail.svg#on-primary--hover'); - --icon__system_mail_on-primary--active: url('#{$icons-path}system/dark/mail.svg#on-primary--active'); - --icon__system_mail_on-primary--disabled: url('#{$icons-path}system/dark/mail.svg#on-primary--disabled'); - --icon__system_mail_on-disabled--enabled: url('#{$icons-path}system/dark/mail.svg#on-disabled--enabled'); - --icon__system_mail_on-message--enabled: url('#{$icons-path}system/dark/mail.svg#on-message--enabled'); - --icon__system_mail_on-elevation--enabled: url('#{$icons-path}system/dark/mail.svg#on-elevation--enabled'); - --icon__system_mail_primary--enabled: url('#{$icons-path}system/dark/mail.svg#primary--enabled'); - --icon__system_mail_primary--hover: url('#{$icons-path}system/dark/mail.svg#primary--hover'); - --icon__system_mail_primary--active: url('#{$icons-path}system/dark/mail.svg#primary--active'); - --icon__system_mail_primary--disabled: url('#{$icons-path}system/dark/mail.svg#primary--disabled'); - --icon__system_mail_error--enabled: url('#{$icons-path}system/dark/mail.svg#error--enabled'); - --icon__system_mail_error-actionable--enabled: url('#{$icons-path}system/dark/mail.svg#error-actionable--enabled'); - --icon__system_mail_error-actionable--hover: url('#{$icons-path}system/dark/mail.svg#error-actionable--hover'); - --icon__system_mail_error-actionable--active: url('#{$icons-path}system/dark/mail.svg#error-actionable--active'); - --icon__system_mail_error-actionable--disabled: url('#{$icons-path}system/dark/mail.svg#error-actionable--disabled'); - --icon__system_mail_warning--enabled: url('#{$icons-path}system/dark/mail.svg#warning--enabled'); - --icon__system_mail_success--enabled: url('#{$icons-path}system/dark/mail.svg#success--enabled'); - --icon__system_mail_neutral--enabled: url('#{$icons-path}system/dark/mail.svg#neutral--enabled'); - --icon__system_mail_neutral--hover: url('#{$icons-path}system/dark/mail.svg#neutral--hover'); - --icon__system_mail_neutral--active: url('#{$icons-path}system/dark/mail.svg#neutral--active'); - --icon__system_mail_neutral--disabled: url('#{$icons-path}system/dark/mail.svg#neutral--disabled'); - --icon__system_mail_highlighted--enabled: url('#{$icons-path}system/dark/mail.svg#highlighted--enabled'); - --icon__system_mail_bright--enabled: url('#{$icons-path}system/dark/mail.svg#bright--enabled'); - --icon__system_logout_on-surface--enabled: url('#{$icons-path}system/dark/logout.svg#on-surface--enabled'); - --icon__system_logout_on-surface--hover: url('#{$icons-path}system/dark/logout.svg#on-surface--hover'); - --icon__system_logout_on-surface--active: url('#{$icons-path}system/dark/logout.svg#on-surface--active'); - --icon__system_logout_on-surface--disabled: url('#{$icons-path}system/dark/logout.svg#on-surface--disabled'); - --icon__system_logout_on-primary--enabled: url('#{$icons-path}system/dark/logout.svg#on-primary--enabled'); - --icon__system_logout_on-primary--hover: url('#{$icons-path}system/dark/logout.svg#on-primary--hover'); - --icon__system_logout_on-primary--active: url('#{$icons-path}system/dark/logout.svg#on-primary--active'); - --icon__system_logout_on-primary--disabled: url('#{$icons-path}system/dark/logout.svg#on-primary--disabled'); - --icon__system_logout_on-disabled--enabled: url('#{$icons-path}system/dark/logout.svg#on-disabled--enabled'); - --icon__system_logout_on-message--enabled: url('#{$icons-path}system/dark/logout.svg#on-message--enabled'); - --icon__system_logout_on-elevation--enabled: url('#{$icons-path}system/dark/logout.svg#on-elevation--enabled'); - --icon__system_logout_primary--enabled: url('#{$icons-path}system/dark/logout.svg#primary--enabled'); - --icon__system_logout_primary--hover: url('#{$icons-path}system/dark/logout.svg#primary--hover'); - --icon__system_logout_primary--active: url('#{$icons-path}system/dark/logout.svg#primary--active'); - --icon__system_logout_primary--disabled: url('#{$icons-path}system/dark/logout.svg#primary--disabled'); - --icon__system_logout_error--enabled: url('#{$icons-path}system/dark/logout.svg#error--enabled'); - --icon__system_logout_error-actionable--enabled: url('#{$icons-path}system/dark/logout.svg#error-actionable--enabled'); - --icon__system_logout_error-actionable--hover: url('#{$icons-path}system/dark/logout.svg#error-actionable--hover'); - --icon__system_logout_error-actionable--active: url('#{$icons-path}system/dark/logout.svg#error-actionable--active'); - --icon__system_logout_error-actionable--disabled: url('#{$icons-path}system/dark/logout.svg#error-actionable--disabled'); - --icon__system_logout_warning--enabled: url('#{$icons-path}system/dark/logout.svg#warning--enabled'); - --icon__system_logout_success--enabled: url('#{$icons-path}system/dark/logout.svg#success--enabled'); - --icon__system_logout_neutral--enabled: url('#{$icons-path}system/dark/logout.svg#neutral--enabled'); - --icon__system_logout_neutral--hover: url('#{$icons-path}system/dark/logout.svg#neutral--hover'); - --icon__system_logout_neutral--active: url('#{$icons-path}system/dark/logout.svg#neutral--active'); - --icon__system_logout_neutral--disabled: url('#{$icons-path}system/dark/logout.svg#neutral--disabled'); - --icon__system_logout_highlighted--enabled: url('#{$icons-path}system/dark/logout.svg#highlighted--enabled'); - --icon__system_logout_bright--enabled: url('#{$icons-path}system/dark/logout.svg#bright--enabled'); - --icon__system_log-out_on-surface--enabled: url('#{$icons-path}system/dark/log-out.svg#on-surface--enabled'); - --icon__system_log-out_on-surface--hover: url('#{$icons-path}system/dark/log-out.svg#on-surface--hover'); - --icon__system_log-out_on-surface--active: url('#{$icons-path}system/dark/log-out.svg#on-surface--active'); - --icon__system_log-out_on-surface--disabled: url('#{$icons-path}system/dark/log-out.svg#on-surface--disabled'); - --icon__system_log-out_on-primary--enabled: url('#{$icons-path}system/dark/log-out.svg#on-primary--enabled'); - --icon__system_log-out_on-primary--hover: url('#{$icons-path}system/dark/log-out.svg#on-primary--hover'); - --icon__system_log-out_on-primary--active: url('#{$icons-path}system/dark/log-out.svg#on-primary--active'); - --icon__system_log-out_on-primary--disabled: url('#{$icons-path}system/dark/log-out.svg#on-primary--disabled'); - --icon__system_log-out_on-disabled--enabled: url('#{$icons-path}system/dark/log-out.svg#on-disabled--enabled'); - --icon__system_log-out_on-message--enabled: url('#{$icons-path}system/dark/log-out.svg#on-message--enabled'); - --icon__system_log-out_on-elevation--enabled: url('#{$icons-path}system/dark/log-out.svg#on-elevation--enabled'); - --icon__system_log-out_primary--enabled: url('#{$icons-path}system/dark/log-out.svg#primary--enabled'); - --icon__system_log-out_primary--hover: url('#{$icons-path}system/dark/log-out.svg#primary--hover'); - --icon__system_log-out_primary--active: url('#{$icons-path}system/dark/log-out.svg#primary--active'); - --icon__system_log-out_primary--disabled: url('#{$icons-path}system/dark/log-out.svg#primary--disabled'); - --icon__system_log-out_error--enabled: url('#{$icons-path}system/dark/log-out.svg#error--enabled'); - --icon__system_log-out_error-actionable--enabled: url('#{$icons-path}system/dark/log-out.svg#error-actionable--enabled'); - --icon__system_log-out_error-actionable--hover: url('#{$icons-path}system/dark/log-out.svg#error-actionable--hover'); - --icon__system_log-out_error-actionable--active: url('#{$icons-path}system/dark/log-out.svg#error-actionable--active'); - --icon__system_log-out_error-actionable--disabled: url('#{$icons-path}system/dark/log-out.svg#error-actionable--disabled'); - --icon__system_log-out_warning--enabled: url('#{$icons-path}system/dark/log-out.svg#warning--enabled'); - --icon__system_log-out_success--enabled: url('#{$icons-path}system/dark/log-out.svg#success--enabled'); - --icon__system_log-out_neutral--enabled: url('#{$icons-path}system/dark/log-out.svg#neutral--enabled'); - --icon__system_log-out_neutral--hover: url('#{$icons-path}system/dark/log-out.svg#neutral--hover'); - --icon__system_log-out_neutral--active: url('#{$icons-path}system/dark/log-out.svg#neutral--active'); - --icon__system_log-out_neutral--disabled: url('#{$icons-path}system/dark/log-out.svg#neutral--disabled'); - --icon__system_log-out_highlighted--enabled: url('#{$icons-path}system/dark/log-out.svg#highlighted--enabled'); - --icon__system_log-out_bright--enabled: url('#{$icons-path}system/dark/log-out.svg#bright--enabled'); - --icon__system_lock_on-surface--enabled: url('#{$icons-path}system/dark/lock.svg#on-surface--enabled'); - --icon__system_lock_on-surface--hover: url('#{$icons-path}system/dark/lock.svg#on-surface--hover'); - --icon__system_lock_on-surface--active: url('#{$icons-path}system/dark/lock.svg#on-surface--active'); - --icon__system_lock_on-surface--disabled: url('#{$icons-path}system/dark/lock.svg#on-surface--disabled'); - --icon__system_lock_on-primary--enabled: url('#{$icons-path}system/dark/lock.svg#on-primary--enabled'); - --icon__system_lock_on-primary--hover: url('#{$icons-path}system/dark/lock.svg#on-primary--hover'); - --icon__system_lock_on-primary--active: url('#{$icons-path}system/dark/lock.svg#on-primary--active'); - --icon__system_lock_on-primary--disabled: url('#{$icons-path}system/dark/lock.svg#on-primary--disabled'); - --icon__system_lock_on-disabled--enabled: url('#{$icons-path}system/dark/lock.svg#on-disabled--enabled'); - --icon__system_lock_on-message--enabled: url('#{$icons-path}system/dark/lock.svg#on-message--enabled'); - --icon__system_lock_on-elevation--enabled: url('#{$icons-path}system/dark/lock.svg#on-elevation--enabled'); - --icon__system_lock_primary--enabled: url('#{$icons-path}system/dark/lock.svg#primary--enabled'); - --icon__system_lock_primary--hover: url('#{$icons-path}system/dark/lock.svg#primary--hover'); - --icon__system_lock_primary--active: url('#{$icons-path}system/dark/lock.svg#primary--active'); - --icon__system_lock_primary--disabled: url('#{$icons-path}system/dark/lock.svg#primary--disabled'); - --icon__system_lock_error--enabled: url('#{$icons-path}system/dark/lock.svg#error--enabled'); - --icon__system_lock_error-actionable--enabled: url('#{$icons-path}system/dark/lock.svg#error-actionable--enabled'); - --icon__system_lock_error-actionable--hover: url('#{$icons-path}system/dark/lock.svg#error-actionable--hover'); - --icon__system_lock_error-actionable--active: url('#{$icons-path}system/dark/lock.svg#error-actionable--active'); - --icon__system_lock_error-actionable--disabled: url('#{$icons-path}system/dark/lock.svg#error-actionable--disabled'); - --icon__system_lock_warning--enabled: url('#{$icons-path}system/dark/lock.svg#warning--enabled'); - --icon__system_lock_success--enabled: url('#{$icons-path}system/dark/lock.svg#success--enabled'); - --icon__system_lock_neutral--enabled: url('#{$icons-path}system/dark/lock.svg#neutral--enabled'); - --icon__system_lock_neutral--hover: url('#{$icons-path}system/dark/lock.svg#neutral--hover'); - --icon__system_lock_neutral--active: url('#{$icons-path}system/dark/lock.svg#neutral--active'); - --icon__system_lock_neutral--disabled: url('#{$icons-path}system/dark/lock.svg#neutral--disabled'); - --icon__system_lock_highlighted--enabled: url('#{$icons-path}system/dark/lock.svg#highlighted--enabled'); - --icon__system_lock_bright--enabled: url('#{$icons-path}system/dark/lock.svg#bright--enabled'); - --icon__system_loading_on-surface--enabled: url('#{$icons-path}system/dark/loading.svg#on-surface--enabled'); - --icon__system_loading_on-surface--hover: url('#{$icons-path}system/dark/loading.svg#on-surface--hover'); - --icon__system_loading_on-surface--active: url('#{$icons-path}system/dark/loading.svg#on-surface--active'); - --icon__system_loading_on-surface--disabled: url('#{$icons-path}system/dark/loading.svg#on-surface--disabled'); - --icon__system_loading_on-primary--enabled: url('#{$icons-path}system/dark/loading.svg#on-primary--enabled'); - --icon__system_loading_on-primary--hover: url('#{$icons-path}system/dark/loading.svg#on-primary--hover'); - --icon__system_loading_on-primary--active: url('#{$icons-path}system/dark/loading.svg#on-primary--active'); - --icon__system_loading_on-primary--disabled: url('#{$icons-path}system/dark/loading.svg#on-primary--disabled'); - --icon__system_loading_on-disabled--enabled: url('#{$icons-path}system/dark/loading.svg#on-disabled--enabled'); - --icon__system_loading_on-message--enabled: url('#{$icons-path}system/dark/loading.svg#on-message--enabled'); - --icon__system_loading_on-elevation--enabled: url('#{$icons-path}system/dark/loading.svg#on-elevation--enabled'); - --icon__system_loading_primary--enabled: url('#{$icons-path}system/dark/loading.svg#primary--enabled'); - --icon__system_loading_primary--hover: url('#{$icons-path}system/dark/loading.svg#primary--hover'); - --icon__system_loading_primary--active: url('#{$icons-path}system/dark/loading.svg#primary--active'); - --icon__system_loading_primary--disabled: url('#{$icons-path}system/dark/loading.svg#primary--disabled'); - --icon__system_loading_error--enabled: url('#{$icons-path}system/dark/loading.svg#error--enabled'); - --icon__system_loading_error-actionable--enabled: url('#{$icons-path}system/dark/loading.svg#error-actionable--enabled'); - --icon__system_loading_error-actionable--hover: url('#{$icons-path}system/dark/loading.svg#error-actionable--hover'); - --icon__system_loading_error-actionable--active: url('#{$icons-path}system/dark/loading.svg#error-actionable--active'); - --icon__system_loading_error-actionable--disabled: url('#{$icons-path}system/dark/loading.svg#error-actionable--disabled'); - --icon__system_loading_warning--enabled: url('#{$icons-path}system/dark/loading.svg#warning--enabled'); - --icon__system_loading_success--enabled: url('#{$icons-path}system/dark/loading.svg#success--enabled'); - --icon__system_loading_neutral--enabled: url('#{$icons-path}system/dark/loading.svg#neutral--enabled'); - --icon__system_loading_neutral--hover: url('#{$icons-path}system/dark/loading.svg#neutral--hover'); - --icon__system_loading_neutral--active: url('#{$icons-path}system/dark/loading.svg#neutral--active'); - --icon__system_loading_neutral--disabled: url('#{$icons-path}system/dark/loading.svg#neutral--disabled'); - --icon__system_loading_highlighted--enabled: url('#{$icons-path}system/dark/loading.svg#highlighted--enabled'); - --icon__system_loading_bright--enabled: url('#{$icons-path}system/dark/loading.svg#bright--enabled'); - --icon__system_list_on-surface--enabled: url('#{$icons-path}system/dark/list.svg#on-surface--enabled'); - --icon__system_list_on-surface--hover: url('#{$icons-path}system/dark/list.svg#on-surface--hover'); - --icon__system_list_on-surface--active: url('#{$icons-path}system/dark/list.svg#on-surface--active'); - --icon__system_list_on-surface--disabled: url('#{$icons-path}system/dark/list.svg#on-surface--disabled'); - --icon__system_list_on-primary--enabled: url('#{$icons-path}system/dark/list.svg#on-primary--enabled'); - --icon__system_list_on-primary--hover: url('#{$icons-path}system/dark/list.svg#on-primary--hover'); - --icon__system_list_on-primary--active: url('#{$icons-path}system/dark/list.svg#on-primary--active'); - --icon__system_list_on-primary--disabled: url('#{$icons-path}system/dark/list.svg#on-primary--disabled'); - --icon__system_list_on-disabled--enabled: url('#{$icons-path}system/dark/list.svg#on-disabled--enabled'); - --icon__system_list_on-message--enabled: url('#{$icons-path}system/dark/list.svg#on-message--enabled'); - --icon__system_list_on-elevation--enabled: url('#{$icons-path}system/dark/list.svg#on-elevation--enabled'); - --icon__system_list_primary--enabled: url('#{$icons-path}system/dark/list.svg#primary--enabled'); - --icon__system_list_primary--hover: url('#{$icons-path}system/dark/list.svg#primary--hover'); - --icon__system_list_primary--active: url('#{$icons-path}system/dark/list.svg#primary--active'); - --icon__system_list_primary--disabled: url('#{$icons-path}system/dark/list.svg#primary--disabled'); - --icon__system_list_error--enabled: url('#{$icons-path}system/dark/list.svg#error--enabled'); - --icon__system_list_error-actionable--enabled: url('#{$icons-path}system/dark/list.svg#error-actionable--enabled'); - --icon__system_list_error-actionable--hover: url('#{$icons-path}system/dark/list.svg#error-actionable--hover'); - --icon__system_list_error-actionable--active: url('#{$icons-path}system/dark/list.svg#error-actionable--active'); - --icon__system_list_error-actionable--disabled: url('#{$icons-path}system/dark/list.svg#error-actionable--disabled'); - --icon__system_list_warning--enabled: url('#{$icons-path}system/dark/list.svg#warning--enabled'); - --icon__system_list_success--enabled: url('#{$icons-path}system/dark/list.svg#success--enabled'); - --icon__system_list_neutral--enabled: url('#{$icons-path}system/dark/list.svg#neutral--enabled'); - --icon__system_list_neutral--hover: url('#{$icons-path}system/dark/list.svg#neutral--hover'); - --icon__system_list_neutral--active: url('#{$icons-path}system/dark/list.svg#neutral--active'); - --icon__system_list_neutral--disabled: url('#{$icons-path}system/dark/list.svg#neutral--disabled'); - --icon__system_list_highlighted--enabled: url('#{$icons-path}system/dark/list.svg#highlighted--enabled'); - --icon__system_list_bright--enabled: url('#{$icons-path}system/dark/list.svg#bright--enabled'); - --icon__system_link_on-surface--enabled: url('#{$icons-path}system/dark/link.svg#on-surface--enabled'); - --icon__system_link_on-surface--hover: url('#{$icons-path}system/dark/link.svg#on-surface--hover'); - --icon__system_link_on-surface--active: url('#{$icons-path}system/dark/link.svg#on-surface--active'); - --icon__system_link_on-surface--disabled: url('#{$icons-path}system/dark/link.svg#on-surface--disabled'); - --icon__system_link_on-primary--enabled: url('#{$icons-path}system/dark/link.svg#on-primary--enabled'); - --icon__system_link_on-primary--hover: url('#{$icons-path}system/dark/link.svg#on-primary--hover'); - --icon__system_link_on-primary--active: url('#{$icons-path}system/dark/link.svg#on-primary--active'); - --icon__system_link_on-primary--disabled: url('#{$icons-path}system/dark/link.svg#on-primary--disabled'); - --icon__system_link_on-disabled--enabled: url('#{$icons-path}system/dark/link.svg#on-disabled--enabled'); - --icon__system_link_on-message--enabled: url('#{$icons-path}system/dark/link.svg#on-message--enabled'); - --icon__system_link_on-elevation--enabled: url('#{$icons-path}system/dark/link.svg#on-elevation--enabled'); - --icon__system_link_primary--enabled: url('#{$icons-path}system/dark/link.svg#primary--enabled'); - --icon__system_link_primary--hover: url('#{$icons-path}system/dark/link.svg#primary--hover'); - --icon__system_link_primary--active: url('#{$icons-path}system/dark/link.svg#primary--active'); - --icon__system_link_primary--disabled: url('#{$icons-path}system/dark/link.svg#primary--disabled'); - --icon__system_link_error--enabled: url('#{$icons-path}system/dark/link.svg#error--enabled'); - --icon__system_link_error-actionable--enabled: url('#{$icons-path}system/dark/link.svg#error-actionable--enabled'); - --icon__system_link_error-actionable--hover: url('#{$icons-path}system/dark/link.svg#error-actionable--hover'); - --icon__system_link_error-actionable--active: url('#{$icons-path}system/dark/link.svg#error-actionable--active'); - --icon__system_link_error-actionable--disabled: url('#{$icons-path}system/dark/link.svg#error-actionable--disabled'); - --icon__system_link_warning--enabled: url('#{$icons-path}system/dark/link.svg#warning--enabled'); - --icon__system_link_success--enabled: url('#{$icons-path}system/dark/link.svg#success--enabled'); - --icon__system_link_neutral--enabled: url('#{$icons-path}system/dark/link.svg#neutral--enabled'); - --icon__system_link_neutral--hover: url('#{$icons-path}system/dark/link.svg#neutral--hover'); - --icon__system_link_neutral--active: url('#{$icons-path}system/dark/link.svg#neutral--active'); - --icon__system_link_neutral--disabled: url('#{$icons-path}system/dark/link.svg#neutral--disabled'); - --icon__system_link_highlighted--enabled: url('#{$icons-path}system/dark/link.svg#highlighted--enabled'); - --icon__system_link_bright--enabled: url('#{$icons-path}system/dark/link.svg#bright--enabled'); - --icon__system_link-off_on-surface--enabled: url('#{$icons-path}system/dark/link-off.svg#on-surface--enabled'); - --icon__system_link-off_on-surface--hover: url('#{$icons-path}system/dark/link-off.svg#on-surface--hover'); - --icon__system_link-off_on-surface--active: url('#{$icons-path}system/dark/link-off.svg#on-surface--active'); - --icon__system_link-off_on-surface--disabled: url('#{$icons-path}system/dark/link-off.svg#on-surface--disabled'); - --icon__system_link-off_on-primary--enabled: url('#{$icons-path}system/dark/link-off.svg#on-primary--enabled'); - --icon__system_link-off_on-primary--hover: url('#{$icons-path}system/dark/link-off.svg#on-primary--hover'); - --icon__system_link-off_on-primary--active: url('#{$icons-path}system/dark/link-off.svg#on-primary--active'); - --icon__system_link-off_on-primary--disabled: url('#{$icons-path}system/dark/link-off.svg#on-primary--disabled'); - --icon__system_link-off_on-disabled--enabled: url('#{$icons-path}system/dark/link-off.svg#on-disabled--enabled'); - --icon__system_link-off_on-message--enabled: url('#{$icons-path}system/dark/link-off.svg#on-message--enabled'); - --icon__system_link-off_on-elevation--enabled: url('#{$icons-path}system/dark/link-off.svg#on-elevation--enabled'); - --icon__system_link-off_primary--enabled: url('#{$icons-path}system/dark/link-off.svg#primary--enabled'); - --icon__system_link-off_primary--hover: url('#{$icons-path}system/dark/link-off.svg#primary--hover'); - --icon__system_link-off_primary--active: url('#{$icons-path}system/dark/link-off.svg#primary--active'); - --icon__system_link-off_primary--disabled: url('#{$icons-path}system/dark/link-off.svg#primary--disabled'); - --icon__system_link-off_error--enabled: url('#{$icons-path}system/dark/link-off.svg#error--enabled'); - --icon__system_link-off_error-actionable--enabled: url('#{$icons-path}system/dark/link-off.svg#error-actionable--enabled'); - --icon__system_link-off_error-actionable--hover: url('#{$icons-path}system/dark/link-off.svg#error-actionable--hover'); - --icon__system_link-off_error-actionable--active: url('#{$icons-path}system/dark/link-off.svg#error-actionable--active'); - --icon__system_link-off_error-actionable--disabled: url('#{$icons-path}system/dark/link-off.svg#error-actionable--disabled'); - --icon__system_link-off_warning--enabled: url('#{$icons-path}system/dark/link-off.svg#warning--enabled'); - --icon__system_link-off_success--enabled: url('#{$icons-path}system/dark/link-off.svg#success--enabled'); - --icon__system_link-off_neutral--enabled: url('#{$icons-path}system/dark/link-off.svg#neutral--enabled'); - --icon__system_link-off_neutral--hover: url('#{$icons-path}system/dark/link-off.svg#neutral--hover'); - --icon__system_link-off_neutral--active: url('#{$icons-path}system/dark/link-off.svg#neutral--active'); - --icon__system_link-off_neutral--disabled: url('#{$icons-path}system/dark/link-off.svg#neutral--disabled'); - --icon__system_link-off_highlighted--enabled: url('#{$icons-path}system/dark/link-off.svg#highlighted--enabled'); - --icon__system_link-off_bright--enabled: url('#{$icons-path}system/dark/link-off.svg#bright--enabled'); - --icon__system_left-panel-open_on-surface--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#on-surface--enabled'); - --icon__system_left-panel-open_on-surface--hover: url('#{$icons-path}system/dark/left-panel-open.svg#on-surface--hover'); - --icon__system_left-panel-open_on-surface--active: url('#{$icons-path}system/dark/left-panel-open.svg#on-surface--active'); - --icon__system_left-panel-open_on-surface--disabled: url('#{$icons-path}system/dark/left-panel-open.svg#on-surface--disabled'); - --icon__system_left-panel-open_on-primary--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#on-primary--enabled'); - --icon__system_left-panel-open_on-primary--hover: url('#{$icons-path}system/dark/left-panel-open.svg#on-primary--hover'); - --icon__system_left-panel-open_on-primary--active: url('#{$icons-path}system/dark/left-panel-open.svg#on-primary--active'); - --icon__system_left-panel-open_on-primary--disabled: url('#{$icons-path}system/dark/left-panel-open.svg#on-primary--disabled'); - --icon__system_left-panel-open_on-disabled--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#on-disabled--enabled'); - --icon__system_left-panel-open_on-message--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#on-message--enabled'); - --icon__system_left-panel-open_on-elevation--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#on-elevation--enabled'); - --icon__system_left-panel-open_primary--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#primary--enabled'); - --icon__system_left-panel-open_primary--hover: url('#{$icons-path}system/dark/left-panel-open.svg#primary--hover'); - --icon__system_left-panel-open_primary--active: url('#{$icons-path}system/dark/left-panel-open.svg#primary--active'); - --icon__system_left-panel-open_primary--disabled: url('#{$icons-path}system/dark/left-panel-open.svg#primary--disabled'); - --icon__system_left-panel-open_error--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#error--enabled'); - --icon__system_left-panel-open_error-actionable--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#error-actionable--enabled'); - --icon__system_left-panel-open_error-actionable--hover: url('#{$icons-path}system/dark/left-panel-open.svg#error-actionable--hover'); - --icon__system_left-panel-open_error-actionable--active: url('#{$icons-path}system/dark/left-panel-open.svg#error-actionable--active'); - --icon__system_left-panel-open_error-actionable--disabled: url('#{$icons-path}system/dark/left-panel-open.svg#error-actionable--disabled'); - --icon__system_left-panel-open_warning--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#warning--enabled'); - --icon__system_left-panel-open_success--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#success--enabled'); - --icon__system_left-panel-open_neutral--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#neutral--enabled'); - --icon__system_left-panel-open_neutral--hover: url('#{$icons-path}system/dark/left-panel-open.svg#neutral--hover'); - --icon__system_left-panel-open_neutral--active: url('#{$icons-path}system/dark/left-panel-open.svg#neutral--active'); - --icon__system_left-panel-open_neutral--disabled: url('#{$icons-path}system/dark/left-panel-open.svg#neutral--disabled'); - --icon__system_left-panel-open_highlighted--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#highlighted--enabled'); - --icon__system_left-panel-open_bright--enabled: url('#{$icons-path}system/dark/left-panel-open.svg#bright--enabled'); - --icon__system_launch_on-surface--enabled: url('#{$icons-path}system/dark/launch.svg#on-surface--enabled'); - --icon__system_launch_on-surface--hover: url('#{$icons-path}system/dark/launch.svg#on-surface--hover'); - --icon__system_launch_on-surface--active: url('#{$icons-path}system/dark/launch.svg#on-surface--active'); - --icon__system_launch_on-surface--disabled: url('#{$icons-path}system/dark/launch.svg#on-surface--disabled'); - --icon__system_launch_on-primary--enabled: url('#{$icons-path}system/dark/launch.svg#on-primary--enabled'); - --icon__system_launch_on-primary--hover: url('#{$icons-path}system/dark/launch.svg#on-primary--hover'); - --icon__system_launch_on-primary--active: url('#{$icons-path}system/dark/launch.svg#on-primary--active'); - --icon__system_launch_on-primary--disabled: url('#{$icons-path}system/dark/launch.svg#on-primary--disabled'); - --icon__system_launch_on-disabled--enabled: url('#{$icons-path}system/dark/launch.svg#on-disabled--enabled'); - --icon__system_launch_on-message--enabled: url('#{$icons-path}system/dark/launch.svg#on-message--enabled'); - --icon__system_launch_on-elevation--enabled: url('#{$icons-path}system/dark/launch.svg#on-elevation--enabled'); - --icon__system_launch_primary--enabled: url('#{$icons-path}system/dark/launch.svg#primary--enabled'); - --icon__system_launch_primary--hover: url('#{$icons-path}system/dark/launch.svg#primary--hover'); - --icon__system_launch_primary--active: url('#{$icons-path}system/dark/launch.svg#primary--active'); - --icon__system_launch_primary--disabled: url('#{$icons-path}system/dark/launch.svg#primary--disabled'); - --icon__system_launch_error--enabled: url('#{$icons-path}system/dark/launch.svg#error--enabled'); - --icon__system_launch_error-actionable--enabled: url('#{$icons-path}system/dark/launch.svg#error-actionable--enabled'); - --icon__system_launch_error-actionable--hover: url('#{$icons-path}system/dark/launch.svg#error-actionable--hover'); - --icon__system_launch_error-actionable--active: url('#{$icons-path}system/dark/launch.svg#error-actionable--active'); - --icon__system_launch_error-actionable--disabled: url('#{$icons-path}system/dark/launch.svg#error-actionable--disabled'); - --icon__system_launch_warning--enabled: url('#{$icons-path}system/dark/launch.svg#warning--enabled'); - --icon__system_launch_success--enabled: url('#{$icons-path}system/dark/launch.svg#success--enabled'); - --icon__system_launch_neutral--enabled: url('#{$icons-path}system/dark/launch.svg#neutral--enabled'); - --icon__system_launch_neutral--hover: url('#{$icons-path}system/dark/launch.svg#neutral--hover'); - --icon__system_launch_neutral--active: url('#{$icons-path}system/dark/launch.svg#neutral--active'); - --icon__system_launch_neutral--disabled: url('#{$icons-path}system/dark/launch.svg#neutral--disabled'); - --icon__system_launch_highlighted--enabled: url('#{$icons-path}system/dark/launch.svg#highlighted--enabled'); - --icon__system_launch_bright--enabled: url('#{$icons-path}system/dark/launch.svg#bright--enabled'); - --icon__system_language_on-surface--enabled: url('#{$icons-path}system/dark/language.svg#on-surface--enabled'); - --icon__system_language_on-surface--hover: url('#{$icons-path}system/dark/language.svg#on-surface--hover'); - --icon__system_language_on-surface--active: url('#{$icons-path}system/dark/language.svg#on-surface--active'); - --icon__system_language_on-surface--disabled: url('#{$icons-path}system/dark/language.svg#on-surface--disabled'); - --icon__system_language_on-primary--enabled: url('#{$icons-path}system/dark/language.svg#on-primary--enabled'); - --icon__system_language_on-primary--hover: url('#{$icons-path}system/dark/language.svg#on-primary--hover'); - --icon__system_language_on-primary--active: url('#{$icons-path}system/dark/language.svg#on-primary--active'); - --icon__system_language_on-primary--disabled: url('#{$icons-path}system/dark/language.svg#on-primary--disabled'); - --icon__system_language_on-disabled--enabled: url('#{$icons-path}system/dark/language.svg#on-disabled--enabled'); - --icon__system_language_on-message--enabled: url('#{$icons-path}system/dark/language.svg#on-message--enabled'); - --icon__system_language_on-elevation--enabled: url('#{$icons-path}system/dark/language.svg#on-elevation--enabled'); - --icon__system_language_primary--enabled: url('#{$icons-path}system/dark/language.svg#primary--enabled'); - --icon__system_language_primary--hover: url('#{$icons-path}system/dark/language.svg#primary--hover'); - --icon__system_language_primary--active: url('#{$icons-path}system/dark/language.svg#primary--active'); - --icon__system_language_primary--disabled: url('#{$icons-path}system/dark/language.svg#primary--disabled'); - --icon__system_language_error--enabled: url('#{$icons-path}system/dark/language.svg#error--enabled'); - --icon__system_language_error-actionable--enabled: url('#{$icons-path}system/dark/language.svg#error-actionable--enabled'); - --icon__system_language_error-actionable--hover: url('#{$icons-path}system/dark/language.svg#error-actionable--hover'); - --icon__system_language_error-actionable--active: url('#{$icons-path}system/dark/language.svg#error-actionable--active'); - --icon__system_language_error-actionable--disabled: url('#{$icons-path}system/dark/language.svg#error-actionable--disabled'); - --icon__system_language_warning--enabled: url('#{$icons-path}system/dark/language.svg#warning--enabled'); - --icon__system_language_success--enabled: url('#{$icons-path}system/dark/language.svg#success--enabled'); - --icon__system_language_neutral--enabled: url('#{$icons-path}system/dark/language.svg#neutral--enabled'); - --icon__system_language_neutral--hover: url('#{$icons-path}system/dark/language.svg#neutral--hover'); - --icon__system_language_neutral--active: url('#{$icons-path}system/dark/language.svg#neutral--active'); - --icon__system_language_neutral--disabled: url('#{$icons-path}system/dark/language.svg#neutral--disabled'); - --icon__system_language_highlighted--enabled: url('#{$icons-path}system/dark/language.svg#highlighted--enabled'); - --icon__system_language_bright--enabled: url('#{$icons-path}system/dark/language.svg#bright--enabled'); - --icon__system_key_on-surface--enabled: url('#{$icons-path}system/dark/key.svg#on-surface--enabled'); - --icon__system_key_on-surface--hover: url('#{$icons-path}system/dark/key.svg#on-surface--hover'); - --icon__system_key_on-surface--active: url('#{$icons-path}system/dark/key.svg#on-surface--active'); - --icon__system_key_on-surface--disabled: url('#{$icons-path}system/dark/key.svg#on-surface--disabled'); - --icon__system_key_on-primary--enabled: url('#{$icons-path}system/dark/key.svg#on-primary--enabled'); - --icon__system_key_on-primary--hover: url('#{$icons-path}system/dark/key.svg#on-primary--hover'); - --icon__system_key_on-primary--active: url('#{$icons-path}system/dark/key.svg#on-primary--active'); - --icon__system_key_on-primary--disabled: url('#{$icons-path}system/dark/key.svg#on-primary--disabled'); - --icon__system_key_on-disabled--enabled: url('#{$icons-path}system/dark/key.svg#on-disabled--enabled'); - --icon__system_key_on-message--enabled: url('#{$icons-path}system/dark/key.svg#on-message--enabled'); - --icon__system_key_on-elevation--enabled: url('#{$icons-path}system/dark/key.svg#on-elevation--enabled'); - --icon__system_key_primary--enabled: url('#{$icons-path}system/dark/key.svg#primary--enabled'); - --icon__system_key_primary--hover: url('#{$icons-path}system/dark/key.svg#primary--hover'); - --icon__system_key_primary--active: url('#{$icons-path}system/dark/key.svg#primary--active'); - --icon__system_key_primary--disabled: url('#{$icons-path}system/dark/key.svg#primary--disabled'); - --icon__system_key_error--enabled: url('#{$icons-path}system/dark/key.svg#error--enabled'); - --icon__system_key_error-actionable--enabled: url('#{$icons-path}system/dark/key.svg#error-actionable--enabled'); - --icon__system_key_error-actionable--hover: url('#{$icons-path}system/dark/key.svg#error-actionable--hover'); - --icon__system_key_error-actionable--active: url('#{$icons-path}system/dark/key.svg#error-actionable--active'); - --icon__system_key_error-actionable--disabled: url('#{$icons-path}system/dark/key.svg#error-actionable--disabled'); - --icon__system_key_warning--enabled: url('#{$icons-path}system/dark/key.svg#warning--enabled'); - --icon__system_key_success--enabled: url('#{$icons-path}system/dark/key.svg#success--enabled'); - --icon__system_key_neutral--enabled: url('#{$icons-path}system/dark/key.svg#neutral--enabled'); - --icon__system_key_neutral--hover: url('#{$icons-path}system/dark/key.svg#neutral--hover'); - --icon__system_key_neutral--active: url('#{$icons-path}system/dark/key.svg#neutral--active'); - --icon__system_key_neutral--disabled: url('#{$icons-path}system/dark/key.svg#neutral--disabled'); - --icon__system_key_highlighted--enabled: url('#{$icons-path}system/dark/key.svg#highlighted--enabled'); - --icon__system_key_bright--enabled: url('#{$icons-path}system/dark/key.svg#bright--enabled'); - --icon__system_information_on-surface--enabled: url('#{$icons-path}system/dark/information.svg#on-surface--enabled'); - --icon__system_information_on-surface--hover: url('#{$icons-path}system/dark/information.svg#on-surface--hover'); - --icon__system_information_on-surface--active: url('#{$icons-path}system/dark/information.svg#on-surface--active'); - --icon__system_information_on-surface--disabled: url('#{$icons-path}system/dark/information.svg#on-surface--disabled'); - --icon__system_information_on-primary--enabled: url('#{$icons-path}system/dark/information.svg#on-primary--enabled'); - --icon__system_information_on-primary--hover: url('#{$icons-path}system/dark/information.svg#on-primary--hover'); - --icon__system_information_on-primary--active: url('#{$icons-path}system/dark/information.svg#on-primary--active'); - --icon__system_information_on-primary--disabled: url('#{$icons-path}system/dark/information.svg#on-primary--disabled'); - --icon__system_information_on-disabled--enabled: url('#{$icons-path}system/dark/information.svg#on-disabled--enabled'); - --icon__system_information_on-message--enabled: url('#{$icons-path}system/dark/information.svg#on-message--enabled'); - --icon__system_information_on-elevation--enabled: url('#{$icons-path}system/dark/information.svg#on-elevation--enabled'); - --icon__system_information_primary--enabled: url('#{$icons-path}system/dark/information.svg#primary--enabled'); - --icon__system_information_primary--hover: url('#{$icons-path}system/dark/information.svg#primary--hover'); - --icon__system_information_primary--active: url('#{$icons-path}system/dark/information.svg#primary--active'); - --icon__system_information_primary--disabled: url('#{$icons-path}system/dark/information.svg#primary--disabled'); - --icon__system_information_error--enabled: url('#{$icons-path}system/dark/information.svg#error--enabled'); - --icon__system_information_error-actionable--enabled: url('#{$icons-path}system/dark/information.svg#error-actionable--enabled'); - --icon__system_information_error-actionable--hover: url('#{$icons-path}system/dark/information.svg#error-actionable--hover'); - --icon__system_information_error-actionable--active: url('#{$icons-path}system/dark/information.svg#error-actionable--active'); - --icon__system_information_error-actionable--disabled: url('#{$icons-path}system/dark/information.svg#error-actionable--disabled'); - --icon__system_information_warning--enabled: url('#{$icons-path}system/dark/information.svg#warning--enabled'); - --icon__system_information_success--enabled: url('#{$icons-path}system/dark/information.svg#success--enabled'); - --icon__system_information_neutral--enabled: url('#{$icons-path}system/dark/information.svg#neutral--enabled'); - --icon__system_information_neutral--hover: url('#{$icons-path}system/dark/information.svg#neutral--hover'); - --icon__system_information_neutral--active: url('#{$icons-path}system/dark/information.svg#neutral--active'); - --icon__system_information_neutral--disabled: url('#{$icons-path}system/dark/information.svg#neutral--disabled'); - --icon__system_information_highlighted--enabled: url('#{$icons-path}system/dark/information.svg#highlighted--enabled'); - --icon__system_information_bright--enabled: url('#{$icons-path}system/dark/information.svg#bright--enabled'); - --icon__system_home_on-surface--enabled: url('#{$icons-path}system/dark/home.svg#on-surface--enabled'); - --icon__system_home_on-surface--hover: url('#{$icons-path}system/dark/home.svg#on-surface--hover'); - --icon__system_home_on-surface--active: url('#{$icons-path}system/dark/home.svg#on-surface--active'); - --icon__system_home_on-surface--disabled: url('#{$icons-path}system/dark/home.svg#on-surface--disabled'); - --icon__system_home_on-primary--enabled: url('#{$icons-path}system/dark/home.svg#on-primary--enabled'); - --icon__system_home_on-primary--hover: url('#{$icons-path}system/dark/home.svg#on-primary--hover'); - --icon__system_home_on-primary--active: url('#{$icons-path}system/dark/home.svg#on-primary--active'); - --icon__system_home_on-primary--disabled: url('#{$icons-path}system/dark/home.svg#on-primary--disabled'); - --icon__system_home_on-disabled--enabled: url('#{$icons-path}system/dark/home.svg#on-disabled--enabled'); - --icon__system_home_on-message--enabled: url('#{$icons-path}system/dark/home.svg#on-message--enabled'); - --icon__system_home_on-elevation--enabled: url('#{$icons-path}system/dark/home.svg#on-elevation--enabled'); - --icon__system_home_primary--enabled: url('#{$icons-path}system/dark/home.svg#primary--enabled'); - --icon__system_home_primary--hover: url('#{$icons-path}system/dark/home.svg#primary--hover'); - --icon__system_home_primary--active: url('#{$icons-path}system/dark/home.svg#primary--active'); - --icon__system_home_primary--disabled: url('#{$icons-path}system/dark/home.svg#primary--disabled'); - --icon__system_home_error--enabled: url('#{$icons-path}system/dark/home.svg#error--enabled'); - --icon__system_home_error-actionable--enabled: url('#{$icons-path}system/dark/home.svg#error-actionable--enabled'); - --icon__system_home_error-actionable--hover: url('#{$icons-path}system/dark/home.svg#error-actionable--hover'); - --icon__system_home_error-actionable--active: url('#{$icons-path}system/dark/home.svg#error-actionable--active'); - --icon__system_home_error-actionable--disabled: url('#{$icons-path}system/dark/home.svg#error-actionable--disabled'); - --icon__system_home_warning--enabled: url('#{$icons-path}system/dark/home.svg#warning--enabled'); - --icon__system_home_success--enabled: url('#{$icons-path}system/dark/home.svg#success--enabled'); - --icon__system_home_neutral--enabled: url('#{$icons-path}system/dark/home.svg#neutral--enabled'); - --icon__system_home_neutral--hover: url('#{$icons-path}system/dark/home.svg#neutral--hover'); - --icon__system_home_neutral--active: url('#{$icons-path}system/dark/home.svg#neutral--active'); - --icon__system_home_neutral--disabled: url('#{$icons-path}system/dark/home.svg#neutral--disabled'); - --icon__system_home_highlighted--enabled: url('#{$icons-path}system/dark/home.svg#highlighted--enabled'); - --icon__system_home_bright--enabled: url('#{$icons-path}system/dark/home.svg#bright--enabled'); - --icon__system_hide_on-surface--enabled: url('#{$icons-path}system/dark/hide.svg#on-surface--enabled'); - --icon__system_hide_on-surface--hover: url('#{$icons-path}system/dark/hide.svg#on-surface--hover'); - --icon__system_hide_on-surface--active: url('#{$icons-path}system/dark/hide.svg#on-surface--active'); - --icon__system_hide_on-surface--disabled: url('#{$icons-path}system/dark/hide.svg#on-surface--disabled'); - --icon__system_hide_on-primary--enabled: url('#{$icons-path}system/dark/hide.svg#on-primary--enabled'); - --icon__system_hide_on-primary--hover: url('#{$icons-path}system/dark/hide.svg#on-primary--hover'); - --icon__system_hide_on-primary--active: url('#{$icons-path}system/dark/hide.svg#on-primary--active'); - --icon__system_hide_on-primary--disabled: url('#{$icons-path}system/dark/hide.svg#on-primary--disabled'); - --icon__system_hide_on-disabled--enabled: url('#{$icons-path}system/dark/hide.svg#on-disabled--enabled'); - --icon__system_hide_on-message--enabled: url('#{$icons-path}system/dark/hide.svg#on-message--enabled'); - --icon__system_hide_on-elevation--enabled: url('#{$icons-path}system/dark/hide.svg#on-elevation--enabled'); - --icon__system_hide_primary--enabled: url('#{$icons-path}system/dark/hide.svg#primary--enabled'); - --icon__system_hide_primary--hover: url('#{$icons-path}system/dark/hide.svg#primary--hover'); - --icon__system_hide_primary--active: url('#{$icons-path}system/dark/hide.svg#primary--active'); - --icon__system_hide_primary--disabled: url('#{$icons-path}system/dark/hide.svg#primary--disabled'); - --icon__system_hide_error--enabled: url('#{$icons-path}system/dark/hide.svg#error--enabled'); - --icon__system_hide_error-actionable--enabled: url('#{$icons-path}system/dark/hide.svg#error-actionable--enabled'); - --icon__system_hide_error-actionable--hover: url('#{$icons-path}system/dark/hide.svg#error-actionable--hover'); - --icon__system_hide_error-actionable--active: url('#{$icons-path}system/dark/hide.svg#error-actionable--active'); - --icon__system_hide_error-actionable--disabled: url('#{$icons-path}system/dark/hide.svg#error-actionable--disabled'); - --icon__system_hide_warning--enabled: url('#{$icons-path}system/dark/hide.svg#warning--enabled'); - --icon__system_hide_success--enabled: url('#{$icons-path}system/dark/hide.svg#success--enabled'); - --icon__system_hide_neutral--enabled: url('#{$icons-path}system/dark/hide.svg#neutral--enabled'); - --icon__system_hide_neutral--hover: url('#{$icons-path}system/dark/hide.svg#neutral--hover'); - --icon__system_hide_neutral--active: url('#{$icons-path}system/dark/hide.svg#neutral--active'); - --icon__system_hide_neutral--disabled: url('#{$icons-path}system/dark/hide.svg#neutral--disabled'); - --icon__system_hide_highlighted--enabled: url('#{$icons-path}system/dark/hide.svg#highlighted--enabled'); - --icon__system_hide_bright--enabled: url('#{$icons-path}system/dark/hide.svg#bright--enabled'); - --icon__system_help_on-surface--enabled: url('#{$icons-path}system/dark/help.svg#on-surface--enabled'); - --icon__system_help_on-surface--hover: url('#{$icons-path}system/dark/help.svg#on-surface--hover'); - --icon__system_help_on-surface--active: url('#{$icons-path}system/dark/help.svg#on-surface--active'); - --icon__system_help_on-surface--disabled: url('#{$icons-path}system/dark/help.svg#on-surface--disabled'); - --icon__system_help_on-primary--enabled: url('#{$icons-path}system/dark/help.svg#on-primary--enabled'); - --icon__system_help_on-primary--hover: url('#{$icons-path}system/dark/help.svg#on-primary--hover'); - --icon__system_help_on-primary--active: url('#{$icons-path}system/dark/help.svg#on-primary--active'); - --icon__system_help_on-primary--disabled: url('#{$icons-path}system/dark/help.svg#on-primary--disabled'); - --icon__system_help_on-disabled--enabled: url('#{$icons-path}system/dark/help.svg#on-disabled--enabled'); - --icon__system_help_on-message--enabled: url('#{$icons-path}system/dark/help.svg#on-message--enabled'); - --icon__system_help_on-elevation--enabled: url('#{$icons-path}system/dark/help.svg#on-elevation--enabled'); - --icon__system_help_primary--enabled: url('#{$icons-path}system/dark/help.svg#primary--enabled'); - --icon__system_help_primary--hover: url('#{$icons-path}system/dark/help.svg#primary--hover'); - --icon__system_help_primary--active: url('#{$icons-path}system/dark/help.svg#primary--active'); - --icon__system_help_primary--disabled: url('#{$icons-path}system/dark/help.svg#primary--disabled'); - --icon__system_help_error--enabled: url('#{$icons-path}system/dark/help.svg#error--enabled'); - --icon__system_help_error-actionable--enabled: url('#{$icons-path}system/dark/help.svg#error-actionable--enabled'); - --icon__system_help_error-actionable--hover: url('#{$icons-path}system/dark/help.svg#error-actionable--hover'); - --icon__system_help_error-actionable--active: url('#{$icons-path}system/dark/help.svg#error-actionable--active'); - --icon__system_help_error-actionable--disabled: url('#{$icons-path}system/dark/help.svg#error-actionable--disabled'); - --icon__system_help_warning--enabled: url('#{$icons-path}system/dark/help.svg#warning--enabled'); - --icon__system_help_success--enabled: url('#{$icons-path}system/dark/help.svg#success--enabled'); - --icon__system_help_neutral--enabled: url('#{$icons-path}system/dark/help.svg#neutral--enabled'); - --icon__system_help_neutral--hover: url('#{$icons-path}system/dark/help.svg#neutral--hover'); - --icon__system_help_neutral--active: url('#{$icons-path}system/dark/help.svg#neutral--active'); - --icon__system_help_neutral--disabled: url('#{$icons-path}system/dark/help.svg#neutral--disabled'); - --icon__system_help_highlighted--enabled: url('#{$icons-path}system/dark/help.svg#highlighted--enabled'); - --icon__system_help_bright--enabled: url('#{$icons-path}system/dark/help.svg#bright--enabled'); - --icon__system_help-variant_on-surface--enabled: url('#{$icons-path}system/dark/help-variant.svg#on-surface--enabled'); - --icon__system_help-variant_on-surface--hover: url('#{$icons-path}system/dark/help-variant.svg#on-surface--hover'); - --icon__system_help-variant_on-surface--active: url('#{$icons-path}system/dark/help-variant.svg#on-surface--active'); - --icon__system_help-variant_on-surface--disabled: url('#{$icons-path}system/dark/help-variant.svg#on-surface--disabled'); - --icon__system_help-variant_on-primary--enabled: url('#{$icons-path}system/dark/help-variant.svg#on-primary--enabled'); - --icon__system_help-variant_on-primary--hover: url('#{$icons-path}system/dark/help-variant.svg#on-primary--hover'); - --icon__system_help-variant_on-primary--active: url('#{$icons-path}system/dark/help-variant.svg#on-primary--active'); - --icon__system_help-variant_on-primary--disabled: url('#{$icons-path}system/dark/help-variant.svg#on-primary--disabled'); - --icon__system_help-variant_on-disabled--enabled: url('#{$icons-path}system/dark/help-variant.svg#on-disabled--enabled'); - --icon__system_help-variant_on-message--enabled: url('#{$icons-path}system/dark/help-variant.svg#on-message--enabled'); - --icon__system_help-variant_on-elevation--enabled: url('#{$icons-path}system/dark/help-variant.svg#on-elevation--enabled'); - --icon__system_help-variant_primary--enabled: url('#{$icons-path}system/dark/help-variant.svg#primary--enabled'); - --icon__system_help-variant_primary--hover: url('#{$icons-path}system/dark/help-variant.svg#primary--hover'); - --icon__system_help-variant_primary--active: url('#{$icons-path}system/dark/help-variant.svg#primary--active'); - --icon__system_help-variant_primary--disabled: url('#{$icons-path}system/dark/help-variant.svg#primary--disabled'); - --icon__system_help-variant_error--enabled: url('#{$icons-path}system/dark/help-variant.svg#error--enabled'); - --icon__system_help-variant_error-actionable--enabled: url('#{$icons-path}system/dark/help-variant.svg#error-actionable--enabled'); - --icon__system_help-variant_error-actionable--hover: url('#{$icons-path}system/dark/help-variant.svg#error-actionable--hover'); - --icon__system_help-variant_error-actionable--active: url('#{$icons-path}system/dark/help-variant.svg#error-actionable--active'); - --icon__system_help-variant_error-actionable--disabled: url('#{$icons-path}system/dark/help-variant.svg#error-actionable--disabled'); - --icon__system_help-variant_warning--enabled: url('#{$icons-path}system/dark/help-variant.svg#warning--enabled'); - --icon__system_help-variant_success--enabled: url('#{$icons-path}system/dark/help-variant.svg#success--enabled'); - --icon__system_help-variant_neutral--enabled: url('#{$icons-path}system/dark/help-variant.svg#neutral--enabled'); - --icon__system_help-variant_neutral--hover: url('#{$icons-path}system/dark/help-variant.svg#neutral--hover'); - --icon__system_help-variant_neutral--active: url('#{$icons-path}system/dark/help-variant.svg#neutral--active'); - --icon__system_help-variant_neutral--disabled: url('#{$icons-path}system/dark/help-variant.svg#neutral--disabled'); - --icon__system_help-variant_highlighted--enabled: url('#{$icons-path}system/dark/help-variant.svg#highlighted--enabled'); - --icon__system_help-variant_bright--enabled: url('#{$icons-path}system/dark/help-variant.svg#bright--enabled'); - --icon__system_folder_on-surface--enabled: url('#{$icons-path}system/dark/folder.svg#on-surface--enabled'); - --icon__system_folder_on-surface--hover: url('#{$icons-path}system/dark/folder.svg#on-surface--hover'); - --icon__system_folder_on-surface--active: url('#{$icons-path}system/dark/folder.svg#on-surface--active'); - --icon__system_folder_on-surface--disabled: url('#{$icons-path}system/dark/folder.svg#on-surface--disabled'); - --icon__system_folder_on-primary--enabled: url('#{$icons-path}system/dark/folder.svg#on-primary--enabled'); - --icon__system_folder_on-primary--hover: url('#{$icons-path}system/dark/folder.svg#on-primary--hover'); - --icon__system_folder_on-primary--active: url('#{$icons-path}system/dark/folder.svg#on-primary--active'); - --icon__system_folder_on-primary--disabled: url('#{$icons-path}system/dark/folder.svg#on-primary--disabled'); - --icon__system_folder_on-disabled--enabled: url('#{$icons-path}system/dark/folder.svg#on-disabled--enabled'); - --icon__system_folder_on-message--enabled: url('#{$icons-path}system/dark/folder.svg#on-message--enabled'); - --icon__system_folder_on-elevation--enabled: url('#{$icons-path}system/dark/folder.svg#on-elevation--enabled'); - --icon__system_folder_primary--enabled: url('#{$icons-path}system/dark/folder.svg#primary--enabled'); - --icon__system_folder_primary--hover: url('#{$icons-path}system/dark/folder.svg#primary--hover'); - --icon__system_folder_primary--active: url('#{$icons-path}system/dark/folder.svg#primary--active'); - --icon__system_folder_primary--disabled: url('#{$icons-path}system/dark/folder.svg#primary--disabled'); - --icon__system_folder_error--enabled: url('#{$icons-path}system/dark/folder.svg#error--enabled'); - --icon__system_folder_error-actionable--enabled: url('#{$icons-path}system/dark/folder.svg#error-actionable--enabled'); - --icon__system_folder_error-actionable--hover: url('#{$icons-path}system/dark/folder.svg#error-actionable--hover'); - --icon__system_folder_error-actionable--active: url('#{$icons-path}system/dark/folder.svg#error-actionable--active'); - --icon__system_folder_error-actionable--disabled: url('#{$icons-path}system/dark/folder.svg#error-actionable--disabled'); - --icon__system_folder_warning--enabled: url('#{$icons-path}system/dark/folder.svg#warning--enabled'); - --icon__system_folder_success--enabled: url('#{$icons-path}system/dark/folder.svg#success--enabled'); - --icon__system_folder_neutral--enabled: url('#{$icons-path}system/dark/folder.svg#neutral--enabled'); - --icon__system_folder_neutral--hover: url('#{$icons-path}system/dark/folder.svg#neutral--hover'); - --icon__system_folder_neutral--active: url('#{$icons-path}system/dark/folder.svg#neutral--active'); - --icon__system_folder_neutral--disabled: url('#{$icons-path}system/dark/folder.svg#neutral--disabled'); - --icon__system_folder_highlighted--enabled: url('#{$icons-path}system/dark/folder.svg#highlighted--enabled'); - --icon__system_folder_bright--enabled: url('#{$icons-path}system/dark/folder.svg#bright--enabled'); - --icon__system_filters_on-surface--enabled: url('#{$icons-path}system/dark/filters.svg#on-surface--enabled'); - --icon__system_filters_on-surface--hover: url('#{$icons-path}system/dark/filters.svg#on-surface--hover'); - --icon__system_filters_on-surface--active: url('#{$icons-path}system/dark/filters.svg#on-surface--active'); - --icon__system_filters_on-surface--disabled: url('#{$icons-path}system/dark/filters.svg#on-surface--disabled'); - --icon__system_filters_on-primary--enabled: url('#{$icons-path}system/dark/filters.svg#on-primary--enabled'); - --icon__system_filters_on-primary--hover: url('#{$icons-path}system/dark/filters.svg#on-primary--hover'); - --icon__system_filters_on-primary--active: url('#{$icons-path}system/dark/filters.svg#on-primary--active'); - --icon__system_filters_on-primary--disabled: url('#{$icons-path}system/dark/filters.svg#on-primary--disabled'); - --icon__system_filters_on-disabled--enabled: url('#{$icons-path}system/dark/filters.svg#on-disabled--enabled'); - --icon__system_filters_on-message--enabled: url('#{$icons-path}system/dark/filters.svg#on-message--enabled'); - --icon__system_filters_on-elevation--enabled: url('#{$icons-path}system/dark/filters.svg#on-elevation--enabled'); - --icon__system_filters_primary--enabled: url('#{$icons-path}system/dark/filters.svg#primary--enabled'); - --icon__system_filters_primary--hover: url('#{$icons-path}system/dark/filters.svg#primary--hover'); - --icon__system_filters_primary--active: url('#{$icons-path}system/dark/filters.svg#primary--active'); - --icon__system_filters_primary--disabled: url('#{$icons-path}system/dark/filters.svg#primary--disabled'); - --icon__system_filters_error--enabled: url('#{$icons-path}system/dark/filters.svg#error--enabled'); - --icon__system_filters_error-actionable--enabled: url('#{$icons-path}system/dark/filters.svg#error-actionable--enabled'); - --icon__system_filters_error-actionable--hover: url('#{$icons-path}system/dark/filters.svg#error-actionable--hover'); - --icon__system_filters_error-actionable--active: url('#{$icons-path}system/dark/filters.svg#error-actionable--active'); - --icon__system_filters_error-actionable--disabled: url('#{$icons-path}system/dark/filters.svg#error-actionable--disabled'); - --icon__system_filters_warning--enabled: url('#{$icons-path}system/dark/filters.svg#warning--enabled'); - --icon__system_filters_success--enabled: url('#{$icons-path}system/dark/filters.svg#success--enabled'); - --icon__system_filters_neutral--enabled: url('#{$icons-path}system/dark/filters.svg#neutral--enabled'); - --icon__system_filters_neutral--hover: url('#{$icons-path}system/dark/filters.svg#neutral--hover'); - --icon__system_filters_neutral--active: url('#{$icons-path}system/dark/filters.svg#neutral--active'); - --icon__system_filters_neutral--disabled: url('#{$icons-path}system/dark/filters.svg#neutral--disabled'); - --icon__system_filters_highlighted--enabled: url('#{$icons-path}system/dark/filters.svg#highlighted--enabled'); - --icon__system_filters_bright--enabled: url('#{$icons-path}system/dark/filters.svg#bright--enabled'); - --icon__system_eyedropper_on-surface--enabled: url('#{$icons-path}system/dark/eyedropper.svg#on-surface--enabled'); - --icon__system_eyedropper_on-surface--hover: url('#{$icons-path}system/dark/eyedropper.svg#on-surface--hover'); - --icon__system_eyedropper_on-surface--active: url('#{$icons-path}system/dark/eyedropper.svg#on-surface--active'); - --icon__system_eyedropper_on-surface--disabled: url('#{$icons-path}system/dark/eyedropper.svg#on-surface--disabled'); - --icon__system_eyedropper_on-primary--enabled: url('#{$icons-path}system/dark/eyedropper.svg#on-primary--enabled'); - --icon__system_eyedropper_on-primary--hover: url('#{$icons-path}system/dark/eyedropper.svg#on-primary--hover'); - --icon__system_eyedropper_on-primary--active: url('#{$icons-path}system/dark/eyedropper.svg#on-primary--active'); - --icon__system_eyedropper_on-primary--disabled: url('#{$icons-path}system/dark/eyedropper.svg#on-primary--disabled'); - --icon__system_eyedropper_on-disabled--enabled: url('#{$icons-path}system/dark/eyedropper.svg#on-disabled--enabled'); - --icon__system_eyedropper_on-message--enabled: url('#{$icons-path}system/dark/eyedropper.svg#on-message--enabled'); - --icon__system_eyedropper_on-elevation--enabled: url('#{$icons-path}system/dark/eyedropper.svg#on-elevation--enabled'); - --icon__system_eyedropper_primary--enabled: url('#{$icons-path}system/dark/eyedropper.svg#primary--enabled'); - --icon__system_eyedropper_primary--hover: url('#{$icons-path}system/dark/eyedropper.svg#primary--hover'); - --icon__system_eyedropper_primary--active: url('#{$icons-path}system/dark/eyedropper.svg#primary--active'); - --icon__system_eyedropper_primary--disabled: url('#{$icons-path}system/dark/eyedropper.svg#primary--disabled'); - --icon__system_eyedropper_error--enabled: url('#{$icons-path}system/dark/eyedropper.svg#error--enabled'); - --icon__system_eyedropper_error-actionable--enabled: url('#{$icons-path}system/dark/eyedropper.svg#error-actionable--enabled'); - --icon__system_eyedropper_error-actionable--hover: url('#{$icons-path}system/dark/eyedropper.svg#error-actionable--hover'); - --icon__system_eyedropper_error-actionable--active: url('#{$icons-path}system/dark/eyedropper.svg#error-actionable--active'); - --icon__system_eyedropper_error-actionable--disabled: url('#{$icons-path}system/dark/eyedropper.svg#error-actionable--disabled'); - --icon__system_eyedropper_warning--enabled: url('#{$icons-path}system/dark/eyedropper.svg#warning--enabled'); - --icon__system_eyedropper_success--enabled: url('#{$icons-path}system/dark/eyedropper.svg#success--enabled'); - --icon__system_eyedropper_neutral--enabled: url('#{$icons-path}system/dark/eyedropper.svg#neutral--enabled'); - --icon__system_eyedropper_neutral--hover: url('#{$icons-path}system/dark/eyedropper.svg#neutral--hover'); - --icon__system_eyedropper_neutral--active: url('#{$icons-path}system/dark/eyedropper.svg#neutral--active'); - --icon__system_eyedropper_neutral--disabled: url('#{$icons-path}system/dark/eyedropper.svg#neutral--disabled'); - --icon__system_eyedropper_highlighted--enabled: url('#{$icons-path}system/dark/eyedropper.svg#highlighted--enabled'); - --icon__system_eyedropper_bright--enabled: url('#{$icons-path}system/dark/eyedropper.svg#bright--enabled'); - --icon__system_expand_on-surface--enabled: url('#{$icons-path}system/dark/expand.svg#on-surface--enabled'); - --icon__system_expand_on-surface--hover: url('#{$icons-path}system/dark/expand.svg#on-surface--hover'); - --icon__system_expand_on-surface--active: url('#{$icons-path}system/dark/expand.svg#on-surface--active'); - --icon__system_expand_on-surface--disabled: url('#{$icons-path}system/dark/expand.svg#on-surface--disabled'); - --icon__system_expand_on-primary--enabled: url('#{$icons-path}system/dark/expand.svg#on-primary--enabled'); - --icon__system_expand_on-primary--hover: url('#{$icons-path}system/dark/expand.svg#on-primary--hover'); - --icon__system_expand_on-primary--active: url('#{$icons-path}system/dark/expand.svg#on-primary--active'); - --icon__system_expand_on-primary--disabled: url('#{$icons-path}system/dark/expand.svg#on-primary--disabled'); - --icon__system_expand_on-disabled--enabled: url('#{$icons-path}system/dark/expand.svg#on-disabled--enabled'); - --icon__system_expand_on-message--enabled: url('#{$icons-path}system/dark/expand.svg#on-message--enabled'); - --icon__system_expand_on-elevation--enabled: url('#{$icons-path}system/dark/expand.svg#on-elevation--enabled'); - --icon__system_expand_primary--enabled: url('#{$icons-path}system/dark/expand.svg#primary--enabled'); - --icon__system_expand_primary--hover: url('#{$icons-path}system/dark/expand.svg#primary--hover'); - --icon__system_expand_primary--active: url('#{$icons-path}system/dark/expand.svg#primary--active'); - --icon__system_expand_primary--disabled: url('#{$icons-path}system/dark/expand.svg#primary--disabled'); - --icon__system_expand_error--enabled: url('#{$icons-path}system/dark/expand.svg#error--enabled'); - --icon__system_expand_error-actionable--enabled: url('#{$icons-path}system/dark/expand.svg#error-actionable--enabled'); - --icon__system_expand_error-actionable--hover: url('#{$icons-path}system/dark/expand.svg#error-actionable--hover'); - --icon__system_expand_error-actionable--active: url('#{$icons-path}system/dark/expand.svg#error-actionable--active'); - --icon__system_expand_error-actionable--disabled: url('#{$icons-path}system/dark/expand.svg#error-actionable--disabled'); - --icon__system_expand_warning--enabled: url('#{$icons-path}system/dark/expand.svg#warning--enabled'); - --icon__system_expand_success--enabled: url('#{$icons-path}system/dark/expand.svg#success--enabled'); - --icon__system_expand_neutral--enabled: url('#{$icons-path}system/dark/expand.svg#neutral--enabled'); - --icon__system_expand_neutral--hover: url('#{$icons-path}system/dark/expand.svg#neutral--hover'); - --icon__system_expand_neutral--active: url('#{$icons-path}system/dark/expand.svg#neutral--active'); - --icon__system_expand_neutral--disabled: url('#{$icons-path}system/dark/expand.svg#neutral--disabled'); - --icon__system_expand_highlighted--enabled: url('#{$icons-path}system/dark/expand.svg#highlighted--enabled'); - --icon__system_expand_bright--enabled: url('#{$icons-path}system/dark/expand.svg#bright--enabled'); - --icon__system_expand-content_on-surface--enabled: url('#{$icons-path}system/dark/expand-content.svg#on-surface--enabled'); - --icon__system_expand-content_on-surface--hover: url('#{$icons-path}system/dark/expand-content.svg#on-surface--hover'); - --icon__system_expand-content_on-surface--active: url('#{$icons-path}system/dark/expand-content.svg#on-surface--active'); - --icon__system_expand-content_on-surface--disabled: url('#{$icons-path}system/dark/expand-content.svg#on-surface--disabled'); - --icon__system_expand-content_on-primary--enabled: url('#{$icons-path}system/dark/expand-content.svg#on-primary--enabled'); - --icon__system_expand-content_on-primary--hover: url('#{$icons-path}system/dark/expand-content.svg#on-primary--hover'); - --icon__system_expand-content_on-primary--active: url('#{$icons-path}system/dark/expand-content.svg#on-primary--active'); - --icon__system_expand-content_on-primary--disabled: url('#{$icons-path}system/dark/expand-content.svg#on-primary--disabled'); - --icon__system_expand-content_on-disabled--enabled: url('#{$icons-path}system/dark/expand-content.svg#on-disabled--enabled'); - --icon__system_expand-content_on-message--enabled: url('#{$icons-path}system/dark/expand-content.svg#on-message--enabled'); - --icon__system_expand-content_on-elevation--enabled: url('#{$icons-path}system/dark/expand-content.svg#on-elevation--enabled'); - --icon__system_expand-content_primary--enabled: url('#{$icons-path}system/dark/expand-content.svg#primary--enabled'); - --icon__system_expand-content_primary--hover: url('#{$icons-path}system/dark/expand-content.svg#primary--hover'); - --icon__system_expand-content_primary--active: url('#{$icons-path}system/dark/expand-content.svg#primary--active'); - --icon__system_expand-content_primary--disabled: url('#{$icons-path}system/dark/expand-content.svg#primary--disabled'); - --icon__system_expand-content_error--enabled: url('#{$icons-path}system/dark/expand-content.svg#error--enabled'); - --icon__system_expand-content_error-actionable--enabled: url('#{$icons-path}system/dark/expand-content.svg#error-actionable--enabled'); - --icon__system_expand-content_error-actionable--hover: url('#{$icons-path}system/dark/expand-content.svg#error-actionable--hover'); - --icon__system_expand-content_error-actionable--active: url('#{$icons-path}system/dark/expand-content.svg#error-actionable--active'); - --icon__system_expand-content_error-actionable--disabled: url('#{$icons-path}system/dark/expand-content.svg#error-actionable--disabled'); - --icon__system_expand-content_warning--enabled: url('#{$icons-path}system/dark/expand-content.svg#warning--enabled'); - --icon__system_expand-content_success--enabled: url('#{$icons-path}system/dark/expand-content.svg#success--enabled'); - --icon__system_expand-content_neutral--enabled: url('#{$icons-path}system/dark/expand-content.svg#neutral--enabled'); - --icon__system_expand-content_neutral--hover: url('#{$icons-path}system/dark/expand-content.svg#neutral--hover'); - --icon__system_expand-content_neutral--active: url('#{$icons-path}system/dark/expand-content.svg#neutral--active'); - --icon__system_expand-content_neutral--disabled: url('#{$icons-path}system/dark/expand-content.svg#neutral--disabled'); - --icon__system_expand-content_highlighted--enabled: url('#{$icons-path}system/dark/expand-content.svg#highlighted--enabled'); - --icon__system_expand-content_bright--enabled: url('#{$icons-path}system/dark/expand-content.svg#bright--enabled'); - --icon__system_error_on-surface--enabled: url('#{$icons-path}system/dark/error.svg#on-surface--enabled'); - --icon__system_error_on-surface--hover: url('#{$icons-path}system/dark/error.svg#on-surface--hover'); - --icon__system_error_on-surface--active: url('#{$icons-path}system/dark/error.svg#on-surface--active'); - --icon__system_error_on-surface--disabled: url('#{$icons-path}system/dark/error.svg#on-surface--disabled'); - --icon__system_error_on-primary--enabled: url('#{$icons-path}system/dark/error.svg#on-primary--enabled'); - --icon__system_error_on-primary--hover: url('#{$icons-path}system/dark/error.svg#on-primary--hover'); - --icon__system_error_on-primary--active: url('#{$icons-path}system/dark/error.svg#on-primary--active'); - --icon__system_error_on-primary--disabled: url('#{$icons-path}system/dark/error.svg#on-primary--disabled'); - --icon__system_error_on-disabled--enabled: url('#{$icons-path}system/dark/error.svg#on-disabled--enabled'); - --icon__system_error_on-message--enabled: url('#{$icons-path}system/dark/error.svg#on-message--enabled'); - --icon__system_error_on-elevation--enabled: url('#{$icons-path}system/dark/error.svg#on-elevation--enabled'); - --icon__system_error_primary--enabled: url('#{$icons-path}system/dark/error.svg#primary--enabled'); - --icon__system_error_primary--hover: url('#{$icons-path}system/dark/error.svg#primary--hover'); - --icon__system_error_primary--active: url('#{$icons-path}system/dark/error.svg#primary--active'); - --icon__system_error_primary--disabled: url('#{$icons-path}system/dark/error.svg#primary--disabled'); - --icon__system_error_error--enabled: url('#{$icons-path}system/dark/error.svg#error--enabled'); - --icon__system_error_error-actionable--enabled: url('#{$icons-path}system/dark/error.svg#error-actionable--enabled'); - --icon__system_error_error-actionable--hover: url('#{$icons-path}system/dark/error.svg#error-actionable--hover'); - --icon__system_error_error-actionable--active: url('#{$icons-path}system/dark/error.svg#error-actionable--active'); - --icon__system_error_error-actionable--disabled: url('#{$icons-path}system/dark/error.svg#error-actionable--disabled'); - --icon__system_error_warning--enabled: url('#{$icons-path}system/dark/error.svg#warning--enabled'); - --icon__system_error_success--enabled: url('#{$icons-path}system/dark/error.svg#success--enabled'); - --icon__system_error_neutral--enabled: url('#{$icons-path}system/dark/error.svg#neutral--enabled'); - --icon__system_error_neutral--hover: url('#{$icons-path}system/dark/error.svg#neutral--hover'); - --icon__system_error_neutral--active: url('#{$icons-path}system/dark/error.svg#neutral--active'); - --icon__system_error_neutral--disabled: url('#{$icons-path}system/dark/error.svg#neutral--disabled'); - --icon__system_error_highlighted--enabled: url('#{$icons-path}system/dark/error.svg#highlighted--enabled'); - --icon__system_error_bright--enabled: url('#{$icons-path}system/dark/error.svg#bright--enabled'); - --icon__system_edit_on-surface--enabled: url('#{$icons-path}system/dark/edit.svg#on-surface--enabled'); - --icon__system_edit_on-surface--hover: url('#{$icons-path}system/dark/edit.svg#on-surface--hover'); - --icon__system_edit_on-surface--active: url('#{$icons-path}system/dark/edit.svg#on-surface--active'); - --icon__system_edit_on-surface--disabled: url('#{$icons-path}system/dark/edit.svg#on-surface--disabled'); - --icon__system_edit_on-primary--enabled: url('#{$icons-path}system/dark/edit.svg#on-primary--enabled'); - --icon__system_edit_on-primary--hover: url('#{$icons-path}system/dark/edit.svg#on-primary--hover'); - --icon__system_edit_on-primary--active: url('#{$icons-path}system/dark/edit.svg#on-primary--active'); - --icon__system_edit_on-primary--disabled: url('#{$icons-path}system/dark/edit.svg#on-primary--disabled'); - --icon__system_edit_on-disabled--enabled: url('#{$icons-path}system/dark/edit.svg#on-disabled--enabled'); - --icon__system_edit_on-message--enabled: url('#{$icons-path}system/dark/edit.svg#on-message--enabled'); - --icon__system_edit_on-elevation--enabled: url('#{$icons-path}system/dark/edit.svg#on-elevation--enabled'); - --icon__system_edit_primary--enabled: url('#{$icons-path}system/dark/edit.svg#primary--enabled'); - --icon__system_edit_primary--hover: url('#{$icons-path}system/dark/edit.svg#primary--hover'); - --icon__system_edit_primary--active: url('#{$icons-path}system/dark/edit.svg#primary--active'); - --icon__system_edit_primary--disabled: url('#{$icons-path}system/dark/edit.svg#primary--disabled'); - --icon__system_edit_error--enabled: url('#{$icons-path}system/dark/edit.svg#error--enabled'); - --icon__system_edit_error-actionable--enabled: url('#{$icons-path}system/dark/edit.svg#error-actionable--enabled'); - --icon__system_edit_error-actionable--hover: url('#{$icons-path}system/dark/edit.svg#error-actionable--hover'); - --icon__system_edit_error-actionable--active: url('#{$icons-path}system/dark/edit.svg#error-actionable--active'); - --icon__system_edit_error-actionable--disabled: url('#{$icons-path}system/dark/edit.svg#error-actionable--disabled'); - --icon__system_edit_warning--enabled: url('#{$icons-path}system/dark/edit.svg#warning--enabled'); - --icon__system_edit_success--enabled: url('#{$icons-path}system/dark/edit.svg#success--enabled'); - --icon__system_edit_neutral--enabled: url('#{$icons-path}system/dark/edit.svg#neutral--enabled'); - --icon__system_edit_neutral--hover: url('#{$icons-path}system/dark/edit.svg#neutral--hover'); - --icon__system_edit_neutral--active: url('#{$icons-path}system/dark/edit.svg#neutral--active'); - --icon__system_edit_neutral--disabled: url('#{$icons-path}system/dark/edit.svg#neutral--disabled'); - --icon__system_edit_highlighted--enabled: url('#{$icons-path}system/dark/edit.svg#highlighted--enabled'); - --icon__system_edit_bright--enabled: url('#{$icons-path}system/dark/edit.svg#bright--enabled'); - --icon__system_drag_on-surface--enabled: url('#{$icons-path}system/dark/drag.svg#on-surface--enabled'); - --icon__system_drag_on-surface--hover: url('#{$icons-path}system/dark/drag.svg#on-surface--hover'); - --icon__system_drag_on-surface--active: url('#{$icons-path}system/dark/drag.svg#on-surface--active'); - --icon__system_drag_on-surface--disabled: url('#{$icons-path}system/dark/drag.svg#on-surface--disabled'); - --icon__system_drag_on-primary--enabled: url('#{$icons-path}system/dark/drag.svg#on-primary--enabled'); - --icon__system_drag_on-primary--hover: url('#{$icons-path}system/dark/drag.svg#on-primary--hover'); - --icon__system_drag_on-primary--active: url('#{$icons-path}system/dark/drag.svg#on-primary--active'); - --icon__system_drag_on-primary--disabled: url('#{$icons-path}system/dark/drag.svg#on-primary--disabled'); - --icon__system_drag_on-disabled--enabled: url('#{$icons-path}system/dark/drag.svg#on-disabled--enabled'); - --icon__system_drag_on-message--enabled: url('#{$icons-path}system/dark/drag.svg#on-message--enabled'); - --icon__system_drag_on-elevation--enabled: url('#{$icons-path}system/dark/drag.svg#on-elevation--enabled'); - --icon__system_drag_primary--enabled: url('#{$icons-path}system/dark/drag.svg#primary--enabled'); - --icon__system_drag_primary--hover: url('#{$icons-path}system/dark/drag.svg#primary--hover'); - --icon__system_drag_primary--active: url('#{$icons-path}system/dark/drag.svg#primary--active'); - --icon__system_drag_primary--disabled: url('#{$icons-path}system/dark/drag.svg#primary--disabled'); - --icon__system_drag_error--enabled: url('#{$icons-path}system/dark/drag.svg#error--enabled'); - --icon__system_drag_error-actionable--enabled: url('#{$icons-path}system/dark/drag.svg#error-actionable--enabled'); - --icon__system_drag_error-actionable--hover: url('#{$icons-path}system/dark/drag.svg#error-actionable--hover'); - --icon__system_drag_error-actionable--active: url('#{$icons-path}system/dark/drag.svg#error-actionable--active'); - --icon__system_drag_error-actionable--disabled: url('#{$icons-path}system/dark/drag.svg#error-actionable--disabled'); - --icon__system_drag_warning--enabled: url('#{$icons-path}system/dark/drag.svg#warning--enabled'); - --icon__system_drag_success--enabled: url('#{$icons-path}system/dark/drag.svg#success--enabled'); - --icon__system_drag_neutral--enabled: url('#{$icons-path}system/dark/drag.svg#neutral--enabled'); - --icon__system_drag_neutral--hover: url('#{$icons-path}system/dark/drag.svg#neutral--hover'); - --icon__system_drag_neutral--active: url('#{$icons-path}system/dark/drag.svg#neutral--active'); - --icon__system_drag_neutral--disabled: url('#{$icons-path}system/dark/drag.svg#neutral--disabled'); - --icon__system_drag_highlighted--enabled: url('#{$icons-path}system/dark/drag.svg#highlighted--enabled'); - --icon__system_drag_bright--enabled: url('#{$icons-path}system/dark/drag.svg#bright--enabled'); - --icon__system_download_on-surface--enabled: url('#{$icons-path}system/dark/download.svg#on-surface--enabled'); - --icon__system_download_on-surface--hover: url('#{$icons-path}system/dark/download.svg#on-surface--hover'); - --icon__system_download_on-surface--active: url('#{$icons-path}system/dark/download.svg#on-surface--active'); - --icon__system_download_on-surface--disabled: url('#{$icons-path}system/dark/download.svg#on-surface--disabled'); - --icon__system_download_on-primary--enabled: url('#{$icons-path}system/dark/download.svg#on-primary--enabled'); - --icon__system_download_on-primary--hover: url('#{$icons-path}system/dark/download.svg#on-primary--hover'); - --icon__system_download_on-primary--active: url('#{$icons-path}system/dark/download.svg#on-primary--active'); - --icon__system_download_on-primary--disabled: url('#{$icons-path}system/dark/download.svg#on-primary--disabled'); - --icon__system_download_on-disabled--enabled: url('#{$icons-path}system/dark/download.svg#on-disabled--enabled'); - --icon__system_download_on-message--enabled: url('#{$icons-path}system/dark/download.svg#on-message--enabled'); - --icon__system_download_on-elevation--enabled: url('#{$icons-path}system/dark/download.svg#on-elevation--enabled'); - --icon__system_download_primary--enabled: url('#{$icons-path}system/dark/download.svg#primary--enabled'); - --icon__system_download_primary--hover: url('#{$icons-path}system/dark/download.svg#primary--hover'); - --icon__system_download_primary--active: url('#{$icons-path}system/dark/download.svg#primary--active'); - --icon__system_download_primary--disabled: url('#{$icons-path}system/dark/download.svg#primary--disabled'); - --icon__system_download_error--enabled: url('#{$icons-path}system/dark/download.svg#error--enabled'); - --icon__system_download_error-actionable--enabled: url('#{$icons-path}system/dark/download.svg#error-actionable--enabled'); - --icon__system_download_error-actionable--hover: url('#{$icons-path}system/dark/download.svg#error-actionable--hover'); - --icon__system_download_error-actionable--active: url('#{$icons-path}system/dark/download.svg#error-actionable--active'); - --icon__system_download_error-actionable--disabled: url('#{$icons-path}system/dark/download.svg#error-actionable--disabled'); - --icon__system_download_warning--enabled: url('#{$icons-path}system/dark/download.svg#warning--enabled'); - --icon__system_download_success--enabled: url('#{$icons-path}system/dark/download.svg#success--enabled'); - --icon__system_download_neutral--enabled: url('#{$icons-path}system/dark/download.svg#neutral--enabled'); - --icon__system_download_neutral--hover: url('#{$icons-path}system/dark/download.svg#neutral--hover'); - --icon__system_download_neutral--active: url('#{$icons-path}system/dark/download.svg#neutral--active'); - --icon__system_download_neutral--disabled: url('#{$icons-path}system/dark/download.svg#neutral--disabled'); - --icon__system_download_highlighted--enabled: url('#{$icons-path}system/dark/download.svg#highlighted--enabled'); - --icon__system_download_bright--enabled: url('#{$icons-path}system/dark/download.svg#bright--enabled'); - --icon__system_double-chevron-right_on-surface--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#on-surface--enabled'); - --icon__system_double-chevron-right_on-surface--hover: url('#{$icons-path}system/dark/double-chevron-right.svg#on-surface--hover'); - --icon__system_double-chevron-right_on-surface--active: url('#{$icons-path}system/dark/double-chevron-right.svg#on-surface--active'); - --icon__system_double-chevron-right_on-surface--disabled: url('#{$icons-path}system/dark/double-chevron-right.svg#on-surface--disabled'); - --icon__system_double-chevron-right_on-primary--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#on-primary--enabled'); - --icon__system_double-chevron-right_on-primary--hover: url('#{$icons-path}system/dark/double-chevron-right.svg#on-primary--hover'); - --icon__system_double-chevron-right_on-primary--active: url('#{$icons-path}system/dark/double-chevron-right.svg#on-primary--active'); - --icon__system_double-chevron-right_on-primary--disabled: url('#{$icons-path}system/dark/double-chevron-right.svg#on-primary--disabled'); - --icon__system_double-chevron-right_on-disabled--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#on-disabled--enabled'); - --icon__system_double-chevron-right_on-message--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#on-message--enabled'); - --icon__system_double-chevron-right_on-elevation--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#on-elevation--enabled'); - --icon__system_double-chevron-right_primary--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#primary--enabled'); - --icon__system_double-chevron-right_primary--hover: url('#{$icons-path}system/dark/double-chevron-right.svg#primary--hover'); - --icon__system_double-chevron-right_primary--active: url('#{$icons-path}system/dark/double-chevron-right.svg#primary--active'); - --icon__system_double-chevron-right_primary--disabled: url('#{$icons-path}system/dark/double-chevron-right.svg#primary--disabled'); - --icon__system_double-chevron-right_error--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#error--enabled'); - --icon__system_double-chevron-right_error-actionable--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#error-actionable--enabled'); - --icon__system_double-chevron-right_error-actionable--hover: url('#{$icons-path}system/dark/double-chevron-right.svg#error-actionable--hover'); - --icon__system_double-chevron-right_error-actionable--active: url('#{$icons-path}system/dark/double-chevron-right.svg#error-actionable--active'); - --icon__system_double-chevron-right_error-actionable--disabled: url('#{$icons-path}system/dark/double-chevron-right.svg#error-actionable--disabled'); - --icon__system_double-chevron-right_warning--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#warning--enabled'); - --icon__system_double-chevron-right_success--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#success--enabled'); - --icon__system_double-chevron-right_neutral--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#neutral--enabled'); - --icon__system_double-chevron-right_neutral--hover: url('#{$icons-path}system/dark/double-chevron-right.svg#neutral--hover'); - --icon__system_double-chevron-right_neutral--active: url('#{$icons-path}system/dark/double-chevron-right.svg#neutral--active'); - --icon__system_double-chevron-right_neutral--disabled: url('#{$icons-path}system/dark/double-chevron-right.svg#neutral--disabled'); - --icon__system_double-chevron-right_highlighted--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#highlighted--enabled'); - --icon__system_double-chevron-right_bright--enabled: url('#{$icons-path}system/dark/double-chevron-right.svg#bright--enabled'); - --icon__system_double-chevron-left_on-surface--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#on-surface--enabled'); - --icon__system_double-chevron-left_on-surface--hover: url('#{$icons-path}system/dark/double-chevron-left.svg#on-surface--hover'); - --icon__system_double-chevron-left_on-surface--active: url('#{$icons-path}system/dark/double-chevron-left.svg#on-surface--active'); - --icon__system_double-chevron-left_on-surface--disabled: url('#{$icons-path}system/dark/double-chevron-left.svg#on-surface--disabled'); - --icon__system_double-chevron-left_on-primary--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#on-primary--enabled'); - --icon__system_double-chevron-left_on-primary--hover: url('#{$icons-path}system/dark/double-chevron-left.svg#on-primary--hover'); - --icon__system_double-chevron-left_on-primary--active: url('#{$icons-path}system/dark/double-chevron-left.svg#on-primary--active'); - --icon__system_double-chevron-left_on-primary--disabled: url('#{$icons-path}system/dark/double-chevron-left.svg#on-primary--disabled'); - --icon__system_double-chevron-left_on-disabled--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#on-disabled--enabled'); - --icon__system_double-chevron-left_on-message--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#on-message--enabled'); - --icon__system_double-chevron-left_on-elevation--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#on-elevation--enabled'); - --icon__system_double-chevron-left_primary--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#primary--enabled'); - --icon__system_double-chevron-left_primary--hover: url('#{$icons-path}system/dark/double-chevron-left.svg#primary--hover'); - --icon__system_double-chevron-left_primary--active: url('#{$icons-path}system/dark/double-chevron-left.svg#primary--active'); - --icon__system_double-chevron-left_primary--disabled: url('#{$icons-path}system/dark/double-chevron-left.svg#primary--disabled'); - --icon__system_double-chevron-left_error--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#error--enabled'); - --icon__system_double-chevron-left_error-actionable--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#error-actionable--enabled'); - --icon__system_double-chevron-left_error-actionable--hover: url('#{$icons-path}system/dark/double-chevron-left.svg#error-actionable--hover'); - --icon__system_double-chevron-left_error-actionable--active: url('#{$icons-path}system/dark/double-chevron-left.svg#error-actionable--active'); - --icon__system_double-chevron-left_error-actionable--disabled: url('#{$icons-path}system/dark/double-chevron-left.svg#error-actionable--disabled'); - --icon__system_double-chevron-left_warning--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#warning--enabled'); - --icon__system_double-chevron-left_success--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#success--enabled'); - --icon__system_double-chevron-left_neutral--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#neutral--enabled'); - --icon__system_double-chevron-left_neutral--hover: url('#{$icons-path}system/dark/double-chevron-left.svg#neutral--hover'); - --icon__system_double-chevron-left_neutral--active: url('#{$icons-path}system/dark/double-chevron-left.svg#neutral--active'); - --icon__system_double-chevron-left_neutral--disabled: url('#{$icons-path}system/dark/double-chevron-left.svg#neutral--disabled'); - --icon__system_double-chevron-left_highlighted--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#highlighted--enabled'); - --icon__system_double-chevron-left_bright--enabled: url('#{$icons-path}system/dark/double-chevron-left.svg#bright--enabled'); - --icon__system_detail_on-surface--enabled: url('#{$icons-path}system/dark/detail.svg#on-surface--enabled'); - --icon__system_detail_on-surface--hover: url('#{$icons-path}system/dark/detail.svg#on-surface--hover'); - --icon__system_detail_on-surface--active: url('#{$icons-path}system/dark/detail.svg#on-surface--active'); - --icon__system_detail_on-surface--disabled: url('#{$icons-path}system/dark/detail.svg#on-surface--disabled'); - --icon__system_detail_on-primary--enabled: url('#{$icons-path}system/dark/detail.svg#on-primary--enabled'); - --icon__system_detail_on-primary--hover: url('#{$icons-path}system/dark/detail.svg#on-primary--hover'); - --icon__system_detail_on-primary--active: url('#{$icons-path}system/dark/detail.svg#on-primary--active'); - --icon__system_detail_on-primary--disabled: url('#{$icons-path}system/dark/detail.svg#on-primary--disabled'); - --icon__system_detail_on-disabled--enabled: url('#{$icons-path}system/dark/detail.svg#on-disabled--enabled'); - --icon__system_detail_on-message--enabled: url('#{$icons-path}system/dark/detail.svg#on-message--enabled'); - --icon__system_detail_on-elevation--enabled: url('#{$icons-path}system/dark/detail.svg#on-elevation--enabled'); - --icon__system_detail_primary--enabled: url('#{$icons-path}system/dark/detail.svg#primary--enabled'); - --icon__system_detail_primary--hover: url('#{$icons-path}system/dark/detail.svg#primary--hover'); - --icon__system_detail_primary--active: url('#{$icons-path}system/dark/detail.svg#primary--active'); - --icon__system_detail_primary--disabled: url('#{$icons-path}system/dark/detail.svg#primary--disabled'); - --icon__system_detail_error--enabled: url('#{$icons-path}system/dark/detail.svg#error--enabled'); - --icon__system_detail_error-actionable--enabled: url('#{$icons-path}system/dark/detail.svg#error-actionable--enabled'); - --icon__system_detail_error-actionable--hover: url('#{$icons-path}system/dark/detail.svg#error-actionable--hover'); - --icon__system_detail_error-actionable--active: url('#{$icons-path}system/dark/detail.svg#error-actionable--active'); - --icon__system_detail_error-actionable--disabled: url('#{$icons-path}system/dark/detail.svg#error-actionable--disabled'); - --icon__system_detail_warning--enabled: url('#{$icons-path}system/dark/detail.svg#warning--enabled'); - --icon__system_detail_success--enabled: url('#{$icons-path}system/dark/detail.svg#success--enabled'); - --icon__system_detail_neutral--enabled: url('#{$icons-path}system/dark/detail.svg#neutral--enabled'); - --icon__system_detail_neutral--hover: url('#{$icons-path}system/dark/detail.svg#neutral--hover'); - --icon__system_detail_neutral--active: url('#{$icons-path}system/dark/detail.svg#neutral--active'); - --icon__system_detail_neutral--disabled: url('#{$icons-path}system/dark/detail.svg#neutral--disabled'); - --icon__system_detail_highlighted--enabled: url('#{$icons-path}system/dark/detail.svg#highlighted--enabled'); - --icon__system_detail_bright--enabled: url('#{$icons-path}system/dark/detail.svg#bright--enabled'); - --icon__system_delete-outlined_on-surface--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#on-surface--enabled'); - --icon__system_delete-outlined_on-surface--hover: url('#{$icons-path}system/dark/delete-outlined.svg#on-surface--hover'); - --icon__system_delete-outlined_on-surface--active: url('#{$icons-path}system/dark/delete-outlined.svg#on-surface--active'); - --icon__system_delete-outlined_on-surface--disabled: url('#{$icons-path}system/dark/delete-outlined.svg#on-surface--disabled'); - --icon__system_delete-outlined_on-primary--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#on-primary--enabled'); - --icon__system_delete-outlined_on-primary--hover: url('#{$icons-path}system/dark/delete-outlined.svg#on-primary--hover'); - --icon__system_delete-outlined_on-primary--active: url('#{$icons-path}system/dark/delete-outlined.svg#on-primary--active'); - --icon__system_delete-outlined_on-primary--disabled: url('#{$icons-path}system/dark/delete-outlined.svg#on-primary--disabled'); - --icon__system_delete-outlined_on-disabled--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#on-disabled--enabled'); - --icon__system_delete-outlined_on-message--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#on-message--enabled'); - --icon__system_delete-outlined_on-elevation--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#on-elevation--enabled'); - --icon__system_delete-outlined_primary--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#primary--enabled'); - --icon__system_delete-outlined_primary--hover: url('#{$icons-path}system/dark/delete-outlined.svg#primary--hover'); - --icon__system_delete-outlined_primary--active: url('#{$icons-path}system/dark/delete-outlined.svg#primary--active'); - --icon__system_delete-outlined_primary--disabled: url('#{$icons-path}system/dark/delete-outlined.svg#primary--disabled'); - --icon__system_delete-outlined_error--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#error--enabled'); - --icon__system_delete-outlined_error-actionable--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#error-actionable--enabled'); - --icon__system_delete-outlined_error-actionable--hover: url('#{$icons-path}system/dark/delete-outlined.svg#error-actionable--hover'); - --icon__system_delete-outlined_error-actionable--active: url('#{$icons-path}system/dark/delete-outlined.svg#error-actionable--active'); - --icon__system_delete-outlined_error-actionable--disabled: url('#{$icons-path}system/dark/delete-outlined.svg#error-actionable--disabled'); - --icon__system_delete-outlined_warning--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#warning--enabled'); - --icon__system_delete-outlined_success--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#success--enabled'); - --icon__system_delete-outlined_neutral--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#neutral--enabled'); - --icon__system_delete-outlined_neutral--hover: url('#{$icons-path}system/dark/delete-outlined.svg#neutral--hover'); - --icon__system_delete-outlined_neutral--active: url('#{$icons-path}system/dark/delete-outlined.svg#neutral--active'); - --icon__system_delete-outlined_neutral--disabled: url('#{$icons-path}system/dark/delete-outlined.svg#neutral--disabled'); - --icon__system_delete-outlined_highlighted--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#highlighted--enabled'); - --icon__system_delete-outlined_bright--enabled: url('#{$icons-path}system/dark/delete-outlined.svg#bright--enabled'); - --icon__system_database_on-surface--enabled: url('#{$icons-path}system/dark/database.svg#on-surface--enabled'); - --icon__system_database_on-surface--hover: url('#{$icons-path}system/dark/database.svg#on-surface--hover'); - --icon__system_database_on-surface--active: url('#{$icons-path}system/dark/database.svg#on-surface--active'); - --icon__system_database_on-surface--disabled: url('#{$icons-path}system/dark/database.svg#on-surface--disabled'); - --icon__system_database_on-primary--enabled: url('#{$icons-path}system/dark/database.svg#on-primary--enabled'); - --icon__system_database_on-primary--hover: url('#{$icons-path}system/dark/database.svg#on-primary--hover'); - --icon__system_database_on-primary--active: url('#{$icons-path}system/dark/database.svg#on-primary--active'); - --icon__system_database_on-primary--disabled: url('#{$icons-path}system/dark/database.svg#on-primary--disabled'); - --icon__system_database_on-disabled--enabled: url('#{$icons-path}system/dark/database.svg#on-disabled--enabled'); - --icon__system_database_on-message--enabled: url('#{$icons-path}system/dark/database.svg#on-message--enabled'); - --icon__system_database_on-elevation--enabled: url('#{$icons-path}system/dark/database.svg#on-elevation--enabled'); - --icon__system_database_primary--enabled: url('#{$icons-path}system/dark/database.svg#primary--enabled'); - --icon__system_database_primary--hover: url('#{$icons-path}system/dark/database.svg#primary--hover'); - --icon__system_database_primary--active: url('#{$icons-path}system/dark/database.svg#primary--active'); - --icon__system_database_primary--disabled: url('#{$icons-path}system/dark/database.svg#primary--disabled'); - --icon__system_database_error--enabled: url('#{$icons-path}system/dark/database.svg#error--enabled'); - --icon__system_database_error-actionable--enabled: url('#{$icons-path}system/dark/database.svg#error-actionable--enabled'); - --icon__system_database_error-actionable--hover: url('#{$icons-path}system/dark/database.svg#error-actionable--hover'); - --icon__system_database_error-actionable--active: url('#{$icons-path}system/dark/database.svg#error-actionable--active'); - --icon__system_database_error-actionable--disabled: url('#{$icons-path}system/dark/database.svg#error-actionable--disabled'); - --icon__system_database_warning--enabled: url('#{$icons-path}system/dark/database.svg#warning--enabled'); - --icon__system_database_success--enabled: url('#{$icons-path}system/dark/database.svg#success--enabled'); - --icon__system_database_neutral--enabled: url('#{$icons-path}system/dark/database.svg#neutral--enabled'); - --icon__system_database_neutral--hover: url('#{$icons-path}system/dark/database.svg#neutral--hover'); - --icon__system_database_neutral--active: url('#{$icons-path}system/dark/database.svg#neutral--active'); - --icon__system_database_neutral--disabled: url('#{$icons-path}system/dark/database.svg#neutral--disabled'); - --icon__system_database_highlighted--enabled: url('#{$icons-path}system/dark/database.svg#highlighted--enabled'); - --icon__system_database_bright--enabled: url('#{$icons-path}system/dark/database.svg#bright--enabled'); - --icon__system_data-modeling_on-surface--enabled: url('#{$icons-path}system/dark/data-modeling.svg#on-surface--enabled'); - --icon__system_data-modeling_on-surface--hover: url('#{$icons-path}system/dark/data-modeling.svg#on-surface--hover'); - --icon__system_data-modeling_on-surface--active: url('#{$icons-path}system/dark/data-modeling.svg#on-surface--active'); - --icon__system_data-modeling_on-surface--disabled: url('#{$icons-path}system/dark/data-modeling.svg#on-surface--disabled'); - --icon__system_data-modeling_on-primary--enabled: url('#{$icons-path}system/dark/data-modeling.svg#on-primary--enabled'); - --icon__system_data-modeling_on-primary--hover: url('#{$icons-path}system/dark/data-modeling.svg#on-primary--hover'); - --icon__system_data-modeling_on-primary--active: url('#{$icons-path}system/dark/data-modeling.svg#on-primary--active'); - --icon__system_data-modeling_on-primary--disabled: url('#{$icons-path}system/dark/data-modeling.svg#on-primary--disabled'); - --icon__system_data-modeling_on-disabled--enabled: url('#{$icons-path}system/dark/data-modeling.svg#on-disabled--enabled'); - --icon__system_data-modeling_on-message--enabled: url('#{$icons-path}system/dark/data-modeling.svg#on-message--enabled'); - --icon__system_data-modeling_on-elevation--enabled: url('#{$icons-path}system/dark/data-modeling.svg#on-elevation--enabled'); - --icon__system_data-modeling_primary--enabled: url('#{$icons-path}system/dark/data-modeling.svg#primary--enabled'); - --icon__system_data-modeling_primary--hover: url('#{$icons-path}system/dark/data-modeling.svg#primary--hover'); - --icon__system_data-modeling_primary--active: url('#{$icons-path}system/dark/data-modeling.svg#primary--active'); - --icon__system_data-modeling_primary--disabled: url('#{$icons-path}system/dark/data-modeling.svg#primary--disabled'); - --icon__system_data-modeling_error--enabled: url('#{$icons-path}system/dark/data-modeling.svg#error--enabled'); - --icon__system_data-modeling_error-actionable--enabled: url('#{$icons-path}system/dark/data-modeling.svg#error-actionable--enabled'); - --icon__system_data-modeling_error-actionable--hover: url('#{$icons-path}system/dark/data-modeling.svg#error-actionable--hover'); - --icon__system_data-modeling_error-actionable--active: url('#{$icons-path}system/dark/data-modeling.svg#error-actionable--active'); - --icon__system_data-modeling_error-actionable--disabled: url('#{$icons-path}system/dark/data-modeling.svg#error-actionable--disabled'); - --icon__system_data-modeling_warning--enabled: url('#{$icons-path}system/dark/data-modeling.svg#warning--enabled'); - --icon__system_data-modeling_success--enabled: url('#{$icons-path}system/dark/data-modeling.svg#success--enabled'); - --icon__system_data-modeling_neutral--enabled: url('#{$icons-path}system/dark/data-modeling.svg#neutral--enabled'); - --icon__system_data-modeling_neutral--hover: url('#{$icons-path}system/dark/data-modeling.svg#neutral--hover'); - --icon__system_data-modeling_neutral--active: url('#{$icons-path}system/dark/data-modeling.svg#neutral--active'); - --icon__system_data-modeling_neutral--disabled: url('#{$icons-path}system/dark/data-modeling.svg#neutral--disabled'); - --icon__system_data-modeling_highlighted--enabled: url('#{$icons-path}system/dark/data-modeling.svg#highlighted--enabled'); - --icon__system_data-modeling_bright--enabled: url('#{$icons-path}system/dark/data-modeling.svg#bright--enabled'); - --icon__system_dashboard_on-surface--enabled: url('#{$icons-path}system/dark/dashboard.svg#on-surface--enabled'); - --icon__system_dashboard_on-surface--hover: url('#{$icons-path}system/dark/dashboard.svg#on-surface--hover'); - --icon__system_dashboard_on-surface--active: url('#{$icons-path}system/dark/dashboard.svg#on-surface--active'); - --icon__system_dashboard_on-surface--disabled: url('#{$icons-path}system/dark/dashboard.svg#on-surface--disabled'); - --icon__system_dashboard_on-primary--enabled: url('#{$icons-path}system/dark/dashboard.svg#on-primary--enabled'); - --icon__system_dashboard_on-primary--hover: url('#{$icons-path}system/dark/dashboard.svg#on-primary--hover'); - --icon__system_dashboard_on-primary--active: url('#{$icons-path}system/dark/dashboard.svg#on-primary--active'); - --icon__system_dashboard_on-primary--disabled: url('#{$icons-path}system/dark/dashboard.svg#on-primary--disabled'); - --icon__system_dashboard_on-disabled--enabled: url('#{$icons-path}system/dark/dashboard.svg#on-disabled--enabled'); - --icon__system_dashboard_on-message--enabled: url('#{$icons-path}system/dark/dashboard.svg#on-message--enabled'); - --icon__system_dashboard_on-elevation--enabled: url('#{$icons-path}system/dark/dashboard.svg#on-elevation--enabled'); - --icon__system_dashboard_primary--enabled: url('#{$icons-path}system/dark/dashboard.svg#primary--enabled'); - --icon__system_dashboard_primary--hover: url('#{$icons-path}system/dark/dashboard.svg#primary--hover'); - --icon__system_dashboard_primary--active: url('#{$icons-path}system/dark/dashboard.svg#primary--active'); - --icon__system_dashboard_primary--disabled: url('#{$icons-path}system/dark/dashboard.svg#primary--disabled'); - --icon__system_dashboard_error--enabled: url('#{$icons-path}system/dark/dashboard.svg#error--enabled'); - --icon__system_dashboard_error-actionable--enabled: url('#{$icons-path}system/dark/dashboard.svg#error-actionable--enabled'); - --icon__system_dashboard_error-actionable--hover: url('#{$icons-path}system/dark/dashboard.svg#error-actionable--hover'); - --icon__system_dashboard_error-actionable--active: url('#{$icons-path}system/dark/dashboard.svg#error-actionable--active'); - --icon__system_dashboard_error-actionable--disabled: url('#{$icons-path}system/dark/dashboard.svg#error-actionable--disabled'); - --icon__system_dashboard_warning--enabled: url('#{$icons-path}system/dark/dashboard.svg#warning--enabled'); - --icon__system_dashboard_success--enabled: url('#{$icons-path}system/dark/dashboard.svg#success--enabled'); - --icon__system_dashboard_neutral--enabled: url('#{$icons-path}system/dark/dashboard.svg#neutral--enabled'); - --icon__system_dashboard_neutral--hover: url('#{$icons-path}system/dark/dashboard.svg#neutral--hover'); - --icon__system_dashboard_neutral--active: url('#{$icons-path}system/dark/dashboard.svg#neutral--active'); - --icon__system_dashboard_neutral--disabled: url('#{$icons-path}system/dark/dashboard.svg#neutral--disabled'); - --icon__system_dashboard_highlighted--enabled: url('#{$icons-path}system/dark/dashboard.svg#highlighted--enabled'); - --icon__system_dashboard_bright--enabled: url('#{$icons-path}system/dark/dashboard.svg#bright--enabled'); - --icon__system_cut_on-surface--enabled: url('#{$icons-path}system/dark/cut.svg#on-surface--enabled'); - --icon__system_cut_on-surface--hover: url('#{$icons-path}system/dark/cut.svg#on-surface--hover'); - --icon__system_cut_on-surface--active: url('#{$icons-path}system/dark/cut.svg#on-surface--active'); - --icon__system_cut_on-surface--disabled: url('#{$icons-path}system/dark/cut.svg#on-surface--disabled'); - --icon__system_cut_on-primary--enabled: url('#{$icons-path}system/dark/cut.svg#on-primary--enabled'); - --icon__system_cut_on-primary--hover: url('#{$icons-path}system/dark/cut.svg#on-primary--hover'); - --icon__system_cut_on-primary--active: url('#{$icons-path}system/dark/cut.svg#on-primary--active'); - --icon__system_cut_on-primary--disabled: url('#{$icons-path}system/dark/cut.svg#on-primary--disabled'); - --icon__system_cut_on-disabled--enabled: url('#{$icons-path}system/dark/cut.svg#on-disabled--enabled'); - --icon__system_cut_on-message--enabled: url('#{$icons-path}system/dark/cut.svg#on-message--enabled'); - --icon__system_cut_on-elevation--enabled: url('#{$icons-path}system/dark/cut.svg#on-elevation--enabled'); - --icon__system_cut_primary--enabled: url('#{$icons-path}system/dark/cut.svg#primary--enabled'); - --icon__system_cut_primary--hover: url('#{$icons-path}system/dark/cut.svg#primary--hover'); - --icon__system_cut_primary--active: url('#{$icons-path}system/dark/cut.svg#primary--active'); - --icon__system_cut_primary--disabled: url('#{$icons-path}system/dark/cut.svg#primary--disabled'); - --icon__system_cut_error--enabled: url('#{$icons-path}system/dark/cut.svg#error--enabled'); - --icon__system_cut_error-actionable--enabled: url('#{$icons-path}system/dark/cut.svg#error-actionable--enabled'); - --icon__system_cut_error-actionable--hover: url('#{$icons-path}system/dark/cut.svg#error-actionable--hover'); - --icon__system_cut_error-actionable--active: url('#{$icons-path}system/dark/cut.svg#error-actionable--active'); - --icon__system_cut_error-actionable--disabled: url('#{$icons-path}system/dark/cut.svg#error-actionable--disabled'); - --icon__system_cut_warning--enabled: url('#{$icons-path}system/dark/cut.svg#warning--enabled'); - --icon__system_cut_success--enabled: url('#{$icons-path}system/dark/cut.svg#success--enabled'); - --icon__system_cut_neutral--enabled: url('#{$icons-path}system/dark/cut.svg#neutral--enabled'); - --icon__system_cut_neutral--hover: url('#{$icons-path}system/dark/cut.svg#neutral--hover'); - --icon__system_cut_neutral--active: url('#{$icons-path}system/dark/cut.svg#neutral--active'); - --icon__system_cut_neutral--disabled: url('#{$icons-path}system/dark/cut.svg#neutral--disabled'); - --icon__system_cut_highlighted--enabled: url('#{$icons-path}system/dark/cut.svg#highlighted--enabled'); - --icon__system_cut_bright--enabled: url('#{$icons-path}system/dark/cut.svg#bright--enabled'); - --icon__system_copy_on-surface--enabled: url('#{$icons-path}system/dark/copy.svg#on-surface--enabled'); - --icon__system_copy_on-surface--hover: url('#{$icons-path}system/dark/copy.svg#on-surface--hover'); - --icon__system_copy_on-surface--active: url('#{$icons-path}system/dark/copy.svg#on-surface--active'); - --icon__system_copy_on-surface--disabled: url('#{$icons-path}system/dark/copy.svg#on-surface--disabled'); - --icon__system_copy_on-primary--enabled: url('#{$icons-path}system/dark/copy.svg#on-primary--enabled'); - --icon__system_copy_on-primary--hover: url('#{$icons-path}system/dark/copy.svg#on-primary--hover'); - --icon__system_copy_on-primary--active: url('#{$icons-path}system/dark/copy.svg#on-primary--active'); - --icon__system_copy_on-primary--disabled: url('#{$icons-path}system/dark/copy.svg#on-primary--disabled'); - --icon__system_copy_on-disabled--enabled: url('#{$icons-path}system/dark/copy.svg#on-disabled--enabled'); - --icon__system_copy_on-message--enabled: url('#{$icons-path}system/dark/copy.svg#on-message--enabled'); - --icon__system_copy_on-elevation--enabled: url('#{$icons-path}system/dark/copy.svg#on-elevation--enabled'); - --icon__system_copy_primary--enabled: url('#{$icons-path}system/dark/copy.svg#primary--enabled'); - --icon__system_copy_primary--hover: url('#{$icons-path}system/dark/copy.svg#primary--hover'); - --icon__system_copy_primary--active: url('#{$icons-path}system/dark/copy.svg#primary--active'); - --icon__system_copy_primary--disabled: url('#{$icons-path}system/dark/copy.svg#primary--disabled'); - --icon__system_copy_error--enabled: url('#{$icons-path}system/dark/copy.svg#error--enabled'); - --icon__system_copy_error-actionable--enabled: url('#{$icons-path}system/dark/copy.svg#error-actionable--enabled'); - --icon__system_copy_error-actionable--hover: url('#{$icons-path}system/dark/copy.svg#error-actionable--hover'); - --icon__system_copy_error-actionable--active: url('#{$icons-path}system/dark/copy.svg#error-actionable--active'); - --icon__system_copy_error-actionable--disabled: url('#{$icons-path}system/dark/copy.svg#error-actionable--disabled'); - --icon__system_copy_warning--enabled: url('#{$icons-path}system/dark/copy.svg#warning--enabled'); - --icon__system_copy_success--enabled: url('#{$icons-path}system/dark/copy.svg#success--enabled'); - --icon__system_copy_neutral--enabled: url('#{$icons-path}system/dark/copy.svg#neutral--enabled'); - --icon__system_copy_neutral--hover: url('#{$icons-path}system/dark/copy.svg#neutral--hover'); - --icon__system_copy_neutral--active: url('#{$icons-path}system/dark/copy.svg#neutral--active'); - --icon__system_copy_neutral--disabled: url('#{$icons-path}system/dark/copy.svg#neutral--disabled'); - --icon__system_copy_highlighted--enabled: url('#{$icons-path}system/dark/copy.svg#highlighted--enabled'); - --icon__system_copy_bright--enabled: url('#{$icons-path}system/dark/copy.svg#bright--enabled'); - --icon__system_contact_on-surface--enabled: url('#{$icons-path}system/dark/contact.svg#on-surface--enabled'); - --icon__system_contact_on-surface--hover: url('#{$icons-path}system/dark/contact.svg#on-surface--hover'); - --icon__system_contact_on-surface--active: url('#{$icons-path}system/dark/contact.svg#on-surface--active'); - --icon__system_contact_on-surface--disabled: url('#{$icons-path}system/dark/contact.svg#on-surface--disabled'); - --icon__system_contact_on-primary--enabled: url('#{$icons-path}system/dark/contact.svg#on-primary--enabled'); - --icon__system_contact_on-primary--hover: url('#{$icons-path}system/dark/contact.svg#on-primary--hover'); - --icon__system_contact_on-primary--active: url('#{$icons-path}system/dark/contact.svg#on-primary--active'); - --icon__system_contact_on-primary--disabled: url('#{$icons-path}system/dark/contact.svg#on-primary--disabled'); - --icon__system_contact_on-disabled--enabled: url('#{$icons-path}system/dark/contact.svg#on-disabled--enabled'); - --icon__system_contact_on-message--enabled: url('#{$icons-path}system/dark/contact.svg#on-message--enabled'); - --icon__system_contact_on-elevation--enabled: url('#{$icons-path}system/dark/contact.svg#on-elevation--enabled'); - --icon__system_contact_primary--enabled: url('#{$icons-path}system/dark/contact.svg#primary--enabled'); - --icon__system_contact_primary--hover: url('#{$icons-path}system/dark/contact.svg#primary--hover'); - --icon__system_contact_primary--active: url('#{$icons-path}system/dark/contact.svg#primary--active'); - --icon__system_contact_primary--disabled: url('#{$icons-path}system/dark/contact.svg#primary--disabled'); - --icon__system_contact_error--enabled: url('#{$icons-path}system/dark/contact.svg#error--enabled'); - --icon__system_contact_error-actionable--enabled: url('#{$icons-path}system/dark/contact.svg#error-actionable--enabled'); - --icon__system_contact_error-actionable--hover: url('#{$icons-path}system/dark/contact.svg#error-actionable--hover'); - --icon__system_contact_error-actionable--active: url('#{$icons-path}system/dark/contact.svg#error-actionable--active'); - --icon__system_contact_error-actionable--disabled: url('#{$icons-path}system/dark/contact.svg#error-actionable--disabled'); - --icon__system_contact_warning--enabled: url('#{$icons-path}system/dark/contact.svg#warning--enabled'); - --icon__system_contact_success--enabled: url('#{$icons-path}system/dark/contact.svg#success--enabled'); - --icon__system_contact_neutral--enabled: url('#{$icons-path}system/dark/contact.svg#neutral--enabled'); - --icon__system_contact_neutral--hover: url('#{$icons-path}system/dark/contact.svg#neutral--hover'); - --icon__system_contact_neutral--active: url('#{$icons-path}system/dark/contact.svg#neutral--active'); - --icon__system_contact_neutral--disabled: url('#{$icons-path}system/dark/contact.svg#neutral--disabled'); - --icon__system_contact_highlighted--enabled: url('#{$icons-path}system/dark/contact.svg#highlighted--enabled'); - --icon__system_contact_bright--enabled: url('#{$icons-path}system/dark/contact.svg#bright--enabled'); - --icon__system_computer_on-surface--enabled: url('#{$icons-path}system/dark/computer.svg#on-surface--enabled'); - --icon__system_computer_on-surface--hover: url('#{$icons-path}system/dark/computer.svg#on-surface--hover'); - --icon__system_computer_on-surface--active: url('#{$icons-path}system/dark/computer.svg#on-surface--active'); - --icon__system_computer_on-surface--disabled: url('#{$icons-path}system/dark/computer.svg#on-surface--disabled'); - --icon__system_computer_on-primary--enabled: url('#{$icons-path}system/dark/computer.svg#on-primary--enabled'); - --icon__system_computer_on-primary--hover: url('#{$icons-path}system/dark/computer.svg#on-primary--hover'); - --icon__system_computer_on-primary--active: url('#{$icons-path}system/dark/computer.svg#on-primary--active'); - --icon__system_computer_on-primary--disabled: url('#{$icons-path}system/dark/computer.svg#on-primary--disabled'); - --icon__system_computer_on-disabled--enabled: url('#{$icons-path}system/dark/computer.svg#on-disabled--enabled'); - --icon__system_computer_on-message--enabled: url('#{$icons-path}system/dark/computer.svg#on-message--enabled'); - --icon__system_computer_on-elevation--enabled: url('#{$icons-path}system/dark/computer.svg#on-elevation--enabled'); - --icon__system_computer_primary--enabled: url('#{$icons-path}system/dark/computer.svg#primary--enabled'); - --icon__system_computer_primary--hover: url('#{$icons-path}system/dark/computer.svg#primary--hover'); - --icon__system_computer_primary--active: url('#{$icons-path}system/dark/computer.svg#primary--active'); - --icon__system_computer_primary--disabled: url('#{$icons-path}system/dark/computer.svg#primary--disabled'); - --icon__system_computer_error--enabled: url('#{$icons-path}system/dark/computer.svg#error--enabled'); - --icon__system_computer_error-actionable--enabled: url('#{$icons-path}system/dark/computer.svg#error-actionable--enabled'); - --icon__system_computer_error-actionable--hover: url('#{$icons-path}system/dark/computer.svg#error-actionable--hover'); - --icon__system_computer_error-actionable--active: url('#{$icons-path}system/dark/computer.svg#error-actionable--active'); - --icon__system_computer_error-actionable--disabled: url('#{$icons-path}system/dark/computer.svg#error-actionable--disabled'); - --icon__system_computer_warning--enabled: url('#{$icons-path}system/dark/computer.svg#warning--enabled'); - --icon__system_computer_success--enabled: url('#{$icons-path}system/dark/computer.svg#success--enabled'); - --icon__system_computer_neutral--enabled: url('#{$icons-path}system/dark/computer.svg#neutral--enabled'); - --icon__system_computer_neutral--hover: url('#{$icons-path}system/dark/computer.svg#neutral--hover'); - --icon__system_computer_neutral--active: url('#{$icons-path}system/dark/computer.svg#neutral--active'); - --icon__system_computer_neutral--disabled: url('#{$icons-path}system/dark/computer.svg#neutral--disabled'); - --icon__system_computer_highlighted--enabled: url('#{$icons-path}system/dark/computer.svg#highlighted--enabled'); - --icon__system_computer_bright--enabled: url('#{$icons-path}system/dark/computer.svg#bright--enabled'); - --icon__system_company_on-surface--enabled: url('#{$icons-path}system/dark/company.svg#on-surface--enabled'); - --icon__system_company_on-surface--hover: url('#{$icons-path}system/dark/company.svg#on-surface--hover'); - --icon__system_company_on-surface--active: url('#{$icons-path}system/dark/company.svg#on-surface--active'); - --icon__system_company_on-surface--disabled: url('#{$icons-path}system/dark/company.svg#on-surface--disabled'); - --icon__system_company_on-primary--enabled: url('#{$icons-path}system/dark/company.svg#on-primary--enabled'); - --icon__system_company_on-primary--hover: url('#{$icons-path}system/dark/company.svg#on-primary--hover'); - --icon__system_company_on-primary--active: url('#{$icons-path}system/dark/company.svg#on-primary--active'); - --icon__system_company_on-primary--disabled: url('#{$icons-path}system/dark/company.svg#on-primary--disabled'); - --icon__system_company_on-disabled--enabled: url('#{$icons-path}system/dark/company.svg#on-disabled--enabled'); - --icon__system_company_on-message--enabled: url('#{$icons-path}system/dark/company.svg#on-message--enabled'); - --icon__system_company_on-elevation--enabled: url('#{$icons-path}system/dark/company.svg#on-elevation--enabled'); - --icon__system_company_primary--enabled: url('#{$icons-path}system/dark/company.svg#primary--enabled'); - --icon__system_company_primary--hover: url('#{$icons-path}system/dark/company.svg#primary--hover'); - --icon__system_company_primary--active: url('#{$icons-path}system/dark/company.svg#primary--active'); - --icon__system_company_primary--disabled: url('#{$icons-path}system/dark/company.svg#primary--disabled'); - --icon__system_company_error--enabled: url('#{$icons-path}system/dark/company.svg#error--enabled'); - --icon__system_company_error-actionable--enabled: url('#{$icons-path}system/dark/company.svg#error-actionable--enabled'); - --icon__system_company_error-actionable--hover: url('#{$icons-path}system/dark/company.svg#error-actionable--hover'); - --icon__system_company_error-actionable--active: url('#{$icons-path}system/dark/company.svg#error-actionable--active'); - --icon__system_company_error-actionable--disabled: url('#{$icons-path}system/dark/company.svg#error-actionable--disabled'); - --icon__system_company_warning--enabled: url('#{$icons-path}system/dark/company.svg#warning--enabled'); - --icon__system_company_success--enabled: url('#{$icons-path}system/dark/company.svg#success--enabled'); - --icon__system_company_neutral--enabled: url('#{$icons-path}system/dark/company.svg#neutral--enabled'); - --icon__system_company_neutral--hover: url('#{$icons-path}system/dark/company.svg#neutral--hover'); - --icon__system_company_neutral--active: url('#{$icons-path}system/dark/company.svg#neutral--active'); - --icon__system_company_neutral--disabled: url('#{$icons-path}system/dark/company.svg#neutral--disabled'); - --icon__system_company_highlighted--enabled: url('#{$icons-path}system/dark/company.svg#highlighted--enabled'); - --icon__system_company_bright--enabled: url('#{$icons-path}system/dark/company.svg#bright--enabled'); - --icon__system_collapse-content_on-surface--enabled: url('#{$icons-path}system/dark/collapse-content.svg#on-surface--enabled'); - --icon__system_collapse-content_on-surface--hover: url('#{$icons-path}system/dark/collapse-content.svg#on-surface--hover'); - --icon__system_collapse-content_on-surface--active: url('#{$icons-path}system/dark/collapse-content.svg#on-surface--active'); - --icon__system_collapse-content_on-surface--disabled: url('#{$icons-path}system/dark/collapse-content.svg#on-surface--disabled'); - --icon__system_collapse-content_on-primary--enabled: url('#{$icons-path}system/dark/collapse-content.svg#on-primary--enabled'); - --icon__system_collapse-content_on-primary--hover: url('#{$icons-path}system/dark/collapse-content.svg#on-primary--hover'); - --icon__system_collapse-content_on-primary--active: url('#{$icons-path}system/dark/collapse-content.svg#on-primary--active'); - --icon__system_collapse-content_on-primary--disabled: url('#{$icons-path}system/dark/collapse-content.svg#on-primary--disabled'); - --icon__system_collapse-content_on-disabled--enabled: url('#{$icons-path}system/dark/collapse-content.svg#on-disabled--enabled'); - --icon__system_collapse-content_on-message--enabled: url('#{$icons-path}system/dark/collapse-content.svg#on-message--enabled'); - --icon__system_collapse-content_on-elevation--enabled: url('#{$icons-path}system/dark/collapse-content.svg#on-elevation--enabled'); - --icon__system_collapse-content_primary--enabled: url('#{$icons-path}system/dark/collapse-content.svg#primary--enabled'); - --icon__system_collapse-content_primary--hover: url('#{$icons-path}system/dark/collapse-content.svg#primary--hover'); - --icon__system_collapse-content_primary--active: url('#{$icons-path}system/dark/collapse-content.svg#primary--active'); - --icon__system_collapse-content_primary--disabled: url('#{$icons-path}system/dark/collapse-content.svg#primary--disabled'); - --icon__system_collapse-content_error--enabled: url('#{$icons-path}system/dark/collapse-content.svg#error--enabled'); - --icon__system_collapse-content_error-actionable--enabled: url('#{$icons-path}system/dark/collapse-content.svg#error-actionable--enabled'); - --icon__system_collapse-content_error-actionable--hover: url('#{$icons-path}system/dark/collapse-content.svg#error-actionable--hover'); - --icon__system_collapse-content_error-actionable--active: url('#{$icons-path}system/dark/collapse-content.svg#error-actionable--active'); - --icon__system_collapse-content_error-actionable--disabled: url('#{$icons-path}system/dark/collapse-content.svg#error-actionable--disabled'); - --icon__system_collapse-content_warning--enabled: url('#{$icons-path}system/dark/collapse-content.svg#warning--enabled'); - --icon__system_collapse-content_success--enabled: url('#{$icons-path}system/dark/collapse-content.svg#success--enabled'); - --icon__system_collapse-content_neutral--enabled: url('#{$icons-path}system/dark/collapse-content.svg#neutral--enabled'); - --icon__system_collapse-content_neutral--hover: url('#{$icons-path}system/dark/collapse-content.svg#neutral--hover'); - --icon__system_collapse-content_neutral--active: url('#{$icons-path}system/dark/collapse-content.svg#neutral--active'); - --icon__system_collapse-content_neutral--disabled: url('#{$icons-path}system/dark/collapse-content.svg#neutral--disabled'); - --icon__system_collapse-content_highlighted--enabled: url('#{$icons-path}system/dark/collapse-content.svg#highlighted--enabled'); - --icon__system_collapse-content_bright--enabled: url('#{$icons-path}system/dark/collapse-content.svg#bright--enabled'); - --icon__system_close_on-surface--enabled: url('#{$icons-path}system/dark/close.svg#on-surface--enabled'); - --icon__system_close_on-surface--hover: url('#{$icons-path}system/dark/close.svg#on-surface--hover'); - --icon__system_close_on-surface--active: url('#{$icons-path}system/dark/close.svg#on-surface--active'); - --icon__system_close_on-surface--disabled: url('#{$icons-path}system/dark/close.svg#on-surface--disabled'); - --icon__system_close_on-primary--enabled: url('#{$icons-path}system/dark/close.svg#on-primary--enabled'); - --icon__system_close_on-primary--hover: url('#{$icons-path}system/dark/close.svg#on-primary--hover'); - --icon__system_close_on-primary--active: url('#{$icons-path}system/dark/close.svg#on-primary--active'); - --icon__system_close_on-primary--disabled: url('#{$icons-path}system/dark/close.svg#on-primary--disabled'); - --icon__system_close_on-disabled--enabled: url('#{$icons-path}system/dark/close.svg#on-disabled--enabled'); - --icon__system_close_on-message--enabled: url('#{$icons-path}system/dark/close.svg#on-message--enabled'); - --icon__system_close_on-elevation--enabled: url('#{$icons-path}system/dark/close.svg#on-elevation--enabled'); - --icon__system_close_primary--enabled: url('#{$icons-path}system/dark/close.svg#primary--enabled'); - --icon__system_close_primary--hover: url('#{$icons-path}system/dark/close.svg#primary--hover'); - --icon__system_close_primary--active: url('#{$icons-path}system/dark/close.svg#primary--active'); - --icon__system_close_primary--disabled: url('#{$icons-path}system/dark/close.svg#primary--disabled'); - --icon__system_close_error--enabled: url('#{$icons-path}system/dark/close.svg#error--enabled'); - --icon__system_close_error-actionable--enabled: url('#{$icons-path}system/dark/close.svg#error-actionable--enabled'); - --icon__system_close_error-actionable--hover: url('#{$icons-path}system/dark/close.svg#error-actionable--hover'); - --icon__system_close_error-actionable--active: url('#{$icons-path}system/dark/close.svg#error-actionable--active'); - --icon__system_close_error-actionable--disabled: url('#{$icons-path}system/dark/close.svg#error-actionable--disabled'); - --icon__system_close_warning--enabled: url('#{$icons-path}system/dark/close.svg#warning--enabled'); - --icon__system_close_success--enabled: url('#{$icons-path}system/dark/close.svg#success--enabled'); - --icon__system_close_neutral--enabled: url('#{$icons-path}system/dark/close.svg#neutral--enabled'); - --icon__system_close_neutral--hover: url('#{$icons-path}system/dark/close.svg#neutral--hover'); - --icon__system_close_neutral--active: url('#{$icons-path}system/dark/close.svg#neutral--active'); - --icon__system_close_neutral--disabled: url('#{$icons-path}system/dark/close.svg#neutral--disabled'); - --icon__system_close_highlighted--enabled: url('#{$icons-path}system/dark/close.svg#highlighted--enabled'); - --icon__system_close_bright--enabled: url('#{$icons-path}system/dark/close.svg#bright--enabled'); - --icon__system_close-small_on-surface--enabled: url('#{$icons-path}system/dark/close-small.svg#on-surface--enabled'); - --icon__system_close-small_on-surface--hover: url('#{$icons-path}system/dark/close-small.svg#on-surface--hover'); - --icon__system_close-small_on-surface--active: url('#{$icons-path}system/dark/close-small.svg#on-surface--active'); - --icon__system_close-small_on-surface--disabled: url('#{$icons-path}system/dark/close-small.svg#on-surface--disabled'); - --icon__system_close-small_on-primary--enabled: url('#{$icons-path}system/dark/close-small.svg#on-primary--enabled'); - --icon__system_close-small_on-primary--hover: url('#{$icons-path}system/dark/close-small.svg#on-primary--hover'); - --icon__system_close-small_on-primary--active: url('#{$icons-path}system/dark/close-small.svg#on-primary--active'); - --icon__system_close-small_on-primary--disabled: url('#{$icons-path}system/dark/close-small.svg#on-primary--disabled'); - --icon__system_close-small_on-disabled--enabled: url('#{$icons-path}system/dark/close-small.svg#on-disabled--enabled'); - --icon__system_close-small_on-message--enabled: url('#{$icons-path}system/dark/close-small.svg#on-message--enabled'); - --icon__system_close-small_on-elevation--enabled: url('#{$icons-path}system/dark/close-small.svg#on-elevation--enabled'); - --icon__system_close-small_primary--enabled: url('#{$icons-path}system/dark/close-small.svg#primary--enabled'); - --icon__system_close-small_primary--hover: url('#{$icons-path}system/dark/close-small.svg#primary--hover'); - --icon__system_close-small_primary--active: url('#{$icons-path}system/dark/close-small.svg#primary--active'); - --icon__system_close-small_primary--disabled: url('#{$icons-path}system/dark/close-small.svg#primary--disabled'); - --icon__system_close-small_error--enabled: url('#{$icons-path}system/dark/close-small.svg#error--enabled'); - --icon__system_close-small_error-actionable--enabled: url('#{$icons-path}system/dark/close-small.svg#error-actionable--enabled'); - --icon__system_close-small_error-actionable--hover: url('#{$icons-path}system/dark/close-small.svg#error-actionable--hover'); - --icon__system_close-small_error-actionable--active: url('#{$icons-path}system/dark/close-small.svg#error-actionable--active'); - --icon__system_close-small_error-actionable--disabled: url('#{$icons-path}system/dark/close-small.svg#error-actionable--disabled'); - --icon__system_close-small_warning--enabled: url('#{$icons-path}system/dark/close-small.svg#warning--enabled'); - --icon__system_close-small_success--enabled: url('#{$icons-path}system/dark/close-small.svg#success--enabled'); - --icon__system_close-small_neutral--enabled: url('#{$icons-path}system/dark/close-small.svg#neutral--enabled'); - --icon__system_close-small_neutral--hover: url('#{$icons-path}system/dark/close-small.svg#neutral--hover'); - --icon__system_close-small_neutral--active: url('#{$icons-path}system/dark/close-small.svg#neutral--active'); - --icon__system_close-small_neutral--disabled: url('#{$icons-path}system/dark/close-small.svg#neutral--disabled'); - --icon__system_close-small_highlighted--enabled: url('#{$icons-path}system/dark/close-small.svg#highlighted--enabled'); - --icon__system_close-small_bright--enabled: url('#{$icons-path}system/dark/close-small.svg#bright--enabled'); - --icon__system_close-sidebar_on-surface--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#on-surface--enabled'); - --icon__system_close-sidebar_on-surface--hover: url('#{$icons-path}system/dark/close-sidebar.svg#on-surface--hover'); - --icon__system_close-sidebar_on-surface--active: url('#{$icons-path}system/dark/close-sidebar.svg#on-surface--active'); - --icon__system_close-sidebar_on-surface--disabled: url('#{$icons-path}system/dark/close-sidebar.svg#on-surface--disabled'); - --icon__system_close-sidebar_on-primary--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#on-primary--enabled'); - --icon__system_close-sidebar_on-primary--hover: url('#{$icons-path}system/dark/close-sidebar.svg#on-primary--hover'); - --icon__system_close-sidebar_on-primary--active: url('#{$icons-path}system/dark/close-sidebar.svg#on-primary--active'); - --icon__system_close-sidebar_on-primary--disabled: url('#{$icons-path}system/dark/close-sidebar.svg#on-primary--disabled'); - --icon__system_close-sidebar_on-disabled--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#on-disabled--enabled'); - --icon__system_close-sidebar_on-message--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#on-message--enabled'); - --icon__system_close-sidebar_on-elevation--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#on-elevation--enabled'); - --icon__system_close-sidebar_primary--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#primary--enabled'); - --icon__system_close-sidebar_primary--hover: url('#{$icons-path}system/dark/close-sidebar.svg#primary--hover'); - --icon__system_close-sidebar_primary--active: url('#{$icons-path}system/dark/close-sidebar.svg#primary--active'); - --icon__system_close-sidebar_primary--disabled: url('#{$icons-path}system/dark/close-sidebar.svg#primary--disabled'); - --icon__system_close-sidebar_error--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#error--enabled'); - --icon__system_close-sidebar_error-actionable--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#error-actionable--enabled'); - --icon__system_close-sidebar_error-actionable--hover: url('#{$icons-path}system/dark/close-sidebar.svg#error-actionable--hover'); - --icon__system_close-sidebar_error-actionable--active: url('#{$icons-path}system/dark/close-sidebar.svg#error-actionable--active'); - --icon__system_close-sidebar_error-actionable--disabled: url('#{$icons-path}system/dark/close-sidebar.svg#error-actionable--disabled'); - --icon__system_close-sidebar_warning--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#warning--enabled'); - --icon__system_close-sidebar_success--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#success--enabled'); - --icon__system_close-sidebar_neutral--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#neutral--enabled'); - --icon__system_close-sidebar_neutral--hover: url('#{$icons-path}system/dark/close-sidebar.svg#neutral--hover'); - --icon__system_close-sidebar_neutral--active: url('#{$icons-path}system/dark/close-sidebar.svg#neutral--active'); - --icon__system_close-sidebar_neutral--disabled: url('#{$icons-path}system/dark/close-sidebar.svg#neutral--disabled'); - --icon__system_close-sidebar_highlighted--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#highlighted--enabled'); - --icon__system_close-sidebar_bright--enabled: url('#{$icons-path}system/dark/close-sidebar.svg#bright--enabled'); - --icon__system_chevron-up_on-surface--enabled: url('#{$icons-path}system/dark/chevron-up.svg#on-surface--enabled'); - --icon__system_chevron-up_on-surface--hover: url('#{$icons-path}system/dark/chevron-up.svg#on-surface--hover'); - --icon__system_chevron-up_on-surface--active: url('#{$icons-path}system/dark/chevron-up.svg#on-surface--active'); - --icon__system_chevron-up_on-surface--disabled: url('#{$icons-path}system/dark/chevron-up.svg#on-surface--disabled'); - --icon__system_chevron-up_on-primary--enabled: url('#{$icons-path}system/dark/chevron-up.svg#on-primary--enabled'); - --icon__system_chevron-up_on-primary--hover: url('#{$icons-path}system/dark/chevron-up.svg#on-primary--hover'); - --icon__system_chevron-up_on-primary--active: url('#{$icons-path}system/dark/chevron-up.svg#on-primary--active'); - --icon__system_chevron-up_on-primary--disabled: url('#{$icons-path}system/dark/chevron-up.svg#on-primary--disabled'); - --icon__system_chevron-up_on-disabled--enabled: url('#{$icons-path}system/dark/chevron-up.svg#on-disabled--enabled'); - --icon__system_chevron-up_on-message--enabled: url('#{$icons-path}system/dark/chevron-up.svg#on-message--enabled'); - --icon__system_chevron-up_on-elevation--enabled: url('#{$icons-path}system/dark/chevron-up.svg#on-elevation--enabled'); - --icon__system_chevron-up_primary--enabled: url('#{$icons-path}system/dark/chevron-up.svg#primary--enabled'); - --icon__system_chevron-up_primary--hover: url('#{$icons-path}system/dark/chevron-up.svg#primary--hover'); - --icon__system_chevron-up_primary--active: url('#{$icons-path}system/dark/chevron-up.svg#primary--active'); - --icon__system_chevron-up_primary--disabled: url('#{$icons-path}system/dark/chevron-up.svg#primary--disabled'); - --icon__system_chevron-up_error--enabled: url('#{$icons-path}system/dark/chevron-up.svg#error--enabled'); - --icon__system_chevron-up_error-actionable--enabled: url('#{$icons-path}system/dark/chevron-up.svg#error-actionable--enabled'); - --icon__system_chevron-up_error-actionable--hover: url('#{$icons-path}system/dark/chevron-up.svg#error-actionable--hover'); - --icon__system_chevron-up_error-actionable--active: url('#{$icons-path}system/dark/chevron-up.svg#error-actionable--active'); - --icon__system_chevron-up_error-actionable--disabled: url('#{$icons-path}system/dark/chevron-up.svg#error-actionable--disabled'); - --icon__system_chevron-up_warning--enabled: url('#{$icons-path}system/dark/chevron-up.svg#warning--enabled'); - --icon__system_chevron-up_success--enabled: url('#{$icons-path}system/dark/chevron-up.svg#success--enabled'); - --icon__system_chevron-up_neutral--enabled: url('#{$icons-path}system/dark/chevron-up.svg#neutral--enabled'); - --icon__system_chevron-up_neutral--hover: url('#{$icons-path}system/dark/chevron-up.svg#neutral--hover'); - --icon__system_chevron-up_neutral--active: url('#{$icons-path}system/dark/chevron-up.svg#neutral--active'); - --icon__system_chevron-up_neutral--disabled: url('#{$icons-path}system/dark/chevron-up.svg#neutral--disabled'); - --icon__system_chevron-up_highlighted--enabled: url('#{$icons-path}system/dark/chevron-up.svg#highlighted--enabled'); - --icon__system_chevron-up_bright--enabled: url('#{$icons-path}system/dark/chevron-up.svg#bright--enabled'); - --icon__system_chevron-small-up_on-surface--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#on-surface--enabled'); - --icon__system_chevron-small-up_on-surface--hover: url('#{$icons-path}system/dark/chevron-small-up.svg#on-surface--hover'); - --icon__system_chevron-small-up_on-surface--active: url('#{$icons-path}system/dark/chevron-small-up.svg#on-surface--active'); - --icon__system_chevron-small-up_on-surface--disabled: url('#{$icons-path}system/dark/chevron-small-up.svg#on-surface--disabled'); - --icon__system_chevron-small-up_on-primary--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#on-primary--enabled'); - --icon__system_chevron-small-up_on-primary--hover: url('#{$icons-path}system/dark/chevron-small-up.svg#on-primary--hover'); - --icon__system_chevron-small-up_on-primary--active: url('#{$icons-path}system/dark/chevron-small-up.svg#on-primary--active'); - --icon__system_chevron-small-up_on-primary--disabled: url('#{$icons-path}system/dark/chevron-small-up.svg#on-primary--disabled'); - --icon__system_chevron-small-up_on-disabled--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#on-disabled--enabled'); - --icon__system_chevron-small-up_on-message--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#on-message--enabled'); - --icon__system_chevron-small-up_on-elevation--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#on-elevation--enabled'); - --icon__system_chevron-small-up_primary--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#primary--enabled'); - --icon__system_chevron-small-up_primary--hover: url('#{$icons-path}system/dark/chevron-small-up.svg#primary--hover'); - --icon__system_chevron-small-up_primary--active: url('#{$icons-path}system/dark/chevron-small-up.svg#primary--active'); - --icon__system_chevron-small-up_primary--disabled: url('#{$icons-path}system/dark/chevron-small-up.svg#primary--disabled'); - --icon__system_chevron-small-up_error--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#error--enabled'); - --icon__system_chevron-small-up_error-actionable--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#error-actionable--enabled'); - --icon__system_chevron-small-up_error-actionable--hover: url('#{$icons-path}system/dark/chevron-small-up.svg#error-actionable--hover'); - --icon__system_chevron-small-up_error-actionable--active: url('#{$icons-path}system/dark/chevron-small-up.svg#error-actionable--active'); - --icon__system_chevron-small-up_error-actionable--disabled: url('#{$icons-path}system/dark/chevron-small-up.svg#error-actionable--disabled'); - --icon__system_chevron-small-up_warning--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#warning--enabled'); - --icon__system_chevron-small-up_success--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#success--enabled'); - --icon__system_chevron-small-up_neutral--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#neutral--enabled'); - --icon__system_chevron-small-up_neutral--hover: url('#{$icons-path}system/dark/chevron-small-up.svg#neutral--hover'); - --icon__system_chevron-small-up_neutral--active: url('#{$icons-path}system/dark/chevron-small-up.svg#neutral--active'); - --icon__system_chevron-small-up_neutral--disabled: url('#{$icons-path}system/dark/chevron-small-up.svg#neutral--disabled'); - --icon__system_chevron-small-up_highlighted--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#highlighted--enabled'); - --icon__system_chevron-small-up_bright--enabled: url('#{$icons-path}system/dark/chevron-small-up.svg#bright--enabled'); - --icon__system_chevron-small-right_on-surface--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#on-surface--enabled'); - --icon__system_chevron-small-right_on-surface--hover: url('#{$icons-path}system/dark/chevron-small-right.svg#on-surface--hover'); - --icon__system_chevron-small-right_on-surface--active: url('#{$icons-path}system/dark/chevron-small-right.svg#on-surface--active'); - --icon__system_chevron-small-right_on-surface--disabled: url('#{$icons-path}system/dark/chevron-small-right.svg#on-surface--disabled'); - --icon__system_chevron-small-right_on-primary--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#on-primary--enabled'); - --icon__system_chevron-small-right_on-primary--hover: url('#{$icons-path}system/dark/chevron-small-right.svg#on-primary--hover'); - --icon__system_chevron-small-right_on-primary--active: url('#{$icons-path}system/dark/chevron-small-right.svg#on-primary--active'); - --icon__system_chevron-small-right_on-primary--disabled: url('#{$icons-path}system/dark/chevron-small-right.svg#on-primary--disabled'); - --icon__system_chevron-small-right_on-disabled--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#on-disabled--enabled'); - --icon__system_chevron-small-right_on-message--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#on-message--enabled'); - --icon__system_chevron-small-right_on-elevation--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#on-elevation--enabled'); - --icon__system_chevron-small-right_primary--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#primary--enabled'); - --icon__system_chevron-small-right_primary--hover: url('#{$icons-path}system/dark/chevron-small-right.svg#primary--hover'); - --icon__system_chevron-small-right_primary--active: url('#{$icons-path}system/dark/chevron-small-right.svg#primary--active'); - --icon__system_chevron-small-right_primary--disabled: url('#{$icons-path}system/dark/chevron-small-right.svg#primary--disabled'); - --icon__system_chevron-small-right_error--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#error--enabled'); - --icon__system_chevron-small-right_error-actionable--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#error-actionable--enabled'); - --icon__system_chevron-small-right_error-actionable--hover: url('#{$icons-path}system/dark/chevron-small-right.svg#error-actionable--hover'); - --icon__system_chevron-small-right_error-actionable--active: url('#{$icons-path}system/dark/chevron-small-right.svg#error-actionable--active'); - --icon__system_chevron-small-right_error-actionable--disabled: url('#{$icons-path}system/dark/chevron-small-right.svg#error-actionable--disabled'); - --icon__system_chevron-small-right_warning--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#warning--enabled'); - --icon__system_chevron-small-right_success--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#success--enabled'); - --icon__system_chevron-small-right_neutral--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#neutral--enabled'); - --icon__system_chevron-small-right_neutral--hover: url('#{$icons-path}system/dark/chevron-small-right.svg#neutral--hover'); - --icon__system_chevron-small-right_neutral--active: url('#{$icons-path}system/dark/chevron-small-right.svg#neutral--active'); - --icon__system_chevron-small-right_neutral--disabled: url('#{$icons-path}system/dark/chevron-small-right.svg#neutral--disabled'); - --icon__system_chevron-small-right_highlighted--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#highlighted--enabled'); - --icon__system_chevron-small-right_bright--enabled: url('#{$icons-path}system/dark/chevron-small-right.svg#bright--enabled'); - --icon__system_chevron-small-left_on-surface--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#on-surface--enabled'); - --icon__system_chevron-small-left_on-surface--hover: url('#{$icons-path}system/dark/chevron-small-left.svg#on-surface--hover'); - --icon__system_chevron-small-left_on-surface--active: url('#{$icons-path}system/dark/chevron-small-left.svg#on-surface--active'); - --icon__system_chevron-small-left_on-surface--disabled: url('#{$icons-path}system/dark/chevron-small-left.svg#on-surface--disabled'); - --icon__system_chevron-small-left_on-primary--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#on-primary--enabled'); - --icon__system_chevron-small-left_on-primary--hover: url('#{$icons-path}system/dark/chevron-small-left.svg#on-primary--hover'); - --icon__system_chevron-small-left_on-primary--active: url('#{$icons-path}system/dark/chevron-small-left.svg#on-primary--active'); - --icon__system_chevron-small-left_on-primary--disabled: url('#{$icons-path}system/dark/chevron-small-left.svg#on-primary--disabled'); - --icon__system_chevron-small-left_on-disabled--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#on-disabled--enabled'); - --icon__system_chevron-small-left_on-message--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#on-message--enabled'); - --icon__system_chevron-small-left_on-elevation--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#on-elevation--enabled'); - --icon__system_chevron-small-left_primary--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#primary--enabled'); - --icon__system_chevron-small-left_primary--hover: url('#{$icons-path}system/dark/chevron-small-left.svg#primary--hover'); - --icon__system_chevron-small-left_primary--active: url('#{$icons-path}system/dark/chevron-small-left.svg#primary--active'); - --icon__system_chevron-small-left_primary--disabled: url('#{$icons-path}system/dark/chevron-small-left.svg#primary--disabled'); - --icon__system_chevron-small-left_error--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#error--enabled'); - --icon__system_chevron-small-left_error-actionable--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#error-actionable--enabled'); - --icon__system_chevron-small-left_error-actionable--hover: url('#{$icons-path}system/dark/chevron-small-left.svg#error-actionable--hover'); - --icon__system_chevron-small-left_error-actionable--active: url('#{$icons-path}system/dark/chevron-small-left.svg#error-actionable--active'); - --icon__system_chevron-small-left_error-actionable--disabled: url('#{$icons-path}system/dark/chevron-small-left.svg#error-actionable--disabled'); - --icon__system_chevron-small-left_warning--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#warning--enabled'); - --icon__system_chevron-small-left_success--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#success--enabled'); - --icon__system_chevron-small-left_neutral--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#neutral--enabled'); - --icon__system_chevron-small-left_neutral--hover: url('#{$icons-path}system/dark/chevron-small-left.svg#neutral--hover'); - --icon__system_chevron-small-left_neutral--active: url('#{$icons-path}system/dark/chevron-small-left.svg#neutral--active'); - --icon__system_chevron-small-left_neutral--disabled: url('#{$icons-path}system/dark/chevron-small-left.svg#neutral--disabled'); - --icon__system_chevron-small-left_highlighted--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#highlighted--enabled'); - --icon__system_chevron-small-left_bright--enabled: url('#{$icons-path}system/dark/chevron-small-left.svg#bright--enabled'); - --icon__system_chevron-small-down_on-surface--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#on-surface--enabled'); - --icon__system_chevron-small-down_on-surface--hover: url('#{$icons-path}system/dark/chevron-small-down.svg#on-surface--hover'); - --icon__system_chevron-small-down_on-surface--active: url('#{$icons-path}system/dark/chevron-small-down.svg#on-surface--active'); - --icon__system_chevron-small-down_on-surface--disabled: url('#{$icons-path}system/dark/chevron-small-down.svg#on-surface--disabled'); - --icon__system_chevron-small-down_on-primary--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#on-primary--enabled'); - --icon__system_chevron-small-down_on-primary--hover: url('#{$icons-path}system/dark/chevron-small-down.svg#on-primary--hover'); - --icon__system_chevron-small-down_on-primary--active: url('#{$icons-path}system/dark/chevron-small-down.svg#on-primary--active'); - --icon__system_chevron-small-down_on-primary--disabled: url('#{$icons-path}system/dark/chevron-small-down.svg#on-primary--disabled'); - --icon__system_chevron-small-down_on-disabled--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#on-disabled--enabled'); - --icon__system_chevron-small-down_on-message--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#on-message--enabled'); - --icon__system_chevron-small-down_on-elevation--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#on-elevation--enabled'); - --icon__system_chevron-small-down_primary--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#primary--enabled'); - --icon__system_chevron-small-down_primary--hover: url('#{$icons-path}system/dark/chevron-small-down.svg#primary--hover'); - --icon__system_chevron-small-down_primary--active: url('#{$icons-path}system/dark/chevron-small-down.svg#primary--active'); - --icon__system_chevron-small-down_primary--disabled: url('#{$icons-path}system/dark/chevron-small-down.svg#primary--disabled'); - --icon__system_chevron-small-down_error--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#error--enabled'); - --icon__system_chevron-small-down_error-actionable--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#error-actionable--enabled'); - --icon__system_chevron-small-down_error-actionable--hover: url('#{$icons-path}system/dark/chevron-small-down.svg#error-actionable--hover'); - --icon__system_chevron-small-down_error-actionable--active: url('#{$icons-path}system/dark/chevron-small-down.svg#error-actionable--active'); - --icon__system_chevron-small-down_error-actionable--disabled: url('#{$icons-path}system/dark/chevron-small-down.svg#error-actionable--disabled'); - --icon__system_chevron-small-down_warning--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#warning--enabled'); - --icon__system_chevron-small-down_success--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#success--enabled'); - --icon__system_chevron-small-down_neutral--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#neutral--enabled'); - --icon__system_chevron-small-down_neutral--hover: url('#{$icons-path}system/dark/chevron-small-down.svg#neutral--hover'); - --icon__system_chevron-small-down_neutral--active: url('#{$icons-path}system/dark/chevron-small-down.svg#neutral--active'); - --icon__system_chevron-small-down_neutral--disabled: url('#{$icons-path}system/dark/chevron-small-down.svg#neutral--disabled'); - --icon__system_chevron-small-down_highlighted--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#highlighted--enabled'); - --icon__system_chevron-small-down_bright--enabled: url('#{$icons-path}system/dark/chevron-small-down.svg#bright--enabled'); - --icon__system_chevron-right_on-surface--enabled: url('#{$icons-path}system/dark/chevron-right.svg#on-surface--enabled'); - --icon__system_chevron-right_on-surface--hover: url('#{$icons-path}system/dark/chevron-right.svg#on-surface--hover'); - --icon__system_chevron-right_on-surface--active: url('#{$icons-path}system/dark/chevron-right.svg#on-surface--active'); - --icon__system_chevron-right_on-surface--disabled: url('#{$icons-path}system/dark/chevron-right.svg#on-surface--disabled'); - --icon__system_chevron-right_on-primary--enabled: url('#{$icons-path}system/dark/chevron-right.svg#on-primary--enabled'); - --icon__system_chevron-right_on-primary--hover: url('#{$icons-path}system/dark/chevron-right.svg#on-primary--hover'); - --icon__system_chevron-right_on-primary--active: url('#{$icons-path}system/dark/chevron-right.svg#on-primary--active'); - --icon__system_chevron-right_on-primary--disabled: url('#{$icons-path}system/dark/chevron-right.svg#on-primary--disabled'); - --icon__system_chevron-right_on-disabled--enabled: url('#{$icons-path}system/dark/chevron-right.svg#on-disabled--enabled'); - --icon__system_chevron-right_on-message--enabled: url('#{$icons-path}system/dark/chevron-right.svg#on-message--enabled'); - --icon__system_chevron-right_on-elevation--enabled: url('#{$icons-path}system/dark/chevron-right.svg#on-elevation--enabled'); - --icon__system_chevron-right_primary--enabled: url('#{$icons-path}system/dark/chevron-right.svg#primary--enabled'); - --icon__system_chevron-right_primary--hover: url('#{$icons-path}system/dark/chevron-right.svg#primary--hover'); - --icon__system_chevron-right_primary--active: url('#{$icons-path}system/dark/chevron-right.svg#primary--active'); - --icon__system_chevron-right_primary--disabled: url('#{$icons-path}system/dark/chevron-right.svg#primary--disabled'); - --icon__system_chevron-right_error--enabled: url('#{$icons-path}system/dark/chevron-right.svg#error--enabled'); - --icon__system_chevron-right_error-actionable--enabled: url('#{$icons-path}system/dark/chevron-right.svg#error-actionable--enabled'); - --icon__system_chevron-right_error-actionable--hover: url('#{$icons-path}system/dark/chevron-right.svg#error-actionable--hover'); - --icon__system_chevron-right_error-actionable--active: url('#{$icons-path}system/dark/chevron-right.svg#error-actionable--active'); - --icon__system_chevron-right_error-actionable--disabled: url('#{$icons-path}system/dark/chevron-right.svg#error-actionable--disabled'); - --icon__system_chevron-right_warning--enabled: url('#{$icons-path}system/dark/chevron-right.svg#warning--enabled'); - --icon__system_chevron-right_success--enabled: url('#{$icons-path}system/dark/chevron-right.svg#success--enabled'); - --icon__system_chevron-right_neutral--enabled: url('#{$icons-path}system/dark/chevron-right.svg#neutral--enabled'); - --icon__system_chevron-right_neutral--hover: url('#{$icons-path}system/dark/chevron-right.svg#neutral--hover'); - --icon__system_chevron-right_neutral--active: url('#{$icons-path}system/dark/chevron-right.svg#neutral--active'); - --icon__system_chevron-right_neutral--disabled: url('#{$icons-path}system/dark/chevron-right.svg#neutral--disabled'); - --icon__system_chevron-right_highlighted--enabled: url('#{$icons-path}system/dark/chevron-right.svg#highlighted--enabled'); - --icon__system_chevron-right_bright--enabled: url('#{$icons-path}system/dark/chevron-right.svg#bright--enabled'); - --icon__system_chevron-pag-right_on-surface--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#on-surface--enabled'); - --icon__system_chevron-pag-right_on-surface--hover: url('#{$icons-path}system/dark/chevron-pag-right.svg#on-surface--hover'); - --icon__system_chevron-pag-right_on-surface--active: url('#{$icons-path}system/dark/chevron-pag-right.svg#on-surface--active'); - --icon__system_chevron-pag-right_on-surface--disabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#on-surface--disabled'); - --icon__system_chevron-pag-right_on-primary--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#on-primary--enabled'); - --icon__system_chevron-pag-right_on-primary--hover: url('#{$icons-path}system/dark/chevron-pag-right.svg#on-primary--hover'); - --icon__system_chevron-pag-right_on-primary--active: url('#{$icons-path}system/dark/chevron-pag-right.svg#on-primary--active'); - --icon__system_chevron-pag-right_on-primary--disabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#on-primary--disabled'); - --icon__system_chevron-pag-right_on-disabled--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#on-disabled--enabled'); - --icon__system_chevron-pag-right_on-message--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#on-message--enabled'); - --icon__system_chevron-pag-right_on-elevation--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#on-elevation--enabled'); - --icon__system_chevron-pag-right_primary--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#primary--enabled'); - --icon__system_chevron-pag-right_primary--hover: url('#{$icons-path}system/dark/chevron-pag-right.svg#primary--hover'); - --icon__system_chevron-pag-right_primary--active: url('#{$icons-path}system/dark/chevron-pag-right.svg#primary--active'); - --icon__system_chevron-pag-right_primary--disabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#primary--disabled'); - --icon__system_chevron-pag-right_error--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#error--enabled'); - --icon__system_chevron-pag-right_error-actionable--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#error-actionable--enabled'); - --icon__system_chevron-pag-right_error-actionable--hover: url('#{$icons-path}system/dark/chevron-pag-right.svg#error-actionable--hover'); - --icon__system_chevron-pag-right_error-actionable--active: url('#{$icons-path}system/dark/chevron-pag-right.svg#error-actionable--active'); - --icon__system_chevron-pag-right_error-actionable--disabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#error-actionable--disabled'); - --icon__system_chevron-pag-right_warning--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#warning--enabled'); - --icon__system_chevron-pag-right_success--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#success--enabled'); - --icon__system_chevron-pag-right_neutral--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#neutral--enabled'); - --icon__system_chevron-pag-right_neutral--hover: url('#{$icons-path}system/dark/chevron-pag-right.svg#neutral--hover'); - --icon__system_chevron-pag-right_neutral--active: url('#{$icons-path}system/dark/chevron-pag-right.svg#neutral--active'); - --icon__system_chevron-pag-right_neutral--disabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#neutral--disabled'); - --icon__system_chevron-pag-right_highlighted--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#highlighted--enabled'); - --icon__system_chevron-pag-right_bright--enabled: url('#{$icons-path}system/dark/chevron-pag-right.svg#bright--enabled'); - --icon__system_chevron-pag-left_on-surface--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#on-surface--enabled'); - --icon__system_chevron-pag-left_on-surface--hover: url('#{$icons-path}system/dark/chevron-pag-left.svg#on-surface--hover'); - --icon__system_chevron-pag-left_on-surface--active: url('#{$icons-path}system/dark/chevron-pag-left.svg#on-surface--active'); - --icon__system_chevron-pag-left_on-surface--disabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#on-surface--disabled'); - --icon__system_chevron-pag-left_on-primary--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#on-primary--enabled'); - --icon__system_chevron-pag-left_on-primary--hover: url('#{$icons-path}system/dark/chevron-pag-left.svg#on-primary--hover'); - --icon__system_chevron-pag-left_on-primary--active: url('#{$icons-path}system/dark/chevron-pag-left.svg#on-primary--active'); - --icon__system_chevron-pag-left_on-primary--disabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#on-primary--disabled'); - --icon__system_chevron-pag-left_on-disabled--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#on-disabled--enabled'); - --icon__system_chevron-pag-left_on-message--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#on-message--enabled'); - --icon__system_chevron-pag-left_on-elevation--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#on-elevation--enabled'); - --icon__system_chevron-pag-left_primary--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#primary--enabled'); - --icon__system_chevron-pag-left_primary--hover: url('#{$icons-path}system/dark/chevron-pag-left.svg#primary--hover'); - --icon__system_chevron-pag-left_primary--active: url('#{$icons-path}system/dark/chevron-pag-left.svg#primary--active'); - --icon__system_chevron-pag-left_primary--disabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#primary--disabled'); - --icon__system_chevron-pag-left_error--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#error--enabled'); - --icon__system_chevron-pag-left_error-actionable--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#error-actionable--enabled'); - --icon__system_chevron-pag-left_error-actionable--hover: url('#{$icons-path}system/dark/chevron-pag-left.svg#error-actionable--hover'); - --icon__system_chevron-pag-left_error-actionable--active: url('#{$icons-path}system/dark/chevron-pag-left.svg#error-actionable--active'); - --icon__system_chevron-pag-left_error-actionable--disabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#error-actionable--disabled'); - --icon__system_chevron-pag-left_warning--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#warning--enabled'); - --icon__system_chevron-pag-left_success--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#success--enabled'); - --icon__system_chevron-pag-left_neutral--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#neutral--enabled'); - --icon__system_chevron-pag-left_neutral--hover: url('#{$icons-path}system/dark/chevron-pag-left.svg#neutral--hover'); - --icon__system_chevron-pag-left_neutral--active: url('#{$icons-path}system/dark/chevron-pag-left.svg#neutral--active'); - --icon__system_chevron-pag-left_neutral--disabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#neutral--disabled'); - --icon__system_chevron-pag-left_highlighted--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#highlighted--enabled'); - --icon__system_chevron-pag-left_bright--enabled: url('#{$icons-path}system/dark/chevron-pag-left.svg#bright--enabled'); - --icon__system_chevron-left_on-surface--enabled: url('#{$icons-path}system/dark/chevron-left.svg#on-surface--enabled'); - --icon__system_chevron-left_on-surface--hover: url('#{$icons-path}system/dark/chevron-left.svg#on-surface--hover'); - --icon__system_chevron-left_on-surface--active: url('#{$icons-path}system/dark/chevron-left.svg#on-surface--active'); - --icon__system_chevron-left_on-surface--disabled: url('#{$icons-path}system/dark/chevron-left.svg#on-surface--disabled'); - --icon__system_chevron-left_on-primary--enabled: url('#{$icons-path}system/dark/chevron-left.svg#on-primary--enabled'); - --icon__system_chevron-left_on-primary--hover: url('#{$icons-path}system/dark/chevron-left.svg#on-primary--hover'); - --icon__system_chevron-left_on-primary--active: url('#{$icons-path}system/dark/chevron-left.svg#on-primary--active'); - --icon__system_chevron-left_on-primary--disabled: url('#{$icons-path}system/dark/chevron-left.svg#on-primary--disabled'); - --icon__system_chevron-left_on-disabled--enabled: url('#{$icons-path}system/dark/chevron-left.svg#on-disabled--enabled'); - --icon__system_chevron-left_on-message--enabled: url('#{$icons-path}system/dark/chevron-left.svg#on-message--enabled'); - --icon__system_chevron-left_on-elevation--enabled: url('#{$icons-path}system/dark/chevron-left.svg#on-elevation--enabled'); - --icon__system_chevron-left_primary--enabled: url('#{$icons-path}system/dark/chevron-left.svg#primary--enabled'); - --icon__system_chevron-left_primary--hover: url('#{$icons-path}system/dark/chevron-left.svg#primary--hover'); - --icon__system_chevron-left_primary--active: url('#{$icons-path}system/dark/chevron-left.svg#primary--active'); - --icon__system_chevron-left_primary--disabled: url('#{$icons-path}system/dark/chevron-left.svg#primary--disabled'); - --icon__system_chevron-left_error--enabled: url('#{$icons-path}system/dark/chevron-left.svg#error--enabled'); - --icon__system_chevron-left_error-actionable--enabled: url('#{$icons-path}system/dark/chevron-left.svg#error-actionable--enabled'); - --icon__system_chevron-left_error-actionable--hover: url('#{$icons-path}system/dark/chevron-left.svg#error-actionable--hover'); - --icon__system_chevron-left_error-actionable--active: url('#{$icons-path}system/dark/chevron-left.svg#error-actionable--active'); - --icon__system_chevron-left_error-actionable--disabled: url('#{$icons-path}system/dark/chevron-left.svg#error-actionable--disabled'); - --icon__system_chevron-left_warning--enabled: url('#{$icons-path}system/dark/chevron-left.svg#warning--enabled'); - --icon__system_chevron-left_success--enabled: url('#{$icons-path}system/dark/chevron-left.svg#success--enabled'); - --icon__system_chevron-left_neutral--enabled: url('#{$icons-path}system/dark/chevron-left.svg#neutral--enabled'); - --icon__system_chevron-left_neutral--hover: url('#{$icons-path}system/dark/chevron-left.svg#neutral--hover'); - --icon__system_chevron-left_neutral--active: url('#{$icons-path}system/dark/chevron-left.svg#neutral--active'); - --icon__system_chevron-left_neutral--disabled: url('#{$icons-path}system/dark/chevron-left.svg#neutral--disabled'); - --icon__system_chevron-left_highlighted--enabled: url('#{$icons-path}system/dark/chevron-left.svg#highlighted--enabled'); - --icon__system_chevron-left_bright--enabled: url('#{$icons-path}system/dark/chevron-left.svg#bright--enabled'); - --icon__system_chevron-down_on-surface--enabled: url('#{$icons-path}system/dark/chevron-down.svg#on-surface--enabled'); - --icon__system_chevron-down_on-surface--hover: url('#{$icons-path}system/dark/chevron-down.svg#on-surface--hover'); - --icon__system_chevron-down_on-surface--active: url('#{$icons-path}system/dark/chevron-down.svg#on-surface--active'); - --icon__system_chevron-down_on-surface--disabled: url('#{$icons-path}system/dark/chevron-down.svg#on-surface--disabled'); - --icon__system_chevron-down_on-primary--enabled: url('#{$icons-path}system/dark/chevron-down.svg#on-primary--enabled'); - --icon__system_chevron-down_on-primary--hover: url('#{$icons-path}system/dark/chevron-down.svg#on-primary--hover'); - --icon__system_chevron-down_on-primary--active: url('#{$icons-path}system/dark/chevron-down.svg#on-primary--active'); - --icon__system_chevron-down_on-primary--disabled: url('#{$icons-path}system/dark/chevron-down.svg#on-primary--disabled'); - --icon__system_chevron-down_on-disabled--enabled: url('#{$icons-path}system/dark/chevron-down.svg#on-disabled--enabled'); - --icon__system_chevron-down_on-message--enabled: url('#{$icons-path}system/dark/chevron-down.svg#on-message--enabled'); - --icon__system_chevron-down_on-elevation--enabled: url('#{$icons-path}system/dark/chevron-down.svg#on-elevation--enabled'); - --icon__system_chevron-down_primary--enabled: url('#{$icons-path}system/dark/chevron-down.svg#primary--enabled'); - --icon__system_chevron-down_primary--hover: url('#{$icons-path}system/dark/chevron-down.svg#primary--hover'); - --icon__system_chevron-down_primary--active: url('#{$icons-path}system/dark/chevron-down.svg#primary--active'); - --icon__system_chevron-down_primary--disabled: url('#{$icons-path}system/dark/chevron-down.svg#primary--disabled'); - --icon__system_chevron-down_error--enabled: url('#{$icons-path}system/dark/chevron-down.svg#error--enabled'); - --icon__system_chevron-down_error-actionable--enabled: url('#{$icons-path}system/dark/chevron-down.svg#error-actionable--enabled'); - --icon__system_chevron-down_error-actionable--hover: url('#{$icons-path}system/dark/chevron-down.svg#error-actionable--hover'); - --icon__system_chevron-down_error-actionable--active: url('#{$icons-path}system/dark/chevron-down.svg#error-actionable--active'); - --icon__system_chevron-down_error-actionable--disabled: url('#{$icons-path}system/dark/chevron-down.svg#error-actionable--disabled'); - --icon__system_chevron-down_warning--enabled: url('#{$icons-path}system/dark/chevron-down.svg#warning--enabled'); - --icon__system_chevron-down_success--enabled: url('#{$icons-path}system/dark/chevron-down.svg#success--enabled'); - --icon__system_chevron-down_neutral--enabled: url('#{$icons-path}system/dark/chevron-down.svg#neutral--enabled'); - --icon__system_chevron-down_neutral--hover: url('#{$icons-path}system/dark/chevron-down.svg#neutral--hover'); - --icon__system_chevron-down_neutral--active: url('#{$icons-path}system/dark/chevron-down.svg#neutral--active'); - --icon__system_chevron-down_neutral--disabled: url('#{$icons-path}system/dark/chevron-down.svg#neutral--disabled'); - --icon__system_chevron-down_highlighted--enabled: url('#{$icons-path}system/dark/chevron-down.svg#highlighted--enabled'); - --icon__system_chevron-down_bright--enabled: url('#{$icons-path}system/dark/chevron-down.svg#bright--enabled'); - --icon__system_check_on-surface--enabled: url('#{$icons-path}system/dark/check.svg#on-surface--enabled'); - --icon__system_check_on-surface--hover: url('#{$icons-path}system/dark/check.svg#on-surface--hover'); - --icon__system_check_on-surface--active: url('#{$icons-path}system/dark/check.svg#on-surface--active'); - --icon__system_check_on-surface--disabled: url('#{$icons-path}system/dark/check.svg#on-surface--disabled'); - --icon__system_check_on-primary--enabled: url('#{$icons-path}system/dark/check.svg#on-primary--enabled'); - --icon__system_check_on-primary--hover: url('#{$icons-path}system/dark/check.svg#on-primary--hover'); - --icon__system_check_on-primary--active: url('#{$icons-path}system/dark/check.svg#on-primary--active'); - --icon__system_check_on-primary--disabled: url('#{$icons-path}system/dark/check.svg#on-primary--disabled'); - --icon__system_check_on-disabled--enabled: url('#{$icons-path}system/dark/check.svg#on-disabled--enabled'); - --icon__system_check_on-message--enabled: url('#{$icons-path}system/dark/check.svg#on-message--enabled'); - --icon__system_check_on-elevation--enabled: url('#{$icons-path}system/dark/check.svg#on-elevation--enabled'); - --icon__system_check_primary--enabled: url('#{$icons-path}system/dark/check.svg#primary--enabled'); - --icon__system_check_primary--hover: url('#{$icons-path}system/dark/check.svg#primary--hover'); - --icon__system_check_primary--active: url('#{$icons-path}system/dark/check.svg#primary--active'); - --icon__system_check_primary--disabled: url('#{$icons-path}system/dark/check.svg#primary--disabled'); - --icon__system_check_error--enabled: url('#{$icons-path}system/dark/check.svg#error--enabled'); - --icon__system_check_error-actionable--enabled: url('#{$icons-path}system/dark/check.svg#error-actionable--enabled'); - --icon__system_check_error-actionable--hover: url('#{$icons-path}system/dark/check.svg#error-actionable--hover'); - --icon__system_check_error-actionable--active: url('#{$icons-path}system/dark/check.svg#error-actionable--active'); - --icon__system_check_error-actionable--disabled: url('#{$icons-path}system/dark/check.svg#error-actionable--disabled'); - --icon__system_check_warning--enabled: url('#{$icons-path}system/dark/check.svg#warning--enabled'); - --icon__system_check_success--enabled: url('#{$icons-path}system/dark/check.svg#success--enabled'); - --icon__system_check_neutral--enabled: url('#{$icons-path}system/dark/check.svg#neutral--enabled'); - --icon__system_check_neutral--hover: url('#{$icons-path}system/dark/check.svg#neutral--hover'); - --icon__system_check_neutral--active: url('#{$icons-path}system/dark/check.svg#neutral--active'); - --icon__system_check_neutral--disabled: url('#{$icons-path}system/dark/check.svg#neutral--disabled'); - --icon__system_check_highlighted--enabled: url('#{$icons-path}system/dark/check.svg#highlighted--enabled'); - --icon__system_check_bright--enabled: url('#{$icons-path}system/dark/check.svg#bright--enabled'); - --icon__system_check-circle_on-surface--enabled: url('#{$icons-path}system/dark/check-circle.svg#on-surface--enabled'); - --icon__system_check-circle_on-surface--hover: url('#{$icons-path}system/dark/check-circle.svg#on-surface--hover'); - --icon__system_check-circle_on-surface--active: url('#{$icons-path}system/dark/check-circle.svg#on-surface--active'); - --icon__system_check-circle_on-surface--disabled: url('#{$icons-path}system/dark/check-circle.svg#on-surface--disabled'); - --icon__system_check-circle_on-primary--enabled: url('#{$icons-path}system/dark/check-circle.svg#on-primary--enabled'); - --icon__system_check-circle_on-primary--hover: url('#{$icons-path}system/dark/check-circle.svg#on-primary--hover'); - --icon__system_check-circle_on-primary--active: url('#{$icons-path}system/dark/check-circle.svg#on-primary--active'); - --icon__system_check-circle_on-primary--disabled: url('#{$icons-path}system/dark/check-circle.svg#on-primary--disabled'); - --icon__system_check-circle_on-disabled--enabled: url('#{$icons-path}system/dark/check-circle.svg#on-disabled--enabled'); - --icon__system_check-circle_on-message--enabled: url('#{$icons-path}system/dark/check-circle.svg#on-message--enabled'); - --icon__system_check-circle_on-elevation--enabled: url('#{$icons-path}system/dark/check-circle.svg#on-elevation--enabled'); - --icon__system_check-circle_primary--enabled: url('#{$icons-path}system/dark/check-circle.svg#primary--enabled'); - --icon__system_check-circle_primary--hover: url('#{$icons-path}system/dark/check-circle.svg#primary--hover'); - --icon__system_check-circle_primary--active: url('#{$icons-path}system/dark/check-circle.svg#primary--active'); - --icon__system_check-circle_primary--disabled: url('#{$icons-path}system/dark/check-circle.svg#primary--disabled'); - --icon__system_check-circle_error--enabled: url('#{$icons-path}system/dark/check-circle.svg#error--enabled'); - --icon__system_check-circle_error-actionable--enabled: url('#{$icons-path}system/dark/check-circle.svg#error-actionable--enabled'); - --icon__system_check-circle_error-actionable--hover: url('#{$icons-path}system/dark/check-circle.svg#error-actionable--hover'); - --icon__system_check-circle_error-actionable--active: url('#{$icons-path}system/dark/check-circle.svg#error-actionable--active'); - --icon__system_check-circle_error-actionable--disabled: url('#{$icons-path}system/dark/check-circle.svg#error-actionable--disabled'); - --icon__system_check-circle_warning--enabled: url('#{$icons-path}system/dark/check-circle.svg#warning--enabled'); - --icon__system_check-circle_success--enabled: url('#{$icons-path}system/dark/check-circle.svg#success--enabled'); - --icon__system_check-circle_neutral--enabled: url('#{$icons-path}system/dark/check-circle.svg#neutral--enabled'); - --icon__system_check-circle_neutral--hover: url('#{$icons-path}system/dark/check-circle.svg#neutral--hover'); - --icon__system_check-circle_neutral--active: url('#{$icons-path}system/dark/check-circle.svg#neutral--active'); - --icon__system_check-circle_neutral--disabled: url('#{$icons-path}system/dark/check-circle.svg#neutral--disabled'); - --icon__system_check-circle_highlighted--enabled: url('#{$icons-path}system/dark/check-circle.svg#highlighted--enabled'); - --icon__system_check-circle_bright--enabled: url('#{$icons-path}system/dark/check-circle.svg#bright--enabled'); - --icon__system_card_on-surface--enabled: url('#{$icons-path}system/dark/card.svg#on-surface--enabled'); - --icon__system_card_on-surface--hover: url('#{$icons-path}system/dark/card.svg#on-surface--hover'); - --icon__system_card_on-surface--active: url('#{$icons-path}system/dark/card.svg#on-surface--active'); - --icon__system_card_on-surface--disabled: url('#{$icons-path}system/dark/card.svg#on-surface--disabled'); - --icon__system_card_on-primary--enabled: url('#{$icons-path}system/dark/card.svg#on-primary--enabled'); - --icon__system_card_on-primary--hover: url('#{$icons-path}system/dark/card.svg#on-primary--hover'); - --icon__system_card_on-primary--active: url('#{$icons-path}system/dark/card.svg#on-primary--active'); - --icon__system_card_on-primary--disabled: url('#{$icons-path}system/dark/card.svg#on-primary--disabled'); - --icon__system_card_on-disabled--enabled: url('#{$icons-path}system/dark/card.svg#on-disabled--enabled'); - --icon__system_card_on-message--enabled: url('#{$icons-path}system/dark/card.svg#on-message--enabled'); - --icon__system_card_on-elevation--enabled: url('#{$icons-path}system/dark/card.svg#on-elevation--enabled'); - --icon__system_card_primary--enabled: url('#{$icons-path}system/dark/card.svg#primary--enabled'); - --icon__system_card_primary--hover: url('#{$icons-path}system/dark/card.svg#primary--hover'); - --icon__system_card_primary--active: url('#{$icons-path}system/dark/card.svg#primary--active'); - --icon__system_card_primary--disabled: url('#{$icons-path}system/dark/card.svg#primary--disabled'); - --icon__system_card_error--enabled: url('#{$icons-path}system/dark/card.svg#error--enabled'); - --icon__system_card_error-actionable--enabled: url('#{$icons-path}system/dark/card.svg#error-actionable--enabled'); - --icon__system_card_error-actionable--hover: url('#{$icons-path}system/dark/card.svg#error-actionable--hover'); - --icon__system_card_error-actionable--active: url('#{$icons-path}system/dark/card.svg#error-actionable--active'); - --icon__system_card_error-actionable--disabled: url('#{$icons-path}system/dark/card.svg#error-actionable--disabled'); - --icon__system_card_warning--enabled: url('#{$icons-path}system/dark/card.svg#warning--enabled'); - --icon__system_card_success--enabled: url('#{$icons-path}system/dark/card.svg#success--enabled'); - --icon__system_card_neutral--enabled: url('#{$icons-path}system/dark/card.svg#neutral--enabled'); - --icon__system_card_neutral--hover: url('#{$icons-path}system/dark/card.svg#neutral--hover'); - --icon__system_card_neutral--active: url('#{$icons-path}system/dark/card.svg#neutral--active'); - --icon__system_card_neutral--disabled: url('#{$icons-path}system/dark/card.svg#neutral--disabled'); - --icon__system_card_highlighted--enabled: url('#{$icons-path}system/dark/card.svg#highlighted--enabled'); - --icon__system_card_bright--enabled: url('#{$icons-path}system/dark/card.svg#bright--enabled'); - --icon__system_cancel-circle_on-surface--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#on-surface--enabled'); - --icon__system_cancel-circle_on-surface--hover: url('#{$icons-path}system/dark/cancel-circle.svg#on-surface--hover'); - --icon__system_cancel-circle_on-surface--active: url('#{$icons-path}system/dark/cancel-circle.svg#on-surface--active'); - --icon__system_cancel-circle_on-surface--disabled: url('#{$icons-path}system/dark/cancel-circle.svg#on-surface--disabled'); - --icon__system_cancel-circle_on-primary--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#on-primary--enabled'); - --icon__system_cancel-circle_on-primary--hover: url('#{$icons-path}system/dark/cancel-circle.svg#on-primary--hover'); - --icon__system_cancel-circle_on-primary--active: url('#{$icons-path}system/dark/cancel-circle.svg#on-primary--active'); - --icon__system_cancel-circle_on-primary--disabled: url('#{$icons-path}system/dark/cancel-circle.svg#on-primary--disabled'); - --icon__system_cancel-circle_on-disabled--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#on-disabled--enabled'); - --icon__system_cancel-circle_on-message--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#on-message--enabled'); - --icon__system_cancel-circle_on-elevation--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#on-elevation--enabled'); - --icon__system_cancel-circle_primary--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#primary--enabled'); - --icon__system_cancel-circle_primary--hover: url('#{$icons-path}system/dark/cancel-circle.svg#primary--hover'); - --icon__system_cancel-circle_primary--active: url('#{$icons-path}system/dark/cancel-circle.svg#primary--active'); - --icon__system_cancel-circle_primary--disabled: url('#{$icons-path}system/dark/cancel-circle.svg#primary--disabled'); - --icon__system_cancel-circle_error--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#error--enabled'); - --icon__system_cancel-circle_error-actionable--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#error-actionable--enabled'); - --icon__system_cancel-circle_error-actionable--hover: url('#{$icons-path}system/dark/cancel-circle.svg#error-actionable--hover'); - --icon__system_cancel-circle_error-actionable--active: url('#{$icons-path}system/dark/cancel-circle.svg#error-actionable--active'); - --icon__system_cancel-circle_error-actionable--disabled: url('#{$icons-path}system/dark/cancel-circle.svg#error-actionable--disabled'); - --icon__system_cancel-circle_warning--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#warning--enabled'); - --icon__system_cancel-circle_success--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#success--enabled'); - --icon__system_cancel-circle_neutral--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#neutral--enabled'); - --icon__system_cancel-circle_neutral--hover: url('#{$icons-path}system/dark/cancel-circle.svg#neutral--hover'); - --icon__system_cancel-circle_neutral--active: url('#{$icons-path}system/dark/cancel-circle.svg#neutral--active'); - --icon__system_cancel-circle_neutral--disabled: url('#{$icons-path}system/dark/cancel-circle.svg#neutral--disabled'); - --icon__system_cancel-circle_highlighted--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#highlighted--enabled'); - --icon__system_cancel-circle_bright--enabled: url('#{$icons-path}system/dark/cancel-circle.svg#bright--enabled'); - --icon__system_calendar_on-surface--enabled: url('#{$icons-path}system/dark/calendar.svg#on-surface--enabled'); - --icon__system_calendar_on-surface--hover: url('#{$icons-path}system/dark/calendar.svg#on-surface--hover'); - --icon__system_calendar_on-surface--active: url('#{$icons-path}system/dark/calendar.svg#on-surface--active'); - --icon__system_calendar_on-surface--disabled: url('#{$icons-path}system/dark/calendar.svg#on-surface--disabled'); - --icon__system_calendar_on-primary--enabled: url('#{$icons-path}system/dark/calendar.svg#on-primary--enabled'); - --icon__system_calendar_on-primary--hover: url('#{$icons-path}system/dark/calendar.svg#on-primary--hover'); - --icon__system_calendar_on-primary--active: url('#{$icons-path}system/dark/calendar.svg#on-primary--active'); - --icon__system_calendar_on-primary--disabled: url('#{$icons-path}system/dark/calendar.svg#on-primary--disabled'); - --icon__system_calendar_on-disabled--enabled: url('#{$icons-path}system/dark/calendar.svg#on-disabled--enabled'); - --icon__system_calendar_on-message--enabled: url('#{$icons-path}system/dark/calendar.svg#on-message--enabled'); - --icon__system_calendar_on-elevation--enabled: url('#{$icons-path}system/dark/calendar.svg#on-elevation--enabled'); - --icon__system_calendar_primary--enabled: url('#{$icons-path}system/dark/calendar.svg#primary--enabled'); - --icon__system_calendar_primary--hover: url('#{$icons-path}system/dark/calendar.svg#primary--hover'); - --icon__system_calendar_primary--active: url('#{$icons-path}system/dark/calendar.svg#primary--active'); - --icon__system_calendar_primary--disabled: url('#{$icons-path}system/dark/calendar.svg#primary--disabled'); - --icon__system_calendar_error--enabled: url('#{$icons-path}system/dark/calendar.svg#error--enabled'); - --icon__system_calendar_error-actionable--enabled: url('#{$icons-path}system/dark/calendar.svg#error-actionable--enabled'); - --icon__system_calendar_error-actionable--hover: url('#{$icons-path}system/dark/calendar.svg#error-actionable--hover'); - --icon__system_calendar_error-actionable--active: url('#{$icons-path}system/dark/calendar.svg#error-actionable--active'); - --icon__system_calendar_error-actionable--disabled: url('#{$icons-path}system/dark/calendar.svg#error-actionable--disabled'); - --icon__system_calendar_warning--enabled: url('#{$icons-path}system/dark/calendar.svg#warning--enabled'); - --icon__system_calendar_success--enabled: url('#{$icons-path}system/dark/calendar.svg#success--enabled'); - --icon__system_calendar_neutral--enabled: url('#{$icons-path}system/dark/calendar.svg#neutral--enabled'); - --icon__system_calendar_neutral--hover: url('#{$icons-path}system/dark/calendar.svg#neutral--hover'); - --icon__system_calendar_neutral--active: url('#{$icons-path}system/dark/calendar.svg#neutral--active'); - --icon__system_calendar_neutral--disabled: url('#{$icons-path}system/dark/calendar.svg#neutral--disabled'); - --icon__system_calendar_highlighted--enabled: url('#{$icons-path}system/dark/calendar.svg#highlighted--enabled'); - --icon__system_calendar_bright--enabled: url('#{$icons-path}system/dark/calendar.svg#bright--enabled'); - --icon__system_assistant_on-surface--enabled: url('#{$icons-path}system/dark/assistant.svg#on-surface--enabled'); - --icon__system_assistant_on-surface--hover: url('#{$icons-path}system/dark/assistant.svg#on-surface--hover'); - --icon__system_assistant_on-surface--active: url('#{$icons-path}system/dark/assistant.svg#on-surface--active'); - --icon__system_assistant_on-surface--disabled: url('#{$icons-path}system/dark/assistant.svg#on-surface--disabled'); - --icon__system_assistant_on-primary--enabled: url('#{$icons-path}system/dark/assistant.svg#on-primary--enabled'); - --icon__system_assistant_on-primary--hover: url('#{$icons-path}system/dark/assistant.svg#on-primary--hover'); - --icon__system_assistant_on-primary--active: url('#{$icons-path}system/dark/assistant.svg#on-primary--active'); - --icon__system_assistant_on-primary--disabled: url('#{$icons-path}system/dark/assistant.svg#on-primary--disabled'); - --icon__system_assistant_on-disabled--enabled: url('#{$icons-path}system/dark/assistant.svg#on-disabled--enabled'); - --icon__system_assistant_on-message--enabled: url('#{$icons-path}system/dark/assistant.svg#on-message--enabled'); - --icon__system_assistant_on-elevation--enabled: url('#{$icons-path}system/dark/assistant.svg#on-elevation--enabled'); - --icon__system_assistant_primary--enabled: url('#{$icons-path}system/dark/assistant.svg#primary--enabled'); - --icon__system_assistant_primary--hover: url('#{$icons-path}system/dark/assistant.svg#primary--hover'); - --icon__system_assistant_primary--active: url('#{$icons-path}system/dark/assistant.svg#primary--active'); - --icon__system_assistant_primary--disabled: url('#{$icons-path}system/dark/assistant.svg#primary--disabled'); - --icon__system_assistant_error--enabled: url('#{$icons-path}system/dark/assistant.svg#error--enabled'); - --icon__system_assistant_error-actionable--enabled: url('#{$icons-path}system/dark/assistant.svg#error-actionable--enabled'); - --icon__system_assistant_error-actionable--hover: url('#{$icons-path}system/dark/assistant.svg#error-actionable--hover'); - --icon__system_assistant_error-actionable--active: url('#{$icons-path}system/dark/assistant.svg#error-actionable--active'); - --icon__system_assistant_error-actionable--disabled: url('#{$icons-path}system/dark/assistant.svg#error-actionable--disabled'); - --icon__system_assistant_warning--enabled: url('#{$icons-path}system/dark/assistant.svg#warning--enabled'); - --icon__system_assistant_success--enabled: url('#{$icons-path}system/dark/assistant.svg#success--enabled'); - --icon__system_assistant_neutral--enabled: url('#{$icons-path}system/dark/assistant.svg#neutral--enabled'); - --icon__system_assistant_neutral--hover: url('#{$icons-path}system/dark/assistant.svg#neutral--hover'); - --icon__system_assistant_neutral--active: url('#{$icons-path}system/dark/assistant.svg#neutral--active'); - --icon__system_assistant_neutral--disabled: url('#{$icons-path}system/dark/assistant.svg#neutral--disabled'); - --icon__system_assistant_highlighted--enabled: url('#{$icons-path}system/dark/assistant.svg#highlighted--enabled'); - --icon__system_assistant_bright--enabled: url('#{$icons-path}system/dark/assistant.svg#bright--enabled'); - --icon__system_arrow-right_on-surface--enabled: url('#{$icons-path}system/dark/arrow-right.svg#on-surface--enabled'); - --icon__system_arrow-right_on-surface--hover: url('#{$icons-path}system/dark/arrow-right.svg#on-surface--hover'); - --icon__system_arrow-right_on-surface--active: url('#{$icons-path}system/dark/arrow-right.svg#on-surface--active'); - --icon__system_arrow-right_on-surface--disabled: url('#{$icons-path}system/dark/arrow-right.svg#on-surface--disabled'); - --icon__system_arrow-right_on-primary--enabled: url('#{$icons-path}system/dark/arrow-right.svg#on-primary--enabled'); - --icon__system_arrow-right_on-primary--hover: url('#{$icons-path}system/dark/arrow-right.svg#on-primary--hover'); - --icon__system_arrow-right_on-primary--active: url('#{$icons-path}system/dark/arrow-right.svg#on-primary--active'); - --icon__system_arrow-right_on-primary--disabled: url('#{$icons-path}system/dark/arrow-right.svg#on-primary--disabled'); - --icon__system_arrow-right_on-disabled--enabled: url('#{$icons-path}system/dark/arrow-right.svg#on-disabled--enabled'); - --icon__system_arrow-right_on-message--enabled: url('#{$icons-path}system/dark/arrow-right.svg#on-message--enabled'); - --icon__system_arrow-right_on-elevation--enabled: url('#{$icons-path}system/dark/arrow-right.svg#on-elevation--enabled'); - --icon__system_arrow-right_primary--enabled: url('#{$icons-path}system/dark/arrow-right.svg#primary--enabled'); - --icon__system_arrow-right_primary--hover: url('#{$icons-path}system/dark/arrow-right.svg#primary--hover'); - --icon__system_arrow-right_primary--active: url('#{$icons-path}system/dark/arrow-right.svg#primary--active'); - --icon__system_arrow-right_primary--disabled: url('#{$icons-path}system/dark/arrow-right.svg#primary--disabled'); - --icon__system_arrow-right_error--enabled: url('#{$icons-path}system/dark/arrow-right.svg#error--enabled'); - --icon__system_arrow-right_error-actionable--enabled: url('#{$icons-path}system/dark/arrow-right.svg#error-actionable--enabled'); - --icon__system_arrow-right_error-actionable--hover: url('#{$icons-path}system/dark/arrow-right.svg#error-actionable--hover'); - --icon__system_arrow-right_error-actionable--active: url('#{$icons-path}system/dark/arrow-right.svg#error-actionable--active'); - --icon__system_arrow-right_error-actionable--disabled: url('#{$icons-path}system/dark/arrow-right.svg#error-actionable--disabled'); - --icon__system_arrow-right_warning--enabled: url('#{$icons-path}system/dark/arrow-right.svg#warning--enabled'); - --icon__system_arrow-right_success--enabled: url('#{$icons-path}system/dark/arrow-right.svg#success--enabled'); - --icon__system_arrow-right_neutral--enabled: url('#{$icons-path}system/dark/arrow-right.svg#neutral--enabled'); - --icon__system_arrow-right_neutral--hover: url('#{$icons-path}system/dark/arrow-right.svg#neutral--hover'); - --icon__system_arrow-right_neutral--active: url('#{$icons-path}system/dark/arrow-right.svg#neutral--active'); - --icon__system_arrow-right_neutral--disabled: url('#{$icons-path}system/dark/arrow-right.svg#neutral--disabled'); - --icon__system_arrow-right_highlighted--enabled: url('#{$icons-path}system/dark/arrow-right.svg#highlighted--enabled'); - --icon__system_arrow-right_bright--enabled: url('#{$icons-path}system/dark/arrow-right.svg#bright--enabled'); - --icon__system_arrow-left_on-surface--enabled: url('#{$icons-path}system/dark/arrow-left.svg#on-surface--enabled'); - --icon__system_arrow-left_on-surface--hover: url('#{$icons-path}system/dark/arrow-left.svg#on-surface--hover'); - --icon__system_arrow-left_on-surface--active: url('#{$icons-path}system/dark/arrow-left.svg#on-surface--active'); - --icon__system_arrow-left_on-surface--disabled: url('#{$icons-path}system/dark/arrow-left.svg#on-surface--disabled'); - --icon__system_arrow-left_on-primary--enabled: url('#{$icons-path}system/dark/arrow-left.svg#on-primary--enabled'); - --icon__system_arrow-left_on-primary--hover: url('#{$icons-path}system/dark/arrow-left.svg#on-primary--hover'); - --icon__system_arrow-left_on-primary--active: url('#{$icons-path}system/dark/arrow-left.svg#on-primary--active'); - --icon__system_arrow-left_on-primary--disabled: url('#{$icons-path}system/dark/arrow-left.svg#on-primary--disabled'); - --icon__system_arrow-left_on-disabled--enabled: url('#{$icons-path}system/dark/arrow-left.svg#on-disabled--enabled'); - --icon__system_arrow-left_on-message--enabled: url('#{$icons-path}system/dark/arrow-left.svg#on-message--enabled'); - --icon__system_arrow-left_on-elevation--enabled: url('#{$icons-path}system/dark/arrow-left.svg#on-elevation--enabled'); - --icon__system_arrow-left_primary--enabled: url('#{$icons-path}system/dark/arrow-left.svg#primary--enabled'); - --icon__system_arrow-left_primary--hover: url('#{$icons-path}system/dark/arrow-left.svg#primary--hover'); - --icon__system_arrow-left_primary--active: url('#{$icons-path}system/dark/arrow-left.svg#primary--active'); - --icon__system_arrow-left_primary--disabled: url('#{$icons-path}system/dark/arrow-left.svg#primary--disabled'); - --icon__system_arrow-left_error--enabled: url('#{$icons-path}system/dark/arrow-left.svg#error--enabled'); - --icon__system_arrow-left_error-actionable--enabled: url('#{$icons-path}system/dark/arrow-left.svg#error-actionable--enabled'); - --icon__system_arrow-left_error-actionable--hover: url('#{$icons-path}system/dark/arrow-left.svg#error-actionable--hover'); - --icon__system_arrow-left_error-actionable--active: url('#{$icons-path}system/dark/arrow-left.svg#error-actionable--active'); - --icon__system_arrow-left_error-actionable--disabled: url('#{$icons-path}system/dark/arrow-left.svg#error-actionable--disabled'); - --icon__system_arrow-left_warning--enabled: url('#{$icons-path}system/dark/arrow-left.svg#warning--enabled'); - --icon__system_arrow-left_success--enabled: url('#{$icons-path}system/dark/arrow-left.svg#success--enabled'); - --icon__system_arrow-left_neutral--enabled: url('#{$icons-path}system/dark/arrow-left.svg#neutral--enabled'); - --icon__system_arrow-left_neutral--hover: url('#{$icons-path}system/dark/arrow-left.svg#neutral--hover'); - --icon__system_arrow-left_neutral--active: url('#{$icons-path}system/dark/arrow-left.svg#neutral--active'); - --icon__system_arrow-left_neutral--disabled: url('#{$icons-path}system/dark/arrow-left.svg#neutral--disabled'); - --icon__system_arrow-left_highlighted--enabled: url('#{$icons-path}system/dark/arrow-left.svg#highlighted--enabled'); - --icon__system_arrow-left_bright--enabled: url('#{$icons-path}system/dark/arrow-left.svg#bright--enabled'); - --icon__system_arrow-drop-up_on-surface--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#on-surface--enabled'); - --icon__system_arrow-drop-up_on-surface--hover: url('#{$icons-path}system/dark/arrow-drop-up.svg#on-surface--hover'); - --icon__system_arrow-drop-up_on-surface--active: url('#{$icons-path}system/dark/arrow-drop-up.svg#on-surface--active'); - --icon__system_arrow-drop-up_on-surface--disabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#on-surface--disabled'); - --icon__system_arrow-drop-up_on-primary--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#on-primary--enabled'); - --icon__system_arrow-drop-up_on-primary--hover: url('#{$icons-path}system/dark/arrow-drop-up.svg#on-primary--hover'); - --icon__system_arrow-drop-up_on-primary--active: url('#{$icons-path}system/dark/arrow-drop-up.svg#on-primary--active'); - --icon__system_arrow-drop-up_on-primary--disabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#on-primary--disabled'); - --icon__system_arrow-drop-up_on-disabled--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#on-disabled--enabled'); - --icon__system_arrow-drop-up_on-message--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#on-message--enabled'); - --icon__system_arrow-drop-up_on-elevation--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#on-elevation--enabled'); - --icon__system_arrow-drop-up_primary--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#primary--enabled'); - --icon__system_arrow-drop-up_primary--hover: url('#{$icons-path}system/dark/arrow-drop-up.svg#primary--hover'); - --icon__system_arrow-drop-up_primary--active: url('#{$icons-path}system/dark/arrow-drop-up.svg#primary--active'); - --icon__system_arrow-drop-up_primary--disabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#primary--disabled'); - --icon__system_arrow-drop-up_error--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#error--enabled'); - --icon__system_arrow-drop-up_error-actionable--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#error-actionable--enabled'); - --icon__system_arrow-drop-up_error-actionable--hover: url('#{$icons-path}system/dark/arrow-drop-up.svg#error-actionable--hover'); - --icon__system_arrow-drop-up_error-actionable--active: url('#{$icons-path}system/dark/arrow-drop-up.svg#error-actionable--active'); - --icon__system_arrow-drop-up_error-actionable--disabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#error-actionable--disabled'); - --icon__system_arrow-drop-up_warning--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#warning--enabled'); - --icon__system_arrow-drop-up_success--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#success--enabled'); - --icon__system_arrow-drop-up_neutral--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#neutral--enabled'); - --icon__system_arrow-drop-up_neutral--hover: url('#{$icons-path}system/dark/arrow-drop-up.svg#neutral--hover'); - --icon__system_arrow-drop-up_neutral--active: url('#{$icons-path}system/dark/arrow-drop-up.svg#neutral--active'); - --icon__system_arrow-drop-up_neutral--disabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#neutral--disabled'); - --icon__system_arrow-drop-up_highlighted--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#highlighted--enabled'); - --icon__system_arrow-drop-up_bright--enabled: url('#{$icons-path}system/dark/arrow-drop-up.svg#bright--enabled'); - --icon__system_arrow-drop-right_on-surface--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#on-surface--enabled'); - --icon__system_arrow-drop-right_on-surface--hover: url('#{$icons-path}system/dark/arrow-drop-right.svg#on-surface--hover'); - --icon__system_arrow-drop-right_on-surface--active: url('#{$icons-path}system/dark/arrow-drop-right.svg#on-surface--active'); - --icon__system_arrow-drop-right_on-surface--disabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#on-surface--disabled'); - --icon__system_arrow-drop-right_on-primary--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#on-primary--enabled'); - --icon__system_arrow-drop-right_on-primary--hover: url('#{$icons-path}system/dark/arrow-drop-right.svg#on-primary--hover'); - --icon__system_arrow-drop-right_on-primary--active: url('#{$icons-path}system/dark/arrow-drop-right.svg#on-primary--active'); - --icon__system_arrow-drop-right_on-primary--disabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#on-primary--disabled'); - --icon__system_arrow-drop-right_on-disabled--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#on-disabled--enabled'); - --icon__system_arrow-drop-right_on-message--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#on-message--enabled'); - --icon__system_arrow-drop-right_on-elevation--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#on-elevation--enabled'); - --icon__system_arrow-drop-right_primary--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#primary--enabled'); - --icon__system_arrow-drop-right_primary--hover: url('#{$icons-path}system/dark/arrow-drop-right.svg#primary--hover'); - --icon__system_arrow-drop-right_primary--active: url('#{$icons-path}system/dark/arrow-drop-right.svg#primary--active'); - --icon__system_arrow-drop-right_primary--disabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#primary--disabled'); - --icon__system_arrow-drop-right_error--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#error--enabled'); - --icon__system_arrow-drop-right_error-actionable--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#error-actionable--enabled'); - --icon__system_arrow-drop-right_error-actionable--hover: url('#{$icons-path}system/dark/arrow-drop-right.svg#error-actionable--hover'); - --icon__system_arrow-drop-right_error-actionable--active: url('#{$icons-path}system/dark/arrow-drop-right.svg#error-actionable--active'); - --icon__system_arrow-drop-right_error-actionable--disabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#error-actionable--disabled'); - --icon__system_arrow-drop-right_warning--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#warning--enabled'); - --icon__system_arrow-drop-right_success--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#success--enabled'); - --icon__system_arrow-drop-right_neutral--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#neutral--enabled'); - --icon__system_arrow-drop-right_neutral--hover: url('#{$icons-path}system/dark/arrow-drop-right.svg#neutral--hover'); - --icon__system_arrow-drop-right_neutral--active: url('#{$icons-path}system/dark/arrow-drop-right.svg#neutral--active'); - --icon__system_arrow-drop-right_neutral--disabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#neutral--disabled'); - --icon__system_arrow-drop-right_highlighted--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#highlighted--enabled'); - --icon__system_arrow-drop-right_bright--enabled: url('#{$icons-path}system/dark/arrow-drop-right.svg#bright--enabled'); - --icon__system_arrow-drop-left_on-surface--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#on-surface--enabled'); - --icon__system_arrow-drop-left_on-surface--hover: url('#{$icons-path}system/dark/arrow-drop-left.svg#on-surface--hover'); - --icon__system_arrow-drop-left_on-surface--active: url('#{$icons-path}system/dark/arrow-drop-left.svg#on-surface--active'); - --icon__system_arrow-drop-left_on-surface--disabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#on-surface--disabled'); - --icon__system_arrow-drop-left_on-primary--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#on-primary--enabled'); - --icon__system_arrow-drop-left_on-primary--hover: url('#{$icons-path}system/dark/arrow-drop-left.svg#on-primary--hover'); - --icon__system_arrow-drop-left_on-primary--active: url('#{$icons-path}system/dark/arrow-drop-left.svg#on-primary--active'); - --icon__system_arrow-drop-left_on-primary--disabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#on-primary--disabled'); - --icon__system_arrow-drop-left_on-disabled--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#on-disabled--enabled'); - --icon__system_arrow-drop-left_on-message--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#on-message--enabled'); - --icon__system_arrow-drop-left_on-elevation--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#on-elevation--enabled'); - --icon__system_arrow-drop-left_primary--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#primary--enabled'); - --icon__system_arrow-drop-left_primary--hover: url('#{$icons-path}system/dark/arrow-drop-left.svg#primary--hover'); - --icon__system_arrow-drop-left_primary--active: url('#{$icons-path}system/dark/arrow-drop-left.svg#primary--active'); - --icon__system_arrow-drop-left_primary--disabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#primary--disabled'); - --icon__system_arrow-drop-left_error--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#error--enabled'); - --icon__system_arrow-drop-left_error-actionable--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#error-actionable--enabled'); - --icon__system_arrow-drop-left_error-actionable--hover: url('#{$icons-path}system/dark/arrow-drop-left.svg#error-actionable--hover'); - --icon__system_arrow-drop-left_error-actionable--active: url('#{$icons-path}system/dark/arrow-drop-left.svg#error-actionable--active'); - --icon__system_arrow-drop-left_error-actionable--disabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#error-actionable--disabled'); - --icon__system_arrow-drop-left_warning--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#warning--enabled'); - --icon__system_arrow-drop-left_success--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#success--enabled'); - --icon__system_arrow-drop-left_neutral--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#neutral--enabled'); - --icon__system_arrow-drop-left_neutral--hover: url('#{$icons-path}system/dark/arrow-drop-left.svg#neutral--hover'); - --icon__system_arrow-drop-left_neutral--active: url('#{$icons-path}system/dark/arrow-drop-left.svg#neutral--active'); - --icon__system_arrow-drop-left_neutral--disabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#neutral--disabled'); - --icon__system_arrow-drop-left_highlighted--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#highlighted--enabled'); - --icon__system_arrow-drop-left_bright--enabled: url('#{$icons-path}system/dark/arrow-drop-left.svg#bright--enabled'); - --icon__system_arrow-drop-down_on-surface--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#on-surface--enabled'); - --icon__system_arrow-drop-down_on-surface--hover: url('#{$icons-path}system/dark/arrow-drop-down.svg#on-surface--hover'); - --icon__system_arrow-drop-down_on-surface--active: url('#{$icons-path}system/dark/arrow-drop-down.svg#on-surface--active'); - --icon__system_arrow-drop-down_on-surface--disabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#on-surface--disabled'); - --icon__system_arrow-drop-down_on-primary--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#on-primary--enabled'); - --icon__system_arrow-drop-down_on-primary--hover: url('#{$icons-path}system/dark/arrow-drop-down.svg#on-primary--hover'); - --icon__system_arrow-drop-down_on-primary--active: url('#{$icons-path}system/dark/arrow-drop-down.svg#on-primary--active'); - --icon__system_arrow-drop-down_on-primary--disabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#on-primary--disabled'); - --icon__system_arrow-drop-down_on-disabled--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#on-disabled--enabled'); - --icon__system_arrow-drop-down_on-message--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#on-message--enabled'); - --icon__system_arrow-drop-down_on-elevation--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#on-elevation--enabled'); - --icon__system_arrow-drop-down_primary--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#primary--enabled'); - --icon__system_arrow-drop-down_primary--hover: url('#{$icons-path}system/dark/arrow-drop-down.svg#primary--hover'); - --icon__system_arrow-drop-down_primary--active: url('#{$icons-path}system/dark/arrow-drop-down.svg#primary--active'); - --icon__system_arrow-drop-down_primary--disabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#primary--disabled'); - --icon__system_arrow-drop-down_error--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#error--enabled'); - --icon__system_arrow-drop-down_error-actionable--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#error-actionable--enabled'); - --icon__system_arrow-drop-down_error-actionable--hover: url('#{$icons-path}system/dark/arrow-drop-down.svg#error-actionable--hover'); - --icon__system_arrow-drop-down_error-actionable--active: url('#{$icons-path}system/dark/arrow-drop-down.svg#error-actionable--active'); - --icon__system_arrow-drop-down_error-actionable--disabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#error-actionable--disabled'); - --icon__system_arrow-drop-down_warning--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#warning--enabled'); - --icon__system_arrow-drop-down_success--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#success--enabled'); - --icon__system_arrow-drop-down_neutral--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#neutral--enabled'); - --icon__system_arrow-drop-down_neutral--hover: url('#{$icons-path}system/dark/arrow-drop-down.svg#neutral--hover'); - --icon__system_arrow-drop-down_neutral--active: url('#{$icons-path}system/dark/arrow-drop-down.svg#neutral--active'); - --icon__system_arrow-drop-down_neutral--disabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#neutral--disabled'); - --icon__system_arrow-drop-down_highlighted--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#highlighted--enabled'); - --icon__system_arrow-drop-down_bright--enabled: url('#{$icons-path}system/dark/arrow-drop-down.svg#bright--enabled'); - --icon__system_applications_on-surface--enabled: url('#{$icons-path}system/dark/applications.svg#on-surface--enabled'); - --icon__system_applications_on-surface--hover: url('#{$icons-path}system/dark/applications.svg#on-surface--hover'); - --icon__system_applications_on-surface--active: url('#{$icons-path}system/dark/applications.svg#on-surface--active'); - --icon__system_applications_on-surface--disabled: url('#{$icons-path}system/dark/applications.svg#on-surface--disabled'); - --icon__system_applications_on-primary--enabled: url('#{$icons-path}system/dark/applications.svg#on-primary--enabled'); - --icon__system_applications_on-primary--hover: url('#{$icons-path}system/dark/applications.svg#on-primary--hover'); - --icon__system_applications_on-primary--active: url('#{$icons-path}system/dark/applications.svg#on-primary--active'); - --icon__system_applications_on-primary--disabled: url('#{$icons-path}system/dark/applications.svg#on-primary--disabled'); - --icon__system_applications_on-disabled--enabled: url('#{$icons-path}system/dark/applications.svg#on-disabled--enabled'); - --icon__system_applications_on-message--enabled: url('#{$icons-path}system/dark/applications.svg#on-message--enabled'); - --icon__system_applications_on-elevation--enabled: url('#{$icons-path}system/dark/applications.svg#on-elevation--enabled'); - --icon__system_applications_primary--enabled: url('#{$icons-path}system/dark/applications.svg#primary--enabled'); - --icon__system_applications_primary--hover: url('#{$icons-path}system/dark/applications.svg#primary--hover'); - --icon__system_applications_primary--active: url('#{$icons-path}system/dark/applications.svg#primary--active'); - --icon__system_applications_primary--disabled: url('#{$icons-path}system/dark/applications.svg#primary--disabled'); - --icon__system_applications_error--enabled: url('#{$icons-path}system/dark/applications.svg#error--enabled'); - --icon__system_applications_error-actionable--enabled: url('#{$icons-path}system/dark/applications.svg#error-actionable--enabled'); - --icon__system_applications_error-actionable--hover: url('#{$icons-path}system/dark/applications.svg#error-actionable--hover'); - --icon__system_applications_error-actionable--active: url('#{$icons-path}system/dark/applications.svg#error-actionable--active'); - --icon__system_applications_error-actionable--disabled: url('#{$icons-path}system/dark/applications.svg#error-actionable--disabled'); - --icon__system_applications_warning--enabled: url('#{$icons-path}system/dark/applications.svg#warning--enabled'); - --icon__system_applications_success--enabled: url('#{$icons-path}system/dark/applications.svg#success--enabled'); - --icon__system_applications_neutral--enabled: url('#{$icons-path}system/dark/applications.svg#neutral--enabled'); - --icon__system_applications_neutral--hover: url('#{$icons-path}system/dark/applications.svg#neutral--hover'); - --icon__system_applications_neutral--active: url('#{$icons-path}system/dark/applications.svg#neutral--active'); - --icon__system_applications_neutral--disabled: url('#{$icons-path}system/dark/applications.svg#neutral--disabled'); - --icon__system_applications_highlighted--enabled: url('#{$icons-path}system/dark/applications.svg#highlighted--enabled'); - --icon__system_applications_bright--enabled: url('#{$icons-path}system/dark/applications.svg#bright--enabled'); - --icon__system_add_on-surface--enabled: url('#{$icons-path}system/dark/add.svg#on-surface--enabled'); - --icon__system_add_on-surface--hover: url('#{$icons-path}system/dark/add.svg#on-surface--hover'); - --icon__system_add_on-surface--active: url('#{$icons-path}system/dark/add.svg#on-surface--active'); - --icon__system_add_on-surface--disabled: url('#{$icons-path}system/dark/add.svg#on-surface--disabled'); - --icon__system_add_on-primary--enabled: url('#{$icons-path}system/dark/add.svg#on-primary--enabled'); - --icon__system_add_on-primary--hover: url('#{$icons-path}system/dark/add.svg#on-primary--hover'); - --icon__system_add_on-primary--active: url('#{$icons-path}system/dark/add.svg#on-primary--active'); - --icon__system_add_on-primary--disabled: url('#{$icons-path}system/dark/add.svg#on-primary--disabled'); - --icon__system_add_on-disabled--enabled: url('#{$icons-path}system/dark/add.svg#on-disabled--enabled'); - --icon__system_add_on-message--enabled: url('#{$icons-path}system/dark/add.svg#on-message--enabled'); - --icon__system_add_on-elevation--enabled: url('#{$icons-path}system/dark/add.svg#on-elevation--enabled'); - --icon__system_add_primary--enabled: url('#{$icons-path}system/dark/add.svg#primary--enabled'); - --icon__system_add_primary--hover: url('#{$icons-path}system/dark/add.svg#primary--hover'); - --icon__system_add_primary--active: url('#{$icons-path}system/dark/add.svg#primary--active'); - --icon__system_add_primary--disabled: url('#{$icons-path}system/dark/add.svg#primary--disabled'); - --icon__system_add_error--enabled: url('#{$icons-path}system/dark/add.svg#error--enabled'); - --icon__system_add_error-actionable--enabled: url('#{$icons-path}system/dark/add.svg#error-actionable--enabled'); - --icon__system_add_error-actionable--hover: url('#{$icons-path}system/dark/add.svg#error-actionable--hover'); - --icon__system_add_error-actionable--active: url('#{$icons-path}system/dark/add.svg#error-actionable--active'); - --icon__system_add_error-actionable--disabled: url('#{$icons-path}system/dark/add.svg#error-actionable--disabled'); - --icon__system_add_warning--enabled: url('#{$icons-path}system/dark/add.svg#warning--enabled'); - --icon__system_add_success--enabled: url('#{$icons-path}system/dark/add.svg#success--enabled'); - --icon__system_add_neutral--enabled: url('#{$icons-path}system/dark/add.svg#neutral--enabled'); - --icon__system_add_neutral--hover: url('#{$icons-path}system/dark/add.svg#neutral--hover'); - --icon__system_add_neutral--active: url('#{$icons-path}system/dark/add.svg#neutral--active'); - --icon__system_add_neutral--disabled: url('#{$icons-path}system/dark/add.svg#neutral--disabled'); - --icon__system_add_highlighted--enabled: url('#{$icons-path}system/dark/add.svg#highlighted--enabled'); - --icon__system_add_bright--enabled: url('#{$icons-path}system/dark/add.svg#bright--enabled'); - --icon__system_add-circle_on-surface--enabled: url('#{$icons-path}system/dark/add-circle.svg#on-surface--enabled'); - --icon__system_add-circle_on-surface--hover: url('#{$icons-path}system/dark/add-circle.svg#on-surface--hover'); - --icon__system_add-circle_on-surface--active: url('#{$icons-path}system/dark/add-circle.svg#on-surface--active'); - --icon__system_add-circle_on-surface--disabled: url('#{$icons-path}system/dark/add-circle.svg#on-surface--disabled'); - --icon__system_add-circle_on-primary--enabled: url('#{$icons-path}system/dark/add-circle.svg#on-primary--enabled'); - --icon__system_add-circle_on-primary--hover: url('#{$icons-path}system/dark/add-circle.svg#on-primary--hover'); - --icon__system_add-circle_on-primary--active: url('#{$icons-path}system/dark/add-circle.svg#on-primary--active'); - --icon__system_add-circle_on-primary--disabled: url('#{$icons-path}system/dark/add-circle.svg#on-primary--disabled'); - --icon__system_add-circle_on-disabled--enabled: url('#{$icons-path}system/dark/add-circle.svg#on-disabled--enabled'); - --icon__system_add-circle_on-message--enabled: url('#{$icons-path}system/dark/add-circle.svg#on-message--enabled'); - --icon__system_add-circle_on-elevation--enabled: url('#{$icons-path}system/dark/add-circle.svg#on-elevation--enabled'); - --icon__system_add-circle_primary--enabled: url('#{$icons-path}system/dark/add-circle.svg#primary--enabled'); - --icon__system_add-circle_primary--hover: url('#{$icons-path}system/dark/add-circle.svg#primary--hover'); - --icon__system_add-circle_primary--active: url('#{$icons-path}system/dark/add-circle.svg#primary--active'); - --icon__system_add-circle_primary--disabled: url('#{$icons-path}system/dark/add-circle.svg#primary--disabled'); - --icon__system_add-circle_error--enabled: url('#{$icons-path}system/dark/add-circle.svg#error--enabled'); - --icon__system_add-circle_error-actionable--enabled: url('#{$icons-path}system/dark/add-circle.svg#error-actionable--enabled'); - --icon__system_add-circle_error-actionable--hover: url('#{$icons-path}system/dark/add-circle.svg#error-actionable--hover'); - --icon__system_add-circle_error-actionable--active: url('#{$icons-path}system/dark/add-circle.svg#error-actionable--active'); - --icon__system_add-circle_error-actionable--disabled: url('#{$icons-path}system/dark/add-circle.svg#error-actionable--disabled'); - --icon__system_add-circle_warning--enabled: url('#{$icons-path}system/dark/add-circle.svg#warning--enabled'); - --icon__system_add-circle_success--enabled: url('#{$icons-path}system/dark/add-circle.svg#success--enabled'); - --icon__system_add-circle_neutral--enabled: url('#{$icons-path}system/dark/add-circle.svg#neutral--enabled'); - --icon__system_add-circle_neutral--hover: url('#{$icons-path}system/dark/add-circle.svg#neutral--hover'); - --icon__system_add-circle_neutral--active: url('#{$icons-path}system/dark/add-circle.svg#neutral--active'); - --icon__system_add-circle_neutral--disabled: url('#{$icons-path}system/dark/add-circle.svg#neutral--disabled'); - --icon__system_add-circle_highlighted--enabled: url('#{$icons-path}system/dark/add-circle.svg#highlighted--enabled'); - --icon__system_add-circle_bright--enabled: url('#{$icons-path}system/dark/add-circle.svg#bright--enabled'); - --icon__system_accessibility-new_on-surface--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#on-surface--enabled'); - --icon__system_accessibility-new_on-surface--hover: url('#{$icons-path}system/dark/accessibility-new.svg#on-surface--hover'); - --icon__system_accessibility-new_on-surface--active: url('#{$icons-path}system/dark/accessibility-new.svg#on-surface--active'); - --icon__system_accessibility-new_on-surface--disabled: url('#{$icons-path}system/dark/accessibility-new.svg#on-surface--disabled'); - --icon__system_accessibility-new_on-primary--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#on-primary--enabled'); - --icon__system_accessibility-new_on-primary--hover: url('#{$icons-path}system/dark/accessibility-new.svg#on-primary--hover'); - --icon__system_accessibility-new_on-primary--active: url('#{$icons-path}system/dark/accessibility-new.svg#on-primary--active'); - --icon__system_accessibility-new_on-primary--disabled: url('#{$icons-path}system/dark/accessibility-new.svg#on-primary--disabled'); - --icon__system_accessibility-new_on-disabled--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#on-disabled--enabled'); - --icon__system_accessibility-new_on-message--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#on-message--enabled'); - --icon__system_accessibility-new_on-elevation--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#on-elevation--enabled'); - --icon__system_accessibility-new_primary--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#primary--enabled'); - --icon__system_accessibility-new_primary--hover: url('#{$icons-path}system/dark/accessibility-new.svg#primary--hover'); - --icon__system_accessibility-new_primary--active: url('#{$icons-path}system/dark/accessibility-new.svg#primary--active'); - --icon__system_accessibility-new_primary--disabled: url('#{$icons-path}system/dark/accessibility-new.svg#primary--disabled'); - --icon__system_accessibility-new_error--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#error--enabled'); - --icon__system_accessibility-new_error-actionable--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#error-actionable--enabled'); - --icon__system_accessibility-new_error-actionable--hover: url('#{$icons-path}system/dark/accessibility-new.svg#error-actionable--hover'); - --icon__system_accessibility-new_error-actionable--active: url('#{$icons-path}system/dark/accessibility-new.svg#error-actionable--active'); - --icon__system_accessibility-new_error-actionable--disabled: url('#{$icons-path}system/dark/accessibility-new.svg#error-actionable--disabled'); - --icon__system_accessibility-new_warning--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#warning--enabled'); - --icon__system_accessibility-new_success--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#success--enabled'); - --icon__system_accessibility-new_neutral--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#neutral--enabled'); - --icon__system_accessibility-new_neutral--hover: url('#{$icons-path}system/dark/accessibility-new.svg#neutral--hover'); - --icon__system_accessibility-new_neutral--active: url('#{$icons-path}system/dark/accessibility-new.svg#neutral--active'); - --icon__system_accessibility-new_neutral--disabled: url('#{$icons-path}system/dark/accessibility-new.svg#neutral--disabled'); - --icon__system_accessibility-new_highlighted--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#highlighted--enabled'); - --icon__system_accessibility-new_bright--enabled: url('#{$icons-path}system/dark/accessibility-new.svg#bright--enabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*states*/ - --icon__states_pill-outlined_primary--enabled: url('#{$icons-path}states/light/pill-outlined.svg#primary--enabled'); - --icon__states_pill-outlined_primary--hover: url('#{$icons-path}states/light/pill-outlined.svg#primary--hover'); - --icon__states_pill-outlined_primary--active: url('#{$icons-path}states/light/pill-outlined.svg#primary--active'); - --icon__states_pill-outlined_primary--disabled: url('#{$icons-path}states/light/pill-outlined.svg#primary--disabled'); - --icon__states_pill-outlined_error--enabled: url('#{$icons-path}states/light/pill-outlined.svg#error--enabled'); - --icon__states_pill-outlined_warning--enabled: url('#{$icons-path}states/light/pill-outlined.svg#warning--enabled'); - --icon__states_pill-outlined_success--enabled: url('#{$icons-path}states/light/pill-outlined.svg#success--enabled'); - --icon__states_pill-outlined_highlighted--enabled: url('#{$icons-path}states/light/pill-outlined.svg#highlighted--enabled'); - --icon__states_pill-filled_primary--enabled: url('#{$icons-path}states/light/pill-filled.svg#primary--enabled'); - --icon__states_pill-filled_primary--hover: url('#{$icons-path}states/light/pill-filled.svg#primary--hover'); - --icon__states_pill-filled_primary--active: url('#{$icons-path}states/light/pill-filled.svg#primary--active'); - --icon__states_pill-filled_primary--disabled: url('#{$icons-path}states/light/pill-filled.svg#primary--disabled'); - --icon__states_pill-filled_error--enabled: url('#{$icons-path}states/light/pill-filled.svg#error--enabled'); - --icon__states_pill-filled_warning--enabled: url('#{$icons-path}states/light/pill-filled.svg#warning--enabled'); - --icon__states_pill-filled_success--enabled: url('#{$icons-path}states/light/pill-filled.svg#success--enabled'); - --icon__states_pill-filled_highlighted--enabled: url('#{$icons-path}states/light/pill-filled.svg#highlighted--enabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*states*/ - --icon__states_pill-outlined_primary--enabled: url('#{$icons-path}states/dark/pill-outlined.svg#primary--enabled'); - --icon__states_pill-outlined_primary--hover: url('#{$icons-path}states/dark/pill-outlined.svg#primary--hover'); - --icon__states_pill-outlined_primary--active: url('#{$icons-path}states/dark/pill-outlined.svg#primary--active'); - --icon__states_pill-outlined_primary--disabled: url('#{$icons-path}states/dark/pill-outlined.svg#primary--disabled'); - --icon__states_pill-outlined_error--enabled: url('#{$icons-path}states/dark/pill-outlined.svg#error--enabled'); - --icon__states_pill-outlined_warning--enabled: url('#{$icons-path}states/dark/pill-outlined.svg#warning--enabled'); - --icon__states_pill-outlined_success--enabled: url('#{$icons-path}states/dark/pill-outlined.svg#success--enabled'); - --icon__states_pill-outlined_highlighted--enabled: url('#{$icons-path}states/dark/pill-outlined.svg#highlighted--enabled'); - --icon__states_pill-filled_primary--enabled: url('#{$icons-path}states/dark/pill-filled.svg#primary--enabled'); - --icon__states_pill-filled_primary--hover: url('#{$icons-path}states/dark/pill-filled.svg#primary--hover'); - --icon__states_pill-filled_primary--active: url('#{$icons-path}states/dark/pill-filled.svg#primary--active'); - --icon__states_pill-filled_primary--disabled: url('#{$icons-path}states/dark/pill-filled.svg#primary--disabled'); - --icon__states_pill-filled_error--enabled: url('#{$icons-path}states/dark/pill-filled.svg#error--enabled'); - --icon__states_pill-filled_warning--enabled: url('#{$icons-path}states/dark/pill-filled.svg#warning--enabled'); - --icon__states_pill-filled_success--enabled: url('#{$icons-path}states/dark/pill-filled.svg#success--enabled'); - --icon__states_pill-filled_highlighted--enabled: url('#{$icons-path}states/dark/pill-filled.svg#highlighted--enabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*navigation*/ - --icon__navigation_pill-outlined_on-surface--enabled: url('#{$icons-path}navigation/light/pill-outlined.svg#on-surface--enabled'); - --icon__navigation_pill-outlined_on-surface--hover: url('#{$icons-path}navigation/light/pill-outlined.svg#on-surface--hover'); - --icon__navigation_pill-outlined_on-surface--active: url('#{$icons-path}navigation/light/pill-outlined.svg#on-surface--active'); - --icon__navigation_pill-outlined_on-surface--disabled: url('#{$icons-path}navigation/light/pill-outlined.svg#on-surface--disabled'); - --icon__navigation_pill-outlined_on-primary--enabled: url('#{$icons-path}navigation/light/pill-outlined.svg#on-primary--enabled'); - --icon__navigation_pill-outlined_on-primary--hover: url('#{$icons-path}navigation/light/pill-outlined.svg#on-primary--hover'); - --icon__navigation_pill-outlined_on-primary--active: url('#{$icons-path}navigation/light/pill-outlined.svg#on-primary--active'); - --icon__navigation_pill-outlined_on-primary--disabled: url('#{$icons-path}navigation/light/pill-outlined.svg#on-primary--disabled'); - --icon__navigation_pill-outlined_on-disabled--enabled: url('#{$icons-path}navigation/light/pill-outlined.svg#on-disabled--enabled'); - --icon__navigation_pill-outlined_on-message--enabled: url('#{$icons-path}navigation/light/pill-outlined.svg#on-message--enabled'); - --icon__navigation_pill-outlined_on-elevation--enabled: url('#{$icons-path}navigation/light/pill-outlined.svg#on-elevation--enabled'); - --icon__navigation_pill-outlined_primary--enabled: url('#{$icons-path}navigation/light/pill-outlined.svg#primary--enabled'); - --icon__navigation_pill-outlined_primary--hover: url('#{$icons-path}navigation/light/pill-outlined.svg#primary--hover'); - --icon__navigation_pill-outlined_primary--active: url('#{$icons-path}navigation/light/pill-outlined.svg#primary--active'); - --icon__navigation_pill-outlined_primary--disabled: url('#{$icons-path}navigation/light/pill-outlined.svg#primary--disabled'); - --icon__navigation_pill-outlined_neutral--enabled: url('#{$icons-path}navigation/light/pill-outlined.svg#neutral--enabled'); - --icon__navigation_pill-outlined_neutral--hover: url('#{$icons-path}navigation/light/pill-outlined.svg#neutral--hover'); - --icon__navigation_pill-outlined_neutral--active: url('#{$icons-path}navigation/light/pill-outlined.svg#neutral--active'); - --icon__navigation_pill-outlined_neutral--disabled: url('#{$icons-path}navigation/light/pill-outlined.svg#neutral--disabled'); - --icon__navigation_pill-outlined_highlighted--enabled: url('#{$icons-path}navigation/light/pill-outlined.svg#highlighted--enabled'); - --icon__navigation_pill-outlined_bright--enabled: url('#{$icons-path}navigation/light/pill-outlined.svg#bright--enabled'); - --icon__navigation_pill-filled_on-surface--enabled: url('#{$icons-path}navigation/light/pill-filled.svg#on-surface--enabled'); - --icon__navigation_pill-filled_on-surface--hover: url('#{$icons-path}navigation/light/pill-filled.svg#on-surface--hover'); - --icon__navigation_pill-filled_on-surface--active: url('#{$icons-path}navigation/light/pill-filled.svg#on-surface--active'); - --icon__navigation_pill-filled_on-surface--disabled: url('#{$icons-path}navigation/light/pill-filled.svg#on-surface--disabled'); - --icon__navigation_pill-filled_on-primary--enabled: url('#{$icons-path}navigation/light/pill-filled.svg#on-primary--enabled'); - --icon__navigation_pill-filled_on-primary--hover: url('#{$icons-path}navigation/light/pill-filled.svg#on-primary--hover'); - --icon__navigation_pill-filled_on-primary--active: url('#{$icons-path}navigation/light/pill-filled.svg#on-primary--active'); - --icon__navigation_pill-filled_on-primary--disabled: url('#{$icons-path}navigation/light/pill-filled.svg#on-primary--disabled'); - --icon__navigation_pill-filled_on-disabled--enabled: url('#{$icons-path}navigation/light/pill-filled.svg#on-disabled--enabled'); - --icon__navigation_pill-filled_on-message--enabled: url('#{$icons-path}navigation/light/pill-filled.svg#on-message--enabled'); - --icon__navigation_pill-filled_on-elevation--enabled: url('#{$icons-path}navigation/light/pill-filled.svg#on-elevation--enabled'); - --icon__navigation_pill-filled_primary--enabled: url('#{$icons-path}navigation/light/pill-filled.svg#primary--enabled'); - --icon__navigation_pill-filled_primary--hover: url('#{$icons-path}navigation/light/pill-filled.svg#primary--hover'); - --icon__navigation_pill-filled_primary--active: url('#{$icons-path}navigation/light/pill-filled.svg#primary--active'); - --icon__navigation_pill-filled_primary--disabled: url('#{$icons-path}navigation/light/pill-filled.svg#primary--disabled'); - --icon__navigation_pill-filled_neutral--enabled: url('#{$icons-path}navigation/light/pill-filled.svg#neutral--enabled'); - --icon__navigation_pill-filled_neutral--hover: url('#{$icons-path}navigation/light/pill-filled.svg#neutral--hover'); - --icon__navigation_pill-filled_neutral--active: url('#{$icons-path}navigation/light/pill-filled.svg#neutral--active'); - --icon__navigation_pill-filled_neutral--disabled: url('#{$icons-path}navigation/light/pill-filled.svg#neutral--disabled'); - --icon__navigation_pill-filled_highlighted--enabled: url('#{$icons-path}navigation/light/pill-filled.svg#highlighted--enabled'); - --icon__navigation_pill-filled_bright--enabled: url('#{$icons-path}navigation/light/pill-filled.svg#bright--enabled'); - --icon__navigation_level-up_on-surface--enabled: url('#{$icons-path}navigation/light/level-up.svg#on-surface--enabled'); - --icon__navigation_level-up_on-surface--hover: url('#{$icons-path}navigation/light/level-up.svg#on-surface--hover'); - --icon__navigation_level-up_on-surface--active: url('#{$icons-path}navigation/light/level-up.svg#on-surface--active'); - --icon__navigation_level-up_on-surface--disabled: url('#{$icons-path}navigation/light/level-up.svg#on-surface--disabled'); - --icon__navigation_level-up_on-primary--enabled: url('#{$icons-path}navigation/light/level-up.svg#on-primary--enabled'); - --icon__navigation_level-up_on-primary--hover: url('#{$icons-path}navigation/light/level-up.svg#on-primary--hover'); - --icon__navigation_level-up_on-primary--active: url('#{$icons-path}navigation/light/level-up.svg#on-primary--active'); - --icon__navigation_level-up_on-primary--disabled: url('#{$icons-path}navigation/light/level-up.svg#on-primary--disabled'); - --icon__navigation_level-up_on-disabled--enabled: url('#{$icons-path}navigation/light/level-up.svg#on-disabled--enabled'); - --icon__navigation_level-up_on-message--enabled: url('#{$icons-path}navigation/light/level-up.svg#on-message--enabled'); - --icon__navigation_level-up_on-elevation--enabled: url('#{$icons-path}navigation/light/level-up.svg#on-elevation--enabled'); - --icon__navigation_level-up_primary--enabled: url('#{$icons-path}navigation/light/level-up.svg#primary--enabled'); - --icon__navigation_level-up_primary--hover: url('#{$icons-path}navigation/light/level-up.svg#primary--hover'); - --icon__navigation_level-up_primary--active: url('#{$icons-path}navigation/light/level-up.svg#primary--active'); - --icon__navigation_level-up_primary--disabled: url('#{$icons-path}navigation/light/level-up.svg#primary--disabled'); - --icon__navigation_level-up_neutral--enabled: url('#{$icons-path}navigation/light/level-up.svg#neutral--enabled'); - --icon__navigation_level-up_neutral--hover: url('#{$icons-path}navigation/light/level-up.svg#neutral--hover'); - --icon__navigation_level-up_neutral--active: url('#{$icons-path}navigation/light/level-up.svg#neutral--active'); - --icon__navigation_level-up_neutral--disabled: url('#{$icons-path}navigation/light/level-up.svg#neutral--disabled'); - --icon__navigation_level-up_highlighted--enabled: url('#{$icons-path}navigation/light/level-up.svg#highlighted--enabled'); - --icon__navigation_level-up_bright--enabled: url('#{$icons-path}navigation/light/level-up.svg#bright--enabled'); - --icon__navigation_level-down_on-surface--enabled: url('#{$icons-path}navigation/light/level-down.svg#on-surface--enabled'); - --icon__navigation_level-down_on-surface--hover: url('#{$icons-path}navigation/light/level-down.svg#on-surface--hover'); - --icon__navigation_level-down_on-surface--active: url('#{$icons-path}navigation/light/level-down.svg#on-surface--active'); - --icon__navigation_level-down_on-surface--disabled: url('#{$icons-path}navigation/light/level-down.svg#on-surface--disabled'); - --icon__navigation_level-down_on-primary--enabled: url('#{$icons-path}navigation/light/level-down.svg#on-primary--enabled'); - --icon__navigation_level-down_on-primary--hover: url('#{$icons-path}navigation/light/level-down.svg#on-primary--hover'); - --icon__navigation_level-down_on-primary--active: url('#{$icons-path}navigation/light/level-down.svg#on-primary--active'); - --icon__navigation_level-down_on-primary--disabled: url('#{$icons-path}navigation/light/level-down.svg#on-primary--disabled'); - --icon__navigation_level-down_on-disabled--enabled: url('#{$icons-path}navigation/light/level-down.svg#on-disabled--enabled'); - --icon__navigation_level-down_on-message--enabled: url('#{$icons-path}navigation/light/level-down.svg#on-message--enabled'); - --icon__navigation_level-down_on-elevation--enabled: url('#{$icons-path}navigation/light/level-down.svg#on-elevation--enabled'); - --icon__navigation_level-down_primary--enabled: url('#{$icons-path}navigation/light/level-down.svg#primary--enabled'); - --icon__navigation_level-down_primary--hover: url('#{$icons-path}navigation/light/level-down.svg#primary--hover'); - --icon__navigation_level-down_primary--active: url('#{$icons-path}navigation/light/level-down.svg#primary--active'); - --icon__navigation_level-down_primary--disabled: url('#{$icons-path}navigation/light/level-down.svg#primary--disabled'); - --icon__navigation_level-down_neutral--enabled: url('#{$icons-path}navigation/light/level-down.svg#neutral--enabled'); - --icon__navigation_level-down_neutral--hover: url('#{$icons-path}navigation/light/level-down.svg#neutral--hover'); - --icon__navigation_level-down_neutral--active: url('#{$icons-path}navigation/light/level-down.svg#neutral--active'); - --icon__navigation_level-down_neutral--disabled: url('#{$icons-path}navigation/light/level-down.svg#neutral--disabled'); - --icon__navigation_level-down_highlighted--enabled: url('#{$icons-path}navigation/light/level-down.svg#highlighted--enabled'); - --icon__navigation_level-down_bright--enabled: url('#{$icons-path}navigation/light/level-down.svg#bright--enabled'); - --icon__navigation_gx-arrow-right_on-surface--enabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#on-surface--enabled'); - --icon__navigation_gx-arrow-right_on-surface--hover: url('#{$icons-path}navigation/light/gx-arrow-right.svg#on-surface--hover'); - --icon__navigation_gx-arrow-right_on-surface--active: url('#{$icons-path}navigation/light/gx-arrow-right.svg#on-surface--active'); - --icon__navigation_gx-arrow-right_on-surface--disabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#on-surface--disabled'); - --icon__navigation_gx-arrow-right_on-primary--enabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#on-primary--enabled'); - --icon__navigation_gx-arrow-right_on-primary--hover: url('#{$icons-path}navigation/light/gx-arrow-right.svg#on-primary--hover'); - --icon__navigation_gx-arrow-right_on-primary--active: url('#{$icons-path}navigation/light/gx-arrow-right.svg#on-primary--active'); - --icon__navigation_gx-arrow-right_on-primary--disabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#on-primary--disabled'); - --icon__navigation_gx-arrow-right_on-disabled--enabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#on-disabled--enabled'); - --icon__navigation_gx-arrow-right_on-message--enabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#on-message--enabled'); - --icon__navigation_gx-arrow-right_on-elevation--enabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#on-elevation--enabled'); - --icon__navigation_gx-arrow-right_primary--enabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#primary--enabled'); - --icon__navigation_gx-arrow-right_primary--hover: url('#{$icons-path}navigation/light/gx-arrow-right.svg#primary--hover'); - --icon__navigation_gx-arrow-right_primary--active: url('#{$icons-path}navigation/light/gx-arrow-right.svg#primary--active'); - --icon__navigation_gx-arrow-right_primary--disabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#primary--disabled'); - --icon__navigation_gx-arrow-right_neutral--enabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#neutral--enabled'); - --icon__navigation_gx-arrow-right_neutral--hover: url('#{$icons-path}navigation/light/gx-arrow-right.svg#neutral--hover'); - --icon__navigation_gx-arrow-right_neutral--active: url('#{$icons-path}navigation/light/gx-arrow-right.svg#neutral--active'); - --icon__navigation_gx-arrow-right_neutral--disabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#neutral--disabled'); - --icon__navigation_gx-arrow-right_highlighted--enabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#highlighted--enabled'); - --icon__navigation_gx-arrow-right_bright--enabled: url('#{$icons-path}navigation/light/gx-arrow-right.svg#bright--enabled'); - --icon__navigation_drag_on-surface--enabled: url('#{$icons-path}navigation/light/drag.svg#on-surface--enabled'); - --icon__navigation_drag_on-surface--hover: url('#{$icons-path}navigation/light/drag.svg#on-surface--hover'); - --icon__navigation_drag_on-surface--active: url('#{$icons-path}navigation/light/drag.svg#on-surface--active'); - --icon__navigation_drag_on-surface--disabled: url('#{$icons-path}navigation/light/drag.svg#on-surface--disabled'); - --icon__navigation_drag_on-primary--enabled: url('#{$icons-path}navigation/light/drag.svg#on-primary--enabled'); - --icon__navigation_drag_on-primary--hover: url('#{$icons-path}navigation/light/drag.svg#on-primary--hover'); - --icon__navigation_drag_on-primary--active: url('#{$icons-path}navigation/light/drag.svg#on-primary--active'); - --icon__navigation_drag_on-primary--disabled: url('#{$icons-path}navigation/light/drag.svg#on-primary--disabled'); - --icon__navigation_drag_on-disabled--enabled: url('#{$icons-path}navigation/light/drag.svg#on-disabled--enabled'); - --icon__navigation_drag_on-message--enabled: url('#{$icons-path}navigation/light/drag.svg#on-message--enabled'); - --icon__navigation_drag_on-elevation--enabled: url('#{$icons-path}navigation/light/drag.svg#on-elevation--enabled'); - --icon__navigation_drag_primary--enabled: url('#{$icons-path}navigation/light/drag.svg#primary--enabled'); - --icon__navigation_drag_primary--hover: url('#{$icons-path}navigation/light/drag.svg#primary--hover'); - --icon__navigation_drag_primary--active: url('#{$icons-path}navigation/light/drag.svg#primary--active'); - --icon__navigation_drag_primary--disabled: url('#{$icons-path}navigation/light/drag.svg#primary--disabled'); - --icon__navigation_drag_neutral--enabled: url('#{$icons-path}navigation/light/drag.svg#neutral--enabled'); - --icon__navigation_drag_neutral--hover: url('#{$icons-path}navigation/light/drag.svg#neutral--hover'); - --icon__navigation_drag_neutral--active: url('#{$icons-path}navigation/light/drag.svg#neutral--active'); - --icon__navigation_drag_neutral--disabled: url('#{$icons-path}navigation/light/drag.svg#neutral--disabled'); - --icon__navigation_drag_highlighted--enabled: url('#{$icons-path}navigation/light/drag.svg#highlighted--enabled'); - --icon__navigation_drag_bright--enabled: url('#{$icons-path}navigation/light/drag.svg#bright--enabled'); - --icon__navigation_chevron-up_on-surface--enabled: url('#{$icons-path}navigation/light/chevron-up.svg#on-surface--enabled'); - --icon__navigation_chevron-up_on-surface--hover: url('#{$icons-path}navigation/light/chevron-up.svg#on-surface--hover'); - --icon__navigation_chevron-up_on-surface--active: url('#{$icons-path}navigation/light/chevron-up.svg#on-surface--active'); - --icon__navigation_chevron-up_on-surface--disabled: url('#{$icons-path}navigation/light/chevron-up.svg#on-surface--disabled'); - --icon__navigation_chevron-up_on-primary--enabled: url('#{$icons-path}navigation/light/chevron-up.svg#on-primary--enabled'); - --icon__navigation_chevron-up_on-primary--hover: url('#{$icons-path}navigation/light/chevron-up.svg#on-primary--hover'); - --icon__navigation_chevron-up_on-primary--active: url('#{$icons-path}navigation/light/chevron-up.svg#on-primary--active'); - --icon__navigation_chevron-up_on-primary--disabled: url('#{$icons-path}navigation/light/chevron-up.svg#on-primary--disabled'); - --icon__navigation_chevron-up_on-disabled--enabled: url('#{$icons-path}navigation/light/chevron-up.svg#on-disabled--enabled'); - --icon__navigation_chevron-up_on-message--enabled: url('#{$icons-path}navigation/light/chevron-up.svg#on-message--enabled'); - --icon__navigation_chevron-up_on-elevation--enabled: url('#{$icons-path}navigation/light/chevron-up.svg#on-elevation--enabled'); - --icon__navigation_chevron-up_primary--enabled: url('#{$icons-path}navigation/light/chevron-up.svg#primary--enabled'); - --icon__navigation_chevron-up_primary--hover: url('#{$icons-path}navigation/light/chevron-up.svg#primary--hover'); - --icon__navigation_chevron-up_primary--active: url('#{$icons-path}navigation/light/chevron-up.svg#primary--active'); - --icon__navigation_chevron-up_primary--disabled: url('#{$icons-path}navigation/light/chevron-up.svg#primary--disabled'); - --icon__navigation_chevron-up_neutral--enabled: url('#{$icons-path}navigation/light/chevron-up.svg#neutral--enabled'); - --icon__navigation_chevron-up_neutral--hover: url('#{$icons-path}navigation/light/chevron-up.svg#neutral--hover'); - --icon__navigation_chevron-up_neutral--active: url('#{$icons-path}navigation/light/chevron-up.svg#neutral--active'); - --icon__navigation_chevron-up_neutral--disabled: url('#{$icons-path}navigation/light/chevron-up.svg#neutral--disabled'); - --icon__navigation_chevron-up_highlighted--enabled: url('#{$icons-path}navigation/light/chevron-up.svg#highlighted--enabled'); - --icon__navigation_chevron-up_bright--enabled: url('#{$icons-path}navigation/light/chevron-up.svg#bright--enabled'); - --icon__navigation_chevron-right_on-surface--enabled: url('#{$icons-path}navigation/light/chevron-right.svg#on-surface--enabled'); - --icon__navigation_chevron-right_on-surface--hover: url('#{$icons-path}navigation/light/chevron-right.svg#on-surface--hover'); - --icon__navigation_chevron-right_on-surface--active: url('#{$icons-path}navigation/light/chevron-right.svg#on-surface--active'); - --icon__navigation_chevron-right_on-surface--disabled: url('#{$icons-path}navigation/light/chevron-right.svg#on-surface--disabled'); - --icon__navigation_chevron-right_on-primary--enabled: url('#{$icons-path}navigation/light/chevron-right.svg#on-primary--enabled'); - --icon__navigation_chevron-right_on-primary--hover: url('#{$icons-path}navigation/light/chevron-right.svg#on-primary--hover'); - --icon__navigation_chevron-right_on-primary--active: url('#{$icons-path}navigation/light/chevron-right.svg#on-primary--active'); - --icon__navigation_chevron-right_on-primary--disabled: url('#{$icons-path}navigation/light/chevron-right.svg#on-primary--disabled'); - --icon__navigation_chevron-right_on-disabled--enabled: url('#{$icons-path}navigation/light/chevron-right.svg#on-disabled--enabled'); - --icon__navigation_chevron-right_on-message--enabled: url('#{$icons-path}navigation/light/chevron-right.svg#on-message--enabled'); - --icon__navigation_chevron-right_on-elevation--enabled: url('#{$icons-path}navigation/light/chevron-right.svg#on-elevation--enabled'); - --icon__navigation_chevron-right_primary--enabled: url('#{$icons-path}navigation/light/chevron-right.svg#primary--enabled'); - --icon__navigation_chevron-right_primary--hover: url('#{$icons-path}navigation/light/chevron-right.svg#primary--hover'); - --icon__navigation_chevron-right_primary--active: url('#{$icons-path}navigation/light/chevron-right.svg#primary--active'); - --icon__navigation_chevron-right_primary--disabled: url('#{$icons-path}navigation/light/chevron-right.svg#primary--disabled'); - --icon__navigation_chevron-right_neutral--enabled: url('#{$icons-path}navigation/light/chevron-right.svg#neutral--enabled'); - --icon__navigation_chevron-right_neutral--hover: url('#{$icons-path}navigation/light/chevron-right.svg#neutral--hover'); - --icon__navigation_chevron-right_neutral--active: url('#{$icons-path}navigation/light/chevron-right.svg#neutral--active'); - --icon__navigation_chevron-right_neutral--disabled: url('#{$icons-path}navigation/light/chevron-right.svg#neutral--disabled'); - --icon__navigation_chevron-right_highlighted--enabled: url('#{$icons-path}navigation/light/chevron-right.svg#highlighted--enabled'); - --icon__navigation_chevron-right_bright--enabled: url('#{$icons-path}navigation/light/chevron-right.svg#bright--enabled'); - --icon__navigation_chevron-left_on-surface--enabled: url('#{$icons-path}navigation/light/chevron-left.svg#on-surface--enabled'); - --icon__navigation_chevron-left_on-surface--hover: url('#{$icons-path}navigation/light/chevron-left.svg#on-surface--hover'); - --icon__navigation_chevron-left_on-surface--active: url('#{$icons-path}navigation/light/chevron-left.svg#on-surface--active'); - --icon__navigation_chevron-left_on-surface--disabled: url('#{$icons-path}navigation/light/chevron-left.svg#on-surface--disabled'); - --icon__navigation_chevron-left_on-primary--enabled: url('#{$icons-path}navigation/light/chevron-left.svg#on-primary--enabled'); - --icon__navigation_chevron-left_on-primary--hover: url('#{$icons-path}navigation/light/chevron-left.svg#on-primary--hover'); - --icon__navigation_chevron-left_on-primary--active: url('#{$icons-path}navigation/light/chevron-left.svg#on-primary--active'); - --icon__navigation_chevron-left_on-primary--disabled: url('#{$icons-path}navigation/light/chevron-left.svg#on-primary--disabled'); - --icon__navigation_chevron-left_on-disabled--enabled: url('#{$icons-path}navigation/light/chevron-left.svg#on-disabled--enabled'); - --icon__navigation_chevron-left_on-message--enabled: url('#{$icons-path}navigation/light/chevron-left.svg#on-message--enabled'); - --icon__navigation_chevron-left_on-elevation--enabled: url('#{$icons-path}navigation/light/chevron-left.svg#on-elevation--enabled'); - --icon__navigation_chevron-left_primary--enabled: url('#{$icons-path}navigation/light/chevron-left.svg#primary--enabled'); - --icon__navigation_chevron-left_primary--hover: url('#{$icons-path}navigation/light/chevron-left.svg#primary--hover'); - --icon__navigation_chevron-left_primary--active: url('#{$icons-path}navigation/light/chevron-left.svg#primary--active'); - --icon__navigation_chevron-left_primary--disabled: url('#{$icons-path}navigation/light/chevron-left.svg#primary--disabled'); - --icon__navigation_chevron-left_neutral--enabled: url('#{$icons-path}navigation/light/chevron-left.svg#neutral--enabled'); - --icon__navigation_chevron-left_neutral--hover: url('#{$icons-path}navigation/light/chevron-left.svg#neutral--hover'); - --icon__navigation_chevron-left_neutral--active: url('#{$icons-path}navigation/light/chevron-left.svg#neutral--active'); - --icon__navigation_chevron-left_neutral--disabled: url('#{$icons-path}navigation/light/chevron-left.svg#neutral--disabled'); - --icon__navigation_chevron-left_highlighted--enabled: url('#{$icons-path}navigation/light/chevron-left.svg#highlighted--enabled'); - --icon__navigation_chevron-left_bright--enabled: url('#{$icons-path}navigation/light/chevron-left.svg#bright--enabled'); - --icon__navigation_chevron-down_on-surface--enabled: url('#{$icons-path}navigation/light/chevron-down.svg#on-surface--enabled'); - --icon__navigation_chevron-down_on-surface--hover: url('#{$icons-path}navigation/light/chevron-down.svg#on-surface--hover'); - --icon__navigation_chevron-down_on-surface--active: url('#{$icons-path}navigation/light/chevron-down.svg#on-surface--active'); - --icon__navigation_chevron-down_on-surface--disabled: url('#{$icons-path}navigation/light/chevron-down.svg#on-surface--disabled'); - --icon__navigation_chevron-down_on-primary--enabled: url('#{$icons-path}navigation/light/chevron-down.svg#on-primary--enabled'); - --icon__navigation_chevron-down_on-primary--hover: url('#{$icons-path}navigation/light/chevron-down.svg#on-primary--hover'); - --icon__navigation_chevron-down_on-primary--active: url('#{$icons-path}navigation/light/chevron-down.svg#on-primary--active'); - --icon__navigation_chevron-down_on-primary--disabled: url('#{$icons-path}navigation/light/chevron-down.svg#on-primary--disabled'); - --icon__navigation_chevron-down_on-disabled--enabled: url('#{$icons-path}navigation/light/chevron-down.svg#on-disabled--enabled'); - --icon__navigation_chevron-down_on-message--enabled: url('#{$icons-path}navigation/light/chevron-down.svg#on-message--enabled'); - --icon__navigation_chevron-down_on-elevation--enabled: url('#{$icons-path}navigation/light/chevron-down.svg#on-elevation--enabled'); - --icon__navigation_chevron-down_primary--enabled: url('#{$icons-path}navigation/light/chevron-down.svg#primary--enabled'); - --icon__navigation_chevron-down_primary--hover: url('#{$icons-path}navigation/light/chevron-down.svg#primary--hover'); - --icon__navigation_chevron-down_primary--active: url('#{$icons-path}navigation/light/chevron-down.svg#primary--active'); - --icon__navigation_chevron-down_primary--disabled: url('#{$icons-path}navigation/light/chevron-down.svg#primary--disabled'); - --icon__navigation_chevron-down_neutral--enabled: url('#{$icons-path}navigation/light/chevron-down.svg#neutral--enabled'); - --icon__navigation_chevron-down_neutral--hover: url('#{$icons-path}navigation/light/chevron-down.svg#neutral--hover'); - --icon__navigation_chevron-down_neutral--active: url('#{$icons-path}navigation/light/chevron-down.svg#neutral--active'); - --icon__navigation_chevron-down_neutral--disabled: url('#{$icons-path}navigation/light/chevron-down.svg#neutral--disabled'); - --icon__navigation_chevron-down_highlighted--enabled: url('#{$icons-path}navigation/light/chevron-down.svg#highlighted--enabled'); - --icon__navigation_chevron-down_bright--enabled: url('#{$icons-path}navigation/light/chevron-down.svg#bright--enabled'); - --icon__navigation_bullet_on-surface--enabled: url('#{$icons-path}navigation/light/bullet.svg#on-surface--enabled'); - --icon__navigation_bullet_on-surface--hover: url('#{$icons-path}navigation/light/bullet.svg#on-surface--hover'); - --icon__navigation_bullet_on-surface--active: url('#{$icons-path}navigation/light/bullet.svg#on-surface--active'); - --icon__navigation_bullet_on-surface--disabled: url('#{$icons-path}navigation/light/bullet.svg#on-surface--disabled'); - --icon__navigation_bullet_on-primary--enabled: url('#{$icons-path}navigation/light/bullet.svg#on-primary--enabled'); - --icon__navigation_bullet_on-primary--hover: url('#{$icons-path}navigation/light/bullet.svg#on-primary--hover'); - --icon__navigation_bullet_on-primary--active: url('#{$icons-path}navigation/light/bullet.svg#on-primary--active'); - --icon__navigation_bullet_on-primary--disabled: url('#{$icons-path}navigation/light/bullet.svg#on-primary--disabled'); - --icon__navigation_bullet_on-disabled--enabled: url('#{$icons-path}navigation/light/bullet.svg#on-disabled--enabled'); - --icon__navigation_bullet_on-message--enabled: url('#{$icons-path}navigation/light/bullet.svg#on-message--enabled'); - --icon__navigation_bullet_on-elevation--enabled: url('#{$icons-path}navigation/light/bullet.svg#on-elevation--enabled'); - --icon__navigation_bullet_primary--enabled: url('#{$icons-path}navigation/light/bullet.svg#primary--enabled'); - --icon__navigation_bullet_primary--hover: url('#{$icons-path}navigation/light/bullet.svg#primary--hover'); - --icon__navigation_bullet_primary--active: url('#{$icons-path}navigation/light/bullet.svg#primary--active'); - --icon__navigation_bullet_primary--disabled: url('#{$icons-path}navigation/light/bullet.svg#primary--disabled'); - --icon__navigation_bullet_neutral--enabled: url('#{$icons-path}navigation/light/bullet.svg#neutral--enabled'); - --icon__navigation_bullet_neutral--hover: url('#{$icons-path}navigation/light/bullet.svg#neutral--hover'); - --icon__navigation_bullet_neutral--active: url('#{$icons-path}navigation/light/bullet.svg#neutral--active'); - --icon__navigation_bullet_neutral--disabled: url('#{$icons-path}navigation/light/bullet.svg#neutral--disabled'); - --icon__navigation_bullet_highlighted--enabled: url('#{$icons-path}navigation/light/bullet.svg#highlighted--enabled'); - --icon__navigation_bullet_bright--enabled: url('#{$icons-path}navigation/light/bullet.svg#bright--enabled'); - --icon__navigation_arrow-up_on-surface--enabled: url('#{$icons-path}navigation/light/arrow-up.svg#on-surface--enabled'); - --icon__navigation_arrow-up_on-surface--hover: url('#{$icons-path}navigation/light/arrow-up.svg#on-surface--hover'); - --icon__navigation_arrow-up_on-surface--active: url('#{$icons-path}navigation/light/arrow-up.svg#on-surface--active'); - --icon__navigation_arrow-up_on-surface--disabled: url('#{$icons-path}navigation/light/arrow-up.svg#on-surface--disabled'); - --icon__navigation_arrow-up_on-primary--enabled: url('#{$icons-path}navigation/light/arrow-up.svg#on-primary--enabled'); - --icon__navigation_arrow-up_on-primary--hover: url('#{$icons-path}navigation/light/arrow-up.svg#on-primary--hover'); - --icon__navigation_arrow-up_on-primary--active: url('#{$icons-path}navigation/light/arrow-up.svg#on-primary--active'); - --icon__navigation_arrow-up_on-primary--disabled: url('#{$icons-path}navigation/light/arrow-up.svg#on-primary--disabled'); - --icon__navigation_arrow-up_on-disabled--enabled: url('#{$icons-path}navigation/light/arrow-up.svg#on-disabled--enabled'); - --icon__navigation_arrow-up_on-message--enabled: url('#{$icons-path}navigation/light/arrow-up.svg#on-message--enabled'); - --icon__navigation_arrow-up_on-elevation--enabled: url('#{$icons-path}navigation/light/arrow-up.svg#on-elevation--enabled'); - --icon__navigation_arrow-up_primary--enabled: url('#{$icons-path}navigation/light/arrow-up.svg#primary--enabled'); - --icon__navigation_arrow-up_primary--hover: url('#{$icons-path}navigation/light/arrow-up.svg#primary--hover'); - --icon__navigation_arrow-up_primary--active: url('#{$icons-path}navigation/light/arrow-up.svg#primary--active'); - --icon__navigation_arrow-up_primary--disabled: url('#{$icons-path}navigation/light/arrow-up.svg#primary--disabled'); - --icon__navigation_arrow-up_neutral--enabled: url('#{$icons-path}navigation/light/arrow-up.svg#neutral--enabled'); - --icon__navigation_arrow-up_neutral--hover: url('#{$icons-path}navigation/light/arrow-up.svg#neutral--hover'); - --icon__navigation_arrow-up_neutral--active: url('#{$icons-path}navigation/light/arrow-up.svg#neutral--active'); - --icon__navigation_arrow-up_neutral--disabled: url('#{$icons-path}navigation/light/arrow-up.svg#neutral--disabled'); - --icon__navigation_arrow-up_highlighted--enabled: url('#{$icons-path}navigation/light/arrow-up.svg#highlighted--enabled'); - --icon__navigation_arrow-up_bright--enabled: url('#{$icons-path}navigation/light/arrow-up.svg#bright--enabled'); - --icon__navigation_arrow-right_on-surface--enabled: url('#{$icons-path}navigation/light/arrow-right.svg#on-surface--enabled'); - --icon__navigation_arrow-right_on-surface--hover: url('#{$icons-path}navigation/light/arrow-right.svg#on-surface--hover'); - --icon__navigation_arrow-right_on-surface--active: url('#{$icons-path}navigation/light/arrow-right.svg#on-surface--active'); - --icon__navigation_arrow-right_on-surface--disabled: url('#{$icons-path}navigation/light/arrow-right.svg#on-surface--disabled'); - --icon__navigation_arrow-right_on-primary--enabled: url('#{$icons-path}navigation/light/arrow-right.svg#on-primary--enabled'); - --icon__navigation_arrow-right_on-primary--hover: url('#{$icons-path}navigation/light/arrow-right.svg#on-primary--hover'); - --icon__navigation_arrow-right_on-primary--active: url('#{$icons-path}navigation/light/arrow-right.svg#on-primary--active'); - --icon__navigation_arrow-right_on-primary--disabled: url('#{$icons-path}navigation/light/arrow-right.svg#on-primary--disabled'); - --icon__navigation_arrow-right_on-disabled--enabled: url('#{$icons-path}navigation/light/arrow-right.svg#on-disabled--enabled'); - --icon__navigation_arrow-right_on-message--enabled: url('#{$icons-path}navigation/light/arrow-right.svg#on-message--enabled'); - --icon__navigation_arrow-right_on-elevation--enabled: url('#{$icons-path}navigation/light/arrow-right.svg#on-elevation--enabled'); - --icon__navigation_arrow-right_primary--enabled: url('#{$icons-path}navigation/light/arrow-right.svg#primary--enabled'); - --icon__navigation_arrow-right_primary--hover: url('#{$icons-path}navigation/light/arrow-right.svg#primary--hover'); - --icon__navigation_arrow-right_primary--active: url('#{$icons-path}navigation/light/arrow-right.svg#primary--active'); - --icon__navigation_arrow-right_primary--disabled: url('#{$icons-path}navigation/light/arrow-right.svg#primary--disabled'); - --icon__navigation_arrow-right_neutral--enabled: url('#{$icons-path}navigation/light/arrow-right.svg#neutral--enabled'); - --icon__navigation_arrow-right_neutral--hover: url('#{$icons-path}navigation/light/arrow-right.svg#neutral--hover'); - --icon__navigation_arrow-right_neutral--active: url('#{$icons-path}navigation/light/arrow-right.svg#neutral--active'); - --icon__navigation_arrow-right_neutral--disabled: url('#{$icons-path}navigation/light/arrow-right.svg#neutral--disabled'); - --icon__navigation_arrow-right_highlighted--enabled: url('#{$icons-path}navigation/light/arrow-right.svg#highlighted--enabled'); - --icon__navigation_arrow-right_bright--enabled: url('#{$icons-path}navigation/light/arrow-right.svg#bright--enabled'); - --icon__navigation_arrow-left_on-surface--enabled: url('#{$icons-path}navigation/light/arrow-left.svg#on-surface--enabled'); - --icon__navigation_arrow-left_on-surface--hover: url('#{$icons-path}navigation/light/arrow-left.svg#on-surface--hover'); - --icon__navigation_arrow-left_on-surface--active: url('#{$icons-path}navigation/light/arrow-left.svg#on-surface--active'); - --icon__navigation_arrow-left_on-surface--disabled: url('#{$icons-path}navigation/light/arrow-left.svg#on-surface--disabled'); - --icon__navigation_arrow-left_on-primary--enabled: url('#{$icons-path}navigation/light/arrow-left.svg#on-primary--enabled'); - --icon__navigation_arrow-left_on-primary--hover: url('#{$icons-path}navigation/light/arrow-left.svg#on-primary--hover'); - --icon__navigation_arrow-left_on-primary--active: url('#{$icons-path}navigation/light/arrow-left.svg#on-primary--active'); - --icon__navigation_arrow-left_on-primary--disabled: url('#{$icons-path}navigation/light/arrow-left.svg#on-primary--disabled'); - --icon__navigation_arrow-left_on-disabled--enabled: url('#{$icons-path}navigation/light/arrow-left.svg#on-disabled--enabled'); - --icon__navigation_arrow-left_on-message--enabled: url('#{$icons-path}navigation/light/arrow-left.svg#on-message--enabled'); - --icon__navigation_arrow-left_on-elevation--enabled: url('#{$icons-path}navigation/light/arrow-left.svg#on-elevation--enabled'); - --icon__navigation_arrow-left_primary--enabled: url('#{$icons-path}navigation/light/arrow-left.svg#primary--enabled'); - --icon__navigation_arrow-left_primary--hover: url('#{$icons-path}navigation/light/arrow-left.svg#primary--hover'); - --icon__navigation_arrow-left_primary--active: url('#{$icons-path}navigation/light/arrow-left.svg#primary--active'); - --icon__navigation_arrow-left_primary--disabled: url('#{$icons-path}navigation/light/arrow-left.svg#primary--disabled'); - --icon__navigation_arrow-left_neutral--enabled: url('#{$icons-path}navigation/light/arrow-left.svg#neutral--enabled'); - --icon__navigation_arrow-left_neutral--hover: url('#{$icons-path}navigation/light/arrow-left.svg#neutral--hover'); - --icon__navigation_arrow-left_neutral--active: url('#{$icons-path}navigation/light/arrow-left.svg#neutral--active'); - --icon__navigation_arrow-left_neutral--disabled: url('#{$icons-path}navigation/light/arrow-left.svg#neutral--disabled'); - --icon__navigation_arrow-left_highlighted--enabled: url('#{$icons-path}navigation/light/arrow-left.svg#highlighted--enabled'); - --icon__navigation_arrow-left_bright--enabled: url('#{$icons-path}navigation/light/arrow-left.svg#bright--enabled'); - --icon__navigation_arrow-down_on-surface--enabled: url('#{$icons-path}navigation/light/arrow-down.svg#on-surface--enabled'); - --icon__navigation_arrow-down_on-surface--hover: url('#{$icons-path}navigation/light/arrow-down.svg#on-surface--hover'); - --icon__navigation_arrow-down_on-surface--active: url('#{$icons-path}navigation/light/arrow-down.svg#on-surface--active'); - --icon__navigation_arrow-down_on-surface--disabled: url('#{$icons-path}navigation/light/arrow-down.svg#on-surface--disabled'); - --icon__navigation_arrow-down_on-primary--enabled: url('#{$icons-path}navigation/light/arrow-down.svg#on-primary--enabled'); - --icon__navigation_arrow-down_on-primary--hover: url('#{$icons-path}navigation/light/arrow-down.svg#on-primary--hover'); - --icon__navigation_arrow-down_on-primary--active: url('#{$icons-path}navigation/light/arrow-down.svg#on-primary--active'); - --icon__navigation_arrow-down_on-primary--disabled: url('#{$icons-path}navigation/light/arrow-down.svg#on-primary--disabled'); - --icon__navigation_arrow-down_on-disabled--enabled: url('#{$icons-path}navigation/light/arrow-down.svg#on-disabled--enabled'); - --icon__navigation_arrow-down_on-message--enabled: url('#{$icons-path}navigation/light/arrow-down.svg#on-message--enabled'); - --icon__navigation_arrow-down_on-elevation--enabled: url('#{$icons-path}navigation/light/arrow-down.svg#on-elevation--enabled'); - --icon__navigation_arrow-down_primary--enabled: url('#{$icons-path}navigation/light/arrow-down.svg#primary--enabled'); - --icon__navigation_arrow-down_primary--hover: url('#{$icons-path}navigation/light/arrow-down.svg#primary--hover'); - --icon__navigation_arrow-down_primary--active: url('#{$icons-path}navigation/light/arrow-down.svg#primary--active'); - --icon__navigation_arrow-down_primary--disabled: url('#{$icons-path}navigation/light/arrow-down.svg#primary--disabled'); - --icon__navigation_arrow-down_neutral--enabled: url('#{$icons-path}navigation/light/arrow-down.svg#neutral--enabled'); - --icon__navigation_arrow-down_neutral--hover: url('#{$icons-path}navigation/light/arrow-down.svg#neutral--hover'); - --icon__navigation_arrow-down_neutral--active: url('#{$icons-path}navigation/light/arrow-down.svg#neutral--active'); - --icon__navigation_arrow-down_neutral--disabled: url('#{$icons-path}navigation/light/arrow-down.svg#neutral--disabled'); - --icon__navigation_arrow-down_highlighted--enabled: url('#{$icons-path}navigation/light/arrow-down.svg#highlighted--enabled'); - --icon__navigation_arrow-down_bright--enabled: url('#{$icons-path}navigation/light/arrow-down.svg#bright--enabled'); - --icon__navigation_arrow-down-skyblue_on-surface--enabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#on-surface--enabled'); - --icon__navigation_arrow-down-skyblue_on-surface--hover: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#on-surface--hover'); - --icon__navigation_arrow-down-skyblue_on-surface--active: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#on-surface--active'); - --icon__navigation_arrow-down-skyblue_on-surface--disabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#on-surface--disabled'); - --icon__navigation_arrow-down-skyblue_on-primary--enabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#on-primary--enabled'); - --icon__navigation_arrow-down-skyblue_on-primary--hover: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#on-primary--hover'); - --icon__navigation_arrow-down-skyblue_on-primary--active: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#on-primary--active'); - --icon__navigation_arrow-down-skyblue_on-primary--disabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#on-primary--disabled'); - --icon__navigation_arrow-down-skyblue_on-disabled--enabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#on-disabled--enabled'); - --icon__navigation_arrow-down-skyblue_on-message--enabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#on-message--enabled'); - --icon__navigation_arrow-down-skyblue_on-elevation--enabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#on-elevation--enabled'); - --icon__navigation_arrow-down-skyblue_primary--enabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#primary--enabled'); - --icon__navigation_arrow-down-skyblue_primary--hover: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#primary--hover'); - --icon__navigation_arrow-down-skyblue_primary--active: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#primary--active'); - --icon__navigation_arrow-down-skyblue_primary--disabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#primary--disabled'); - --icon__navigation_arrow-down-skyblue_neutral--enabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#neutral--enabled'); - --icon__navigation_arrow-down-skyblue_neutral--hover: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#neutral--hover'); - --icon__navigation_arrow-down-skyblue_neutral--active: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#neutral--active'); - --icon__navigation_arrow-down-skyblue_neutral--disabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#neutral--disabled'); - --icon__navigation_arrow-down-skyblue_highlighted--enabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#highlighted--enabled'); - --icon__navigation_arrow-down-skyblue_bright--enabled: url('#{$icons-path}navigation/light/arrow-down-skyblue.svg#bright--enabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*navigation*/ - --icon__navigation_pill-outlined_on-surface--enabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#on-surface--enabled'); - --icon__navigation_pill-outlined_on-surface--hover: url('#{$icons-path}navigation/dark/pill-outlined.svg#on-surface--hover'); - --icon__navigation_pill-outlined_on-surface--active: url('#{$icons-path}navigation/dark/pill-outlined.svg#on-surface--active'); - --icon__navigation_pill-outlined_on-surface--disabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#on-surface--disabled'); - --icon__navigation_pill-outlined_on-primary--enabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#on-primary--enabled'); - --icon__navigation_pill-outlined_on-primary--hover: url('#{$icons-path}navigation/dark/pill-outlined.svg#on-primary--hover'); - --icon__navigation_pill-outlined_on-primary--active: url('#{$icons-path}navigation/dark/pill-outlined.svg#on-primary--active'); - --icon__navigation_pill-outlined_on-primary--disabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#on-primary--disabled'); - --icon__navigation_pill-outlined_on-disabled--enabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#on-disabled--enabled'); - --icon__navigation_pill-outlined_on-message--enabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#on-message--enabled'); - --icon__navigation_pill-outlined_on-elevation--enabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#on-elevation--enabled'); - --icon__navigation_pill-outlined_primary--enabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#primary--enabled'); - --icon__navigation_pill-outlined_primary--hover: url('#{$icons-path}navigation/dark/pill-outlined.svg#primary--hover'); - --icon__navigation_pill-outlined_primary--active: url('#{$icons-path}navigation/dark/pill-outlined.svg#primary--active'); - --icon__navigation_pill-outlined_primary--disabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#primary--disabled'); - --icon__navigation_pill-outlined_neutral--enabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#neutral--enabled'); - --icon__navigation_pill-outlined_neutral--hover: url('#{$icons-path}navigation/dark/pill-outlined.svg#neutral--hover'); - --icon__navigation_pill-outlined_neutral--active: url('#{$icons-path}navigation/dark/pill-outlined.svg#neutral--active'); - --icon__navigation_pill-outlined_neutral--disabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#neutral--disabled'); - --icon__navigation_pill-outlined_highlighted--enabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#highlighted--enabled'); - --icon__navigation_pill-outlined_bright--enabled: url('#{$icons-path}navigation/dark/pill-outlined.svg#bright--enabled'); - --icon__navigation_pill-filled_on-surface--enabled: url('#{$icons-path}navigation/dark/pill-filled.svg#on-surface--enabled'); - --icon__navigation_pill-filled_on-surface--hover: url('#{$icons-path}navigation/dark/pill-filled.svg#on-surface--hover'); - --icon__navigation_pill-filled_on-surface--active: url('#{$icons-path}navigation/dark/pill-filled.svg#on-surface--active'); - --icon__navigation_pill-filled_on-surface--disabled: url('#{$icons-path}navigation/dark/pill-filled.svg#on-surface--disabled'); - --icon__navigation_pill-filled_on-primary--enabled: url('#{$icons-path}navigation/dark/pill-filled.svg#on-primary--enabled'); - --icon__navigation_pill-filled_on-primary--hover: url('#{$icons-path}navigation/dark/pill-filled.svg#on-primary--hover'); - --icon__navigation_pill-filled_on-primary--active: url('#{$icons-path}navigation/dark/pill-filled.svg#on-primary--active'); - --icon__navigation_pill-filled_on-primary--disabled: url('#{$icons-path}navigation/dark/pill-filled.svg#on-primary--disabled'); - --icon__navigation_pill-filled_on-disabled--enabled: url('#{$icons-path}navigation/dark/pill-filled.svg#on-disabled--enabled'); - --icon__navigation_pill-filled_on-message--enabled: url('#{$icons-path}navigation/dark/pill-filled.svg#on-message--enabled'); - --icon__navigation_pill-filled_on-elevation--enabled: url('#{$icons-path}navigation/dark/pill-filled.svg#on-elevation--enabled'); - --icon__navigation_pill-filled_primary--enabled: url('#{$icons-path}navigation/dark/pill-filled.svg#primary--enabled'); - --icon__navigation_pill-filled_primary--hover: url('#{$icons-path}navigation/dark/pill-filled.svg#primary--hover'); - --icon__navigation_pill-filled_primary--active: url('#{$icons-path}navigation/dark/pill-filled.svg#primary--active'); - --icon__navigation_pill-filled_primary--disabled: url('#{$icons-path}navigation/dark/pill-filled.svg#primary--disabled'); - --icon__navigation_pill-filled_neutral--enabled: url('#{$icons-path}navigation/dark/pill-filled.svg#neutral--enabled'); - --icon__navigation_pill-filled_neutral--hover: url('#{$icons-path}navigation/dark/pill-filled.svg#neutral--hover'); - --icon__navigation_pill-filled_neutral--active: url('#{$icons-path}navigation/dark/pill-filled.svg#neutral--active'); - --icon__navigation_pill-filled_neutral--disabled: url('#{$icons-path}navigation/dark/pill-filled.svg#neutral--disabled'); - --icon__navigation_pill-filled_highlighted--enabled: url('#{$icons-path}navigation/dark/pill-filled.svg#highlighted--enabled'); - --icon__navigation_pill-filled_bright--enabled: url('#{$icons-path}navigation/dark/pill-filled.svg#bright--enabled'); - --icon__navigation_level-up_on-surface--enabled: url('#{$icons-path}navigation/dark/level-up.svg#on-surface--enabled'); - --icon__navigation_level-up_on-surface--hover: url('#{$icons-path}navigation/dark/level-up.svg#on-surface--hover'); - --icon__navigation_level-up_on-surface--active: url('#{$icons-path}navigation/dark/level-up.svg#on-surface--active'); - --icon__navigation_level-up_on-surface--disabled: url('#{$icons-path}navigation/dark/level-up.svg#on-surface--disabled'); - --icon__navigation_level-up_on-primary--enabled: url('#{$icons-path}navigation/dark/level-up.svg#on-primary--enabled'); - --icon__navigation_level-up_on-primary--hover: url('#{$icons-path}navigation/dark/level-up.svg#on-primary--hover'); - --icon__navigation_level-up_on-primary--active: url('#{$icons-path}navigation/dark/level-up.svg#on-primary--active'); - --icon__navigation_level-up_on-primary--disabled: url('#{$icons-path}navigation/dark/level-up.svg#on-primary--disabled'); - --icon__navigation_level-up_on-disabled--enabled: url('#{$icons-path}navigation/dark/level-up.svg#on-disabled--enabled'); - --icon__navigation_level-up_on-message--enabled: url('#{$icons-path}navigation/dark/level-up.svg#on-message--enabled'); - --icon__navigation_level-up_on-elevation--enabled: url('#{$icons-path}navigation/dark/level-up.svg#on-elevation--enabled'); - --icon__navigation_level-up_primary--enabled: url('#{$icons-path}navigation/dark/level-up.svg#primary--enabled'); - --icon__navigation_level-up_primary--hover: url('#{$icons-path}navigation/dark/level-up.svg#primary--hover'); - --icon__navigation_level-up_primary--active: url('#{$icons-path}navigation/dark/level-up.svg#primary--active'); - --icon__navigation_level-up_primary--disabled: url('#{$icons-path}navigation/dark/level-up.svg#primary--disabled'); - --icon__navigation_level-up_neutral--enabled: url('#{$icons-path}navigation/dark/level-up.svg#neutral--enabled'); - --icon__navigation_level-up_neutral--hover: url('#{$icons-path}navigation/dark/level-up.svg#neutral--hover'); - --icon__navigation_level-up_neutral--active: url('#{$icons-path}navigation/dark/level-up.svg#neutral--active'); - --icon__navigation_level-up_neutral--disabled: url('#{$icons-path}navigation/dark/level-up.svg#neutral--disabled'); - --icon__navigation_level-up_highlighted--enabled: url('#{$icons-path}navigation/dark/level-up.svg#highlighted--enabled'); - --icon__navigation_level-up_bright--enabled: url('#{$icons-path}navigation/dark/level-up.svg#bright--enabled'); - --icon__navigation_level-down_on-surface--enabled: url('#{$icons-path}navigation/dark/level-down.svg#on-surface--enabled'); - --icon__navigation_level-down_on-surface--hover: url('#{$icons-path}navigation/dark/level-down.svg#on-surface--hover'); - --icon__navigation_level-down_on-surface--active: url('#{$icons-path}navigation/dark/level-down.svg#on-surface--active'); - --icon__navigation_level-down_on-surface--disabled: url('#{$icons-path}navigation/dark/level-down.svg#on-surface--disabled'); - --icon__navigation_level-down_on-primary--enabled: url('#{$icons-path}navigation/dark/level-down.svg#on-primary--enabled'); - --icon__navigation_level-down_on-primary--hover: url('#{$icons-path}navigation/dark/level-down.svg#on-primary--hover'); - --icon__navigation_level-down_on-primary--active: url('#{$icons-path}navigation/dark/level-down.svg#on-primary--active'); - --icon__navigation_level-down_on-primary--disabled: url('#{$icons-path}navigation/dark/level-down.svg#on-primary--disabled'); - --icon__navigation_level-down_on-disabled--enabled: url('#{$icons-path}navigation/dark/level-down.svg#on-disabled--enabled'); - --icon__navigation_level-down_on-message--enabled: url('#{$icons-path}navigation/dark/level-down.svg#on-message--enabled'); - --icon__navigation_level-down_on-elevation--enabled: url('#{$icons-path}navigation/dark/level-down.svg#on-elevation--enabled'); - --icon__navigation_level-down_primary--enabled: url('#{$icons-path}navigation/dark/level-down.svg#primary--enabled'); - --icon__navigation_level-down_primary--hover: url('#{$icons-path}navigation/dark/level-down.svg#primary--hover'); - --icon__navigation_level-down_primary--active: url('#{$icons-path}navigation/dark/level-down.svg#primary--active'); - --icon__navigation_level-down_primary--disabled: url('#{$icons-path}navigation/dark/level-down.svg#primary--disabled'); - --icon__navigation_level-down_neutral--enabled: url('#{$icons-path}navigation/dark/level-down.svg#neutral--enabled'); - --icon__navigation_level-down_neutral--hover: url('#{$icons-path}navigation/dark/level-down.svg#neutral--hover'); - --icon__navigation_level-down_neutral--active: url('#{$icons-path}navigation/dark/level-down.svg#neutral--active'); - --icon__navigation_level-down_neutral--disabled: url('#{$icons-path}navigation/dark/level-down.svg#neutral--disabled'); - --icon__navigation_level-down_highlighted--enabled: url('#{$icons-path}navigation/dark/level-down.svg#highlighted--enabled'); - --icon__navigation_level-down_bright--enabled: url('#{$icons-path}navigation/dark/level-down.svg#bright--enabled'); - --icon__navigation_gx-arrow-right_on-surface--enabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#on-surface--enabled'); - --icon__navigation_gx-arrow-right_on-surface--hover: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#on-surface--hover'); - --icon__navigation_gx-arrow-right_on-surface--active: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#on-surface--active'); - --icon__navigation_gx-arrow-right_on-surface--disabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#on-surface--disabled'); - --icon__navigation_gx-arrow-right_on-primary--enabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#on-primary--enabled'); - --icon__navigation_gx-arrow-right_on-primary--hover: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#on-primary--hover'); - --icon__navigation_gx-arrow-right_on-primary--active: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#on-primary--active'); - --icon__navigation_gx-arrow-right_on-primary--disabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#on-primary--disabled'); - --icon__navigation_gx-arrow-right_on-disabled--enabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#on-disabled--enabled'); - --icon__navigation_gx-arrow-right_on-message--enabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#on-message--enabled'); - --icon__navigation_gx-arrow-right_on-elevation--enabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#on-elevation--enabled'); - --icon__navigation_gx-arrow-right_primary--enabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#primary--enabled'); - --icon__navigation_gx-arrow-right_primary--hover: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#primary--hover'); - --icon__navigation_gx-arrow-right_primary--active: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#primary--active'); - --icon__navigation_gx-arrow-right_primary--disabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#primary--disabled'); - --icon__navigation_gx-arrow-right_neutral--enabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#neutral--enabled'); - --icon__navigation_gx-arrow-right_neutral--hover: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#neutral--hover'); - --icon__navigation_gx-arrow-right_neutral--active: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#neutral--active'); - --icon__navigation_gx-arrow-right_neutral--disabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#neutral--disabled'); - --icon__navigation_gx-arrow-right_highlighted--enabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#highlighted--enabled'); - --icon__navigation_gx-arrow-right_bright--enabled: url('#{$icons-path}navigation/dark/gx-arrow-right.svg#bright--enabled'); - --icon__navigation_drag_on-surface--enabled: url('#{$icons-path}navigation/dark/drag.svg#on-surface--enabled'); - --icon__navigation_drag_on-surface--hover: url('#{$icons-path}navigation/dark/drag.svg#on-surface--hover'); - --icon__navigation_drag_on-surface--active: url('#{$icons-path}navigation/dark/drag.svg#on-surface--active'); - --icon__navigation_drag_on-surface--disabled: url('#{$icons-path}navigation/dark/drag.svg#on-surface--disabled'); - --icon__navigation_drag_on-primary--enabled: url('#{$icons-path}navigation/dark/drag.svg#on-primary--enabled'); - --icon__navigation_drag_on-primary--hover: url('#{$icons-path}navigation/dark/drag.svg#on-primary--hover'); - --icon__navigation_drag_on-primary--active: url('#{$icons-path}navigation/dark/drag.svg#on-primary--active'); - --icon__navigation_drag_on-primary--disabled: url('#{$icons-path}navigation/dark/drag.svg#on-primary--disabled'); - --icon__navigation_drag_on-disabled--enabled: url('#{$icons-path}navigation/dark/drag.svg#on-disabled--enabled'); - --icon__navigation_drag_on-message--enabled: url('#{$icons-path}navigation/dark/drag.svg#on-message--enabled'); - --icon__navigation_drag_on-elevation--enabled: url('#{$icons-path}navigation/dark/drag.svg#on-elevation--enabled'); - --icon__navigation_drag_primary--enabled: url('#{$icons-path}navigation/dark/drag.svg#primary--enabled'); - --icon__navigation_drag_primary--hover: url('#{$icons-path}navigation/dark/drag.svg#primary--hover'); - --icon__navigation_drag_primary--active: url('#{$icons-path}navigation/dark/drag.svg#primary--active'); - --icon__navigation_drag_primary--disabled: url('#{$icons-path}navigation/dark/drag.svg#primary--disabled'); - --icon__navigation_drag_neutral--enabled: url('#{$icons-path}navigation/dark/drag.svg#neutral--enabled'); - --icon__navigation_drag_neutral--hover: url('#{$icons-path}navigation/dark/drag.svg#neutral--hover'); - --icon__navigation_drag_neutral--active: url('#{$icons-path}navigation/dark/drag.svg#neutral--active'); - --icon__navigation_drag_neutral--disabled: url('#{$icons-path}navigation/dark/drag.svg#neutral--disabled'); - --icon__navigation_drag_highlighted--enabled: url('#{$icons-path}navigation/dark/drag.svg#highlighted--enabled'); - --icon__navigation_drag_bright--enabled: url('#{$icons-path}navigation/dark/drag.svg#bright--enabled'); - --icon__navigation_chevron-up_on-surface--enabled: url('#{$icons-path}navigation/dark/chevron-up.svg#on-surface--enabled'); - --icon__navigation_chevron-up_on-surface--hover: url('#{$icons-path}navigation/dark/chevron-up.svg#on-surface--hover'); - --icon__navigation_chevron-up_on-surface--active: url('#{$icons-path}navigation/dark/chevron-up.svg#on-surface--active'); - --icon__navigation_chevron-up_on-surface--disabled: url('#{$icons-path}navigation/dark/chevron-up.svg#on-surface--disabled'); - --icon__navigation_chevron-up_on-primary--enabled: url('#{$icons-path}navigation/dark/chevron-up.svg#on-primary--enabled'); - --icon__navigation_chevron-up_on-primary--hover: url('#{$icons-path}navigation/dark/chevron-up.svg#on-primary--hover'); - --icon__navigation_chevron-up_on-primary--active: url('#{$icons-path}navigation/dark/chevron-up.svg#on-primary--active'); - --icon__navigation_chevron-up_on-primary--disabled: url('#{$icons-path}navigation/dark/chevron-up.svg#on-primary--disabled'); - --icon__navigation_chevron-up_on-disabled--enabled: url('#{$icons-path}navigation/dark/chevron-up.svg#on-disabled--enabled'); - --icon__navigation_chevron-up_on-message--enabled: url('#{$icons-path}navigation/dark/chevron-up.svg#on-message--enabled'); - --icon__navigation_chevron-up_on-elevation--enabled: url('#{$icons-path}navigation/dark/chevron-up.svg#on-elevation--enabled'); - --icon__navigation_chevron-up_primary--enabled: url('#{$icons-path}navigation/dark/chevron-up.svg#primary--enabled'); - --icon__navigation_chevron-up_primary--hover: url('#{$icons-path}navigation/dark/chevron-up.svg#primary--hover'); - --icon__navigation_chevron-up_primary--active: url('#{$icons-path}navigation/dark/chevron-up.svg#primary--active'); - --icon__navigation_chevron-up_primary--disabled: url('#{$icons-path}navigation/dark/chevron-up.svg#primary--disabled'); - --icon__navigation_chevron-up_neutral--enabled: url('#{$icons-path}navigation/dark/chevron-up.svg#neutral--enabled'); - --icon__navigation_chevron-up_neutral--hover: url('#{$icons-path}navigation/dark/chevron-up.svg#neutral--hover'); - --icon__navigation_chevron-up_neutral--active: url('#{$icons-path}navigation/dark/chevron-up.svg#neutral--active'); - --icon__navigation_chevron-up_neutral--disabled: url('#{$icons-path}navigation/dark/chevron-up.svg#neutral--disabled'); - --icon__navigation_chevron-up_highlighted--enabled: url('#{$icons-path}navigation/dark/chevron-up.svg#highlighted--enabled'); - --icon__navigation_chevron-up_bright--enabled: url('#{$icons-path}navigation/dark/chevron-up.svg#bright--enabled'); - --icon__navigation_chevron-right_on-surface--enabled: url('#{$icons-path}navigation/dark/chevron-right.svg#on-surface--enabled'); - --icon__navigation_chevron-right_on-surface--hover: url('#{$icons-path}navigation/dark/chevron-right.svg#on-surface--hover'); - --icon__navigation_chevron-right_on-surface--active: url('#{$icons-path}navigation/dark/chevron-right.svg#on-surface--active'); - --icon__navigation_chevron-right_on-surface--disabled: url('#{$icons-path}navigation/dark/chevron-right.svg#on-surface--disabled'); - --icon__navigation_chevron-right_on-primary--enabled: url('#{$icons-path}navigation/dark/chevron-right.svg#on-primary--enabled'); - --icon__navigation_chevron-right_on-primary--hover: url('#{$icons-path}navigation/dark/chevron-right.svg#on-primary--hover'); - --icon__navigation_chevron-right_on-primary--active: url('#{$icons-path}navigation/dark/chevron-right.svg#on-primary--active'); - --icon__navigation_chevron-right_on-primary--disabled: url('#{$icons-path}navigation/dark/chevron-right.svg#on-primary--disabled'); - --icon__navigation_chevron-right_on-disabled--enabled: url('#{$icons-path}navigation/dark/chevron-right.svg#on-disabled--enabled'); - --icon__navigation_chevron-right_on-message--enabled: url('#{$icons-path}navigation/dark/chevron-right.svg#on-message--enabled'); - --icon__navigation_chevron-right_on-elevation--enabled: url('#{$icons-path}navigation/dark/chevron-right.svg#on-elevation--enabled'); - --icon__navigation_chevron-right_primary--enabled: url('#{$icons-path}navigation/dark/chevron-right.svg#primary--enabled'); - --icon__navigation_chevron-right_primary--hover: url('#{$icons-path}navigation/dark/chevron-right.svg#primary--hover'); - --icon__navigation_chevron-right_primary--active: url('#{$icons-path}navigation/dark/chevron-right.svg#primary--active'); - --icon__navigation_chevron-right_primary--disabled: url('#{$icons-path}navigation/dark/chevron-right.svg#primary--disabled'); - --icon__navigation_chevron-right_neutral--enabled: url('#{$icons-path}navigation/dark/chevron-right.svg#neutral--enabled'); - --icon__navigation_chevron-right_neutral--hover: url('#{$icons-path}navigation/dark/chevron-right.svg#neutral--hover'); - --icon__navigation_chevron-right_neutral--active: url('#{$icons-path}navigation/dark/chevron-right.svg#neutral--active'); - --icon__navigation_chevron-right_neutral--disabled: url('#{$icons-path}navigation/dark/chevron-right.svg#neutral--disabled'); - --icon__navigation_chevron-right_highlighted--enabled: url('#{$icons-path}navigation/dark/chevron-right.svg#highlighted--enabled'); - --icon__navigation_chevron-right_bright--enabled: url('#{$icons-path}navigation/dark/chevron-right.svg#bright--enabled'); - --icon__navigation_chevron-left_on-surface--enabled: url('#{$icons-path}navigation/dark/chevron-left.svg#on-surface--enabled'); - --icon__navigation_chevron-left_on-surface--hover: url('#{$icons-path}navigation/dark/chevron-left.svg#on-surface--hover'); - --icon__navigation_chevron-left_on-surface--active: url('#{$icons-path}navigation/dark/chevron-left.svg#on-surface--active'); - --icon__navigation_chevron-left_on-surface--disabled: url('#{$icons-path}navigation/dark/chevron-left.svg#on-surface--disabled'); - --icon__navigation_chevron-left_on-primary--enabled: url('#{$icons-path}navigation/dark/chevron-left.svg#on-primary--enabled'); - --icon__navigation_chevron-left_on-primary--hover: url('#{$icons-path}navigation/dark/chevron-left.svg#on-primary--hover'); - --icon__navigation_chevron-left_on-primary--active: url('#{$icons-path}navigation/dark/chevron-left.svg#on-primary--active'); - --icon__navigation_chevron-left_on-primary--disabled: url('#{$icons-path}navigation/dark/chevron-left.svg#on-primary--disabled'); - --icon__navigation_chevron-left_on-disabled--enabled: url('#{$icons-path}navigation/dark/chevron-left.svg#on-disabled--enabled'); - --icon__navigation_chevron-left_on-message--enabled: url('#{$icons-path}navigation/dark/chevron-left.svg#on-message--enabled'); - --icon__navigation_chevron-left_on-elevation--enabled: url('#{$icons-path}navigation/dark/chevron-left.svg#on-elevation--enabled'); - --icon__navigation_chevron-left_primary--enabled: url('#{$icons-path}navigation/dark/chevron-left.svg#primary--enabled'); - --icon__navigation_chevron-left_primary--hover: url('#{$icons-path}navigation/dark/chevron-left.svg#primary--hover'); - --icon__navigation_chevron-left_primary--active: url('#{$icons-path}navigation/dark/chevron-left.svg#primary--active'); - --icon__navigation_chevron-left_primary--disabled: url('#{$icons-path}navigation/dark/chevron-left.svg#primary--disabled'); - --icon__navigation_chevron-left_neutral--enabled: url('#{$icons-path}navigation/dark/chevron-left.svg#neutral--enabled'); - --icon__navigation_chevron-left_neutral--hover: url('#{$icons-path}navigation/dark/chevron-left.svg#neutral--hover'); - --icon__navigation_chevron-left_neutral--active: url('#{$icons-path}navigation/dark/chevron-left.svg#neutral--active'); - --icon__navigation_chevron-left_neutral--disabled: url('#{$icons-path}navigation/dark/chevron-left.svg#neutral--disabled'); - --icon__navigation_chevron-left_highlighted--enabled: url('#{$icons-path}navigation/dark/chevron-left.svg#highlighted--enabled'); - --icon__navigation_chevron-left_bright--enabled: url('#{$icons-path}navigation/dark/chevron-left.svg#bright--enabled'); - --icon__navigation_chevron-down_on-surface--enabled: url('#{$icons-path}navigation/dark/chevron-down.svg#on-surface--enabled'); - --icon__navigation_chevron-down_on-surface--hover: url('#{$icons-path}navigation/dark/chevron-down.svg#on-surface--hover'); - --icon__navigation_chevron-down_on-surface--active: url('#{$icons-path}navigation/dark/chevron-down.svg#on-surface--active'); - --icon__navigation_chevron-down_on-surface--disabled: url('#{$icons-path}navigation/dark/chevron-down.svg#on-surface--disabled'); - --icon__navigation_chevron-down_on-primary--enabled: url('#{$icons-path}navigation/dark/chevron-down.svg#on-primary--enabled'); - --icon__navigation_chevron-down_on-primary--hover: url('#{$icons-path}navigation/dark/chevron-down.svg#on-primary--hover'); - --icon__navigation_chevron-down_on-primary--active: url('#{$icons-path}navigation/dark/chevron-down.svg#on-primary--active'); - --icon__navigation_chevron-down_on-primary--disabled: url('#{$icons-path}navigation/dark/chevron-down.svg#on-primary--disabled'); - --icon__navigation_chevron-down_on-disabled--enabled: url('#{$icons-path}navigation/dark/chevron-down.svg#on-disabled--enabled'); - --icon__navigation_chevron-down_on-message--enabled: url('#{$icons-path}navigation/dark/chevron-down.svg#on-message--enabled'); - --icon__navigation_chevron-down_on-elevation--enabled: url('#{$icons-path}navigation/dark/chevron-down.svg#on-elevation--enabled'); - --icon__navigation_chevron-down_primary--enabled: url('#{$icons-path}navigation/dark/chevron-down.svg#primary--enabled'); - --icon__navigation_chevron-down_primary--hover: url('#{$icons-path}navigation/dark/chevron-down.svg#primary--hover'); - --icon__navigation_chevron-down_primary--active: url('#{$icons-path}navigation/dark/chevron-down.svg#primary--active'); - --icon__navigation_chevron-down_primary--disabled: url('#{$icons-path}navigation/dark/chevron-down.svg#primary--disabled'); - --icon__navigation_chevron-down_neutral--enabled: url('#{$icons-path}navigation/dark/chevron-down.svg#neutral--enabled'); - --icon__navigation_chevron-down_neutral--hover: url('#{$icons-path}navigation/dark/chevron-down.svg#neutral--hover'); - --icon__navigation_chevron-down_neutral--active: url('#{$icons-path}navigation/dark/chevron-down.svg#neutral--active'); - --icon__navigation_chevron-down_neutral--disabled: url('#{$icons-path}navigation/dark/chevron-down.svg#neutral--disabled'); - --icon__navigation_chevron-down_highlighted--enabled: url('#{$icons-path}navigation/dark/chevron-down.svg#highlighted--enabled'); - --icon__navigation_chevron-down_bright--enabled: url('#{$icons-path}navigation/dark/chevron-down.svg#bright--enabled'); - --icon__navigation_bullet_on-surface--enabled: url('#{$icons-path}navigation/dark/bullet.svg#on-surface--enabled'); - --icon__navigation_bullet_on-surface--hover: url('#{$icons-path}navigation/dark/bullet.svg#on-surface--hover'); - --icon__navigation_bullet_on-surface--active: url('#{$icons-path}navigation/dark/bullet.svg#on-surface--active'); - --icon__navigation_bullet_on-surface--disabled: url('#{$icons-path}navigation/dark/bullet.svg#on-surface--disabled'); - --icon__navigation_bullet_on-primary--enabled: url('#{$icons-path}navigation/dark/bullet.svg#on-primary--enabled'); - --icon__navigation_bullet_on-primary--hover: url('#{$icons-path}navigation/dark/bullet.svg#on-primary--hover'); - --icon__navigation_bullet_on-primary--active: url('#{$icons-path}navigation/dark/bullet.svg#on-primary--active'); - --icon__navigation_bullet_on-primary--disabled: url('#{$icons-path}navigation/dark/bullet.svg#on-primary--disabled'); - --icon__navigation_bullet_on-disabled--enabled: url('#{$icons-path}navigation/dark/bullet.svg#on-disabled--enabled'); - --icon__navigation_bullet_on-message--enabled: url('#{$icons-path}navigation/dark/bullet.svg#on-message--enabled'); - --icon__navigation_bullet_on-elevation--enabled: url('#{$icons-path}navigation/dark/bullet.svg#on-elevation--enabled'); - --icon__navigation_bullet_primary--enabled: url('#{$icons-path}navigation/dark/bullet.svg#primary--enabled'); - --icon__navigation_bullet_primary--hover: url('#{$icons-path}navigation/dark/bullet.svg#primary--hover'); - --icon__navigation_bullet_primary--active: url('#{$icons-path}navigation/dark/bullet.svg#primary--active'); - --icon__navigation_bullet_primary--disabled: url('#{$icons-path}navigation/dark/bullet.svg#primary--disabled'); - --icon__navigation_bullet_neutral--enabled: url('#{$icons-path}navigation/dark/bullet.svg#neutral--enabled'); - --icon__navigation_bullet_neutral--hover: url('#{$icons-path}navigation/dark/bullet.svg#neutral--hover'); - --icon__navigation_bullet_neutral--active: url('#{$icons-path}navigation/dark/bullet.svg#neutral--active'); - --icon__navigation_bullet_neutral--disabled: url('#{$icons-path}navigation/dark/bullet.svg#neutral--disabled'); - --icon__navigation_bullet_highlighted--enabled: url('#{$icons-path}navigation/dark/bullet.svg#highlighted--enabled'); - --icon__navigation_bullet_bright--enabled: url('#{$icons-path}navigation/dark/bullet.svg#bright--enabled'); - --icon__navigation_arrow-up_on-surface--enabled: url('#{$icons-path}navigation/dark/arrow-up.svg#on-surface--enabled'); - --icon__navigation_arrow-up_on-surface--hover: url('#{$icons-path}navigation/dark/arrow-up.svg#on-surface--hover'); - --icon__navigation_arrow-up_on-surface--active: url('#{$icons-path}navigation/dark/arrow-up.svg#on-surface--active'); - --icon__navigation_arrow-up_on-surface--disabled: url('#{$icons-path}navigation/dark/arrow-up.svg#on-surface--disabled'); - --icon__navigation_arrow-up_on-primary--enabled: url('#{$icons-path}navigation/dark/arrow-up.svg#on-primary--enabled'); - --icon__navigation_arrow-up_on-primary--hover: url('#{$icons-path}navigation/dark/arrow-up.svg#on-primary--hover'); - --icon__navigation_arrow-up_on-primary--active: url('#{$icons-path}navigation/dark/arrow-up.svg#on-primary--active'); - --icon__navigation_arrow-up_on-primary--disabled: url('#{$icons-path}navigation/dark/arrow-up.svg#on-primary--disabled'); - --icon__navigation_arrow-up_on-disabled--enabled: url('#{$icons-path}navigation/dark/arrow-up.svg#on-disabled--enabled'); - --icon__navigation_arrow-up_on-message--enabled: url('#{$icons-path}navigation/dark/arrow-up.svg#on-message--enabled'); - --icon__navigation_arrow-up_on-elevation--enabled: url('#{$icons-path}navigation/dark/arrow-up.svg#on-elevation--enabled'); - --icon__navigation_arrow-up_primary--enabled: url('#{$icons-path}navigation/dark/arrow-up.svg#primary--enabled'); - --icon__navigation_arrow-up_primary--hover: url('#{$icons-path}navigation/dark/arrow-up.svg#primary--hover'); - --icon__navigation_arrow-up_primary--active: url('#{$icons-path}navigation/dark/arrow-up.svg#primary--active'); - --icon__navigation_arrow-up_primary--disabled: url('#{$icons-path}navigation/dark/arrow-up.svg#primary--disabled'); - --icon__navigation_arrow-up_neutral--enabled: url('#{$icons-path}navigation/dark/arrow-up.svg#neutral--enabled'); - --icon__navigation_arrow-up_neutral--hover: url('#{$icons-path}navigation/dark/arrow-up.svg#neutral--hover'); - --icon__navigation_arrow-up_neutral--active: url('#{$icons-path}navigation/dark/arrow-up.svg#neutral--active'); - --icon__navigation_arrow-up_neutral--disabled: url('#{$icons-path}navigation/dark/arrow-up.svg#neutral--disabled'); - --icon__navigation_arrow-up_highlighted--enabled: url('#{$icons-path}navigation/dark/arrow-up.svg#highlighted--enabled'); - --icon__navigation_arrow-up_bright--enabled: url('#{$icons-path}navigation/dark/arrow-up.svg#bright--enabled'); - --icon__navigation_arrow-right_on-surface--enabled: url('#{$icons-path}navigation/dark/arrow-right.svg#on-surface--enabled'); - --icon__navigation_arrow-right_on-surface--hover: url('#{$icons-path}navigation/dark/arrow-right.svg#on-surface--hover'); - --icon__navigation_arrow-right_on-surface--active: url('#{$icons-path}navigation/dark/arrow-right.svg#on-surface--active'); - --icon__navigation_arrow-right_on-surface--disabled: url('#{$icons-path}navigation/dark/arrow-right.svg#on-surface--disabled'); - --icon__navigation_arrow-right_on-primary--enabled: url('#{$icons-path}navigation/dark/arrow-right.svg#on-primary--enabled'); - --icon__navigation_arrow-right_on-primary--hover: url('#{$icons-path}navigation/dark/arrow-right.svg#on-primary--hover'); - --icon__navigation_arrow-right_on-primary--active: url('#{$icons-path}navigation/dark/arrow-right.svg#on-primary--active'); - --icon__navigation_arrow-right_on-primary--disabled: url('#{$icons-path}navigation/dark/arrow-right.svg#on-primary--disabled'); - --icon__navigation_arrow-right_on-disabled--enabled: url('#{$icons-path}navigation/dark/arrow-right.svg#on-disabled--enabled'); - --icon__navigation_arrow-right_on-message--enabled: url('#{$icons-path}navigation/dark/arrow-right.svg#on-message--enabled'); - --icon__navigation_arrow-right_on-elevation--enabled: url('#{$icons-path}navigation/dark/arrow-right.svg#on-elevation--enabled'); - --icon__navigation_arrow-right_primary--enabled: url('#{$icons-path}navigation/dark/arrow-right.svg#primary--enabled'); - --icon__navigation_arrow-right_primary--hover: url('#{$icons-path}navigation/dark/arrow-right.svg#primary--hover'); - --icon__navigation_arrow-right_primary--active: url('#{$icons-path}navigation/dark/arrow-right.svg#primary--active'); - --icon__navigation_arrow-right_primary--disabled: url('#{$icons-path}navigation/dark/arrow-right.svg#primary--disabled'); - --icon__navigation_arrow-right_neutral--enabled: url('#{$icons-path}navigation/dark/arrow-right.svg#neutral--enabled'); - --icon__navigation_arrow-right_neutral--hover: url('#{$icons-path}navigation/dark/arrow-right.svg#neutral--hover'); - --icon__navigation_arrow-right_neutral--active: url('#{$icons-path}navigation/dark/arrow-right.svg#neutral--active'); - --icon__navigation_arrow-right_neutral--disabled: url('#{$icons-path}navigation/dark/arrow-right.svg#neutral--disabled'); - --icon__navigation_arrow-right_highlighted--enabled: url('#{$icons-path}navigation/dark/arrow-right.svg#highlighted--enabled'); - --icon__navigation_arrow-right_bright--enabled: url('#{$icons-path}navigation/dark/arrow-right.svg#bright--enabled'); - --icon__navigation_arrow-left_on-surface--enabled: url('#{$icons-path}navigation/dark/arrow-left.svg#on-surface--enabled'); - --icon__navigation_arrow-left_on-surface--hover: url('#{$icons-path}navigation/dark/arrow-left.svg#on-surface--hover'); - --icon__navigation_arrow-left_on-surface--active: url('#{$icons-path}navigation/dark/arrow-left.svg#on-surface--active'); - --icon__navigation_arrow-left_on-surface--disabled: url('#{$icons-path}navigation/dark/arrow-left.svg#on-surface--disabled'); - --icon__navigation_arrow-left_on-primary--enabled: url('#{$icons-path}navigation/dark/arrow-left.svg#on-primary--enabled'); - --icon__navigation_arrow-left_on-primary--hover: url('#{$icons-path}navigation/dark/arrow-left.svg#on-primary--hover'); - --icon__navigation_arrow-left_on-primary--active: url('#{$icons-path}navigation/dark/arrow-left.svg#on-primary--active'); - --icon__navigation_arrow-left_on-primary--disabled: url('#{$icons-path}navigation/dark/arrow-left.svg#on-primary--disabled'); - --icon__navigation_arrow-left_on-disabled--enabled: url('#{$icons-path}navigation/dark/arrow-left.svg#on-disabled--enabled'); - --icon__navigation_arrow-left_on-message--enabled: url('#{$icons-path}navigation/dark/arrow-left.svg#on-message--enabled'); - --icon__navigation_arrow-left_on-elevation--enabled: url('#{$icons-path}navigation/dark/arrow-left.svg#on-elevation--enabled'); - --icon__navigation_arrow-left_primary--enabled: url('#{$icons-path}navigation/dark/arrow-left.svg#primary--enabled'); - --icon__navigation_arrow-left_primary--hover: url('#{$icons-path}navigation/dark/arrow-left.svg#primary--hover'); - --icon__navigation_arrow-left_primary--active: url('#{$icons-path}navigation/dark/arrow-left.svg#primary--active'); - --icon__navigation_arrow-left_primary--disabled: url('#{$icons-path}navigation/dark/arrow-left.svg#primary--disabled'); - --icon__navigation_arrow-left_neutral--enabled: url('#{$icons-path}navigation/dark/arrow-left.svg#neutral--enabled'); - --icon__navigation_arrow-left_neutral--hover: url('#{$icons-path}navigation/dark/arrow-left.svg#neutral--hover'); - --icon__navigation_arrow-left_neutral--active: url('#{$icons-path}navigation/dark/arrow-left.svg#neutral--active'); - --icon__navigation_arrow-left_neutral--disabled: url('#{$icons-path}navigation/dark/arrow-left.svg#neutral--disabled'); - --icon__navigation_arrow-left_highlighted--enabled: url('#{$icons-path}navigation/dark/arrow-left.svg#highlighted--enabled'); - --icon__navigation_arrow-left_bright--enabled: url('#{$icons-path}navigation/dark/arrow-left.svg#bright--enabled'); - --icon__navigation_arrow-down_on-surface--enabled: url('#{$icons-path}navigation/dark/arrow-down.svg#on-surface--enabled'); - --icon__navigation_arrow-down_on-surface--hover: url('#{$icons-path}navigation/dark/arrow-down.svg#on-surface--hover'); - --icon__navigation_arrow-down_on-surface--active: url('#{$icons-path}navigation/dark/arrow-down.svg#on-surface--active'); - --icon__navigation_arrow-down_on-surface--disabled: url('#{$icons-path}navigation/dark/arrow-down.svg#on-surface--disabled'); - --icon__navigation_arrow-down_on-primary--enabled: url('#{$icons-path}navigation/dark/arrow-down.svg#on-primary--enabled'); - --icon__navigation_arrow-down_on-primary--hover: url('#{$icons-path}navigation/dark/arrow-down.svg#on-primary--hover'); - --icon__navigation_arrow-down_on-primary--active: url('#{$icons-path}navigation/dark/arrow-down.svg#on-primary--active'); - --icon__navigation_arrow-down_on-primary--disabled: url('#{$icons-path}navigation/dark/arrow-down.svg#on-primary--disabled'); - --icon__navigation_arrow-down_on-disabled--enabled: url('#{$icons-path}navigation/dark/arrow-down.svg#on-disabled--enabled'); - --icon__navigation_arrow-down_on-message--enabled: url('#{$icons-path}navigation/dark/arrow-down.svg#on-message--enabled'); - --icon__navigation_arrow-down_on-elevation--enabled: url('#{$icons-path}navigation/dark/arrow-down.svg#on-elevation--enabled'); - --icon__navigation_arrow-down_primary--enabled: url('#{$icons-path}navigation/dark/arrow-down.svg#primary--enabled'); - --icon__navigation_arrow-down_primary--hover: url('#{$icons-path}navigation/dark/arrow-down.svg#primary--hover'); - --icon__navigation_arrow-down_primary--active: url('#{$icons-path}navigation/dark/arrow-down.svg#primary--active'); - --icon__navigation_arrow-down_primary--disabled: url('#{$icons-path}navigation/dark/arrow-down.svg#primary--disabled'); - --icon__navigation_arrow-down_neutral--enabled: url('#{$icons-path}navigation/dark/arrow-down.svg#neutral--enabled'); - --icon__navigation_arrow-down_neutral--hover: url('#{$icons-path}navigation/dark/arrow-down.svg#neutral--hover'); - --icon__navigation_arrow-down_neutral--active: url('#{$icons-path}navigation/dark/arrow-down.svg#neutral--active'); - --icon__navigation_arrow-down_neutral--disabled: url('#{$icons-path}navigation/dark/arrow-down.svg#neutral--disabled'); - --icon__navigation_arrow-down_highlighted--enabled: url('#{$icons-path}navigation/dark/arrow-down.svg#highlighted--enabled'); - --icon__navigation_arrow-down_bright--enabled: url('#{$icons-path}navigation/dark/arrow-down.svg#bright--enabled'); - --icon__navigation_arrow-down-skyblue_on-surface--enabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#on-surface--enabled'); - --icon__navigation_arrow-down-skyblue_on-surface--hover: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#on-surface--hover'); - --icon__navigation_arrow-down-skyblue_on-surface--active: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#on-surface--active'); - --icon__navigation_arrow-down-skyblue_on-surface--disabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#on-surface--disabled'); - --icon__navigation_arrow-down-skyblue_on-primary--enabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#on-primary--enabled'); - --icon__navigation_arrow-down-skyblue_on-primary--hover: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#on-primary--hover'); - --icon__navigation_arrow-down-skyblue_on-primary--active: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#on-primary--active'); - --icon__navigation_arrow-down-skyblue_on-primary--disabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#on-primary--disabled'); - --icon__navigation_arrow-down-skyblue_on-disabled--enabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#on-disabled--enabled'); - --icon__navigation_arrow-down-skyblue_on-message--enabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#on-message--enabled'); - --icon__navigation_arrow-down-skyblue_on-elevation--enabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#on-elevation--enabled'); - --icon__navigation_arrow-down-skyblue_primary--enabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#primary--enabled'); - --icon__navigation_arrow-down-skyblue_primary--hover: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#primary--hover'); - --icon__navigation_arrow-down-skyblue_primary--active: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#primary--active'); - --icon__navigation_arrow-down-skyblue_primary--disabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#primary--disabled'); - --icon__navigation_arrow-down-skyblue_neutral--enabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#neutral--enabled'); - --icon__navigation_arrow-down-skyblue_neutral--hover: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#neutral--hover'); - --icon__navigation_arrow-down-skyblue_neutral--active: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#neutral--active'); - --icon__navigation_arrow-down-skyblue_neutral--disabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#neutral--disabled'); - --icon__navigation_arrow-down-skyblue_highlighted--enabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#highlighted--enabled'); - --icon__navigation_arrow-down-skyblue_bright--enabled: url('#{$icons-path}navigation/dark/arrow-down-skyblue.svg#bright--enabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*menus*/ - --icon__menus_undo_on-surface--enabled: url('#{$icons-path}menus/light/undo.svg#on-surface--enabled'); - --icon__menus_undo_on-surface--hover: url('#{$icons-path}menus/light/undo.svg#on-surface--hover'); - --icon__menus_undo_on-surface--active: url('#{$icons-path}menus/light/undo.svg#on-surface--active'); - --icon__menus_undo_on-surface--disabled: url('#{$icons-path}menus/light/undo.svg#on-surface--disabled'); - --icon__menus_undo_on-primary--enabled: url('#{$icons-path}menus/light/undo.svg#on-primary--enabled'); - --icon__menus_undo_on-primary--hover: url('#{$icons-path}menus/light/undo.svg#on-primary--hover'); - --icon__menus_undo_on-primary--active: url('#{$icons-path}menus/light/undo.svg#on-primary--active'); - --icon__menus_undo_on-primary--disabled: url('#{$icons-path}menus/light/undo.svg#on-primary--disabled'); - --icon__menus_undo_on-disabled--enabled: url('#{$icons-path}menus/light/undo.svg#on-disabled--enabled'); - --icon__menus_undo_on-message--enabled: url('#{$icons-path}menus/light/undo.svg#on-message--enabled'); - --icon__menus_undo_on-elevation--enabled: url('#{$icons-path}menus/light/undo.svg#on-elevation--enabled'); - --icon__menus_undo_primary--enabled: url('#{$icons-path}menus/light/undo.svg#primary--enabled'); - --icon__menus_undo_primary--hover: url('#{$icons-path}menus/light/undo.svg#primary--hover'); - --icon__menus_undo_primary--active: url('#{$icons-path}menus/light/undo.svg#primary--active'); - --icon__menus_undo_primary--disabled: url('#{$icons-path}menus/light/undo.svg#primary--disabled'); - --icon__menus_undo_neutral--enabled: url('#{$icons-path}menus/light/undo.svg#neutral--enabled'); - --icon__menus_undo_neutral--hover: url('#{$icons-path}menus/light/undo.svg#neutral--hover'); - --icon__menus_undo_neutral--active: url('#{$icons-path}menus/light/undo.svg#neutral--active'); - --icon__menus_undo_neutral--disabled: url('#{$icons-path}menus/light/undo.svg#neutral--disabled'); - --icon__menus_undo_highlighted--enabled: url('#{$icons-path}menus/light/undo.svg#highlighted--enabled'); - --icon__menus_undo_bright--enabled: url('#{$icons-path}menus/light/undo.svg#bright--enabled'); - --icon__menus_undo-close-object_on-surface--enabled: url('#{$icons-path}menus/light/undo-close-object.svg#on-surface--enabled'); - --icon__menus_undo-close-object_on-surface--hover: url('#{$icons-path}menus/light/undo-close-object.svg#on-surface--hover'); - --icon__menus_undo-close-object_on-surface--active: url('#{$icons-path}menus/light/undo-close-object.svg#on-surface--active'); - --icon__menus_undo-close-object_on-surface--disabled: url('#{$icons-path}menus/light/undo-close-object.svg#on-surface--disabled'); - --icon__menus_undo-close-object_on-primary--enabled: url('#{$icons-path}menus/light/undo-close-object.svg#on-primary--enabled'); - --icon__menus_undo-close-object_on-primary--hover: url('#{$icons-path}menus/light/undo-close-object.svg#on-primary--hover'); - --icon__menus_undo-close-object_on-primary--active: url('#{$icons-path}menus/light/undo-close-object.svg#on-primary--active'); - --icon__menus_undo-close-object_on-primary--disabled: url('#{$icons-path}menus/light/undo-close-object.svg#on-primary--disabled'); - --icon__menus_undo-close-object_on-disabled--enabled: url('#{$icons-path}menus/light/undo-close-object.svg#on-disabled--enabled'); - --icon__menus_undo-close-object_on-message--enabled: url('#{$icons-path}menus/light/undo-close-object.svg#on-message--enabled'); - --icon__menus_undo-close-object_on-elevation--enabled: url('#{$icons-path}menus/light/undo-close-object.svg#on-elevation--enabled'); - --icon__menus_undo-close-object_primary--enabled: url('#{$icons-path}menus/light/undo-close-object.svg#primary--enabled'); - --icon__menus_undo-close-object_primary--hover: url('#{$icons-path}menus/light/undo-close-object.svg#primary--hover'); - --icon__menus_undo-close-object_primary--active: url('#{$icons-path}menus/light/undo-close-object.svg#primary--active'); - --icon__menus_undo-close-object_primary--disabled: url('#{$icons-path}menus/light/undo-close-object.svg#primary--disabled'); - --icon__menus_undo-close-object_neutral--enabled: url('#{$icons-path}menus/light/undo-close-object.svg#neutral--enabled'); - --icon__menus_undo-close-object_neutral--hover: url('#{$icons-path}menus/light/undo-close-object.svg#neutral--hover'); - --icon__menus_undo-close-object_neutral--active: url('#{$icons-path}menus/light/undo-close-object.svg#neutral--active'); - --icon__menus_undo-close-object_neutral--disabled: url('#{$icons-path}menus/light/undo-close-object.svg#neutral--disabled'); - --icon__menus_undo-close-object_highlighted--enabled: url('#{$icons-path}menus/light/undo-close-object.svg#highlighted--enabled'); - --icon__menus_undo-close-object_bright--enabled: url('#{$icons-path}menus/light/undo-close-object.svg#bright--enabled'); - --icon__menus_save_on-surface--enabled: url('#{$icons-path}menus/light/save.svg#on-surface--enabled'); - --icon__menus_save_on-surface--hover: url('#{$icons-path}menus/light/save.svg#on-surface--hover'); - --icon__menus_save_on-surface--active: url('#{$icons-path}menus/light/save.svg#on-surface--active'); - --icon__menus_save_on-surface--disabled: url('#{$icons-path}menus/light/save.svg#on-surface--disabled'); - --icon__menus_save_on-primary--enabled: url('#{$icons-path}menus/light/save.svg#on-primary--enabled'); - --icon__menus_save_on-primary--hover: url('#{$icons-path}menus/light/save.svg#on-primary--hover'); - --icon__menus_save_on-primary--active: url('#{$icons-path}menus/light/save.svg#on-primary--active'); - --icon__menus_save_on-primary--disabled: url('#{$icons-path}menus/light/save.svg#on-primary--disabled'); - --icon__menus_save_on-disabled--enabled: url('#{$icons-path}menus/light/save.svg#on-disabled--enabled'); - --icon__menus_save_on-message--enabled: url('#{$icons-path}menus/light/save.svg#on-message--enabled'); - --icon__menus_save_on-elevation--enabled: url('#{$icons-path}menus/light/save.svg#on-elevation--enabled'); - --icon__menus_save_primary--enabled: url('#{$icons-path}menus/light/save.svg#primary--enabled'); - --icon__menus_save_primary--hover: url('#{$icons-path}menus/light/save.svg#primary--hover'); - --icon__menus_save_primary--active: url('#{$icons-path}menus/light/save.svg#primary--active'); - --icon__menus_save_primary--disabled: url('#{$icons-path}menus/light/save.svg#primary--disabled'); - --icon__menus_save_neutral--enabled: url('#{$icons-path}menus/light/save.svg#neutral--enabled'); - --icon__menus_save_neutral--hover: url('#{$icons-path}menus/light/save.svg#neutral--hover'); - --icon__menus_save_neutral--active: url('#{$icons-path}menus/light/save.svg#neutral--active'); - --icon__menus_save_neutral--disabled: url('#{$icons-path}menus/light/save.svg#neutral--disabled'); - --icon__menus_save_highlighted--enabled: url('#{$icons-path}menus/light/save.svg#highlighted--enabled'); - --icon__menus_save_bright--enabled: url('#{$icons-path}menus/light/save.svg#bright--enabled'); - --icon__menus_save-all_on-surface--enabled: url('#{$icons-path}menus/light/save-all.svg#on-surface--enabled'); - --icon__menus_save-all_on-surface--hover: url('#{$icons-path}menus/light/save-all.svg#on-surface--hover'); - --icon__menus_save-all_on-surface--active: url('#{$icons-path}menus/light/save-all.svg#on-surface--active'); - --icon__menus_save-all_on-surface--disabled: url('#{$icons-path}menus/light/save-all.svg#on-surface--disabled'); - --icon__menus_save-all_on-primary--enabled: url('#{$icons-path}menus/light/save-all.svg#on-primary--enabled'); - --icon__menus_save-all_on-primary--hover: url('#{$icons-path}menus/light/save-all.svg#on-primary--hover'); - --icon__menus_save-all_on-primary--active: url('#{$icons-path}menus/light/save-all.svg#on-primary--active'); - --icon__menus_save-all_on-primary--disabled: url('#{$icons-path}menus/light/save-all.svg#on-primary--disabled'); - --icon__menus_save-all_on-disabled--enabled: url('#{$icons-path}menus/light/save-all.svg#on-disabled--enabled'); - --icon__menus_save-all_on-message--enabled: url('#{$icons-path}menus/light/save-all.svg#on-message--enabled'); - --icon__menus_save-all_on-elevation--enabled: url('#{$icons-path}menus/light/save-all.svg#on-elevation--enabled'); - --icon__menus_save-all_primary--enabled: url('#{$icons-path}menus/light/save-all.svg#primary--enabled'); - --icon__menus_save-all_primary--hover: url('#{$icons-path}menus/light/save-all.svg#primary--hover'); - --icon__menus_save-all_primary--active: url('#{$icons-path}menus/light/save-all.svg#primary--active'); - --icon__menus_save-all_primary--disabled: url('#{$icons-path}menus/light/save-all.svg#primary--disabled'); - --icon__menus_save-all_neutral--enabled: url('#{$icons-path}menus/light/save-all.svg#neutral--enabled'); - --icon__menus_save-all_neutral--hover: url('#{$icons-path}menus/light/save-all.svg#neutral--hover'); - --icon__menus_save-all_neutral--active: url('#{$icons-path}menus/light/save-all.svg#neutral--active'); - --icon__menus_save-all_neutral--disabled: url('#{$icons-path}menus/light/save-all.svg#neutral--disabled'); - --icon__menus_save-all_highlighted--enabled: url('#{$icons-path}menus/light/save-all.svg#highlighted--enabled'); - --icon__menus_save-all_bright--enabled: url('#{$icons-path}menus/light/save-all.svg#bright--enabled'); - --icon__menus_run_on-surface--enabled: url('#{$icons-path}menus/light/run.svg#on-surface--enabled'); - --icon__menus_run_on-surface--hover: url('#{$icons-path}menus/light/run.svg#on-surface--hover'); - --icon__menus_run_on-surface--active: url('#{$icons-path}menus/light/run.svg#on-surface--active'); - --icon__menus_run_on-surface--disabled: url('#{$icons-path}menus/light/run.svg#on-surface--disabled'); - --icon__menus_run_on-primary--enabled: url('#{$icons-path}menus/light/run.svg#on-primary--enabled'); - --icon__menus_run_on-primary--hover: url('#{$icons-path}menus/light/run.svg#on-primary--hover'); - --icon__menus_run_on-primary--active: url('#{$icons-path}menus/light/run.svg#on-primary--active'); - --icon__menus_run_on-primary--disabled: url('#{$icons-path}menus/light/run.svg#on-primary--disabled'); - --icon__menus_run_on-disabled--enabled: url('#{$icons-path}menus/light/run.svg#on-disabled--enabled'); - --icon__menus_run_on-message--enabled: url('#{$icons-path}menus/light/run.svg#on-message--enabled'); - --icon__menus_run_on-elevation--enabled: url('#{$icons-path}menus/light/run.svg#on-elevation--enabled'); - --icon__menus_run_primary--enabled: url('#{$icons-path}menus/light/run.svg#primary--enabled'); - --icon__menus_run_primary--hover: url('#{$icons-path}menus/light/run.svg#primary--hover'); - --icon__menus_run_primary--active: url('#{$icons-path}menus/light/run.svg#primary--active'); - --icon__menus_run_primary--disabled: url('#{$icons-path}menus/light/run.svg#primary--disabled'); - --icon__menus_run_neutral--enabled: url('#{$icons-path}menus/light/run.svg#neutral--enabled'); - --icon__menus_run_neutral--hover: url('#{$icons-path}menus/light/run.svg#neutral--hover'); - --icon__menus_run_neutral--active: url('#{$icons-path}menus/light/run.svg#neutral--active'); - --icon__menus_run_neutral--disabled: url('#{$icons-path}menus/light/run.svg#neutral--disabled'); - --icon__menus_run_highlighted--enabled: url('#{$icons-path}menus/light/run.svg#highlighted--enabled'); - --icon__menus_run_bright--enabled: url('#{$icons-path}menus/light/run.svg#bright--enabled'); - --icon__menus_redo_on-surface--enabled: url('#{$icons-path}menus/light/redo.svg#on-surface--enabled'); - --icon__menus_redo_on-surface--hover: url('#{$icons-path}menus/light/redo.svg#on-surface--hover'); - --icon__menus_redo_on-surface--active: url('#{$icons-path}menus/light/redo.svg#on-surface--active'); - --icon__menus_redo_on-surface--disabled: url('#{$icons-path}menus/light/redo.svg#on-surface--disabled'); - --icon__menus_redo_on-primary--enabled: url('#{$icons-path}menus/light/redo.svg#on-primary--enabled'); - --icon__menus_redo_on-primary--hover: url('#{$icons-path}menus/light/redo.svg#on-primary--hover'); - --icon__menus_redo_on-primary--active: url('#{$icons-path}menus/light/redo.svg#on-primary--active'); - --icon__menus_redo_on-primary--disabled: url('#{$icons-path}menus/light/redo.svg#on-primary--disabled'); - --icon__menus_redo_on-disabled--enabled: url('#{$icons-path}menus/light/redo.svg#on-disabled--enabled'); - --icon__menus_redo_on-message--enabled: url('#{$icons-path}menus/light/redo.svg#on-message--enabled'); - --icon__menus_redo_on-elevation--enabled: url('#{$icons-path}menus/light/redo.svg#on-elevation--enabled'); - --icon__menus_redo_primary--enabled: url('#{$icons-path}menus/light/redo.svg#primary--enabled'); - --icon__menus_redo_primary--hover: url('#{$icons-path}menus/light/redo.svg#primary--hover'); - --icon__menus_redo_primary--active: url('#{$icons-path}menus/light/redo.svg#primary--active'); - --icon__menus_redo_primary--disabled: url('#{$icons-path}menus/light/redo.svg#primary--disabled'); - --icon__menus_redo_neutral--enabled: url('#{$icons-path}menus/light/redo.svg#neutral--enabled'); - --icon__menus_redo_neutral--hover: url('#{$icons-path}menus/light/redo.svg#neutral--hover'); - --icon__menus_redo_neutral--active: url('#{$icons-path}menus/light/redo.svg#neutral--active'); - --icon__menus_redo_neutral--disabled: url('#{$icons-path}menus/light/redo.svg#neutral--disabled'); - --icon__menus_redo_highlighted--enabled: url('#{$icons-path}menus/light/redo.svg#highlighted--enabled'); - --icon__menus_redo_bright--enabled: url('#{$icons-path}menus/light/redo.svg#bright--enabled'); - --icon__menus_properties_on-surface--enabled: url('#{$icons-path}menus/light/properties.svg#on-surface--enabled'); - --icon__menus_properties_on-surface--hover: url('#{$icons-path}menus/light/properties.svg#on-surface--hover'); - --icon__menus_properties_on-surface--active: url('#{$icons-path}menus/light/properties.svg#on-surface--active'); - --icon__menus_properties_on-surface--disabled: url('#{$icons-path}menus/light/properties.svg#on-surface--disabled'); - --icon__menus_properties_on-primary--enabled: url('#{$icons-path}menus/light/properties.svg#on-primary--enabled'); - --icon__menus_properties_on-primary--hover: url('#{$icons-path}menus/light/properties.svg#on-primary--hover'); - --icon__menus_properties_on-primary--active: url('#{$icons-path}menus/light/properties.svg#on-primary--active'); - --icon__menus_properties_on-primary--disabled: url('#{$icons-path}menus/light/properties.svg#on-primary--disabled'); - --icon__menus_properties_on-disabled--enabled: url('#{$icons-path}menus/light/properties.svg#on-disabled--enabled'); - --icon__menus_properties_on-message--enabled: url('#{$icons-path}menus/light/properties.svg#on-message--enabled'); - --icon__menus_properties_on-elevation--enabled: url('#{$icons-path}menus/light/properties.svg#on-elevation--enabled'); - --icon__menus_properties_primary--enabled: url('#{$icons-path}menus/light/properties.svg#primary--enabled'); - --icon__menus_properties_primary--hover: url('#{$icons-path}menus/light/properties.svg#primary--hover'); - --icon__menus_properties_primary--active: url('#{$icons-path}menus/light/properties.svg#primary--active'); - --icon__menus_properties_primary--disabled: url('#{$icons-path}menus/light/properties.svg#primary--disabled'); - --icon__menus_properties_neutral--enabled: url('#{$icons-path}menus/light/properties.svg#neutral--enabled'); - --icon__menus_properties_neutral--hover: url('#{$icons-path}menus/light/properties.svg#neutral--hover'); - --icon__menus_properties_neutral--active: url('#{$icons-path}menus/light/properties.svg#neutral--active'); - --icon__menus_properties_neutral--disabled: url('#{$icons-path}menus/light/properties.svg#neutral--disabled'); - --icon__menus_properties_highlighted--enabled: url('#{$icons-path}menus/light/properties.svg#highlighted--enabled'); - --icon__menus_properties_bright--enabled: url('#{$icons-path}menus/light/properties.svg#bright--enabled'); - --icon__menus_paste_on-surface--enabled: url('#{$icons-path}menus/light/paste.svg#on-surface--enabled'); - --icon__menus_paste_on-surface--hover: url('#{$icons-path}menus/light/paste.svg#on-surface--hover'); - --icon__menus_paste_on-surface--active: url('#{$icons-path}menus/light/paste.svg#on-surface--active'); - --icon__menus_paste_on-surface--disabled: url('#{$icons-path}menus/light/paste.svg#on-surface--disabled'); - --icon__menus_paste_on-primary--enabled: url('#{$icons-path}menus/light/paste.svg#on-primary--enabled'); - --icon__menus_paste_on-primary--hover: url('#{$icons-path}menus/light/paste.svg#on-primary--hover'); - --icon__menus_paste_on-primary--active: url('#{$icons-path}menus/light/paste.svg#on-primary--active'); - --icon__menus_paste_on-primary--disabled: url('#{$icons-path}menus/light/paste.svg#on-primary--disabled'); - --icon__menus_paste_on-disabled--enabled: url('#{$icons-path}menus/light/paste.svg#on-disabled--enabled'); - --icon__menus_paste_on-message--enabled: url('#{$icons-path}menus/light/paste.svg#on-message--enabled'); - --icon__menus_paste_on-elevation--enabled: url('#{$icons-path}menus/light/paste.svg#on-elevation--enabled'); - --icon__menus_paste_primary--enabled: url('#{$icons-path}menus/light/paste.svg#primary--enabled'); - --icon__menus_paste_primary--hover: url('#{$icons-path}menus/light/paste.svg#primary--hover'); - --icon__menus_paste_primary--active: url('#{$icons-path}menus/light/paste.svg#primary--active'); - --icon__menus_paste_primary--disabled: url('#{$icons-path}menus/light/paste.svg#primary--disabled'); - --icon__menus_paste_neutral--enabled: url('#{$icons-path}menus/light/paste.svg#neutral--enabled'); - --icon__menus_paste_neutral--hover: url('#{$icons-path}menus/light/paste.svg#neutral--hover'); - --icon__menus_paste_neutral--active: url('#{$icons-path}menus/light/paste.svg#neutral--active'); - --icon__menus_paste_neutral--disabled: url('#{$icons-path}menus/light/paste.svg#neutral--disabled'); - --icon__menus_paste_highlighted--enabled: url('#{$icons-path}menus/light/paste.svg#highlighted--enabled'); - --icon__menus_paste_bright--enabled: url('#{$icons-path}menus/light/paste.svg#bright--enabled'); - --icon__menus_open-object_on-surface--enabled: url('#{$icons-path}menus/light/open-object.svg#on-surface--enabled'); - --icon__menus_open-object_on-surface--hover: url('#{$icons-path}menus/light/open-object.svg#on-surface--hover'); - --icon__menus_open-object_on-surface--active: url('#{$icons-path}menus/light/open-object.svg#on-surface--active'); - --icon__menus_open-object_on-surface--disabled: url('#{$icons-path}menus/light/open-object.svg#on-surface--disabled'); - --icon__menus_open-object_on-primary--enabled: url('#{$icons-path}menus/light/open-object.svg#on-primary--enabled'); - --icon__menus_open-object_on-primary--hover: url('#{$icons-path}menus/light/open-object.svg#on-primary--hover'); - --icon__menus_open-object_on-primary--active: url('#{$icons-path}menus/light/open-object.svg#on-primary--active'); - --icon__menus_open-object_on-primary--disabled: url('#{$icons-path}menus/light/open-object.svg#on-primary--disabled'); - --icon__menus_open-object_on-disabled--enabled: url('#{$icons-path}menus/light/open-object.svg#on-disabled--enabled'); - --icon__menus_open-object_on-message--enabled: url('#{$icons-path}menus/light/open-object.svg#on-message--enabled'); - --icon__menus_open-object_on-elevation--enabled: url('#{$icons-path}menus/light/open-object.svg#on-elevation--enabled'); - --icon__menus_open-object_primary--enabled: url('#{$icons-path}menus/light/open-object.svg#primary--enabled'); - --icon__menus_open-object_primary--hover: url('#{$icons-path}menus/light/open-object.svg#primary--hover'); - --icon__menus_open-object_primary--active: url('#{$icons-path}menus/light/open-object.svg#primary--active'); - --icon__menus_open-object_primary--disabled: url('#{$icons-path}menus/light/open-object.svg#primary--disabled'); - --icon__menus_open-object_neutral--enabled: url('#{$icons-path}menus/light/open-object.svg#neutral--enabled'); - --icon__menus_open-object_neutral--hover: url('#{$icons-path}menus/light/open-object.svg#neutral--hover'); - --icon__menus_open-object_neutral--active: url('#{$icons-path}menus/light/open-object.svg#neutral--active'); - --icon__menus_open-object_neutral--disabled: url('#{$icons-path}menus/light/open-object.svg#neutral--disabled'); - --icon__menus_open-object_highlighted--enabled: url('#{$icons-path}menus/light/open-object.svg#highlighted--enabled'); - --icon__menus_open-object_bright--enabled: url('#{$icons-path}menus/light/open-object.svg#bright--enabled'); - --icon__menus_new-object_on-surface--enabled: url('#{$icons-path}menus/light/new-object.svg#on-surface--enabled'); - --icon__menus_new-object_on-surface--hover: url('#{$icons-path}menus/light/new-object.svg#on-surface--hover'); - --icon__menus_new-object_on-surface--active: url('#{$icons-path}menus/light/new-object.svg#on-surface--active'); - --icon__menus_new-object_on-surface--disabled: url('#{$icons-path}menus/light/new-object.svg#on-surface--disabled'); - --icon__menus_new-object_on-primary--enabled: url('#{$icons-path}menus/light/new-object.svg#on-primary--enabled'); - --icon__menus_new-object_on-primary--hover: url('#{$icons-path}menus/light/new-object.svg#on-primary--hover'); - --icon__menus_new-object_on-primary--active: url('#{$icons-path}menus/light/new-object.svg#on-primary--active'); - --icon__menus_new-object_on-primary--disabled: url('#{$icons-path}menus/light/new-object.svg#on-primary--disabled'); - --icon__menus_new-object_on-disabled--enabled: url('#{$icons-path}menus/light/new-object.svg#on-disabled--enabled'); - --icon__menus_new-object_on-message--enabled: url('#{$icons-path}menus/light/new-object.svg#on-message--enabled'); - --icon__menus_new-object_on-elevation--enabled: url('#{$icons-path}menus/light/new-object.svg#on-elevation--enabled'); - --icon__menus_new-object_primary--enabled: url('#{$icons-path}menus/light/new-object.svg#primary--enabled'); - --icon__menus_new-object_primary--hover: url('#{$icons-path}menus/light/new-object.svg#primary--hover'); - --icon__menus_new-object_primary--active: url('#{$icons-path}menus/light/new-object.svg#primary--active'); - --icon__menus_new-object_primary--disabled: url('#{$icons-path}menus/light/new-object.svg#primary--disabled'); - --icon__menus_new-object_neutral--enabled: url('#{$icons-path}menus/light/new-object.svg#neutral--enabled'); - --icon__menus_new-object_neutral--hover: url('#{$icons-path}menus/light/new-object.svg#neutral--hover'); - --icon__menus_new-object_neutral--active: url('#{$icons-path}menus/light/new-object.svg#neutral--active'); - --icon__menus_new-object_neutral--disabled: url('#{$icons-path}menus/light/new-object.svg#neutral--disabled'); - --icon__menus_new-object_highlighted--enabled: url('#{$icons-path}menus/light/new-object.svg#highlighted--enabled'); - --icon__menus_new-object_bright--enabled: url('#{$icons-path}menus/light/new-object.svg#bright--enabled'); - --icon__menus_find_on-surface--enabled: url('#{$icons-path}menus/light/find.svg#on-surface--enabled'); - --icon__menus_find_on-surface--hover: url('#{$icons-path}menus/light/find.svg#on-surface--hover'); - --icon__menus_find_on-surface--active: url('#{$icons-path}menus/light/find.svg#on-surface--active'); - --icon__menus_find_on-surface--disabled: url('#{$icons-path}menus/light/find.svg#on-surface--disabled'); - --icon__menus_find_on-primary--enabled: url('#{$icons-path}menus/light/find.svg#on-primary--enabled'); - --icon__menus_find_on-primary--hover: url('#{$icons-path}menus/light/find.svg#on-primary--hover'); - --icon__menus_find_on-primary--active: url('#{$icons-path}menus/light/find.svg#on-primary--active'); - --icon__menus_find_on-primary--disabled: url('#{$icons-path}menus/light/find.svg#on-primary--disabled'); - --icon__menus_find_on-disabled--enabled: url('#{$icons-path}menus/light/find.svg#on-disabled--enabled'); - --icon__menus_find_on-message--enabled: url('#{$icons-path}menus/light/find.svg#on-message--enabled'); - --icon__menus_find_on-elevation--enabled: url('#{$icons-path}menus/light/find.svg#on-elevation--enabled'); - --icon__menus_find_primary--enabled: url('#{$icons-path}menus/light/find.svg#primary--enabled'); - --icon__menus_find_primary--hover: url('#{$icons-path}menus/light/find.svg#primary--hover'); - --icon__menus_find_primary--active: url('#{$icons-path}menus/light/find.svg#primary--active'); - --icon__menus_find_primary--disabled: url('#{$icons-path}menus/light/find.svg#primary--disabled'); - --icon__menus_find_neutral--enabled: url('#{$icons-path}menus/light/find.svg#neutral--enabled'); - --icon__menus_find_neutral--hover: url('#{$icons-path}menus/light/find.svg#neutral--hover'); - --icon__menus_find_neutral--active: url('#{$icons-path}menus/light/find.svg#neutral--active'); - --icon__menus_find_neutral--disabled: url('#{$icons-path}menus/light/find.svg#neutral--disabled'); - --icon__menus_find_highlighted--enabled: url('#{$icons-path}menus/light/find.svg#highlighted--enabled'); - --icon__menus_find_bright--enabled: url('#{$icons-path}menus/light/find.svg#bright--enabled'); - --icon__menus_delete_on-surface--enabled: url('#{$icons-path}menus/light/delete.svg#on-surface--enabled'); - --icon__menus_delete_on-surface--hover: url('#{$icons-path}menus/light/delete.svg#on-surface--hover'); - --icon__menus_delete_on-surface--active: url('#{$icons-path}menus/light/delete.svg#on-surface--active'); - --icon__menus_delete_on-surface--disabled: url('#{$icons-path}menus/light/delete.svg#on-surface--disabled'); - --icon__menus_delete_on-primary--enabled: url('#{$icons-path}menus/light/delete.svg#on-primary--enabled'); - --icon__menus_delete_on-primary--hover: url('#{$icons-path}menus/light/delete.svg#on-primary--hover'); - --icon__menus_delete_on-primary--active: url('#{$icons-path}menus/light/delete.svg#on-primary--active'); - --icon__menus_delete_on-primary--disabled: url('#{$icons-path}menus/light/delete.svg#on-primary--disabled'); - --icon__menus_delete_on-disabled--enabled: url('#{$icons-path}menus/light/delete.svg#on-disabled--enabled'); - --icon__menus_delete_on-message--enabled: url('#{$icons-path}menus/light/delete.svg#on-message--enabled'); - --icon__menus_delete_on-elevation--enabled: url('#{$icons-path}menus/light/delete.svg#on-elevation--enabled'); - --icon__menus_delete_primary--enabled: url('#{$icons-path}menus/light/delete.svg#primary--enabled'); - --icon__menus_delete_primary--hover: url('#{$icons-path}menus/light/delete.svg#primary--hover'); - --icon__menus_delete_primary--active: url('#{$icons-path}menus/light/delete.svg#primary--active'); - --icon__menus_delete_primary--disabled: url('#{$icons-path}menus/light/delete.svg#primary--disabled'); - --icon__menus_delete_neutral--enabled: url('#{$icons-path}menus/light/delete.svg#neutral--enabled'); - --icon__menus_delete_neutral--hover: url('#{$icons-path}menus/light/delete.svg#neutral--hover'); - --icon__menus_delete_neutral--active: url('#{$icons-path}menus/light/delete.svg#neutral--active'); - --icon__menus_delete_neutral--disabled: url('#{$icons-path}menus/light/delete.svg#neutral--disabled'); - --icon__menus_delete_highlighted--enabled: url('#{$icons-path}menus/light/delete.svg#highlighted--enabled'); - --icon__menus_delete_bright--enabled: url('#{$icons-path}menus/light/delete.svg#bright--enabled'); - --icon__menus_cut_on-surface--enabled: url('#{$icons-path}menus/light/cut.svg#on-surface--enabled'); - --icon__menus_cut_on-surface--hover: url('#{$icons-path}menus/light/cut.svg#on-surface--hover'); - --icon__menus_cut_on-surface--active: url('#{$icons-path}menus/light/cut.svg#on-surface--active'); - --icon__menus_cut_on-surface--disabled: url('#{$icons-path}menus/light/cut.svg#on-surface--disabled'); - --icon__menus_cut_on-primary--enabled: url('#{$icons-path}menus/light/cut.svg#on-primary--enabled'); - --icon__menus_cut_on-primary--hover: url('#{$icons-path}menus/light/cut.svg#on-primary--hover'); - --icon__menus_cut_on-primary--active: url('#{$icons-path}menus/light/cut.svg#on-primary--active'); - --icon__menus_cut_on-primary--disabled: url('#{$icons-path}menus/light/cut.svg#on-primary--disabled'); - --icon__menus_cut_on-disabled--enabled: url('#{$icons-path}menus/light/cut.svg#on-disabled--enabled'); - --icon__menus_cut_on-message--enabled: url('#{$icons-path}menus/light/cut.svg#on-message--enabled'); - --icon__menus_cut_on-elevation--enabled: url('#{$icons-path}menus/light/cut.svg#on-elevation--enabled'); - --icon__menus_cut_primary--enabled: url('#{$icons-path}menus/light/cut.svg#primary--enabled'); - --icon__menus_cut_primary--hover: url('#{$icons-path}menus/light/cut.svg#primary--hover'); - --icon__menus_cut_primary--active: url('#{$icons-path}menus/light/cut.svg#primary--active'); - --icon__menus_cut_primary--disabled: url('#{$icons-path}menus/light/cut.svg#primary--disabled'); - --icon__menus_cut_neutral--enabled: url('#{$icons-path}menus/light/cut.svg#neutral--enabled'); - --icon__menus_cut_neutral--hover: url('#{$icons-path}menus/light/cut.svg#neutral--hover'); - --icon__menus_cut_neutral--active: url('#{$icons-path}menus/light/cut.svg#neutral--active'); - --icon__menus_cut_neutral--disabled: url('#{$icons-path}menus/light/cut.svg#neutral--disabled'); - --icon__menus_cut_highlighted--enabled: url('#{$icons-path}menus/light/cut.svg#highlighted--enabled'); - --icon__menus_cut_bright--enabled: url('#{$icons-path}menus/light/cut.svg#bright--enabled'); - --icon__menus_create-database-tables_on-surface--enabled: url('#{$icons-path}menus/light/create-database-tables.svg#on-surface--enabled'); - --icon__menus_create-database-tables_on-surface--hover: url('#{$icons-path}menus/light/create-database-tables.svg#on-surface--hover'); - --icon__menus_create-database-tables_on-surface--active: url('#{$icons-path}menus/light/create-database-tables.svg#on-surface--active'); - --icon__menus_create-database-tables_on-surface--disabled: url('#{$icons-path}menus/light/create-database-tables.svg#on-surface--disabled'); - --icon__menus_create-database-tables_on-primary--enabled: url('#{$icons-path}menus/light/create-database-tables.svg#on-primary--enabled'); - --icon__menus_create-database-tables_on-primary--hover: url('#{$icons-path}menus/light/create-database-tables.svg#on-primary--hover'); - --icon__menus_create-database-tables_on-primary--active: url('#{$icons-path}menus/light/create-database-tables.svg#on-primary--active'); - --icon__menus_create-database-tables_on-primary--disabled: url('#{$icons-path}menus/light/create-database-tables.svg#on-primary--disabled'); - --icon__menus_create-database-tables_on-disabled--enabled: url('#{$icons-path}menus/light/create-database-tables.svg#on-disabled--enabled'); - --icon__menus_create-database-tables_on-message--enabled: url('#{$icons-path}menus/light/create-database-tables.svg#on-message--enabled'); - --icon__menus_create-database-tables_on-elevation--enabled: url('#{$icons-path}menus/light/create-database-tables.svg#on-elevation--enabled'); - --icon__menus_create-database-tables_primary--enabled: url('#{$icons-path}menus/light/create-database-tables.svg#primary--enabled'); - --icon__menus_create-database-tables_primary--hover: url('#{$icons-path}menus/light/create-database-tables.svg#primary--hover'); - --icon__menus_create-database-tables_primary--active: url('#{$icons-path}menus/light/create-database-tables.svg#primary--active'); - --icon__menus_create-database-tables_primary--disabled: url('#{$icons-path}menus/light/create-database-tables.svg#primary--disabled'); - --icon__menus_create-database-tables_neutral--enabled: url('#{$icons-path}menus/light/create-database-tables.svg#neutral--enabled'); - --icon__menus_create-database-tables_neutral--hover: url('#{$icons-path}menus/light/create-database-tables.svg#neutral--hover'); - --icon__menus_create-database-tables_neutral--active: url('#{$icons-path}menus/light/create-database-tables.svg#neutral--active'); - --icon__menus_create-database-tables_neutral--disabled: url('#{$icons-path}menus/light/create-database-tables.svg#neutral--disabled'); - --icon__menus_create-database-tables_highlighted--enabled: url('#{$icons-path}menus/light/create-database-tables.svg#highlighted--enabled'); - --icon__menus_create-database-tables_bright--enabled: url('#{$icons-path}menus/light/create-database-tables.svg#bright--enabled'); - --icon__menus_copy_on-surface--enabled: url('#{$icons-path}menus/light/copy.svg#on-surface--enabled'); - --icon__menus_copy_on-surface--hover: url('#{$icons-path}menus/light/copy.svg#on-surface--hover'); - --icon__menus_copy_on-surface--active: url('#{$icons-path}menus/light/copy.svg#on-surface--active'); - --icon__menus_copy_on-surface--disabled: url('#{$icons-path}menus/light/copy.svg#on-surface--disabled'); - --icon__menus_copy_on-primary--enabled: url('#{$icons-path}menus/light/copy.svg#on-primary--enabled'); - --icon__menus_copy_on-primary--hover: url('#{$icons-path}menus/light/copy.svg#on-primary--hover'); - --icon__menus_copy_on-primary--active: url('#{$icons-path}menus/light/copy.svg#on-primary--active'); - --icon__menus_copy_on-primary--disabled: url('#{$icons-path}menus/light/copy.svg#on-primary--disabled'); - --icon__menus_copy_on-disabled--enabled: url('#{$icons-path}menus/light/copy.svg#on-disabled--enabled'); - --icon__menus_copy_on-message--enabled: url('#{$icons-path}menus/light/copy.svg#on-message--enabled'); - --icon__menus_copy_on-elevation--enabled: url('#{$icons-path}menus/light/copy.svg#on-elevation--enabled'); - --icon__menus_copy_primary--enabled: url('#{$icons-path}menus/light/copy.svg#primary--enabled'); - --icon__menus_copy_primary--hover: url('#{$icons-path}menus/light/copy.svg#primary--hover'); - --icon__menus_copy_primary--active: url('#{$icons-path}menus/light/copy.svg#primary--active'); - --icon__menus_copy_primary--disabled: url('#{$icons-path}menus/light/copy.svg#primary--disabled'); - --icon__menus_copy_neutral--enabled: url('#{$icons-path}menus/light/copy.svg#neutral--enabled'); - --icon__menus_copy_neutral--hover: url('#{$icons-path}menus/light/copy.svg#neutral--hover'); - --icon__menus_copy_neutral--active: url('#{$icons-path}menus/light/copy.svg#neutral--active'); - --icon__menus_copy_neutral--disabled: url('#{$icons-path}menus/light/copy.svg#neutral--disabled'); - --icon__menus_copy_highlighted--enabled: url('#{$icons-path}menus/light/copy.svg#highlighted--enabled'); - --icon__menus_copy_bright--enabled: url('#{$icons-path}menus/light/copy.svg#bright--enabled'); - --icon__menus_cancel-build_on-surface--enabled: url('#{$icons-path}menus/light/cancel-build.svg#on-surface--enabled'); - --icon__menus_cancel-build_on-surface--hover: url('#{$icons-path}menus/light/cancel-build.svg#on-surface--hover'); - --icon__menus_cancel-build_on-surface--active: url('#{$icons-path}menus/light/cancel-build.svg#on-surface--active'); - --icon__menus_cancel-build_on-surface--disabled: url('#{$icons-path}menus/light/cancel-build.svg#on-surface--disabled'); - --icon__menus_cancel-build_on-primary--enabled: url('#{$icons-path}menus/light/cancel-build.svg#on-primary--enabled'); - --icon__menus_cancel-build_on-primary--hover: url('#{$icons-path}menus/light/cancel-build.svg#on-primary--hover'); - --icon__menus_cancel-build_on-primary--active: url('#{$icons-path}menus/light/cancel-build.svg#on-primary--active'); - --icon__menus_cancel-build_on-primary--disabled: url('#{$icons-path}menus/light/cancel-build.svg#on-primary--disabled'); - --icon__menus_cancel-build_on-disabled--enabled: url('#{$icons-path}menus/light/cancel-build.svg#on-disabled--enabled'); - --icon__menus_cancel-build_on-message--enabled: url('#{$icons-path}menus/light/cancel-build.svg#on-message--enabled'); - --icon__menus_cancel-build_on-elevation--enabled: url('#{$icons-path}menus/light/cancel-build.svg#on-elevation--enabled'); - --icon__menus_cancel-build_primary--enabled: url('#{$icons-path}menus/light/cancel-build.svg#primary--enabled'); - --icon__menus_cancel-build_primary--hover: url('#{$icons-path}menus/light/cancel-build.svg#primary--hover'); - --icon__menus_cancel-build_primary--active: url('#{$icons-path}menus/light/cancel-build.svg#primary--active'); - --icon__menus_cancel-build_primary--disabled: url('#{$icons-path}menus/light/cancel-build.svg#primary--disabled'); - --icon__menus_cancel-build_neutral--enabled: url('#{$icons-path}menus/light/cancel-build.svg#neutral--enabled'); - --icon__menus_cancel-build_neutral--hover: url('#{$icons-path}menus/light/cancel-build.svg#neutral--hover'); - --icon__menus_cancel-build_neutral--active: url('#{$icons-path}menus/light/cancel-build.svg#neutral--active'); - --icon__menus_cancel-build_neutral--disabled: url('#{$icons-path}menus/light/cancel-build.svg#neutral--disabled'); - --icon__menus_cancel-build_highlighted--enabled: url('#{$icons-path}menus/light/cancel-build.svg#highlighted--enabled'); - --icon__menus_cancel-build_bright--enabled: url('#{$icons-path}menus/light/cancel-build.svg#bright--enabled'); - --icon__menus_build_on-surface--enabled: url('#{$icons-path}menus/light/build.svg#on-surface--enabled'); - --icon__menus_build_on-surface--hover: url('#{$icons-path}menus/light/build.svg#on-surface--hover'); - --icon__menus_build_on-surface--active: url('#{$icons-path}menus/light/build.svg#on-surface--active'); - --icon__menus_build_on-surface--disabled: url('#{$icons-path}menus/light/build.svg#on-surface--disabled'); - --icon__menus_build_on-primary--enabled: url('#{$icons-path}menus/light/build.svg#on-primary--enabled'); - --icon__menus_build_on-primary--hover: url('#{$icons-path}menus/light/build.svg#on-primary--hover'); - --icon__menus_build_on-primary--active: url('#{$icons-path}menus/light/build.svg#on-primary--active'); - --icon__menus_build_on-primary--disabled: url('#{$icons-path}menus/light/build.svg#on-primary--disabled'); - --icon__menus_build_on-disabled--enabled: url('#{$icons-path}menus/light/build.svg#on-disabled--enabled'); - --icon__menus_build_on-message--enabled: url('#{$icons-path}menus/light/build.svg#on-message--enabled'); - --icon__menus_build_on-elevation--enabled: url('#{$icons-path}menus/light/build.svg#on-elevation--enabled'); - --icon__menus_build_primary--enabled: url('#{$icons-path}menus/light/build.svg#primary--enabled'); - --icon__menus_build_primary--hover: url('#{$icons-path}menus/light/build.svg#primary--hover'); - --icon__menus_build_primary--active: url('#{$icons-path}menus/light/build.svg#primary--active'); - --icon__menus_build_primary--disabled: url('#{$icons-path}menus/light/build.svg#primary--disabled'); - --icon__menus_build_neutral--enabled: url('#{$icons-path}menus/light/build.svg#neutral--enabled'); - --icon__menus_build_neutral--hover: url('#{$icons-path}menus/light/build.svg#neutral--hover'); - --icon__menus_build_neutral--active: url('#{$icons-path}menus/light/build.svg#neutral--active'); - --icon__menus_build_neutral--disabled: url('#{$icons-path}menus/light/build.svg#neutral--disabled'); - --icon__menus_build_highlighted--enabled: url('#{$icons-path}menus/light/build.svg#highlighted--enabled'); - --icon__menus_build_bright--enabled: url('#{$icons-path}menus/light/build.svg#bright--enabled'); - --icon__menus_build-all_on-surface--enabled: url('#{$icons-path}menus/light/build-all.svg#on-surface--enabled'); - --icon__menus_build-all_on-surface--hover: url('#{$icons-path}menus/light/build-all.svg#on-surface--hover'); - --icon__menus_build-all_on-surface--active: url('#{$icons-path}menus/light/build-all.svg#on-surface--active'); - --icon__menus_build-all_on-surface--disabled: url('#{$icons-path}menus/light/build-all.svg#on-surface--disabled'); - --icon__menus_build-all_on-primary--enabled: url('#{$icons-path}menus/light/build-all.svg#on-primary--enabled'); - --icon__menus_build-all_on-primary--hover: url('#{$icons-path}menus/light/build-all.svg#on-primary--hover'); - --icon__menus_build-all_on-primary--active: url('#{$icons-path}menus/light/build-all.svg#on-primary--active'); - --icon__menus_build-all_on-primary--disabled: url('#{$icons-path}menus/light/build-all.svg#on-primary--disabled'); - --icon__menus_build-all_on-disabled--enabled: url('#{$icons-path}menus/light/build-all.svg#on-disabled--enabled'); - --icon__menus_build-all_on-message--enabled: url('#{$icons-path}menus/light/build-all.svg#on-message--enabled'); - --icon__menus_build-all_on-elevation--enabled: url('#{$icons-path}menus/light/build-all.svg#on-elevation--enabled'); - --icon__menus_build-all_primary--enabled: url('#{$icons-path}menus/light/build-all.svg#primary--enabled'); - --icon__menus_build-all_primary--hover: url('#{$icons-path}menus/light/build-all.svg#primary--hover'); - --icon__menus_build-all_primary--active: url('#{$icons-path}menus/light/build-all.svg#primary--active'); - --icon__menus_build-all_primary--disabled: url('#{$icons-path}menus/light/build-all.svg#primary--disabled'); - --icon__menus_build-all_neutral--enabled: url('#{$icons-path}menus/light/build-all.svg#neutral--enabled'); - --icon__menus_build-all_neutral--hover: url('#{$icons-path}menus/light/build-all.svg#neutral--hover'); - --icon__menus_build-all_neutral--active: url('#{$icons-path}menus/light/build-all.svg#neutral--active'); - --icon__menus_build-all_neutral--disabled: url('#{$icons-path}menus/light/build-all.svg#neutral--disabled'); - --icon__menus_build-all_highlighted--enabled: url('#{$icons-path}menus/light/build-all.svg#highlighted--enabled'); - --icon__menus_build-all_bright--enabled: url('#{$icons-path}menus/light/build-all.svg#bright--enabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*menus*/ - --icon__menus_undo_on-surface--enabled: url('#{$icons-path}menus/dark/undo.svg#on-surface--enabled'); - --icon__menus_undo_on-surface--hover: url('#{$icons-path}menus/dark/undo.svg#on-surface--hover'); - --icon__menus_undo_on-surface--active: url('#{$icons-path}menus/dark/undo.svg#on-surface--active'); - --icon__menus_undo_on-surface--disabled: url('#{$icons-path}menus/dark/undo.svg#on-surface--disabled'); - --icon__menus_undo_on-primary--enabled: url('#{$icons-path}menus/dark/undo.svg#on-primary--enabled'); - --icon__menus_undo_on-primary--hover: url('#{$icons-path}menus/dark/undo.svg#on-primary--hover'); - --icon__menus_undo_on-primary--active: url('#{$icons-path}menus/dark/undo.svg#on-primary--active'); - --icon__menus_undo_on-primary--disabled: url('#{$icons-path}menus/dark/undo.svg#on-primary--disabled'); - --icon__menus_undo_on-disabled--enabled: url('#{$icons-path}menus/dark/undo.svg#on-disabled--enabled'); - --icon__menus_undo_on-message--enabled: url('#{$icons-path}menus/dark/undo.svg#on-message--enabled'); - --icon__menus_undo_on-elevation--enabled: url('#{$icons-path}menus/dark/undo.svg#on-elevation--enabled'); - --icon__menus_undo_primary--enabled: url('#{$icons-path}menus/dark/undo.svg#primary--enabled'); - --icon__menus_undo_primary--hover: url('#{$icons-path}menus/dark/undo.svg#primary--hover'); - --icon__menus_undo_primary--active: url('#{$icons-path}menus/dark/undo.svg#primary--active'); - --icon__menus_undo_primary--disabled: url('#{$icons-path}menus/dark/undo.svg#primary--disabled'); - --icon__menus_undo_neutral--enabled: url('#{$icons-path}menus/dark/undo.svg#neutral--enabled'); - --icon__menus_undo_neutral--hover: url('#{$icons-path}menus/dark/undo.svg#neutral--hover'); - --icon__menus_undo_neutral--active: url('#{$icons-path}menus/dark/undo.svg#neutral--active'); - --icon__menus_undo_neutral--disabled: url('#{$icons-path}menus/dark/undo.svg#neutral--disabled'); - --icon__menus_undo_highlighted--enabled: url('#{$icons-path}menus/dark/undo.svg#highlighted--enabled'); - --icon__menus_undo_bright--enabled: url('#{$icons-path}menus/dark/undo.svg#bright--enabled'); - --icon__menus_undo-close-object_on-surface--enabled: url('#{$icons-path}menus/dark/undo-close-object.svg#on-surface--enabled'); - --icon__menus_undo-close-object_on-surface--hover: url('#{$icons-path}menus/dark/undo-close-object.svg#on-surface--hover'); - --icon__menus_undo-close-object_on-surface--active: url('#{$icons-path}menus/dark/undo-close-object.svg#on-surface--active'); - --icon__menus_undo-close-object_on-surface--disabled: url('#{$icons-path}menus/dark/undo-close-object.svg#on-surface--disabled'); - --icon__menus_undo-close-object_on-primary--enabled: url('#{$icons-path}menus/dark/undo-close-object.svg#on-primary--enabled'); - --icon__menus_undo-close-object_on-primary--hover: url('#{$icons-path}menus/dark/undo-close-object.svg#on-primary--hover'); - --icon__menus_undo-close-object_on-primary--active: url('#{$icons-path}menus/dark/undo-close-object.svg#on-primary--active'); - --icon__menus_undo-close-object_on-primary--disabled: url('#{$icons-path}menus/dark/undo-close-object.svg#on-primary--disabled'); - --icon__menus_undo-close-object_on-disabled--enabled: url('#{$icons-path}menus/dark/undo-close-object.svg#on-disabled--enabled'); - --icon__menus_undo-close-object_on-message--enabled: url('#{$icons-path}menus/dark/undo-close-object.svg#on-message--enabled'); - --icon__menus_undo-close-object_on-elevation--enabled: url('#{$icons-path}menus/dark/undo-close-object.svg#on-elevation--enabled'); - --icon__menus_undo-close-object_primary--enabled: url('#{$icons-path}menus/dark/undo-close-object.svg#primary--enabled'); - --icon__menus_undo-close-object_primary--hover: url('#{$icons-path}menus/dark/undo-close-object.svg#primary--hover'); - --icon__menus_undo-close-object_primary--active: url('#{$icons-path}menus/dark/undo-close-object.svg#primary--active'); - --icon__menus_undo-close-object_primary--disabled: url('#{$icons-path}menus/dark/undo-close-object.svg#primary--disabled'); - --icon__menus_undo-close-object_neutral--enabled: url('#{$icons-path}menus/dark/undo-close-object.svg#neutral--enabled'); - --icon__menus_undo-close-object_neutral--hover: url('#{$icons-path}menus/dark/undo-close-object.svg#neutral--hover'); - --icon__menus_undo-close-object_neutral--active: url('#{$icons-path}menus/dark/undo-close-object.svg#neutral--active'); - --icon__menus_undo-close-object_neutral--disabled: url('#{$icons-path}menus/dark/undo-close-object.svg#neutral--disabled'); - --icon__menus_undo-close-object_highlighted--enabled: url('#{$icons-path}menus/dark/undo-close-object.svg#highlighted--enabled'); - --icon__menus_undo-close-object_bright--enabled: url('#{$icons-path}menus/dark/undo-close-object.svg#bright--enabled'); - --icon__menus_save_on-surface--enabled: url('#{$icons-path}menus/dark/save.svg#on-surface--enabled'); - --icon__menus_save_on-surface--hover: url('#{$icons-path}menus/dark/save.svg#on-surface--hover'); - --icon__menus_save_on-surface--active: url('#{$icons-path}menus/dark/save.svg#on-surface--active'); - --icon__menus_save_on-surface--disabled: url('#{$icons-path}menus/dark/save.svg#on-surface--disabled'); - --icon__menus_save_on-primary--enabled: url('#{$icons-path}menus/dark/save.svg#on-primary--enabled'); - --icon__menus_save_on-primary--hover: url('#{$icons-path}menus/dark/save.svg#on-primary--hover'); - --icon__menus_save_on-primary--active: url('#{$icons-path}menus/dark/save.svg#on-primary--active'); - --icon__menus_save_on-primary--disabled: url('#{$icons-path}menus/dark/save.svg#on-primary--disabled'); - --icon__menus_save_on-disabled--enabled: url('#{$icons-path}menus/dark/save.svg#on-disabled--enabled'); - --icon__menus_save_on-message--enabled: url('#{$icons-path}menus/dark/save.svg#on-message--enabled'); - --icon__menus_save_on-elevation--enabled: url('#{$icons-path}menus/dark/save.svg#on-elevation--enabled'); - --icon__menus_save_primary--enabled: url('#{$icons-path}menus/dark/save.svg#primary--enabled'); - --icon__menus_save_primary--hover: url('#{$icons-path}menus/dark/save.svg#primary--hover'); - --icon__menus_save_primary--active: url('#{$icons-path}menus/dark/save.svg#primary--active'); - --icon__menus_save_primary--disabled: url('#{$icons-path}menus/dark/save.svg#primary--disabled'); - --icon__menus_save_neutral--enabled: url('#{$icons-path}menus/dark/save.svg#neutral--enabled'); - --icon__menus_save_neutral--hover: url('#{$icons-path}menus/dark/save.svg#neutral--hover'); - --icon__menus_save_neutral--active: url('#{$icons-path}menus/dark/save.svg#neutral--active'); - --icon__menus_save_neutral--disabled: url('#{$icons-path}menus/dark/save.svg#neutral--disabled'); - --icon__menus_save_highlighted--enabled: url('#{$icons-path}menus/dark/save.svg#highlighted--enabled'); - --icon__menus_save_bright--enabled: url('#{$icons-path}menus/dark/save.svg#bright--enabled'); - --icon__menus_save-all_on-surface--enabled: url('#{$icons-path}menus/dark/save-all.svg#on-surface--enabled'); - --icon__menus_save-all_on-surface--hover: url('#{$icons-path}menus/dark/save-all.svg#on-surface--hover'); - --icon__menus_save-all_on-surface--active: url('#{$icons-path}menus/dark/save-all.svg#on-surface--active'); - --icon__menus_save-all_on-surface--disabled: url('#{$icons-path}menus/dark/save-all.svg#on-surface--disabled'); - --icon__menus_save-all_on-primary--enabled: url('#{$icons-path}menus/dark/save-all.svg#on-primary--enabled'); - --icon__menus_save-all_on-primary--hover: url('#{$icons-path}menus/dark/save-all.svg#on-primary--hover'); - --icon__menus_save-all_on-primary--active: url('#{$icons-path}menus/dark/save-all.svg#on-primary--active'); - --icon__menus_save-all_on-primary--disabled: url('#{$icons-path}menus/dark/save-all.svg#on-primary--disabled'); - --icon__menus_save-all_on-disabled--enabled: url('#{$icons-path}menus/dark/save-all.svg#on-disabled--enabled'); - --icon__menus_save-all_on-message--enabled: url('#{$icons-path}menus/dark/save-all.svg#on-message--enabled'); - --icon__menus_save-all_on-elevation--enabled: url('#{$icons-path}menus/dark/save-all.svg#on-elevation--enabled'); - --icon__menus_save-all_primary--enabled: url('#{$icons-path}menus/dark/save-all.svg#primary--enabled'); - --icon__menus_save-all_primary--hover: url('#{$icons-path}menus/dark/save-all.svg#primary--hover'); - --icon__menus_save-all_primary--active: url('#{$icons-path}menus/dark/save-all.svg#primary--active'); - --icon__menus_save-all_primary--disabled: url('#{$icons-path}menus/dark/save-all.svg#primary--disabled'); - --icon__menus_save-all_neutral--enabled: url('#{$icons-path}menus/dark/save-all.svg#neutral--enabled'); - --icon__menus_save-all_neutral--hover: url('#{$icons-path}menus/dark/save-all.svg#neutral--hover'); - --icon__menus_save-all_neutral--active: url('#{$icons-path}menus/dark/save-all.svg#neutral--active'); - --icon__menus_save-all_neutral--disabled: url('#{$icons-path}menus/dark/save-all.svg#neutral--disabled'); - --icon__menus_save-all_highlighted--enabled: url('#{$icons-path}menus/dark/save-all.svg#highlighted--enabled'); - --icon__menus_save-all_bright--enabled: url('#{$icons-path}menus/dark/save-all.svg#bright--enabled'); - --icon__menus_run_on-surface--enabled: url('#{$icons-path}menus/dark/run.svg#on-surface--enabled'); - --icon__menus_run_on-surface--hover: url('#{$icons-path}menus/dark/run.svg#on-surface--hover'); - --icon__menus_run_on-surface--active: url('#{$icons-path}menus/dark/run.svg#on-surface--active'); - --icon__menus_run_on-surface--disabled: url('#{$icons-path}menus/dark/run.svg#on-surface--disabled'); - --icon__menus_run_on-primary--enabled: url('#{$icons-path}menus/dark/run.svg#on-primary--enabled'); - --icon__menus_run_on-primary--hover: url('#{$icons-path}menus/dark/run.svg#on-primary--hover'); - --icon__menus_run_on-primary--active: url('#{$icons-path}menus/dark/run.svg#on-primary--active'); - --icon__menus_run_on-primary--disabled: url('#{$icons-path}menus/dark/run.svg#on-primary--disabled'); - --icon__menus_run_on-disabled--enabled: url('#{$icons-path}menus/dark/run.svg#on-disabled--enabled'); - --icon__menus_run_on-message--enabled: url('#{$icons-path}menus/dark/run.svg#on-message--enabled'); - --icon__menus_run_on-elevation--enabled: url('#{$icons-path}menus/dark/run.svg#on-elevation--enabled'); - --icon__menus_run_primary--enabled: url('#{$icons-path}menus/dark/run.svg#primary--enabled'); - --icon__menus_run_primary--hover: url('#{$icons-path}menus/dark/run.svg#primary--hover'); - --icon__menus_run_primary--active: url('#{$icons-path}menus/dark/run.svg#primary--active'); - --icon__menus_run_primary--disabled: url('#{$icons-path}menus/dark/run.svg#primary--disabled'); - --icon__menus_run_neutral--enabled: url('#{$icons-path}menus/dark/run.svg#neutral--enabled'); - --icon__menus_run_neutral--hover: url('#{$icons-path}menus/dark/run.svg#neutral--hover'); - --icon__menus_run_neutral--active: url('#{$icons-path}menus/dark/run.svg#neutral--active'); - --icon__menus_run_neutral--disabled: url('#{$icons-path}menus/dark/run.svg#neutral--disabled'); - --icon__menus_run_highlighted--enabled: url('#{$icons-path}menus/dark/run.svg#highlighted--enabled'); - --icon__menus_run_bright--enabled: url('#{$icons-path}menus/dark/run.svg#bright--enabled'); - --icon__menus_redo_on-surface--enabled: url('#{$icons-path}menus/dark/redo.svg#on-surface--enabled'); - --icon__menus_redo_on-surface--hover: url('#{$icons-path}menus/dark/redo.svg#on-surface--hover'); - --icon__menus_redo_on-surface--active: url('#{$icons-path}menus/dark/redo.svg#on-surface--active'); - --icon__menus_redo_on-surface--disabled: url('#{$icons-path}menus/dark/redo.svg#on-surface--disabled'); - --icon__menus_redo_on-primary--enabled: url('#{$icons-path}menus/dark/redo.svg#on-primary--enabled'); - --icon__menus_redo_on-primary--hover: url('#{$icons-path}menus/dark/redo.svg#on-primary--hover'); - --icon__menus_redo_on-primary--active: url('#{$icons-path}menus/dark/redo.svg#on-primary--active'); - --icon__menus_redo_on-primary--disabled: url('#{$icons-path}menus/dark/redo.svg#on-primary--disabled'); - --icon__menus_redo_on-disabled--enabled: url('#{$icons-path}menus/dark/redo.svg#on-disabled--enabled'); - --icon__menus_redo_on-message--enabled: url('#{$icons-path}menus/dark/redo.svg#on-message--enabled'); - --icon__menus_redo_on-elevation--enabled: url('#{$icons-path}menus/dark/redo.svg#on-elevation--enabled'); - --icon__menus_redo_primary--enabled: url('#{$icons-path}menus/dark/redo.svg#primary--enabled'); - --icon__menus_redo_primary--hover: url('#{$icons-path}menus/dark/redo.svg#primary--hover'); - --icon__menus_redo_primary--active: url('#{$icons-path}menus/dark/redo.svg#primary--active'); - --icon__menus_redo_primary--disabled: url('#{$icons-path}menus/dark/redo.svg#primary--disabled'); - --icon__menus_redo_neutral--enabled: url('#{$icons-path}menus/dark/redo.svg#neutral--enabled'); - --icon__menus_redo_neutral--hover: url('#{$icons-path}menus/dark/redo.svg#neutral--hover'); - --icon__menus_redo_neutral--active: url('#{$icons-path}menus/dark/redo.svg#neutral--active'); - --icon__menus_redo_neutral--disabled: url('#{$icons-path}menus/dark/redo.svg#neutral--disabled'); - --icon__menus_redo_highlighted--enabled: url('#{$icons-path}menus/dark/redo.svg#highlighted--enabled'); - --icon__menus_redo_bright--enabled: url('#{$icons-path}menus/dark/redo.svg#bright--enabled'); - --icon__menus_properties_on-surface--enabled: url('#{$icons-path}menus/dark/properties.svg#on-surface--enabled'); - --icon__menus_properties_on-surface--hover: url('#{$icons-path}menus/dark/properties.svg#on-surface--hover'); - --icon__menus_properties_on-surface--active: url('#{$icons-path}menus/dark/properties.svg#on-surface--active'); - --icon__menus_properties_on-surface--disabled: url('#{$icons-path}menus/dark/properties.svg#on-surface--disabled'); - --icon__menus_properties_on-primary--enabled: url('#{$icons-path}menus/dark/properties.svg#on-primary--enabled'); - --icon__menus_properties_on-primary--hover: url('#{$icons-path}menus/dark/properties.svg#on-primary--hover'); - --icon__menus_properties_on-primary--active: url('#{$icons-path}menus/dark/properties.svg#on-primary--active'); - --icon__menus_properties_on-primary--disabled: url('#{$icons-path}menus/dark/properties.svg#on-primary--disabled'); - --icon__menus_properties_on-disabled--enabled: url('#{$icons-path}menus/dark/properties.svg#on-disabled--enabled'); - --icon__menus_properties_on-message--enabled: url('#{$icons-path}menus/dark/properties.svg#on-message--enabled'); - --icon__menus_properties_on-elevation--enabled: url('#{$icons-path}menus/dark/properties.svg#on-elevation--enabled'); - --icon__menus_properties_primary--enabled: url('#{$icons-path}menus/dark/properties.svg#primary--enabled'); - --icon__menus_properties_primary--hover: url('#{$icons-path}menus/dark/properties.svg#primary--hover'); - --icon__menus_properties_primary--active: url('#{$icons-path}menus/dark/properties.svg#primary--active'); - --icon__menus_properties_primary--disabled: url('#{$icons-path}menus/dark/properties.svg#primary--disabled'); - --icon__menus_properties_neutral--enabled: url('#{$icons-path}menus/dark/properties.svg#neutral--enabled'); - --icon__menus_properties_neutral--hover: url('#{$icons-path}menus/dark/properties.svg#neutral--hover'); - --icon__menus_properties_neutral--active: url('#{$icons-path}menus/dark/properties.svg#neutral--active'); - --icon__menus_properties_neutral--disabled: url('#{$icons-path}menus/dark/properties.svg#neutral--disabled'); - --icon__menus_properties_highlighted--enabled: url('#{$icons-path}menus/dark/properties.svg#highlighted--enabled'); - --icon__menus_properties_bright--enabled: url('#{$icons-path}menus/dark/properties.svg#bright--enabled'); - --icon__menus_paste_on-surface--enabled: url('#{$icons-path}menus/dark/paste.svg#on-surface--enabled'); - --icon__menus_paste_on-surface--hover: url('#{$icons-path}menus/dark/paste.svg#on-surface--hover'); - --icon__menus_paste_on-surface--active: url('#{$icons-path}menus/dark/paste.svg#on-surface--active'); - --icon__menus_paste_on-surface--disabled: url('#{$icons-path}menus/dark/paste.svg#on-surface--disabled'); - --icon__menus_paste_on-primary--enabled: url('#{$icons-path}menus/dark/paste.svg#on-primary--enabled'); - --icon__menus_paste_on-primary--hover: url('#{$icons-path}menus/dark/paste.svg#on-primary--hover'); - --icon__menus_paste_on-primary--active: url('#{$icons-path}menus/dark/paste.svg#on-primary--active'); - --icon__menus_paste_on-primary--disabled: url('#{$icons-path}menus/dark/paste.svg#on-primary--disabled'); - --icon__menus_paste_on-disabled--enabled: url('#{$icons-path}menus/dark/paste.svg#on-disabled--enabled'); - --icon__menus_paste_on-message--enabled: url('#{$icons-path}menus/dark/paste.svg#on-message--enabled'); - --icon__menus_paste_on-elevation--enabled: url('#{$icons-path}menus/dark/paste.svg#on-elevation--enabled'); - --icon__menus_paste_primary--enabled: url('#{$icons-path}menus/dark/paste.svg#primary--enabled'); - --icon__menus_paste_primary--hover: url('#{$icons-path}menus/dark/paste.svg#primary--hover'); - --icon__menus_paste_primary--active: url('#{$icons-path}menus/dark/paste.svg#primary--active'); - --icon__menus_paste_primary--disabled: url('#{$icons-path}menus/dark/paste.svg#primary--disabled'); - --icon__menus_paste_neutral--enabled: url('#{$icons-path}menus/dark/paste.svg#neutral--enabled'); - --icon__menus_paste_neutral--hover: url('#{$icons-path}menus/dark/paste.svg#neutral--hover'); - --icon__menus_paste_neutral--active: url('#{$icons-path}menus/dark/paste.svg#neutral--active'); - --icon__menus_paste_neutral--disabled: url('#{$icons-path}menus/dark/paste.svg#neutral--disabled'); - --icon__menus_paste_highlighted--enabled: url('#{$icons-path}menus/dark/paste.svg#highlighted--enabled'); - --icon__menus_paste_bright--enabled: url('#{$icons-path}menus/dark/paste.svg#bright--enabled'); - --icon__menus_open-object_on-surface--enabled: url('#{$icons-path}menus/dark/open-object.svg#on-surface--enabled'); - --icon__menus_open-object_on-surface--hover: url('#{$icons-path}menus/dark/open-object.svg#on-surface--hover'); - --icon__menus_open-object_on-surface--active: url('#{$icons-path}menus/dark/open-object.svg#on-surface--active'); - --icon__menus_open-object_on-surface--disabled: url('#{$icons-path}menus/dark/open-object.svg#on-surface--disabled'); - --icon__menus_open-object_on-primary--enabled: url('#{$icons-path}menus/dark/open-object.svg#on-primary--enabled'); - --icon__menus_open-object_on-primary--hover: url('#{$icons-path}menus/dark/open-object.svg#on-primary--hover'); - --icon__menus_open-object_on-primary--active: url('#{$icons-path}menus/dark/open-object.svg#on-primary--active'); - --icon__menus_open-object_on-primary--disabled: url('#{$icons-path}menus/dark/open-object.svg#on-primary--disabled'); - --icon__menus_open-object_on-disabled--enabled: url('#{$icons-path}menus/dark/open-object.svg#on-disabled--enabled'); - --icon__menus_open-object_on-message--enabled: url('#{$icons-path}menus/dark/open-object.svg#on-message--enabled'); - --icon__menus_open-object_on-elevation--enabled: url('#{$icons-path}menus/dark/open-object.svg#on-elevation--enabled'); - --icon__menus_open-object_primary--enabled: url('#{$icons-path}menus/dark/open-object.svg#primary--enabled'); - --icon__menus_open-object_primary--hover: url('#{$icons-path}menus/dark/open-object.svg#primary--hover'); - --icon__menus_open-object_primary--active: url('#{$icons-path}menus/dark/open-object.svg#primary--active'); - --icon__menus_open-object_primary--disabled: url('#{$icons-path}menus/dark/open-object.svg#primary--disabled'); - --icon__menus_open-object_neutral--enabled: url('#{$icons-path}menus/dark/open-object.svg#neutral--enabled'); - --icon__menus_open-object_neutral--hover: url('#{$icons-path}menus/dark/open-object.svg#neutral--hover'); - --icon__menus_open-object_neutral--active: url('#{$icons-path}menus/dark/open-object.svg#neutral--active'); - --icon__menus_open-object_neutral--disabled: url('#{$icons-path}menus/dark/open-object.svg#neutral--disabled'); - --icon__menus_open-object_highlighted--enabled: url('#{$icons-path}menus/dark/open-object.svg#highlighted--enabled'); - --icon__menus_open-object_bright--enabled: url('#{$icons-path}menus/dark/open-object.svg#bright--enabled'); - --icon__menus_new-object_on-surface--enabled: url('#{$icons-path}menus/dark/new-object.svg#on-surface--enabled'); - --icon__menus_new-object_on-surface--hover: url('#{$icons-path}menus/dark/new-object.svg#on-surface--hover'); - --icon__menus_new-object_on-surface--active: url('#{$icons-path}menus/dark/new-object.svg#on-surface--active'); - --icon__menus_new-object_on-surface--disabled: url('#{$icons-path}menus/dark/new-object.svg#on-surface--disabled'); - --icon__menus_new-object_on-primary--enabled: url('#{$icons-path}menus/dark/new-object.svg#on-primary--enabled'); - --icon__menus_new-object_on-primary--hover: url('#{$icons-path}menus/dark/new-object.svg#on-primary--hover'); - --icon__menus_new-object_on-primary--active: url('#{$icons-path}menus/dark/new-object.svg#on-primary--active'); - --icon__menus_new-object_on-primary--disabled: url('#{$icons-path}menus/dark/new-object.svg#on-primary--disabled'); - --icon__menus_new-object_on-disabled--enabled: url('#{$icons-path}menus/dark/new-object.svg#on-disabled--enabled'); - --icon__menus_new-object_on-message--enabled: url('#{$icons-path}menus/dark/new-object.svg#on-message--enabled'); - --icon__menus_new-object_on-elevation--enabled: url('#{$icons-path}menus/dark/new-object.svg#on-elevation--enabled'); - --icon__menus_new-object_primary--enabled: url('#{$icons-path}menus/dark/new-object.svg#primary--enabled'); - --icon__menus_new-object_primary--hover: url('#{$icons-path}menus/dark/new-object.svg#primary--hover'); - --icon__menus_new-object_primary--active: url('#{$icons-path}menus/dark/new-object.svg#primary--active'); - --icon__menus_new-object_primary--disabled: url('#{$icons-path}menus/dark/new-object.svg#primary--disabled'); - --icon__menus_new-object_neutral--enabled: url('#{$icons-path}menus/dark/new-object.svg#neutral--enabled'); - --icon__menus_new-object_neutral--hover: url('#{$icons-path}menus/dark/new-object.svg#neutral--hover'); - --icon__menus_new-object_neutral--active: url('#{$icons-path}menus/dark/new-object.svg#neutral--active'); - --icon__menus_new-object_neutral--disabled: url('#{$icons-path}menus/dark/new-object.svg#neutral--disabled'); - --icon__menus_new-object_highlighted--enabled: url('#{$icons-path}menus/dark/new-object.svg#highlighted--enabled'); - --icon__menus_new-object_bright--enabled: url('#{$icons-path}menus/dark/new-object.svg#bright--enabled'); - --icon__menus_find_on-surface--enabled: url('#{$icons-path}menus/dark/find.svg#on-surface--enabled'); - --icon__menus_find_on-surface--hover: url('#{$icons-path}menus/dark/find.svg#on-surface--hover'); - --icon__menus_find_on-surface--active: url('#{$icons-path}menus/dark/find.svg#on-surface--active'); - --icon__menus_find_on-surface--disabled: url('#{$icons-path}menus/dark/find.svg#on-surface--disabled'); - --icon__menus_find_on-primary--enabled: url('#{$icons-path}menus/dark/find.svg#on-primary--enabled'); - --icon__menus_find_on-primary--hover: url('#{$icons-path}menus/dark/find.svg#on-primary--hover'); - --icon__menus_find_on-primary--active: url('#{$icons-path}menus/dark/find.svg#on-primary--active'); - --icon__menus_find_on-primary--disabled: url('#{$icons-path}menus/dark/find.svg#on-primary--disabled'); - --icon__menus_find_on-disabled--enabled: url('#{$icons-path}menus/dark/find.svg#on-disabled--enabled'); - --icon__menus_find_on-message--enabled: url('#{$icons-path}menus/dark/find.svg#on-message--enabled'); - --icon__menus_find_on-elevation--enabled: url('#{$icons-path}menus/dark/find.svg#on-elevation--enabled'); - --icon__menus_find_primary--enabled: url('#{$icons-path}menus/dark/find.svg#primary--enabled'); - --icon__menus_find_primary--hover: url('#{$icons-path}menus/dark/find.svg#primary--hover'); - --icon__menus_find_primary--active: url('#{$icons-path}menus/dark/find.svg#primary--active'); - --icon__menus_find_primary--disabled: url('#{$icons-path}menus/dark/find.svg#primary--disabled'); - --icon__menus_find_neutral--enabled: url('#{$icons-path}menus/dark/find.svg#neutral--enabled'); - --icon__menus_find_neutral--hover: url('#{$icons-path}menus/dark/find.svg#neutral--hover'); - --icon__menus_find_neutral--active: url('#{$icons-path}menus/dark/find.svg#neutral--active'); - --icon__menus_find_neutral--disabled: url('#{$icons-path}menus/dark/find.svg#neutral--disabled'); - --icon__menus_find_highlighted--enabled: url('#{$icons-path}menus/dark/find.svg#highlighted--enabled'); - --icon__menus_find_bright--enabled: url('#{$icons-path}menus/dark/find.svg#bright--enabled'); - --icon__menus_delete_on-surface--enabled: url('#{$icons-path}menus/dark/delete.svg#on-surface--enabled'); - --icon__menus_delete_on-surface--hover: url('#{$icons-path}menus/dark/delete.svg#on-surface--hover'); - --icon__menus_delete_on-surface--active: url('#{$icons-path}menus/dark/delete.svg#on-surface--active'); - --icon__menus_delete_on-surface--disabled: url('#{$icons-path}menus/dark/delete.svg#on-surface--disabled'); - --icon__menus_delete_on-primary--enabled: url('#{$icons-path}menus/dark/delete.svg#on-primary--enabled'); - --icon__menus_delete_on-primary--hover: url('#{$icons-path}menus/dark/delete.svg#on-primary--hover'); - --icon__menus_delete_on-primary--active: url('#{$icons-path}menus/dark/delete.svg#on-primary--active'); - --icon__menus_delete_on-primary--disabled: url('#{$icons-path}menus/dark/delete.svg#on-primary--disabled'); - --icon__menus_delete_on-disabled--enabled: url('#{$icons-path}menus/dark/delete.svg#on-disabled--enabled'); - --icon__menus_delete_on-message--enabled: url('#{$icons-path}menus/dark/delete.svg#on-message--enabled'); - --icon__menus_delete_on-elevation--enabled: url('#{$icons-path}menus/dark/delete.svg#on-elevation--enabled'); - --icon__menus_delete_primary--enabled: url('#{$icons-path}menus/dark/delete.svg#primary--enabled'); - --icon__menus_delete_primary--hover: url('#{$icons-path}menus/dark/delete.svg#primary--hover'); - --icon__menus_delete_primary--active: url('#{$icons-path}menus/dark/delete.svg#primary--active'); - --icon__menus_delete_primary--disabled: url('#{$icons-path}menus/dark/delete.svg#primary--disabled'); - --icon__menus_delete_neutral--enabled: url('#{$icons-path}menus/dark/delete.svg#neutral--enabled'); - --icon__menus_delete_neutral--hover: url('#{$icons-path}menus/dark/delete.svg#neutral--hover'); - --icon__menus_delete_neutral--active: url('#{$icons-path}menus/dark/delete.svg#neutral--active'); - --icon__menus_delete_neutral--disabled: url('#{$icons-path}menus/dark/delete.svg#neutral--disabled'); - --icon__menus_delete_highlighted--enabled: url('#{$icons-path}menus/dark/delete.svg#highlighted--enabled'); - --icon__menus_delete_bright--enabled: url('#{$icons-path}menus/dark/delete.svg#bright--enabled'); - --icon__menus_cut_on-surface--enabled: url('#{$icons-path}menus/dark/cut.svg#on-surface--enabled'); - --icon__menus_cut_on-surface--hover: url('#{$icons-path}menus/dark/cut.svg#on-surface--hover'); - --icon__menus_cut_on-surface--active: url('#{$icons-path}menus/dark/cut.svg#on-surface--active'); - --icon__menus_cut_on-surface--disabled: url('#{$icons-path}menus/dark/cut.svg#on-surface--disabled'); - --icon__menus_cut_on-primary--enabled: url('#{$icons-path}menus/dark/cut.svg#on-primary--enabled'); - --icon__menus_cut_on-primary--hover: url('#{$icons-path}menus/dark/cut.svg#on-primary--hover'); - --icon__menus_cut_on-primary--active: url('#{$icons-path}menus/dark/cut.svg#on-primary--active'); - --icon__menus_cut_on-primary--disabled: url('#{$icons-path}menus/dark/cut.svg#on-primary--disabled'); - --icon__menus_cut_on-disabled--enabled: url('#{$icons-path}menus/dark/cut.svg#on-disabled--enabled'); - --icon__menus_cut_on-message--enabled: url('#{$icons-path}menus/dark/cut.svg#on-message--enabled'); - --icon__menus_cut_on-elevation--enabled: url('#{$icons-path}menus/dark/cut.svg#on-elevation--enabled'); - --icon__menus_cut_primary--enabled: url('#{$icons-path}menus/dark/cut.svg#primary--enabled'); - --icon__menus_cut_primary--hover: url('#{$icons-path}menus/dark/cut.svg#primary--hover'); - --icon__menus_cut_primary--active: url('#{$icons-path}menus/dark/cut.svg#primary--active'); - --icon__menus_cut_primary--disabled: url('#{$icons-path}menus/dark/cut.svg#primary--disabled'); - --icon__menus_cut_neutral--enabled: url('#{$icons-path}menus/dark/cut.svg#neutral--enabled'); - --icon__menus_cut_neutral--hover: url('#{$icons-path}menus/dark/cut.svg#neutral--hover'); - --icon__menus_cut_neutral--active: url('#{$icons-path}menus/dark/cut.svg#neutral--active'); - --icon__menus_cut_neutral--disabled: url('#{$icons-path}menus/dark/cut.svg#neutral--disabled'); - --icon__menus_cut_highlighted--enabled: url('#{$icons-path}menus/dark/cut.svg#highlighted--enabled'); - --icon__menus_cut_bright--enabled: url('#{$icons-path}menus/dark/cut.svg#bright--enabled'); - --icon__menus_create-database-tables_on-surface--enabled: url('#{$icons-path}menus/dark/create-database-tables.svg#on-surface--enabled'); - --icon__menus_create-database-tables_on-surface--hover: url('#{$icons-path}menus/dark/create-database-tables.svg#on-surface--hover'); - --icon__menus_create-database-tables_on-surface--active: url('#{$icons-path}menus/dark/create-database-tables.svg#on-surface--active'); - --icon__menus_create-database-tables_on-surface--disabled: url('#{$icons-path}menus/dark/create-database-tables.svg#on-surface--disabled'); - --icon__menus_create-database-tables_on-primary--enabled: url('#{$icons-path}menus/dark/create-database-tables.svg#on-primary--enabled'); - --icon__menus_create-database-tables_on-primary--hover: url('#{$icons-path}menus/dark/create-database-tables.svg#on-primary--hover'); - --icon__menus_create-database-tables_on-primary--active: url('#{$icons-path}menus/dark/create-database-tables.svg#on-primary--active'); - --icon__menus_create-database-tables_on-primary--disabled: url('#{$icons-path}menus/dark/create-database-tables.svg#on-primary--disabled'); - --icon__menus_create-database-tables_on-disabled--enabled: url('#{$icons-path}menus/dark/create-database-tables.svg#on-disabled--enabled'); - --icon__menus_create-database-tables_on-message--enabled: url('#{$icons-path}menus/dark/create-database-tables.svg#on-message--enabled'); - --icon__menus_create-database-tables_on-elevation--enabled: url('#{$icons-path}menus/dark/create-database-tables.svg#on-elevation--enabled'); - --icon__menus_create-database-tables_primary--enabled: url('#{$icons-path}menus/dark/create-database-tables.svg#primary--enabled'); - --icon__menus_create-database-tables_primary--hover: url('#{$icons-path}menus/dark/create-database-tables.svg#primary--hover'); - --icon__menus_create-database-tables_primary--active: url('#{$icons-path}menus/dark/create-database-tables.svg#primary--active'); - --icon__menus_create-database-tables_primary--disabled: url('#{$icons-path}menus/dark/create-database-tables.svg#primary--disabled'); - --icon__menus_create-database-tables_neutral--enabled: url('#{$icons-path}menus/dark/create-database-tables.svg#neutral--enabled'); - --icon__menus_create-database-tables_neutral--hover: url('#{$icons-path}menus/dark/create-database-tables.svg#neutral--hover'); - --icon__menus_create-database-tables_neutral--active: url('#{$icons-path}menus/dark/create-database-tables.svg#neutral--active'); - --icon__menus_create-database-tables_neutral--disabled: url('#{$icons-path}menus/dark/create-database-tables.svg#neutral--disabled'); - --icon__menus_create-database-tables_highlighted--enabled: url('#{$icons-path}menus/dark/create-database-tables.svg#highlighted--enabled'); - --icon__menus_create-database-tables_bright--enabled: url('#{$icons-path}menus/dark/create-database-tables.svg#bright--enabled'); - --icon__menus_copy_on-surface--enabled: url('#{$icons-path}menus/dark/copy.svg#on-surface--enabled'); - --icon__menus_copy_on-surface--hover: url('#{$icons-path}menus/dark/copy.svg#on-surface--hover'); - --icon__menus_copy_on-surface--active: url('#{$icons-path}menus/dark/copy.svg#on-surface--active'); - --icon__menus_copy_on-surface--disabled: url('#{$icons-path}menus/dark/copy.svg#on-surface--disabled'); - --icon__menus_copy_on-primary--enabled: url('#{$icons-path}menus/dark/copy.svg#on-primary--enabled'); - --icon__menus_copy_on-primary--hover: url('#{$icons-path}menus/dark/copy.svg#on-primary--hover'); - --icon__menus_copy_on-primary--active: url('#{$icons-path}menus/dark/copy.svg#on-primary--active'); - --icon__menus_copy_on-primary--disabled: url('#{$icons-path}menus/dark/copy.svg#on-primary--disabled'); - --icon__menus_copy_on-disabled--enabled: url('#{$icons-path}menus/dark/copy.svg#on-disabled--enabled'); - --icon__menus_copy_on-message--enabled: url('#{$icons-path}menus/dark/copy.svg#on-message--enabled'); - --icon__menus_copy_on-elevation--enabled: url('#{$icons-path}menus/dark/copy.svg#on-elevation--enabled'); - --icon__menus_copy_primary--enabled: url('#{$icons-path}menus/dark/copy.svg#primary--enabled'); - --icon__menus_copy_primary--hover: url('#{$icons-path}menus/dark/copy.svg#primary--hover'); - --icon__menus_copy_primary--active: url('#{$icons-path}menus/dark/copy.svg#primary--active'); - --icon__menus_copy_primary--disabled: url('#{$icons-path}menus/dark/copy.svg#primary--disabled'); - --icon__menus_copy_neutral--enabled: url('#{$icons-path}menus/dark/copy.svg#neutral--enabled'); - --icon__menus_copy_neutral--hover: url('#{$icons-path}menus/dark/copy.svg#neutral--hover'); - --icon__menus_copy_neutral--active: url('#{$icons-path}menus/dark/copy.svg#neutral--active'); - --icon__menus_copy_neutral--disabled: url('#{$icons-path}menus/dark/copy.svg#neutral--disabled'); - --icon__menus_copy_highlighted--enabled: url('#{$icons-path}menus/dark/copy.svg#highlighted--enabled'); - --icon__menus_copy_bright--enabled: url('#{$icons-path}menus/dark/copy.svg#bright--enabled'); - --icon__menus_cancel-build_on-surface--enabled: url('#{$icons-path}menus/dark/cancel-build.svg#on-surface--enabled'); - --icon__menus_cancel-build_on-surface--hover: url('#{$icons-path}menus/dark/cancel-build.svg#on-surface--hover'); - --icon__menus_cancel-build_on-surface--active: url('#{$icons-path}menus/dark/cancel-build.svg#on-surface--active'); - --icon__menus_cancel-build_on-surface--disabled: url('#{$icons-path}menus/dark/cancel-build.svg#on-surface--disabled'); - --icon__menus_cancel-build_on-primary--enabled: url('#{$icons-path}menus/dark/cancel-build.svg#on-primary--enabled'); - --icon__menus_cancel-build_on-primary--hover: url('#{$icons-path}menus/dark/cancel-build.svg#on-primary--hover'); - --icon__menus_cancel-build_on-primary--active: url('#{$icons-path}menus/dark/cancel-build.svg#on-primary--active'); - --icon__menus_cancel-build_on-primary--disabled: url('#{$icons-path}menus/dark/cancel-build.svg#on-primary--disabled'); - --icon__menus_cancel-build_on-disabled--enabled: url('#{$icons-path}menus/dark/cancel-build.svg#on-disabled--enabled'); - --icon__menus_cancel-build_on-message--enabled: url('#{$icons-path}menus/dark/cancel-build.svg#on-message--enabled'); - --icon__menus_cancel-build_on-elevation--enabled: url('#{$icons-path}menus/dark/cancel-build.svg#on-elevation--enabled'); - --icon__menus_cancel-build_primary--enabled: url('#{$icons-path}menus/dark/cancel-build.svg#primary--enabled'); - --icon__menus_cancel-build_primary--hover: url('#{$icons-path}menus/dark/cancel-build.svg#primary--hover'); - --icon__menus_cancel-build_primary--active: url('#{$icons-path}menus/dark/cancel-build.svg#primary--active'); - --icon__menus_cancel-build_primary--disabled: url('#{$icons-path}menus/dark/cancel-build.svg#primary--disabled'); - --icon__menus_cancel-build_neutral--enabled: url('#{$icons-path}menus/dark/cancel-build.svg#neutral--enabled'); - --icon__menus_cancel-build_neutral--hover: url('#{$icons-path}menus/dark/cancel-build.svg#neutral--hover'); - --icon__menus_cancel-build_neutral--active: url('#{$icons-path}menus/dark/cancel-build.svg#neutral--active'); - --icon__menus_cancel-build_neutral--disabled: url('#{$icons-path}menus/dark/cancel-build.svg#neutral--disabled'); - --icon__menus_cancel-build_highlighted--enabled: url('#{$icons-path}menus/dark/cancel-build.svg#highlighted--enabled'); - --icon__menus_cancel-build_bright--enabled: url('#{$icons-path}menus/dark/cancel-build.svg#bright--enabled'); - --icon__menus_build_on-surface--enabled: url('#{$icons-path}menus/dark/build.svg#on-surface--enabled'); - --icon__menus_build_on-surface--hover: url('#{$icons-path}menus/dark/build.svg#on-surface--hover'); - --icon__menus_build_on-surface--active: url('#{$icons-path}menus/dark/build.svg#on-surface--active'); - --icon__menus_build_on-surface--disabled: url('#{$icons-path}menus/dark/build.svg#on-surface--disabled'); - --icon__menus_build_on-primary--enabled: url('#{$icons-path}menus/dark/build.svg#on-primary--enabled'); - --icon__menus_build_on-primary--hover: url('#{$icons-path}menus/dark/build.svg#on-primary--hover'); - --icon__menus_build_on-primary--active: url('#{$icons-path}menus/dark/build.svg#on-primary--active'); - --icon__menus_build_on-primary--disabled: url('#{$icons-path}menus/dark/build.svg#on-primary--disabled'); - --icon__menus_build_on-disabled--enabled: url('#{$icons-path}menus/dark/build.svg#on-disabled--enabled'); - --icon__menus_build_on-message--enabled: url('#{$icons-path}menus/dark/build.svg#on-message--enabled'); - --icon__menus_build_on-elevation--enabled: url('#{$icons-path}menus/dark/build.svg#on-elevation--enabled'); - --icon__menus_build_primary--enabled: url('#{$icons-path}menus/dark/build.svg#primary--enabled'); - --icon__menus_build_primary--hover: url('#{$icons-path}menus/dark/build.svg#primary--hover'); - --icon__menus_build_primary--active: url('#{$icons-path}menus/dark/build.svg#primary--active'); - --icon__menus_build_primary--disabled: url('#{$icons-path}menus/dark/build.svg#primary--disabled'); - --icon__menus_build_neutral--enabled: url('#{$icons-path}menus/dark/build.svg#neutral--enabled'); - --icon__menus_build_neutral--hover: url('#{$icons-path}menus/dark/build.svg#neutral--hover'); - --icon__menus_build_neutral--active: url('#{$icons-path}menus/dark/build.svg#neutral--active'); - --icon__menus_build_neutral--disabled: url('#{$icons-path}menus/dark/build.svg#neutral--disabled'); - --icon__menus_build_highlighted--enabled: url('#{$icons-path}menus/dark/build.svg#highlighted--enabled'); - --icon__menus_build_bright--enabled: url('#{$icons-path}menus/dark/build.svg#bright--enabled'); - --icon__menus_build-all_on-surface--enabled: url('#{$icons-path}menus/dark/build-all.svg#on-surface--enabled'); - --icon__menus_build-all_on-surface--hover: url('#{$icons-path}menus/dark/build-all.svg#on-surface--hover'); - --icon__menus_build-all_on-surface--active: url('#{$icons-path}menus/dark/build-all.svg#on-surface--active'); - --icon__menus_build-all_on-surface--disabled: url('#{$icons-path}menus/dark/build-all.svg#on-surface--disabled'); - --icon__menus_build-all_on-primary--enabled: url('#{$icons-path}menus/dark/build-all.svg#on-primary--enabled'); - --icon__menus_build-all_on-primary--hover: url('#{$icons-path}menus/dark/build-all.svg#on-primary--hover'); - --icon__menus_build-all_on-primary--active: url('#{$icons-path}menus/dark/build-all.svg#on-primary--active'); - --icon__menus_build-all_on-primary--disabled: url('#{$icons-path}menus/dark/build-all.svg#on-primary--disabled'); - --icon__menus_build-all_on-disabled--enabled: url('#{$icons-path}menus/dark/build-all.svg#on-disabled--enabled'); - --icon__menus_build-all_on-message--enabled: url('#{$icons-path}menus/dark/build-all.svg#on-message--enabled'); - --icon__menus_build-all_on-elevation--enabled: url('#{$icons-path}menus/dark/build-all.svg#on-elevation--enabled'); - --icon__menus_build-all_primary--enabled: url('#{$icons-path}menus/dark/build-all.svg#primary--enabled'); - --icon__menus_build-all_primary--hover: url('#{$icons-path}menus/dark/build-all.svg#primary--hover'); - --icon__menus_build-all_primary--active: url('#{$icons-path}menus/dark/build-all.svg#primary--active'); - --icon__menus_build-all_primary--disabled: url('#{$icons-path}menus/dark/build-all.svg#primary--disabled'); - --icon__menus_build-all_neutral--enabled: url('#{$icons-path}menus/dark/build-all.svg#neutral--enabled'); - --icon__menus_build-all_neutral--hover: url('#{$icons-path}menus/dark/build-all.svg#neutral--hover'); - --icon__menus_build-all_neutral--active: url('#{$icons-path}menus/dark/build-all.svg#neutral--active'); - --icon__menus_build-all_neutral--disabled: url('#{$icons-path}menus/dark/build-all.svg#neutral--disabled'); - --icon__menus_build-all_highlighted--enabled: url('#{$icons-path}menus/dark/build-all.svg#highlighted--enabled'); - --icon__menus_build-all_bright--enabled: url('#{$icons-path}menus/dark/build-all.svg#bright--enabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*gemini-tools*/ - --icon__gemini-tools_warning_on-surface--enabled: url('#{$icons-path}gemini-tools/light/warning.svg#on-surface--enabled'); - --icon__gemini-tools_warning_on-surface--hover: url('#{$icons-path}gemini-tools/light/warning.svg#on-surface--hover'); - --icon__gemini-tools_warning_on-surface--active: url('#{$icons-path}gemini-tools/light/warning.svg#on-surface--active'); - --icon__gemini-tools_warning_on-surface--disabled: url('#{$icons-path}gemini-tools/light/warning.svg#on-surface--disabled'); - --icon__gemini-tools_warning_on-primary--enabled: url('#{$icons-path}gemini-tools/light/warning.svg#on-primary--enabled'); - --icon__gemini-tools_warning_on-primary--hover: url('#{$icons-path}gemini-tools/light/warning.svg#on-primary--hover'); - --icon__gemini-tools_warning_on-primary--active: url('#{$icons-path}gemini-tools/light/warning.svg#on-primary--active'); - --icon__gemini-tools_warning_on-primary--disabled: url('#{$icons-path}gemini-tools/light/warning.svg#on-primary--disabled'); - --icon__gemini-tools_warning_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/warning.svg#on-disabled--enabled'); - --icon__gemini-tools_warning_on-message--enabled: url('#{$icons-path}gemini-tools/light/warning.svg#on-message--enabled'); - --icon__gemini-tools_warning_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/warning.svg#on-elevation--enabled'); - --icon__gemini-tools_warning_primary--enabled: url('#{$icons-path}gemini-tools/light/warning.svg#primary--enabled'); - --icon__gemini-tools_warning_primary--hover: url('#{$icons-path}gemini-tools/light/warning.svg#primary--hover'); - --icon__gemini-tools_warning_primary--active: url('#{$icons-path}gemini-tools/light/warning.svg#primary--active'); - --icon__gemini-tools_warning_primary--disabled: url('#{$icons-path}gemini-tools/light/warning.svg#primary--disabled'); - --icon__gemini-tools_warning_neutral--enabled: url('#{$icons-path}gemini-tools/light/warning.svg#neutral--enabled'); - --icon__gemini-tools_warning_neutral--hover: url('#{$icons-path}gemini-tools/light/warning.svg#neutral--hover'); - --icon__gemini-tools_warning_neutral--active: url('#{$icons-path}gemini-tools/light/warning.svg#neutral--active'); - --icon__gemini-tools_warning_neutral--disabled: url('#{$icons-path}gemini-tools/light/warning.svg#neutral--disabled'); - --icon__gemini-tools_warning_highlighted--enabled: url('#{$icons-path}gemini-tools/light/warning.svg#highlighted--enabled'); - --icon__gemini-tools_warning_bright--enabled: url('#{$icons-path}gemini-tools/light/warning.svg#bright--enabled'); - --icon__gemini-tools_success_on-surface--enabled: url('#{$icons-path}gemini-tools/light/success.svg#on-surface--enabled'); - --icon__gemini-tools_success_on-surface--hover: url('#{$icons-path}gemini-tools/light/success.svg#on-surface--hover'); - --icon__gemini-tools_success_on-surface--active: url('#{$icons-path}gemini-tools/light/success.svg#on-surface--active'); - --icon__gemini-tools_success_on-surface--disabled: url('#{$icons-path}gemini-tools/light/success.svg#on-surface--disabled'); - --icon__gemini-tools_success_on-primary--enabled: url('#{$icons-path}gemini-tools/light/success.svg#on-primary--enabled'); - --icon__gemini-tools_success_on-primary--hover: url('#{$icons-path}gemini-tools/light/success.svg#on-primary--hover'); - --icon__gemini-tools_success_on-primary--active: url('#{$icons-path}gemini-tools/light/success.svg#on-primary--active'); - --icon__gemini-tools_success_on-primary--disabled: url('#{$icons-path}gemini-tools/light/success.svg#on-primary--disabled'); - --icon__gemini-tools_success_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/success.svg#on-disabled--enabled'); - --icon__gemini-tools_success_on-message--enabled: url('#{$icons-path}gemini-tools/light/success.svg#on-message--enabled'); - --icon__gemini-tools_success_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/success.svg#on-elevation--enabled'); - --icon__gemini-tools_success_primary--enabled: url('#{$icons-path}gemini-tools/light/success.svg#primary--enabled'); - --icon__gemini-tools_success_primary--hover: url('#{$icons-path}gemini-tools/light/success.svg#primary--hover'); - --icon__gemini-tools_success_primary--active: url('#{$icons-path}gemini-tools/light/success.svg#primary--active'); - --icon__gemini-tools_success_primary--disabled: url('#{$icons-path}gemini-tools/light/success.svg#primary--disabled'); - --icon__gemini-tools_success_neutral--enabled: url('#{$icons-path}gemini-tools/light/success.svg#neutral--enabled'); - --icon__gemini-tools_success_neutral--hover: url('#{$icons-path}gemini-tools/light/success.svg#neutral--hover'); - --icon__gemini-tools_success_neutral--active: url('#{$icons-path}gemini-tools/light/success.svg#neutral--active'); - --icon__gemini-tools_success_neutral--disabled: url('#{$icons-path}gemini-tools/light/success.svg#neutral--disabled'); - --icon__gemini-tools_success_highlighted--enabled: url('#{$icons-path}gemini-tools/light/success.svg#highlighted--enabled'); - --icon__gemini-tools_success_bright--enabled: url('#{$icons-path}gemini-tools/light/success.svg#bright--enabled'); - --icon__gemini-tools_show-more-vertical_on-surface--enabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#on-surface--enabled'); - --icon__gemini-tools_show-more-vertical_on-surface--hover: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#on-surface--hover'); - --icon__gemini-tools_show-more-vertical_on-surface--active: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#on-surface--active'); - --icon__gemini-tools_show-more-vertical_on-surface--disabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#on-surface--disabled'); - --icon__gemini-tools_show-more-vertical_on-primary--enabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#on-primary--enabled'); - --icon__gemini-tools_show-more-vertical_on-primary--hover: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#on-primary--hover'); - --icon__gemini-tools_show-more-vertical_on-primary--active: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#on-primary--active'); - --icon__gemini-tools_show-more-vertical_on-primary--disabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#on-primary--disabled'); - --icon__gemini-tools_show-more-vertical_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#on-disabled--enabled'); - --icon__gemini-tools_show-more-vertical_on-message--enabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#on-message--enabled'); - --icon__gemini-tools_show-more-vertical_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#on-elevation--enabled'); - --icon__gemini-tools_show-more-vertical_primary--enabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#primary--enabled'); - --icon__gemini-tools_show-more-vertical_primary--hover: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#primary--hover'); - --icon__gemini-tools_show-more-vertical_primary--active: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#primary--active'); - --icon__gemini-tools_show-more-vertical_primary--disabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#primary--disabled'); - --icon__gemini-tools_show-more-vertical_neutral--enabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#neutral--enabled'); - --icon__gemini-tools_show-more-vertical_neutral--hover: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#neutral--hover'); - --icon__gemini-tools_show-more-vertical_neutral--active: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#neutral--active'); - --icon__gemini-tools_show-more-vertical_neutral--disabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#neutral--disabled'); - --icon__gemini-tools_show-more-vertical_highlighted--enabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#highlighted--enabled'); - --icon__gemini-tools_show-more-vertical_bright--enabled: url('#{$icons-path}gemini-tools/light/show-more-vertical.svg#bright--enabled'); - --icon__gemini-tools_show-more-horizontal_on-surface--enabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#on-surface--enabled'); - --icon__gemini-tools_show-more-horizontal_on-surface--hover: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#on-surface--hover'); - --icon__gemini-tools_show-more-horizontal_on-surface--active: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#on-surface--active'); - --icon__gemini-tools_show-more-horizontal_on-surface--disabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#on-surface--disabled'); - --icon__gemini-tools_show-more-horizontal_on-primary--enabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#on-primary--enabled'); - --icon__gemini-tools_show-more-horizontal_on-primary--hover: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#on-primary--hover'); - --icon__gemini-tools_show-more-horizontal_on-primary--active: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#on-primary--active'); - --icon__gemini-tools_show-more-horizontal_on-primary--disabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#on-primary--disabled'); - --icon__gemini-tools_show-more-horizontal_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#on-disabled--enabled'); - --icon__gemini-tools_show-more-horizontal_on-message--enabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#on-message--enabled'); - --icon__gemini-tools_show-more-horizontal_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#on-elevation--enabled'); - --icon__gemini-tools_show-more-horizontal_primary--enabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#primary--enabled'); - --icon__gemini-tools_show-more-horizontal_primary--hover: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#primary--hover'); - --icon__gemini-tools_show-more-horizontal_primary--active: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#primary--active'); - --icon__gemini-tools_show-more-horizontal_primary--disabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#primary--disabled'); - --icon__gemini-tools_show-more-horizontal_neutral--enabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#neutral--enabled'); - --icon__gemini-tools_show-more-horizontal_neutral--hover: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#neutral--hover'); - --icon__gemini-tools_show-more-horizontal_neutral--active: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#neutral--active'); - --icon__gemini-tools_show-more-horizontal_neutral--disabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#neutral--disabled'); - --icon__gemini-tools_show-more-horizontal_highlighted--enabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#highlighted--enabled'); - --icon__gemini-tools_show-more-horizontal_bright--enabled: url('#{$icons-path}gemini-tools/light/show-more-horizontal.svg#bright--enabled'); - --icon__gemini-tools_share_on-surface--enabled: url('#{$icons-path}gemini-tools/light/share.svg#on-surface--enabled'); - --icon__gemini-tools_share_on-surface--hover: url('#{$icons-path}gemini-tools/light/share.svg#on-surface--hover'); - --icon__gemini-tools_share_on-surface--active: url('#{$icons-path}gemini-tools/light/share.svg#on-surface--active'); - --icon__gemini-tools_share_on-surface--disabled: url('#{$icons-path}gemini-tools/light/share.svg#on-surface--disabled'); - --icon__gemini-tools_share_on-primary--enabled: url('#{$icons-path}gemini-tools/light/share.svg#on-primary--enabled'); - --icon__gemini-tools_share_on-primary--hover: url('#{$icons-path}gemini-tools/light/share.svg#on-primary--hover'); - --icon__gemini-tools_share_on-primary--active: url('#{$icons-path}gemini-tools/light/share.svg#on-primary--active'); - --icon__gemini-tools_share_on-primary--disabled: url('#{$icons-path}gemini-tools/light/share.svg#on-primary--disabled'); - --icon__gemini-tools_share_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/share.svg#on-disabled--enabled'); - --icon__gemini-tools_share_on-message--enabled: url('#{$icons-path}gemini-tools/light/share.svg#on-message--enabled'); - --icon__gemini-tools_share_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/share.svg#on-elevation--enabled'); - --icon__gemini-tools_share_primary--enabled: url('#{$icons-path}gemini-tools/light/share.svg#primary--enabled'); - --icon__gemini-tools_share_primary--hover: url('#{$icons-path}gemini-tools/light/share.svg#primary--hover'); - --icon__gemini-tools_share_primary--active: url('#{$icons-path}gemini-tools/light/share.svg#primary--active'); - --icon__gemini-tools_share_primary--disabled: url('#{$icons-path}gemini-tools/light/share.svg#primary--disabled'); - --icon__gemini-tools_share_neutral--enabled: url('#{$icons-path}gemini-tools/light/share.svg#neutral--enabled'); - --icon__gemini-tools_share_neutral--hover: url('#{$icons-path}gemini-tools/light/share.svg#neutral--hover'); - --icon__gemini-tools_share_neutral--active: url('#{$icons-path}gemini-tools/light/share.svg#neutral--active'); - --icon__gemini-tools_share_neutral--disabled: url('#{$icons-path}gemini-tools/light/share.svg#neutral--disabled'); - --icon__gemini-tools_share_highlighted--enabled: url('#{$icons-path}gemini-tools/light/share.svg#highlighted--enabled'); - --icon__gemini-tools_share_bright--enabled: url('#{$icons-path}gemini-tools/light/share.svg#bright--enabled'); - --icon__gemini-tools_settings_on-surface--enabled: url('#{$icons-path}gemini-tools/light/settings.svg#on-surface--enabled'); - --icon__gemini-tools_settings_on-surface--hover: url('#{$icons-path}gemini-tools/light/settings.svg#on-surface--hover'); - --icon__gemini-tools_settings_on-surface--active: url('#{$icons-path}gemini-tools/light/settings.svg#on-surface--active'); - --icon__gemini-tools_settings_on-surface--disabled: url('#{$icons-path}gemini-tools/light/settings.svg#on-surface--disabled'); - --icon__gemini-tools_settings_on-primary--enabled: url('#{$icons-path}gemini-tools/light/settings.svg#on-primary--enabled'); - --icon__gemini-tools_settings_on-primary--hover: url('#{$icons-path}gemini-tools/light/settings.svg#on-primary--hover'); - --icon__gemini-tools_settings_on-primary--active: url('#{$icons-path}gemini-tools/light/settings.svg#on-primary--active'); - --icon__gemini-tools_settings_on-primary--disabled: url('#{$icons-path}gemini-tools/light/settings.svg#on-primary--disabled'); - --icon__gemini-tools_settings_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/settings.svg#on-disabled--enabled'); - --icon__gemini-tools_settings_on-message--enabled: url('#{$icons-path}gemini-tools/light/settings.svg#on-message--enabled'); - --icon__gemini-tools_settings_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/settings.svg#on-elevation--enabled'); - --icon__gemini-tools_settings_primary--enabled: url('#{$icons-path}gemini-tools/light/settings.svg#primary--enabled'); - --icon__gemini-tools_settings_primary--hover: url('#{$icons-path}gemini-tools/light/settings.svg#primary--hover'); - --icon__gemini-tools_settings_primary--active: url('#{$icons-path}gemini-tools/light/settings.svg#primary--active'); - --icon__gemini-tools_settings_primary--disabled: url('#{$icons-path}gemini-tools/light/settings.svg#primary--disabled'); - --icon__gemini-tools_settings_neutral--enabled: url('#{$icons-path}gemini-tools/light/settings.svg#neutral--enabled'); - --icon__gemini-tools_settings_neutral--hover: url('#{$icons-path}gemini-tools/light/settings.svg#neutral--hover'); - --icon__gemini-tools_settings_neutral--active: url('#{$icons-path}gemini-tools/light/settings.svg#neutral--active'); - --icon__gemini-tools_settings_neutral--disabled: url('#{$icons-path}gemini-tools/light/settings.svg#neutral--disabled'); - --icon__gemini-tools_settings_highlighted--enabled: url('#{$icons-path}gemini-tools/light/settings.svg#highlighted--enabled'); - --icon__gemini-tools_settings_bright--enabled: url('#{$icons-path}gemini-tools/light/settings.svg#bright--enabled'); - --icon__gemini-tools_search_on-surface--enabled: url('#{$icons-path}gemini-tools/light/search.svg#on-surface--enabled'); - --icon__gemini-tools_search_on-surface--hover: url('#{$icons-path}gemini-tools/light/search.svg#on-surface--hover'); - --icon__gemini-tools_search_on-surface--active: url('#{$icons-path}gemini-tools/light/search.svg#on-surface--active'); - --icon__gemini-tools_search_on-surface--disabled: url('#{$icons-path}gemini-tools/light/search.svg#on-surface--disabled'); - --icon__gemini-tools_search_on-primary--enabled: url('#{$icons-path}gemini-tools/light/search.svg#on-primary--enabled'); - --icon__gemini-tools_search_on-primary--hover: url('#{$icons-path}gemini-tools/light/search.svg#on-primary--hover'); - --icon__gemini-tools_search_on-primary--active: url('#{$icons-path}gemini-tools/light/search.svg#on-primary--active'); - --icon__gemini-tools_search_on-primary--disabled: url('#{$icons-path}gemini-tools/light/search.svg#on-primary--disabled'); - --icon__gemini-tools_search_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/search.svg#on-disabled--enabled'); - --icon__gemini-tools_search_on-message--enabled: url('#{$icons-path}gemini-tools/light/search.svg#on-message--enabled'); - --icon__gemini-tools_search_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/search.svg#on-elevation--enabled'); - --icon__gemini-tools_search_primary--enabled: url('#{$icons-path}gemini-tools/light/search.svg#primary--enabled'); - --icon__gemini-tools_search_primary--hover: url('#{$icons-path}gemini-tools/light/search.svg#primary--hover'); - --icon__gemini-tools_search_primary--active: url('#{$icons-path}gemini-tools/light/search.svg#primary--active'); - --icon__gemini-tools_search_primary--disabled: url('#{$icons-path}gemini-tools/light/search.svg#primary--disabled'); - --icon__gemini-tools_search_neutral--enabled: url('#{$icons-path}gemini-tools/light/search.svg#neutral--enabled'); - --icon__gemini-tools_search_neutral--hover: url('#{$icons-path}gemini-tools/light/search.svg#neutral--hover'); - --icon__gemini-tools_search_neutral--active: url('#{$icons-path}gemini-tools/light/search.svg#neutral--active'); - --icon__gemini-tools_search_neutral--disabled: url('#{$icons-path}gemini-tools/light/search.svg#neutral--disabled'); - --icon__gemini-tools_search_highlighted--enabled: url('#{$icons-path}gemini-tools/light/search.svg#highlighted--enabled'); - --icon__gemini-tools_search_bright--enabled: url('#{$icons-path}gemini-tools/light/search.svg#bright--enabled'); - --icon__gemini-tools_reset_on-surface--enabled: url('#{$icons-path}gemini-tools/light/reset.svg#on-surface--enabled'); - --icon__gemini-tools_reset_on-surface--hover: url('#{$icons-path}gemini-tools/light/reset.svg#on-surface--hover'); - --icon__gemini-tools_reset_on-surface--active: url('#{$icons-path}gemini-tools/light/reset.svg#on-surface--active'); - --icon__gemini-tools_reset_on-surface--disabled: url('#{$icons-path}gemini-tools/light/reset.svg#on-surface--disabled'); - --icon__gemini-tools_reset_on-primary--enabled: url('#{$icons-path}gemini-tools/light/reset.svg#on-primary--enabled'); - --icon__gemini-tools_reset_on-primary--hover: url('#{$icons-path}gemini-tools/light/reset.svg#on-primary--hover'); - --icon__gemini-tools_reset_on-primary--active: url('#{$icons-path}gemini-tools/light/reset.svg#on-primary--active'); - --icon__gemini-tools_reset_on-primary--disabled: url('#{$icons-path}gemini-tools/light/reset.svg#on-primary--disabled'); - --icon__gemini-tools_reset_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/reset.svg#on-disabled--enabled'); - --icon__gemini-tools_reset_on-message--enabled: url('#{$icons-path}gemini-tools/light/reset.svg#on-message--enabled'); - --icon__gemini-tools_reset_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/reset.svg#on-elevation--enabled'); - --icon__gemini-tools_reset_primary--enabled: url('#{$icons-path}gemini-tools/light/reset.svg#primary--enabled'); - --icon__gemini-tools_reset_primary--hover: url('#{$icons-path}gemini-tools/light/reset.svg#primary--hover'); - --icon__gemini-tools_reset_primary--active: url('#{$icons-path}gemini-tools/light/reset.svg#primary--active'); - --icon__gemini-tools_reset_primary--disabled: url('#{$icons-path}gemini-tools/light/reset.svg#primary--disabled'); - --icon__gemini-tools_reset_neutral--enabled: url('#{$icons-path}gemini-tools/light/reset.svg#neutral--enabled'); - --icon__gemini-tools_reset_neutral--hover: url('#{$icons-path}gemini-tools/light/reset.svg#neutral--hover'); - --icon__gemini-tools_reset_neutral--active: url('#{$icons-path}gemini-tools/light/reset.svg#neutral--active'); - --icon__gemini-tools_reset_neutral--disabled: url('#{$icons-path}gemini-tools/light/reset.svg#neutral--disabled'); - --icon__gemini-tools_reset_highlighted--enabled: url('#{$icons-path}gemini-tools/light/reset.svg#highlighted--enabled'); - --icon__gemini-tools_reset_bright--enabled: url('#{$icons-path}gemini-tools/light/reset.svg#bright--enabled'); - --icon__gemini-tools_read-only_on-surface--enabled: url('#{$icons-path}gemini-tools/light/read-only.svg#on-surface--enabled'); - --icon__gemini-tools_read-only_on-surface--hover: url('#{$icons-path}gemini-tools/light/read-only.svg#on-surface--hover'); - --icon__gemini-tools_read-only_on-surface--active: url('#{$icons-path}gemini-tools/light/read-only.svg#on-surface--active'); - --icon__gemini-tools_read-only_on-surface--disabled: url('#{$icons-path}gemini-tools/light/read-only.svg#on-surface--disabled'); - --icon__gemini-tools_read-only_on-primary--enabled: url('#{$icons-path}gemini-tools/light/read-only.svg#on-primary--enabled'); - --icon__gemini-tools_read-only_on-primary--hover: url('#{$icons-path}gemini-tools/light/read-only.svg#on-primary--hover'); - --icon__gemini-tools_read-only_on-primary--active: url('#{$icons-path}gemini-tools/light/read-only.svg#on-primary--active'); - --icon__gemini-tools_read-only_on-primary--disabled: url('#{$icons-path}gemini-tools/light/read-only.svg#on-primary--disabled'); - --icon__gemini-tools_read-only_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/read-only.svg#on-disabled--enabled'); - --icon__gemini-tools_read-only_on-message--enabled: url('#{$icons-path}gemini-tools/light/read-only.svg#on-message--enabled'); - --icon__gemini-tools_read-only_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/read-only.svg#on-elevation--enabled'); - --icon__gemini-tools_read-only_primary--enabled: url('#{$icons-path}gemini-tools/light/read-only.svg#primary--enabled'); - --icon__gemini-tools_read-only_primary--hover: url('#{$icons-path}gemini-tools/light/read-only.svg#primary--hover'); - --icon__gemini-tools_read-only_primary--active: url('#{$icons-path}gemini-tools/light/read-only.svg#primary--active'); - --icon__gemini-tools_read-only_primary--disabled: url('#{$icons-path}gemini-tools/light/read-only.svg#primary--disabled'); - --icon__gemini-tools_read-only_neutral--enabled: url('#{$icons-path}gemini-tools/light/read-only.svg#neutral--enabled'); - --icon__gemini-tools_read-only_neutral--hover: url('#{$icons-path}gemini-tools/light/read-only.svg#neutral--hover'); - --icon__gemini-tools_read-only_neutral--active: url('#{$icons-path}gemini-tools/light/read-only.svg#neutral--active'); - --icon__gemini-tools_read-only_neutral--disabled: url('#{$icons-path}gemini-tools/light/read-only.svg#neutral--disabled'); - --icon__gemini-tools_read-only_highlighted--enabled: url('#{$icons-path}gemini-tools/light/read-only.svg#highlighted--enabled'); - --icon__gemini-tools_read-only_bright--enabled: url('#{$icons-path}gemini-tools/light/read-only.svg#bright--enabled'); - --icon__gemini-tools_open-window_on-surface--enabled: url('#{$icons-path}gemini-tools/light/open-window.svg#on-surface--enabled'); - --icon__gemini-tools_open-window_on-surface--hover: url('#{$icons-path}gemini-tools/light/open-window.svg#on-surface--hover'); - --icon__gemini-tools_open-window_on-surface--active: url('#{$icons-path}gemini-tools/light/open-window.svg#on-surface--active'); - --icon__gemini-tools_open-window_on-surface--disabled: url('#{$icons-path}gemini-tools/light/open-window.svg#on-surface--disabled'); - --icon__gemini-tools_open-window_on-primary--enabled: url('#{$icons-path}gemini-tools/light/open-window.svg#on-primary--enabled'); - --icon__gemini-tools_open-window_on-primary--hover: url('#{$icons-path}gemini-tools/light/open-window.svg#on-primary--hover'); - --icon__gemini-tools_open-window_on-primary--active: url('#{$icons-path}gemini-tools/light/open-window.svg#on-primary--active'); - --icon__gemini-tools_open-window_on-primary--disabled: url('#{$icons-path}gemini-tools/light/open-window.svg#on-primary--disabled'); - --icon__gemini-tools_open-window_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/open-window.svg#on-disabled--enabled'); - --icon__gemini-tools_open-window_on-message--enabled: url('#{$icons-path}gemini-tools/light/open-window.svg#on-message--enabled'); - --icon__gemini-tools_open-window_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/open-window.svg#on-elevation--enabled'); - --icon__gemini-tools_open-window_primary--enabled: url('#{$icons-path}gemini-tools/light/open-window.svg#primary--enabled'); - --icon__gemini-tools_open-window_primary--hover: url('#{$icons-path}gemini-tools/light/open-window.svg#primary--hover'); - --icon__gemini-tools_open-window_primary--active: url('#{$icons-path}gemini-tools/light/open-window.svg#primary--active'); - --icon__gemini-tools_open-window_primary--disabled: url('#{$icons-path}gemini-tools/light/open-window.svg#primary--disabled'); - --icon__gemini-tools_open-window_neutral--enabled: url('#{$icons-path}gemini-tools/light/open-window.svg#neutral--enabled'); - --icon__gemini-tools_open-window_neutral--hover: url('#{$icons-path}gemini-tools/light/open-window.svg#neutral--hover'); - --icon__gemini-tools_open-window_neutral--active: url('#{$icons-path}gemini-tools/light/open-window.svg#neutral--active'); - --icon__gemini-tools_open-window_neutral--disabled: url('#{$icons-path}gemini-tools/light/open-window.svg#neutral--disabled'); - --icon__gemini-tools_open-window_highlighted--enabled: url('#{$icons-path}gemini-tools/light/open-window.svg#highlighted--enabled'); - --icon__gemini-tools_open-window_bright--enabled: url('#{$icons-path}gemini-tools/light/open-window.svg#bright--enabled'); - --icon__gemini-tools_notice_on-surface--enabled: url('#{$icons-path}gemini-tools/light/notice.svg#on-surface--enabled'); - --icon__gemini-tools_notice_on-surface--hover: url('#{$icons-path}gemini-tools/light/notice.svg#on-surface--hover'); - --icon__gemini-tools_notice_on-surface--active: url('#{$icons-path}gemini-tools/light/notice.svg#on-surface--active'); - --icon__gemini-tools_notice_on-surface--disabled: url('#{$icons-path}gemini-tools/light/notice.svg#on-surface--disabled'); - --icon__gemini-tools_notice_on-primary--enabled: url('#{$icons-path}gemini-tools/light/notice.svg#on-primary--enabled'); - --icon__gemini-tools_notice_on-primary--hover: url('#{$icons-path}gemini-tools/light/notice.svg#on-primary--hover'); - --icon__gemini-tools_notice_on-primary--active: url('#{$icons-path}gemini-tools/light/notice.svg#on-primary--active'); - --icon__gemini-tools_notice_on-primary--disabled: url('#{$icons-path}gemini-tools/light/notice.svg#on-primary--disabled'); - --icon__gemini-tools_notice_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/notice.svg#on-disabled--enabled'); - --icon__gemini-tools_notice_on-message--enabled: url('#{$icons-path}gemini-tools/light/notice.svg#on-message--enabled'); - --icon__gemini-tools_notice_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/notice.svg#on-elevation--enabled'); - --icon__gemini-tools_notice_primary--enabled: url('#{$icons-path}gemini-tools/light/notice.svg#primary--enabled'); - --icon__gemini-tools_notice_primary--hover: url('#{$icons-path}gemini-tools/light/notice.svg#primary--hover'); - --icon__gemini-tools_notice_primary--active: url('#{$icons-path}gemini-tools/light/notice.svg#primary--active'); - --icon__gemini-tools_notice_primary--disabled: url('#{$icons-path}gemini-tools/light/notice.svg#primary--disabled'); - --icon__gemini-tools_notice_neutral--enabled: url('#{$icons-path}gemini-tools/light/notice.svg#neutral--enabled'); - --icon__gemini-tools_notice_neutral--hover: url('#{$icons-path}gemini-tools/light/notice.svg#neutral--hover'); - --icon__gemini-tools_notice_neutral--active: url('#{$icons-path}gemini-tools/light/notice.svg#neutral--active'); - --icon__gemini-tools_notice_neutral--disabled: url('#{$icons-path}gemini-tools/light/notice.svg#neutral--disabled'); - --icon__gemini-tools_notice_highlighted--enabled: url('#{$icons-path}gemini-tools/light/notice.svg#highlighted--enabled'); - --icon__gemini-tools_notice_bright--enabled: url('#{$icons-path}gemini-tools/light/notice.svg#bright--enabled'); - --icon__gemini-tools_more-info_on-surface--enabled: url('#{$icons-path}gemini-tools/light/more-info.svg#on-surface--enabled'); - --icon__gemini-tools_more-info_on-surface--hover: url('#{$icons-path}gemini-tools/light/more-info.svg#on-surface--hover'); - --icon__gemini-tools_more-info_on-surface--active: url('#{$icons-path}gemini-tools/light/more-info.svg#on-surface--active'); - --icon__gemini-tools_more-info_on-surface--disabled: url('#{$icons-path}gemini-tools/light/more-info.svg#on-surface--disabled'); - --icon__gemini-tools_more-info_on-primary--enabled: url('#{$icons-path}gemini-tools/light/more-info.svg#on-primary--enabled'); - --icon__gemini-tools_more-info_on-primary--hover: url('#{$icons-path}gemini-tools/light/more-info.svg#on-primary--hover'); - --icon__gemini-tools_more-info_on-primary--active: url('#{$icons-path}gemini-tools/light/more-info.svg#on-primary--active'); - --icon__gemini-tools_more-info_on-primary--disabled: url('#{$icons-path}gemini-tools/light/more-info.svg#on-primary--disabled'); - --icon__gemini-tools_more-info_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/more-info.svg#on-disabled--enabled'); - --icon__gemini-tools_more-info_on-message--enabled: url('#{$icons-path}gemini-tools/light/more-info.svg#on-message--enabled'); - --icon__gemini-tools_more-info_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/more-info.svg#on-elevation--enabled'); - --icon__gemini-tools_more-info_primary--enabled: url('#{$icons-path}gemini-tools/light/more-info.svg#primary--enabled'); - --icon__gemini-tools_more-info_primary--hover: url('#{$icons-path}gemini-tools/light/more-info.svg#primary--hover'); - --icon__gemini-tools_more-info_primary--active: url('#{$icons-path}gemini-tools/light/more-info.svg#primary--active'); - --icon__gemini-tools_more-info_primary--disabled: url('#{$icons-path}gemini-tools/light/more-info.svg#primary--disabled'); - --icon__gemini-tools_more-info_neutral--enabled: url('#{$icons-path}gemini-tools/light/more-info.svg#neutral--enabled'); - --icon__gemini-tools_more-info_neutral--hover: url('#{$icons-path}gemini-tools/light/more-info.svg#neutral--hover'); - --icon__gemini-tools_more-info_neutral--active: url('#{$icons-path}gemini-tools/light/more-info.svg#neutral--active'); - --icon__gemini-tools_more-info_neutral--disabled: url('#{$icons-path}gemini-tools/light/more-info.svg#neutral--disabled'); - --icon__gemini-tools_more-info_highlighted--enabled: url('#{$icons-path}gemini-tools/light/more-info.svg#highlighted--enabled'); - --icon__gemini-tools_more-info_bright--enabled: url('#{$icons-path}gemini-tools/light/more-info.svg#bright--enabled'); - --icon__gemini-tools_minus_on-surface--enabled: url('#{$icons-path}gemini-tools/light/minus.svg#on-surface--enabled'); - --icon__gemini-tools_minus_on-surface--hover: url('#{$icons-path}gemini-tools/light/minus.svg#on-surface--hover'); - --icon__gemini-tools_minus_on-surface--active: url('#{$icons-path}gemini-tools/light/minus.svg#on-surface--active'); - --icon__gemini-tools_minus_on-surface--disabled: url('#{$icons-path}gemini-tools/light/minus.svg#on-surface--disabled'); - --icon__gemini-tools_minus_on-primary--enabled: url('#{$icons-path}gemini-tools/light/minus.svg#on-primary--enabled'); - --icon__gemini-tools_minus_on-primary--hover: url('#{$icons-path}gemini-tools/light/minus.svg#on-primary--hover'); - --icon__gemini-tools_minus_on-primary--active: url('#{$icons-path}gemini-tools/light/minus.svg#on-primary--active'); - --icon__gemini-tools_minus_on-primary--disabled: url('#{$icons-path}gemini-tools/light/minus.svg#on-primary--disabled'); - --icon__gemini-tools_minus_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/minus.svg#on-disabled--enabled'); - --icon__gemini-tools_minus_on-message--enabled: url('#{$icons-path}gemini-tools/light/minus.svg#on-message--enabled'); - --icon__gemini-tools_minus_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/minus.svg#on-elevation--enabled'); - --icon__gemini-tools_minus_primary--enabled: url('#{$icons-path}gemini-tools/light/minus.svg#primary--enabled'); - --icon__gemini-tools_minus_primary--hover: url('#{$icons-path}gemini-tools/light/minus.svg#primary--hover'); - --icon__gemini-tools_minus_primary--active: url('#{$icons-path}gemini-tools/light/minus.svg#primary--active'); - --icon__gemini-tools_minus_primary--disabled: url('#{$icons-path}gemini-tools/light/minus.svg#primary--disabled'); - --icon__gemini-tools_minus_neutral--enabled: url('#{$icons-path}gemini-tools/light/minus.svg#neutral--enabled'); - --icon__gemini-tools_minus_neutral--hover: url('#{$icons-path}gemini-tools/light/minus.svg#neutral--hover'); - --icon__gemini-tools_minus_neutral--active: url('#{$icons-path}gemini-tools/light/minus.svg#neutral--active'); - --icon__gemini-tools_minus_neutral--disabled: url('#{$icons-path}gemini-tools/light/minus.svg#neutral--disabled'); - --icon__gemini-tools_minus_highlighted--enabled: url('#{$icons-path}gemini-tools/light/minus.svg#highlighted--enabled'); - --icon__gemini-tools_minus_bright--enabled: url('#{$icons-path}gemini-tools/light/minus.svg#bright--enabled'); - --icon__gemini-tools_minus-circle_on-surface--enabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#on-surface--enabled'); - --icon__gemini-tools_minus-circle_on-surface--hover: url('#{$icons-path}gemini-tools/light/minus-circle.svg#on-surface--hover'); - --icon__gemini-tools_minus-circle_on-surface--active: url('#{$icons-path}gemini-tools/light/minus-circle.svg#on-surface--active'); - --icon__gemini-tools_minus-circle_on-surface--disabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#on-surface--disabled'); - --icon__gemini-tools_minus-circle_on-primary--enabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#on-primary--enabled'); - --icon__gemini-tools_minus-circle_on-primary--hover: url('#{$icons-path}gemini-tools/light/minus-circle.svg#on-primary--hover'); - --icon__gemini-tools_minus-circle_on-primary--active: url('#{$icons-path}gemini-tools/light/minus-circle.svg#on-primary--active'); - --icon__gemini-tools_minus-circle_on-primary--disabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#on-primary--disabled'); - --icon__gemini-tools_minus-circle_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#on-disabled--enabled'); - --icon__gemini-tools_minus-circle_on-message--enabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#on-message--enabled'); - --icon__gemini-tools_minus-circle_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#on-elevation--enabled'); - --icon__gemini-tools_minus-circle_primary--enabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#primary--enabled'); - --icon__gemini-tools_minus-circle_primary--hover: url('#{$icons-path}gemini-tools/light/minus-circle.svg#primary--hover'); - --icon__gemini-tools_minus-circle_primary--active: url('#{$icons-path}gemini-tools/light/minus-circle.svg#primary--active'); - --icon__gemini-tools_minus-circle_primary--disabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#primary--disabled'); - --icon__gemini-tools_minus-circle_neutral--enabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#neutral--enabled'); - --icon__gemini-tools_minus-circle_neutral--hover: url('#{$icons-path}gemini-tools/light/minus-circle.svg#neutral--hover'); - --icon__gemini-tools_minus-circle_neutral--active: url('#{$icons-path}gemini-tools/light/minus-circle.svg#neutral--active'); - --icon__gemini-tools_minus-circle_neutral--disabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#neutral--disabled'); - --icon__gemini-tools_minus-circle_highlighted--enabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#highlighted--enabled'); - --icon__gemini-tools_minus-circle_bright--enabled: url('#{$icons-path}gemini-tools/light/minus-circle.svg#bright--enabled'); - --icon__gemini-tools_list-view_on-surface--enabled: url('#{$icons-path}gemini-tools/light/list-view.svg#on-surface--enabled'); - --icon__gemini-tools_list-view_on-surface--hover: url('#{$icons-path}gemini-tools/light/list-view.svg#on-surface--hover'); - --icon__gemini-tools_list-view_on-surface--active: url('#{$icons-path}gemini-tools/light/list-view.svg#on-surface--active'); - --icon__gemini-tools_list-view_on-surface--disabled: url('#{$icons-path}gemini-tools/light/list-view.svg#on-surface--disabled'); - --icon__gemini-tools_list-view_on-primary--enabled: url('#{$icons-path}gemini-tools/light/list-view.svg#on-primary--enabled'); - --icon__gemini-tools_list-view_on-primary--hover: url('#{$icons-path}gemini-tools/light/list-view.svg#on-primary--hover'); - --icon__gemini-tools_list-view_on-primary--active: url('#{$icons-path}gemini-tools/light/list-view.svg#on-primary--active'); - --icon__gemini-tools_list-view_on-primary--disabled: url('#{$icons-path}gemini-tools/light/list-view.svg#on-primary--disabled'); - --icon__gemini-tools_list-view_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/list-view.svg#on-disabled--enabled'); - --icon__gemini-tools_list-view_on-message--enabled: url('#{$icons-path}gemini-tools/light/list-view.svg#on-message--enabled'); - --icon__gemini-tools_list-view_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/list-view.svg#on-elevation--enabled'); - --icon__gemini-tools_list-view_primary--enabled: url('#{$icons-path}gemini-tools/light/list-view.svg#primary--enabled'); - --icon__gemini-tools_list-view_primary--hover: url('#{$icons-path}gemini-tools/light/list-view.svg#primary--hover'); - --icon__gemini-tools_list-view_primary--active: url('#{$icons-path}gemini-tools/light/list-view.svg#primary--active'); - --icon__gemini-tools_list-view_primary--disabled: url('#{$icons-path}gemini-tools/light/list-view.svg#primary--disabled'); - --icon__gemini-tools_list-view_neutral--enabled: url('#{$icons-path}gemini-tools/light/list-view.svg#neutral--enabled'); - --icon__gemini-tools_list-view_neutral--hover: url('#{$icons-path}gemini-tools/light/list-view.svg#neutral--hover'); - --icon__gemini-tools_list-view_neutral--active: url('#{$icons-path}gemini-tools/light/list-view.svg#neutral--active'); - --icon__gemini-tools_list-view_neutral--disabled: url('#{$icons-path}gemini-tools/light/list-view.svg#neutral--disabled'); - --icon__gemini-tools_list-view_highlighted--enabled: url('#{$icons-path}gemini-tools/light/list-view.svg#highlighted--enabled'); - --icon__gemini-tools_list-view_bright--enabled: url('#{$icons-path}gemini-tools/light/list-view.svg#bright--enabled'); - --icon__gemini-tools_folder_on-surface--enabled: url('#{$icons-path}gemini-tools/light/folder.svg#on-surface--enabled'); - --icon__gemini-tools_folder_on-surface--hover: url('#{$icons-path}gemini-tools/light/folder.svg#on-surface--hover'); - --icon__gemini-tools_folder_on-surface--active: url('#{$icons-path}gemini-tools/light/folder.svg#on-surface--active'); - --icon__gemini-tools_folder_on-surface--disabled: url('#{$icons-path}gemini-tools/light/folder.svg#on-surface--disabled'); - --icon__gemini-tools_folder_on-primary--enabled: url('#{$icons-path}gemini-tools/light/folder.svg#on-primary--enabled'); - --icon__gemini-tools_folder_on-primary--hover: url('#{$icons-path}gemini-tools/light/folder.svg#on-primary--hover'); - --icon__gemini-tools_folder_on-primary--active: url('#{$icons-path}gemini-tools/light/folder.svg#on-primary--active'); - --icon__gemini-tools_folder_on-primary--disabled: url('#{$icons-path}gemini-tools/light/folder.svg#on-primary--disabled'); - --icon__gemini-tools_folder_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/folder.svg#on-disabled--enabled'); - --icon__gemini-tools_folder_on-message--enabled: url('#{$icons-path}gemini-tools/light/folder.svg#on-message--enabled'); - --icon__gemini-tools_folder_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/folder.svg#on-elevation--enabled'); - --icon__gemini-tools_folder_primary--enabled: url('#{$icons-path}gemini-tools/light/folder.svg#primary--enabled'); - --icon__gemini-tools_folder_primary--hover: url('#{$icons-path}gemini-tools/light/folder.svg#primary--hover'); - --icon__gemini-tools_folder_primary--active: url('#{$icons-path}gemini-tools/light/folder.svg#primary--active'); - --icon__gemini-tools_folder_primary--disabled: url('#{$icons-path}gemini-tools/light/folder.svg#primary--disabled'); - --icon__gemini-tools_folder_neutral--enabled: url('#{$icons-path}gemini-tools/light/folder.svg#neutral--enabled'); - --icon__gemini-tools_folder_neutral--hover: url('#{$icons-path}gemini-tools/light/folder.svg#neutral--hover'); - --icon__gemini-tools_folder_neutral--active: url('#{$icons-path}gemini-tools/light/folder.svg#neutral--active'); - --icon__gemini-tools_folder_neutral--disabled: url('#{$icons-path}gemini-tools/light/folder.svg#neutral--disabled'); - --icon__gemini-tools_folder_highlighted--enabled: url('#{$icons-path}gemini-tools/light/folder.svg#highlighted--enabled'); - --icon__gemini-tools_folder_bright--enabled: url('#{$icons-path}gemini-tools/light/folder.svg#bright--enabled'); - --icon__gemini-tools_flow-arrow_on-surface--enabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#on-surface--enabled'); - --icon__gemini-tools_flow-arrow_on-surface--hover: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#on-surface--hover'); - --icon__gemini-tools_flow-arrow_on-surface--active: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#on-surface--active'); - --icon__gemini-tools_flow-arrow_on-surface--disabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#on-surface--disabled'); - --icon__gemini-tools_flow-arrow_on-primary--enabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#on-primary--enabled'); - --icon__gemini-tools_flow-arrow_on-primary--hover: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#on-primary--hover'); - --icon__gemini-tools_flow-arrow_on-primary--active: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#on-primary--active'); - --icon__gemini-tools_flow-arrow_on-primary--disabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#on-primary--disabled'); - --icon__gemini-tools_flow-arrow_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#on-disabled--enabled'); - --icon__gemini-tools_flow-arrow_on-message--enabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#on-message--enabled'); - --icon__gemini-tools_flow-arrow_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#on-elevation--enabled'); - --icon__gemini-tools_flow-arrow_primary--enabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#primary--enabled'); - --icon__gemini-tools_flow-arrow_primary--hover: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#primary--hover'); - --icon__gemini-tools_flow-arrow_primary--active: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#primary--active'); - --icon__gemini-tools_flow-arrow_primary--disabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#primary--disabled'); - --icon__gemini-tools_flow-arrow_neutral--enabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#neutral--enabled'); - --icon__gemini-tools_flow-arrow_neutral--hover: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#neutral--hover'); - --icon__gemini-tools_flow-arrow_neutral--active: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#neutral--active'); - --icon__gemini-tools_flow-arrow_neutral--disabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#neutral--disabled'); - --icon__gemini-tools_flow-arrow_highlighted--enabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#highlighted--enabled'); - --icon__gemini-tools_flow-arrow_bright--enabled: url('#{$icons-path}gemini-tools/light/flow-arrow.svg#bright--enabled'); - --icon__gemini-tools_file_on-surface--enabled: url('#{$icons-path}gemini-tools/light/file.svg#on-surface--enabled'); - --icon__gemini-tools_file_on-surface--hover: url('#{$icons-path}gemini-tools/light/file.svg#on-surface--hover'); - --icon__gemini-tools_file_on-surface--active: url('#{$icons-path}gemini-tools/light/file.svg#on-surface--active'); - --icon__gemini-tools_file_on-surface--disabled: url('#{$icons-path}gemini-tools/light/file.svg#on-surface--disabled'); - --icon__gemini-tools_file_on-primary--enabled: url('#{$icons-path}gemini-tools/light/file.svg#on-primary--enabled'); - --icon__gemini-tools_file_on-primary--hover: url('#{$icons-path}gemini-tools/light/file.svg#on-primary--hover'); - --icon__gemini-tools_file_on-primary--active: url('#{$icons-path}gemini-tools/light/file.svg#on-primary--active'); - --icon__gemini-tools_file_on-primary--disabled: url('#{$icons-path}gemini-tools/light/file.svg#on-primary--disabled'); - --icon__gemini-tools_file_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/file.svg#on-disabled--enabled'); - --icon__gemini-tools_file_on-message--enabled: url('#{$icons-path}gemini-tools/light/file.svg#on-message--enabled'); - --icon__gemini-tools_file_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/file.svg#on-elevation--enabled'); - --icon__gemini-tools_file_primary--enabled: url('#{$icons-path}gemini-tools/light/file.svg#primary--enabled'); - --icon__gemini-tools_file_primary--hover: url('#{$icons-path}gemini-tools/light/file.svg#primary--hover'); - --icon__gemini-tools_file_primary--active: url('#{$icons-path}gemini-tools/light/file.svg#primary--active'); - --icon__gemini-tools_file_primary--disabled: url('#{$icons-path}gemini-tools/light/file.svg#primary--disabled'); - --icon__gemini-tools_file_neutral--enabled: url('#{$icons-path}gemini-tools/light/file.svg#neutral--enabled'); - --icon__gemini-tools_file_neutral--hover: url('#{$icons-path}gemini-tools/light/file.svg#neutral--hover'); - --icon__gemini-tools_file_neutral--active: url('#{$icons-path}gemini-tools/light/file.svg#neutral--active'); - --icon__gemini-tools_file_neutral--disabled: url('#{$icons-path}gemini-tools/light/file.svg#neutral--disabled'); - --icon__gemini-tools_file_highlighted--enabled: url('#{$icons-path}gemini-tools/light/file.svg#highlighted--enabled'); - --icon__gemini-tools_file_bright--enabled: url('#{$icons-path}gemini-tools/light/file.svg#bright--enabled'); - --icon__gemini-tools_error_on-surface--enabled: url('#{$icons-path}gemini-tools/light/error.svg#on-surface--enabled'); - --icon__gemini-tools_error_on-surface--hover: url('#{$icons-path}gemini-tools/light/error.svg#on-surface--hover'); - --icon__gemini-tools_error_on-surface--active: url('#{$icons-path}gemini-tools/light/error.svg#on-surface--active'); - --icon__gemini-tools_error_on-surface--disabled: url('#{$icons-path}gemini-tools/light/error.svg#on-surface--disabled'); - --icon__gemini-tools_error_on-primary--enabled: url('#{$icons-path}gemini-tools/light/error.svg#on-primary--enabled'); - --icon__gemini-tools_error_on-primary--hover: url('#{$icons-path}gemini-tools/light/error.svg#on-primary--hover'); - --icon__gemini-tools_error_on-primary--active: url('#{$icons-path}gemini-tools/light/error.svg#on-primary--active'); - --icon__gemini-tools_error_on-primary--disabled: url('#{$icons-path}gemini-tools/light/error.svg#on-primary--disabled'); - --icon__gemini-tools_error_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/error.svg#on-disabled--enabled'); - --icon__gemini-tools_error_on-message--enabled: url('#{$icons-path}gemini-tools/light/error.svg#on-message--enabled'); - --icon__gemini-tools_error_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/error.svg#on-elevation--enabled'); - --icon__gemini-tools_error_primary--enabled: url('#{$icons-path}gemini-tools/light/error.svg#primary--enabled'); - --icon__gemini-tools_error_primary--hover: url('#{$icons-path}gemini-tools/light/error.svg#primary--hover'); - --icon__gemini-tools_error_primary--active: url('#{$icons-path}gemini-tools/light/error.svg#primary--active'); - --icon__gemini-tools_error_primary--disabled: url('#{$icons-path}gemini-tools/light/error.svg#primary--disabled'); - --icon__gemini-tools_error_neutral--enabled: url('#{$icons-path}gemini-tools/light/error.svg#neutral--enabled'); - --icon__gemini-tools_error_neutral--hover: url('#{$icons-path}gemini-tools/light/error.svg#neutral--hover'); - --icon__gemini-tools_error_neutral--active: url('#{$icons-path}gemini-tools/light/error.svg#neutral--active'); - --icon__gemini-tools_error_neutral--disabled: url('#{$icons-path}gemini-tools/light/error.svg#neutral--disabled'); - --icon__gemini-tools_error_highlighted--enabled: url('#{$icons-path}gemini-tools/light/error.svg#highlighted--enabled'); - --icon__gemini-tools_error_bright--enabled: url('#{$icons-path}gemini-tools/light/error.svg#bright--enabled'); - --icon__gemini-tools_edit_on-surface--enabled: url('#{$icons-path}gemini-tools/light/edit.svg#on-surface--enabled'); - --icon__gemini-tools_edit_on-surface--hover: url('#{$icons-path}gemini-tools/light/edit.svg#on-surface--hover'); - --icon__gemini-tools_edit_on-surface--active: url('#{$icons-path}gemini-tools/light/edit.svg#on-surface--active'); - --icon__gemini-tools_edit_on-surface--disabled: url('#{$icons-path}gemini-tools/light/edit.svg#on-surface--disabled'); - --icon__gemini-tools_edit_on-primary--enabled: url('#{$icons-path}gemini-tools/light/edit.svg#on-primary--enabled'); - --icon__gemini-tools_edit_on-primary--hover: url('#{$icons-path}gemini-tools/light/edit.svg#on-primary--hover'); - --icon__gemini-tools_edit_on-primary--active: url('#{$icons-path}gemini-tools/light/edit.svg#on-primary--active'); - --icon__gemini-tools_edit_on-primary--disabled: url('#{$icons-path}gemini-tools/light/edit.svg#on-primary--disabled'); - --icon__gemini-tools_edit_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/edit.svg#on-disabled--enabled'); - --icon__gemini-tools_edit_on-message--enabled: url('#{$icons-path}gemini-tools/light/edit.svg#on-message--enabled'); - --icon__gemini-tools_edit_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/edit.svg#on-elevation--enabled'); - --icon__gemini-tools_edit_primary--enabled: url('#{$icons-path}gemini-tools/light/edit.svg#primary--enabled'); - --icon__gemini-tools_edit_primary--hover: url('#{$icons-path}gemini-tools/light/edit.svg#primary--hover'); - --icon__gemini-tools_edit_primary--active: url('#{$icons-path}gemini-tools/light/edit.svg#primary--active'); - --icon__gemini-tools_edit_primary--disabled: url('#{$icons-path}gemini-tools/light/edit.svg#primary--disabled'); - --icon__gemini-tools_edit_neutral--enabled: url('#{$icons-path}gemini-tools/light/edit.svg#neutral--enabled'); - --icon__gemini-tools_edit_neutral--hover: url('#{$icons-path}gemini-tools/light/edit.svg#neutral--hover'); - --icon__gemini-tools_edit_neutral--active: url('#{$icons-path}gemini-tools/light/edit.svg#neutral--active'); - --icon__gemini-tools_edit_neutral--disabled: url('#{$icons-path}gemini-tools/light/edit.svg#neutral--disabled'); - --icon__gemini-tools_edit_highlighted--enabled: url('#{$icons-path}gemini-tools/light/edit.svg#highlighted--enabled'); - --icon__gemini-tools_edit_bright--enabled: url('#{$icons-path}gemini-tools/light/edit.svg#bright--enabled'); - --icon__gemini-tools_edit-wand_on-surface--enabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#on-surface--enabled'); - --icon__gemini-tools_edit-wand_on-surface--hover: url('#{$icons-path}gemini-tools/light/edit-wand.svg#on-surface--hover'); - --icon__gemini-tools_edit-wand_on-surface--active: url('#{$icons-path}gemini-tools/light/edit-wand.svg#on-surface--active'); - --icon__gemini-tools_edit-wand_on-surface--disabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#on-surface--disabled'); - --icon__gemini-tools_edit-wand_on-primary--enabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#on-primary--enabled'); - --icon__gemini-tools_edit-wand_on-primary--hover: url('#{$icons-path}gemini-tools/light/edit-wand.svg#on-primary--hover'); - --icon__gemini-tools_edit-wand_on-primary--active: url('#{$icons-path}gemini-tools/light/edit-wand.svg#on-primary--active'); - --icon__gemini-tools_edit-wand_on-primary--disabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#on-primary--disabled'); - --icon__gemini-tools_edit-wand_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#on-disabled--enabled'); - --icon__gemini-tools_edit-wand_on-message--enabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#on-message--enabled'); - --icon__gemini-tools_edit-wand_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#on-elevation--enabled'); - --icon__gemini-tools_edit-wand_primary--enabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#primary--enabled'); - --icon__gemini-tools_edit-wand_primary--hover: url('#{$icons-path}gemini-tools/light/edit-wand.svg#primary--hover'); - --icon__gemini-tools_edit-wand_primary--active: url('#{$icons-path}gemini-tools/light/edit-wand.svg#primary--active'); - --icon__gemini-tools_edit-wand_primary--disabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#primary--disabled'); - --icon__gemini-tools_edit-wand_neutral--enabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#neutral--enabled'); - --icon__gemini-tools_edit-wand_neutral--hover: url('#{$icons-path}gemini-tools/light/edit-wand.svg#neutral--hover'); - --icon__gemini-tools_edit-wand_neutral--active: url('#{$icons-path}gemini-tools/light/edit-wand.svg#neutral--active'); - --icon__gemini-tools_edit-wand_neutral--disabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#neutral--disabled'); - --icon__gemini-tools_edit-wand_highlighted--enabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#highlighted--enabled'); - --icon__gemini-tools_edit-wand_bright--enabled: url('#{$icons-path}gemini-tools/light/edit-wand.svg#bright--enabled'); - --icon__gemini-tools_duplicate_on-surface--enabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#on-surface--enabled'); - --icon__gemini-tools_duplicate_on-surface--hover: url('#{$icons-path}gemini-tools/light/duplicate.svg#on-surface--hover'); - --icon__gemini-tools_duplicate_on-surface--active: url('#{$icons-path}gemini-tools/light/duplicate.svg#on-surface--active'); - --icon__gemini-tools_duplicate_on-surface--disabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#on-surface--disabled'); - --icon__gemini-tools_duplicate_on-primary--enabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#on-primary--enabled'); - --icon__gemini-tools_duplicate_on-primary--hover: url('#{$icons-path}gemini-tools/light/duplicate.svg#on-primary--hover'); - --icon__gemini-tools_duplicate_on-primary--active: url('#{$icons-path}gemini-tools/light/duplicate.svg#on-primary--active'); - --icon__gemini-tools_duplicate_on-primary--disabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#on-primary--disabled'); - --icon__gemini-tools_duplicate_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#on-disabled--enabled'); - --icon__gemini-tools_duplicate_on-message--enabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#on-message--enabled'); - --icon__gemini-tools_duplicate_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#on-elevation--enabled'); - --icon__gemini-tools_duplicate_primary--enabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#primary--enabled'); - --icon__gemini-tools_duplicate_primary--hover: url('#{$icons-path}gemini-tools/light/duplicate.svg#primary--hover'); - --icon__gemini-tools_duplicate_primary--active: url('#{$icons-path}gemini-tools/light/duplicate.svg#primary--active'); - --icon__gemini-tools_duplicate_primary--disabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#primary--disabled'); - --icon__gemini-tools_duplicate_neutral--enabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#neutral--enabled'); - --icon__gemini-tools_duplicate_neutral--hover: url('#{$icons-path}gemini-tools/light/duplicate.svg#neutral--hover'); - --icon__gemini-tools_duplicate_neutral--active: url('#{$icons-path}gemini-tools/light/duplicate.svg#neutral--active'); - --icon__gemini-tools_duplicate_neutral--disabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#neutral--disabled'); - --icon__gemini-tools_duplicate_highlighted--enabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#highlighted--enabled'); - --icon__gemini-tools_duplicate_bright--enabled: url('#{$icons-path}gemini-tools/light/duplicate.svg#bright--enabled'); - --icon__gemini-tools_download_on-surface--enabled: url('#{$icons-path}gemini-tools/light/download.svg#on-surface--enabled'); - --icon__gemini-tools_download_on-surface--hover: url('#{$icons-path}gemini-tools/light/download.svg#on-surface--hover'); - --icon__gemini-tools_download_on-surface--active: url('#{$icons-path}gemini-tools/light/download.svg#on-surface--active'); - --icon__gemini-tools_download_on-surface--disabled: url('#{$icons-path}gemini-tools/light/download.svg#on-surface--disabled'); - --icon__gemini-tools_download_on-primary--enabled: url('#{$icons-path}gemini-tools/light/download.svg#on-primary--enabled'); - --icon__gemini-tools_download_on-primary--hover: url('#{$icons-path}gemini-tools/light/download.svg#on-primary--hover'); - --icon__gemini-tools_download_on-primary--active: url('#{$icons-path}gemini-tools/light/download.svg#on-primary--active'); - --icon__gemini-tools_download_on-primary--disabled: url('#{$icons-path}gemini-tools/light/download.svg#on-primary--disabled'); - --icon__gemini-tools_download_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/download.svg#on-disabled--enabled'); - --icon__gemini-tools_download_on-message--enabled: url('#{$icons-path}gemini-tools/light/download.svg#on-message--enabled'); - --icon__gemini-tools_download_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/download.svg#on-elevation--enabled'); - --icon__gemini-tools_download_primary--enabled: url('#{$icons-path}gemini-tools/light/download.svg#primary--enabled'); - --icon__gemini-tools_download_primary--hover: url('#{$icons-path}gemini-tools/light/download.svg#primary--hover'); - --icon__gemini-tools_download_primary--active: url('#{$icons-path}gemini-tools/light/download.svg#primary--active'); - --icon__gemini-tools_download_primary--disabled: url('#{$icons-path}gemini-tools/light/download.svg#primary--disabled'); - --icon__gemini-tools_download_neutral--enabled: url('#{$icons-path}gemini-tools/light/download.svg#neutral--enabled'); - --icon__gemini-tools_download_neutral--hover: url('#{$icons-path}gemini-tools/light/download.svg#neutral--hover'); - --icon__gemini-tools_download_neutral--active: url('#{$icons-path}gemini-tools/light/download.svg#neutral--active'); - --icon__gemini-tools_download_neutral--disabled: url('#{$icons-path}gemini-tools/light/download.svg#neutral--disabled'); - --icon__gemini-tools_download_highlighted--enabled: url('#{$icons-path}gemini-tools/light/download.svg#highlighted--enabled'); - --icon__gemini-tools_download_bright--enabled: url('#{$icons-path}gemini-tools/light/download.svg#bright--enabled'); - --icon__gemini-tools_deleted_on-surface--enabled: url('#{$icons-path}gemini-tools/light/deleted.svg#on-surface--enabled'); - --icon__gemini-tools_deleted_on-surface--hover: url('#{$icons-path}gemini-tools/light/deleted.svg#on-surface--hover'); - --icon__gemini-tools_deleted_on-surface--active: url('#{$icons-path}gemini-tools/light/deleted.svg#on-surface--active'); - --icon__gemini-tools_deleted_on-surface--disabled: url('#{$icons-path}gemini-tools/light/deleted.svg#on-surface--disabled'); - --icon__gemini-tools_deleted_on-primary--enabled: url('#{$icons-path}gemini-tools/light/deleted.svg#on-primary--enabled'); - --icon__gemini-tools_deleted_on-primary--hover: url('#{$icons-path}gemini-tools/light/deleted.svg#on-primary--hover'); - --icon__gemini-tools_deleted_on-primary--active: url('#{$icons-path}gemini-tools/light/deleted.svg#on-primary--active'); - --icon__gemini-tools_deleted_on-primary--disabled: url('#{$icons-path}gemini-tools/light/deleted.svg#on-primary--disabled'); - --icon__gemini-tools_deleted_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/deleted.svg#on-disabled--enabled'); - --icon__gemini-tools_deleted_on-message--enabled: url('#{$icons-path}gemini-tools/light/deleted.svg#on-message--enabled'); - --icon__gemini-tools_deleted_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/deleted.svg#on-elevation--enabled'); - --icon__gemini-tools_deleted_primary--enabled: url('#{$icons-path}gemini-tools/light/deleted.svg#primary--enabled'); - --icon__gemini-tools_deleted_primary--hover: url('#{$icons-path}gemini-tools/light/deleted.svg#primary--hover'); - --icon__gemini-tools_deleted_primary--active: url('#{$icons-path}gemini-tools/light/deleted.svg#primary--active'); - --icon__gemini-tools_deleted_primary--disabled: url('#{$icons-path}gemini-tools/light/deleted.svg#primary--disabled'); - --icon__gemini-tools_deleted_neutral--enabled: url('#{$icons-path}gemini-tools/light/deleted.svg#neutral--enabled'); - --icon__gemini-tools_deleted_neutral--hover: url('#{$icons-path}gemini-tools/light/deleted.svg#neutral--hover'); - --icon__gemini-tools_deleted_neutral--active: url('#{$icons-path}gemini-tools/light/deleted.svg#neutral--active'); - --icon__gemini-tools_deleted_neutral--disabled: url('#{$icons-path}gemini-tools/light/deleted.svg#neutral--disabled'); - --icon__gemini-tools_deleted_highlighted--enabled: url('#{$icons-path}gemini-tools/light/deleted.svg#highlighted--enabled'); - --icon__gemini-tools_deleted_bright--enabled: url('#{$icons-path}gemini-tools/light/deleted.svg#bright--enabled'); - --icon__gemini-tools_delete_on-surface--enabled: url('#{$icons-path}gemini-tools/light/delete.svg#on-surface--enabled'); - --icon__gemini-tools_delete_on-surface--hover: url('#{$icons-path}gemini-tools/light/delete.svg#on-surface--hover'); - --icon__gemini-tools_delete_on-surface--active: url('#{$icons-path}gemini-tools/light/delete.svg#on-surface--active'); - --icon__gemini-tools_delete_on-surface--disabled: url('#{$icons-path}gemini-tools/light/delete.svg#on-surface--disabled'); - --icon__gemini-tools_delete_on-primary--enabled: url('#{$icons-path}gemini-tools/light/delete.svg#on-primary--enabled'); - --icon__gemini-tools_delete_on-primary--hover: url('#{$icons-path}gemini-tools/light/delete.svg#on-primary--hover'); - --icon__gemini-tools_delete_on-primary--active: url('#{$icons-path}gemini-tools/light/delete.svg#on-primary--active'); - --icon__gemini-tools_delete_on-primary--disabled: url('#{$icons-path}gemini-tools/light/delete.svg#on-primary--disabled'); - --icon__gemini-tools_delete_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/delete.svg#on-disabled--enabled'); - --icon__gemini-tools_delete_on-message--enabled: url('#{$icons-path}gemini-tools/light/delete.svg#on-message--enabled'); - --icon__gemini-tools_delete_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/delete.svg#on-elevation--enabled'); - --icon__gemini-tools_delete_primary--enabled: url('#{$icons-path}gemini-tools/light/delete.svg#primary--enabled'); - --icon__gemini-tools_delete_primary--hover: url('#{$icons-path}gemini-tools/light/delete.svg#primary--hover'); - --icon__gemini-tools_delete_primary--active: url('#{$icons-path}gemini-tools/light/delete.svg#primary--active'); - --icon__gemini-tools_delete_primary--disabled: url('#{$icons-path}gemini-tools/light/delete.svg#primary--disabled'); - --icon__gemini-tools_delete_neutral--enabled: url('#{$icons-path}gemini-tools/light/delete.svg#neutral--enabled'); - --icon__gemini-tools_delete_neutral--hover: url('#{$icons-path}gemini-tools/light/delete.svg#neutral--hover'); - --icon__gemini-tools_delete_neutral--active: url('#{$icons-path}gemini-tools/light/delete.svg#neutral--active'); - --icon__gemini-tools_delete_neutral--disabled: url('#{$icons-path}gemini-tools/light/delete.svg#neutral--disabled'); - --icon__gemini-tools_delete_highlighted--enabled: url('#{$icons-path}gemini-tools/light/delete.svg#highlighted--enabled'); - --icon__gemini-tools_delete_bright--enabled: url('#{$icons-path}gemini-tools/light/delete.svg#bright--enabled'); - --icon__gemini-tools_data-provider_on-surface--enabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#on-surface--enabled'); - --icon__gemini-tools_data-provider_on-surface--hover: url('#{$icons-path}gemini-tools/light/data-provider.svg#on-surface--hover'); - --icon__gemini-tools_data-provider_on-surface--active: url('#{$icons-path}gemini-tools/light/data-provider.svg#on-surface--active'); - --icon__gemini-tools_data-provider_on-surface--disabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#on-surface--disabled'); - --icon__gemini-tools_data-provider_on-primary--enabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#on-primary--enabled'); - --icon__gemini-tools_data-provider_on-primary--hover: url('#{$icons-path}gemini-tools/light/data-provider.svg#on-primary--hover'); - --icon__gemini-tools_data-provider_on-primary--active: url('#{$icons-path}gemini-tools/light/data-provider.svg#on-primary--active'); - --icon__gemini-tools_data-provider_on-primary--disabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#on-primary--disabled'); - --icon__gemini-tools_data-provider_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#on-disabled--enabled'); - --icon__gemini-tools_data-provider_on-message--enabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#on-message--enabled'); - --icon__gemini-tools_data-provider_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#on-elevation--enabled'); - --icon__gemini-tools_data-provider_primary--enabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#primary--enabled'); - --icon__gemini-tools_data-provider_primary--hover: url('#{$icons-path}gemini-tools/light/data-provider.svg#primary--hover'); - --icon__gemini-tools_data-provider_primary--active: url('#{$icons-path}gemini-tools/light/data-provider.svg#primary--active'); - --icon__gemini-tools_data-provider_primary--disabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#primary--disabled'); - --icon__gemini-tools_data-provider_neutral--enabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#neutral--enabled'); - --icon__gemini-tools_data-provider_neutral--hover: url('#{$icons-path}gemini-tools/light/data-provider.svg#neutral--hover'); - --icon__gemini-tools_data-provider_neutral--active: url('#{$icons-path}gemini-tools/light/data-provider.svg#neutral--active'); - --icon__gemini-tools_data-provider_neutral--disabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#neutral--disabled'); - --icon__gemini-tools_data-provider_highlighted--enabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#highlighted--enabled'); - --icon__gemini-tools_data-provider_bright--enabled: url('#{$icons-path}gemini-tools/light/data-provider.svg#bright--enabled'); - --icon__gemini-tools_copy_on-surface--enabled: url('#{$icons-path}gemini-tools/light/copy.svg#on-surface--enabled'); - --icon__gemini-tools_copy_on-surface--hover: url('#{$icons-path}gemini-tools/light/copy.svg#on-surface--hover'); - --icon__gemini-tools_copy_on-surface--active: url('#{$icons-path}gemini-tools/light/copy.svg#on-surface--active'); - --icon__gemini-tools_copy_on-surface--disabled: url('#{$icons-path}gemini-tools/light/copy.svg#on-surface--disabled'); - --icon__gemini-tools_copy_on-primary--enabled: url('#{$icons-path}gemini-tools/light/copy.svg#on-primary--enabled'); - --icon__gemini-tools_copy_on-primary--hover: url('#{$icons-path}gemini-tools/light/copy.svg#on-primary--hover'); - --icon__gemini-tools_copy_on-primary--active: url('#{$icons-path}gemini-tools/light/copy.svg#on-primary--active'); - --icon__gemini-tools_copy_on-primary--disabled: url('#{$icons-path}gemini-tools/light/copy.svg#on-primary--disabled'); - --icon__gemini-tools_copy_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/copy.svg#on-disabled--enabled'); - --icon__gemini-tools_copy_on-message--enabled: url('#{$icons-path}gemini-tools/light/copy.svg#on-message--enabled'); - --icon__gemini-tools_copy_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/copy.svg#on-elevation--enabled'); - --icon__gemini-tools_copy_primary--enabled: url('#{$icons-path}gemini-tools/light/copy.svg#primary--enabled'); - --icon__gemini-tools_copy_primary--hover: url('#{$icons-path}gemini-tools/light/copy.svg#primary--hover'); - --icon__gemini-tools_copy_primary--active: url('#{$icons-path}gemini-tools/light/copy.svg#primary--active'); - --icon__gemini-tools_copy_primary--disabled: url('#{$icons-path}gemini-tools/light/copy.svg#primary--disabled'); - --icon__gemini-tools_copy_neutral--enabled: url('#{$icons-path}gemini-tools/light/copy.svg#neutral--enabled'); - --icon__gemini-tools_copy_neutral--hover: url('#{$icons-path}gemini-tools/light/copy.svg#neutral--hover'); - --icon__gemini-tools_copy_neutral--active: url('#{$icons-path}gemini-tools/light/copy.svg#neutral--active'); - --icon__gemini-tools_copy_neutral--disabled: url('#{$icons-path}gemini-tools/light/copy.svg#neutral--disabled'); - --icon__gemini-tools_copy_highlighted--enabled: url('#{$icons-path}gemini-tools/light/copy.svg#highlighted--enabled'); - --icon__gemini-tools_copy_bright--enabled: url('#{$icons-path}gemini-tools/light/copy.svg#bright--enabled'); - --icon__gemini-tools_copy-to-clipboard_on-surface--enabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#on-surface--enabled'); - --icon__gemini-tools_copy-to-clipboard_on-surface--hover: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#on-surface--hover'); - --icon__gemini-tools_copy-to-clipboard_on-surface--active: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#on-surface--active'); - --icon__gemini-tools_copy-to-clipboard_on-surface--disabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#on-surface--disabled'); - --icon__gemini-tools_copy-to-clipboard_on-primary--enabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#on-primary--enabled'); - --icon__gemini-tools_copy-to-clipboard_on-primary--hover: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#on-primary--hover'); - --icon__gemini-tools_copy-to-clipboard_on-primary--active: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#on-primary--active'); - --icon__gemini-tools_copy-to-clipboard_on-primary--disabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#on-primary--disabled'); - --icon__gemini-tools_copy-to-clipboard_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#on-disabled--enabled'); - --icon__gemini-tools_copy-to-clipboard_on-message--enabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#on-message--enabled'); - --icon__gemini-tools_copy-to-clipboard_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#on-elevation--enabled'); - --icon__gemini-tools_copy-to-clipboard_primary--enabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#primary--enabled'); - --icon__gemini-tools_copy-to-clipboard_primary--hover: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#primary--hover'); - --icon__gemini-tools_copy-to-clipboard_primary--active: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#primary--active'); - --icon__gemini-tools_copy-to-clipboard_primary--disabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#primary--disabled'); - --icon__gemini-tools_copy-to-clipboard_neutral--enabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#neutral--enabled'); - --icon__gemini-tools_copy-to-clipboard_neutral--hover: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#neutral--hover'); - --icon__gemini-tools_copy-to-clipboard_neutral--active: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#neutral--active'); - --icon__gemini-tools_copy-to-clipboard_neutral--disabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#neutral--disabled'); - --icon__gemini-tools_copy-to-clipboard_highlighted--enabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#highlighted--enabled'); - --icon__gemini-tools_copy-to-clipboard_bright--enabled: url('#{$icons-path}gemini-tools/light/copy-to-clipboard.svg#bright--enabled'); - --icon__gemini-tools_color-picker_on-surface--enabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#on-surface--enabled'); - --icon__gemini-tools_color-picker_on-surface--hover: url('#{$icons-path}gemini-tools/light/color-picker.svg#on-surface--hover'); - --icon__gemini-tools_color-picker_on-surface--active: url('#{$icons-path}gemini-tools/light/color-picker.svg#on-surface--active'); - --icon__gemini-tools_color-picker_on-surface--disabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#on-surface--disabled'); - --icon__gemini-tools_color-picker_on-primary--enabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#on-primary--enabled'); - --icon__gemini-tools_color-picker_on-primary--hover: url('#{$icons-path}gemini-tools/light/color-picker.svg#on-primary--hover'); - --icon__gemini-tools_color-picker_on-primary--active: url('#{$icons-path}gemini-tools/light/color-picker.svg#on-primary--active'); - --icon__gemini-tools_color-picker_on-primary--disabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#on-primary--disabled'); - --icon__gemini-tools_color-picker_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#on-disabled--enabled'); - --icon__gemini-tools_color-picker_on-message--enabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#on-message--enabled'); - --icon__gemini-tools_color-picker_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#on-elevation--enabled'); - --icon__gemini-tools_color-picker_primary--enabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#primary--enabled'); - --icon__gemini-tools_color-picker_primary--hover: url('#{$icons-path}gemini-tools/light/color-picker.svg#primary--hover'); - --icon__gemini-tools_color-picker_primary--active: url('#{$icons-path}gemini-tools/light/color-picker.svg#primary--active'); - --icon__gemini-tools_color-picker_primary--disabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#primary--disabled'); - --icon__gemini-tools_color-picker_neutral--enabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#neutral--enabled'); - --icon__gemini-tools_color-picker_neutral--hover: url('#{$icons-path}gemini-tools/light/color-picker.svg#neutral--hover'); - --icon__gemini-tools_color-picker_neutral--active: url('#{$icons-path}gemini-tools/light/color-picker.svg#neutral--active'); - --icon__gemini-tools_color-picker_neutral--disabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#neutral--disabled'); - --icon__gemini-tools_color-picker_highlighted--enabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#highlighted--enabled'); - --icon__gemini-tools_color-picker_bright--enabled: url('#{$icons-path}gemini-tools/light/color-picker.svg#bright--enabled'); - --icon__gemini-tools_close_on-surface--enabled: url('#{$icons-path}gemini-tools/light/close.svg#on-surface--enabled'); - --icon__gemini-tools_close_on-surface--hover: url('#{$icons-path}gemini-tools/light/close.svg#on-surface--hover'); - --icon__gemini-tools_close_on-surface--active: url('#{$icons-path}gemini-tools/light/close.svg#on-surface--active'); - --icon__gemini-tools_close_on-surface--disabled: url('#{$icons-path}gemini-tools/light/close.svg#on-surface--disabled'); - --icon__gemini-tools_close_on-primary--enabled: url('#{$icons-path}gemini-tools/light/close.svg#on-primary--enabled'); - --icon__gemini-tools_close_on-primary--hover: url('#{$icons-path}gemini-tools/light/close.svg#on-primary--hover'); - --icon__gemini-tools_close_on-primary--active: url('#{$icons-path}gemini-tools/light/close.svg#on-primary--active'); - --icon__gemini-tools_close_on-primary--disabled: url('#{$icons-path}gemini-tools/light/close.svg#on-primary--disabled'); - --icon__gemini-tools_close_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/close.svg#on-disabled--enabled'); - --icon__gemini-tools_close_on-message--enabled: url('#{$icons-path}gemini-tools/light/close.svg#on-message--enabled'); - --icon__gemini-tools_close_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/close.svg#on-elevation--enabled'); - --icon__gemini-tools_close_primary--enabled: url('#{$icons-path}gemini-tools/light/close.svg#primary--enabled'); - --icon__gemini-tools_close_primary--hover: url('#{$icons-path}gemini-tools/light/close.svg#primary--hover'); - --icon__gemini-tools_close_primary--active: url('#{$icons-path}gemini-tools/light/close.svg#primary--active'); - --icon__gemini-tools_close_primary--disabled: url('#{$icons-path}gemini-tools/light/close.svg#primary--disabled'); - --icon__gemini-tools_close_neutral--enabled: url('#{$icons-path}gemini-tools/light/close.svg#neutral--enabled'); - --icon__gemini-tools_close_neutral--hover: url('#{$icons-path}gemini-tools/light/close.svg#neutral--hover'); - --icon__gemini-tools_close_neutral--active: url('#{$icons-path}gemini-tools/light/close.svg#neutral--active'); - --icon__gemini-tools_close_neutral--disabled: url('#{$icons-path}gemini-tools/light/close.svg#neutral--disabled'); - --icon__gemini-tools_close_highlighted--enabled: url('#{$icons-path}gemini-tools/light/close.svg#highlighted--enabled'); - --icon__gemini-tools_close_bright--enabled: url('#{$icons-path}gemini-tools/light/close.svg#bright--enabled'); - --icon__gemini-tools_category-ungroup_on-surface--enabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#on-surface--enabled'); - --icon__gemini-tools_category-ungroup_on-surface--hover: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#on-surface--hover'); - --icon__gemini-tools_category-ungroup_on-surface--active: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#on-surface--active'); - --icon__gemini-tools_category-ungroup_on-surface--disabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#on-surface--disabled'); - --icon__gemini-tools_category-ungroup_on-primary--enabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#on-primary--enabled'); - --icon__gemini-tools_category-ungroup_on-primary--hover: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#on-primary--hover'); - --icon__gemini-tools_category-ungroup_on-primary--active: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#on-primary--active'); - --icon__gemini-tools_category-ungroup_on-primary--disabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#on-primary--disabled'); - --icon__gemini-tools_category-ungroup_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#on-disabled--enabled'); - --icon__gemini-tools_category-ungroup_on-message--enabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#on-message--enabled'); - --icon__gemini-tools_category-ungroup_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#on-elevation--enabled'); - --icon__gemini-tools_category-ungroup_primary--enabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#primary--enabled'); - --icon__gemini-tools_category-ungroup_primary--hover: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#primary--hover'); - --icon__gemini-tools_category-ungroup_primary--active: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#primary--active'); - --icon__gemini-tools_category-ungroup_primary--disabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#primary--disabled'); - --icon__gemini-tools_category-ungroup_neutral--enabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#neutral--enabled'); - --icon__gemini-tools_category-ungroup_neutral--hover: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#neutral--hover'); - --icon__gemini-tools_category-ungroup_neutral--active: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#neutral--active'); - --icon__gemini-tools_category-ungroup_neutral--disabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#neutral--disabled'); - --icon__gemini-tools_category-ungroup_highlighted--enabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#highlighted--enabled'); - --icon__gemini-tools_category-ungroup_bright--enabled: url('#{$icons-path}gemini-tools/light/category-ungroup.svg#bright--enabled'); - --icon__gemini-tools_category-group_on-surface--enabled: url('#{$icons-path}gemini-tools/light/category-group.svg#on-surface--enabled'); - --icon__gemini-tools_category-group_on-surface--hover: url('#{$icons-path}gemini-tools/light/category-group.svg#on-surface--hover'); - --icon__gemini-tools_category-group_on-surface--active: url('#{$icons-path}gemini-tools/light/category-group.svg#on-surface--active'); - --icon__gemini-tools_category-group_on-surface--disabled: url('#{$icons-path}gemini-tools/light/category-group.svg#on-surface--disabled'); - --icon__gemini-tools_category-group_on-primary--enabled: url('#{$icons-path}gemini-tools/light/category-group.svg#on-primary--enabled'); - --icon__gemini-tools_category-group_on-primary--hover: url('#{$icons-path}gemini-tools/light/category-group.svg#on-primary--hover'); - --icon__gemini-tools_category-group_on-primary--active: url('#{$icons-path}gemini-tools/light/category-group.svg#on-primary--active'); - --icon__gemini-tools_category-group_on-primary--disabled: url('#{$icons-path}gemini-tools/light/category-group.svg#on-primary--disabled'); - --icon__gemini-tools_category-group_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/category-group.svg#on-disabled--enabled'); - --icon__gemini-tools_category-group_on-message--enabled: url('#{$icons-path}gemini-tools/light/category-group.svg#on-message--enabled'); - --icon__gemini-tools_category-group_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/category-group.svg#on-elevation--enabled'); - --icon__gemini-tools_category-group_primary--enabled: url('#{$icons-path}gemini-tools/light/category-group.svg#primary--enabled'); - --icon__gemini-tools_category-group_primary--hover: url('#{$icons-path}gemini-tools/light/category-group.svg#primary--hover'); - --icon__gemini-tools_category-group_primary--active: url('#{$icons-path}gemini-tools/light/category-group.svg#primary--active'); - --icon__gemini-tools_category-group_primary--disabled: url('#{$icons-path}gemini-tools/light/category-group.svg#primary--disabled'); - --icon__gemini-tools_category-group_neutral--enabled: url('#{$icons-path}gemini-tools/light/category-group.svg#neutral--enabled'); - --icon__gemini-tools_category-group_neutral--hover: url('#{$icons-path}gemini-tools/light/category-group.svg#neutral--hover'); - --icon__gemini-tools_category-group_neutral--active: url('#{$icons-path}gemini-tools/light/category-group.svg#neutral--active'); - --icon__gemini-tools_category-group_neutral--disabled: url('#{$icons-path}gemini-tools/light/category-group.svg#neutral--disabled'); - --icon__gemini-tools_category-group_highlighted--enabled: url('#{$icons-path}gemini-tools/light/category-group.svg#highlighted--enabled'); - --icon__gemini-tools_category-group_bright--enabled: url('#{$icons-path}gemini-tools/light/category-group.svg#bright--enabled'); - --icon__gemini-tools_card-view_on-surface--enabled: url('#{$icons-path}gemini-tools/light/card-view.svg#on-surface--enabled'); - --icon__gemini-tools_card-view_on-surface--hover: url('#{$icons-path}gemini-tools/light/card-view.svg#on-surface--hover'); - --icon__gemini-tools_card-view_on-surface--active: url('#{$icons-path}gemini-tools/light/card-view.svg#on-surface--active'); - --icon__gemini-tools_card-view_on-surface--disabled: url('#{$icons-path}gemini-tools/light/card-view.svg#on-surface--disabled'); - --icon__gemini-tools_card-view_on-primary--enabled: url('#{$icons-path}gemini-tools/light/card-view.svg#on-primary--enabled'); - --icon__gemini-tools_card-view_on-primary--hover: url('#{$icons-path}gemini-tools/light/card-view.svg#on-primary--hover'); - --icon__gemini-tools_card-view_on-primary--active: url('#{$icons-path}gemini-tools/light/card-view.svg#on-primary--active'); - --icon__gemini-tools_card-view_on-primary--disabled: url('#{$icons-path}gemini-tools/light/card-view.svg#on-primary--disabled'); - --icon__gemini-tools_card-view_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/card-view.svg#on-disabled--enabled'); - --icon__gemini-tools_card-view_on-message--enabled: url('#{$icons-path}gemini-tools/light/card-view.svg#on-message--enabled'); - --icon__gemini-tools_card-view_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/card-view.svg#on-elevation--enabled'); - --icon__gemini-tools_card-view_primary--enabled: url('#{$icons-path}gemini-tools/light/card-view.svg#primary--enabled'); - --icon__gemini-tools_card-view_primary--hover: url('#{$icons-path}gemini-tools/light/card-view.svg#primary--hover'); - --icon__gemini-tools_card-view_primary--active: url('#{$icons-path}gemini-tools/light/card-view.svg#primary--active'); - --icon__gemini-tools_card-view_primary--disabled: url('#{$icons-path}gemini-tools/light/card-view.svg#primary--disabled'); - --icon__gemini-tools_card-view_neutral--enabled: url('#{$icons-path}gemini-tools/light/card-view.svg#neutral--enabled'); - --icon__gemini-tools_card-view_neutral--hover: url('#{$icons-path}gemini-tools/light/card-view.svg#neutral--hover'); - --icon__gemini-tools_card-view_neutral--active: url('#{$icons-path}gemini-tools/light/card-view.svg#neutral--active'); - --icon__gemini-tools_card-view_neutral--disabled: url('#{$icons-path}gemini-tools/light/card-view.svg#neutral--disabled'); - --icon__gemini-tools_card-view_highlighted--enabled: url('#{$icons-path}gemini-tools/light/card-view.svg#highlighted--enabled'); - --icon__gemini-tools_card-view_bright--enabled: url('#{$icons-path}gemini-tools/light/card-view.svg#bright--enabled'); - --icon__gemini-tools_add_on-surface--enabled: url('#{$icons-path}gemini-tools/light/add.svg#on-surface--enabled'); - --icon__gemini-tools_add_on-surface--hover: url('#{$icons-path}gemini-tools/light/add.svg#on-surface--hover'); - --icon__gemini-tools_add_on-surface--active: url('#{$icons-path}gemini-tools/light/add.svg#on-surface--active'); - --icon__gemini-tools_add_on-surface--disabled: url('#{$icons-path}gemini-tools/light/add.svg#on-surface--disabled'); - --icon__gemini-tools_add_on-primary--enabled: url('#{$icons-path}gemini-tools/light/add.svg#on-primary--enabled'); - --icon__gemini-tools_add_on-primary--hover: url('#{$icons-path}gemini-tools/light/add.svg#on-primary--hover'); - --icon__gemini-tools_add_on-primary--active: url('#{$icons-path}gemini-tools/light/add.svg#on-primary--active'); - --icon__gemini-tools_add_on-primary--disabled: url('#{$icons-path}gemini-tools/light/add.svg#on-primary--disabled'); - --icon__gemini-tools_add_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/add.svg#on-disabled--enabled'); - --icon__gemini-tools_add_on-message--enabled: url('#{$icons-path}gemini-tools/light/add.svg#on-message--enabled'); - --icon__gemini-tools_add_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/add.svg#on-elevation--enabled'); - --icon__gemini-tools_add_primary--enabled: url('#{$icons-path}gemini-tools/light/add.svg#primary--enabled'); - --icon__gemini-tools_add_primary--hover: url('#{$icons-path}gemini-tools/light/add.svg#primary--hover'); - --icon__gemini-tools_add_primary--active: url('#{$icons-path}gemini-tools/light/add.svg#primary--active'); - --icon__gemini-tools_add_primary--disabled: url('#{$icons-path}gemini-tools/light/add.svg#primary--disabled'); - --icon__gemini-tools_add_neutral--enabled: url('#{$icons-path}gemini-tools/light/add.svg#neutral--enabled'); - --icon__gemini-tools_add_neutral--hover: url('#{$icons-path}gemini-tools/light/add.svg#neutral--hover'); - --icon__gemini-tools_add_neutral--active: url('#{$icons-path}gemini-tools/light/add.svg#neutral--active'); - --icon__gemini-tools_add_neutral--disabled: url('#{$icons-path}gemini-tools/light/add.svg#neutral--disabled'); - --icon__gemini-tools_add_highlighted--enabled: url('#{$icons-path}gemini-tools/light/add.svg#highlighted--enabled'); - --icon__gemini-tools_add_bright--enabled: url('#{$icons-path}gemini-tools/light/add.svg#bright--enabled'); - --icon__gemini-tools_add-circle_on-surface--enabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#on-surface--enabled'); - --icon__gemini-tools_add-circle_on-surface--hover: url('#{$icons-path}gemini-tools/light/add-circle.svg#on-surface--hover'); - --icon__gemini-tools_add-circle_on-surface--active: url('#{$icons-path}gemini-tools/light/add-circle.svg#on-surface--active'); - --icon__gemini-tools_add-circle_on-surface--disabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#on-surface--disabled'); - --icon__gemini-tools_add-circle_on-primary--enabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#on-primary--enabled'); - --icon__gemini-tools_add-circle_on-primary--hover: url('#{$icons-path}gemini-tools/light/add-circle.svg#on-primary--hover'); - --icon__gemini-tools_add-circle_on-primary--active: url('#{$icons-path}gemini-tools/light/add-circle.svg#on-primary--active'); - --icon__gemini-tools_add-circle_on-primary--disabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#on-primary--disabled'); - --icon__gemini-tools_add-circle_on-disabled--enabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#on-disabled--enabled'); - --icon__gemini-tools_add-circle_on-message--enabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#on-message--enabled'); - --icon__gemini-tools_add-circle_on-elevation--enabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#on-elevation--enabled'); - --icon__gemini-tools_add-circle_primary--enabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#primary--enabled'); - --icon__gemini-tools_add-circle_primary--hover: url('#{$icons-path}gemini-tools/light/add-circle.svg#primary--hover'); - --icon__gemini-tools_add-circle_primary--active: url('#{$icons-path}gemini-tools/light/add-circle.svg#primary--active'); - --icon__gemini-tools_add-circle_primary--disabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#primary--disabled'); - --icon__gemini-tools_add-circle_neutral--enabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#neutral--enabled'); - --icon__gemini-tools_add-circle_neutral--hover: url('#{$icons-path}gemini-tools/light/add-circle.svg#neutral--hover'); - --icon__gemini-tools_add-circle_neutral--active: url('#{$icons-path}gemini-tools/light/add-circle.svg#neutral--active'); - --icon__gemini-tools_add-circle_neutral--disabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#neutral--disabled'); - --icon__gemini-tools_add-circle_highlighted--enabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#highlighted--enabled'); - --icon__gemini-tools_add-circle_bright--enabled: url('#{$icons-path}gemini-tools/light/add-circle.svg#bright--enabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*gemini-tools*/ - --icon__gemini-tools_warning_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/warning.svg#on-surface--enabled'); - --icon__gemini-tools_warning_on-surface--hover: url('#{$icons-path}gemini-tools/dark/warning.svg#on-surface--hover'); - --icon__gemini-tools_warning_on-surface--active: url('#{$icons-path}gemini-tools/dark/warning.svg#on-surface--active'); - --icon__gemini-tools_warning_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/warning.svg#on-surface--disabled'); - --icon__gemini-tools_warning_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/warning.svg#on-primary--enabled'); - --icon__gemini-tools_warning_on-primary--hover: url('#{$icons-path}gemini-tools/dark/warning.svg#on-primary--hover'); - --icon__gemini-tools_warning_on-primary--active: url('#{$icons-path}gemini-tools/dark/warning.svg#on-primary--active'); - --icon__gemini-tools_warning_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/warning.svg#on-primary--disabled'); - --icon__gemini-tools_warning_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/warning.svg#on-disabled--enabled'); - --icon__gemini-tools_warning_on-message--enabled: url('#{$icons-path}gemini-tools/dark/warning.svg#on-message--enabled'); - --icon__gemini-tools_warning_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/warning.svg#on-elevation--enabled'); - --icon__gemini-tools_warning_primary--enabled: url('#{$icons-path}gemini-tools/dark/warning.svg#primary--enabled'); - --icon__gemini-tools_warning_primary--hover: url('#{$icons-path}gemini-tools/dark/warning.svg#primary--hover'); - --icon__gemini-tools_warning_primary--active: url('#{$icons-path}gemini-tools/dark/warning.svg#primary--active'); - --icon__gemini-tools_warning_primary--disabled: url('#{$icons-path}gemini-tools/dark/warning.svg#primary--disabled'); - --icon__gemini-tools_warning_neutral--enabled: url('#{$icons-path}gemini-tools/dark/warning.svg#neutral--enabled'); - --icon__gemini-tools_warning_neutral--hover: url('#{$icons-path}gemini-tools/dark/warning.svg#neutral--hover'); - --icon__gemini-tools_warning_neutral--active: url('#{$icons-path}gemini-tools/dark/warning.svg#neutral--active'); - --icon__gemini-tools_warning_neutral--disabled: url('#{$icons-path}gemini-tools/dark/warning.svg#neutral--disabled'); - --icon__gemini-tools_warning_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/warning.svg#highlighted--enabled'); - --icon__gemini-tools_warning_bright--enabled: url('#{$icons-path}gemini-tools/dark/warning.svg#bright--enabled'); - --icon__gemini-tools_success_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/success.svg#on-surface--enabled'); - --icon__gemini-tools_success_on-surface--hover: url('#{$icons-path}gemini-tools/dark/success.svg#on-surface--hover'); - --icon__gemini-tools_success_on-surface--active: url('#{$icons-path}gemini-tools/dark/success.svg#on-surface--active'); - --icon__gemini-tools_success_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/success.svg#on-surface--disabled'); - --icon__gemini-tools_success_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/success.svg#on-primary--enabled'); - --icon__gemini-tools_success_on-primary--hover: url('#{$icons-path}gemini-tools/dark/success.svg#on-primary--hover'); - --icon__gemini-tools_success_on-primary--active: url('#{$icons-path}gemini-tools/dark/success.svg#on-primary--active'); - --icon__gemini-tools_success_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/success.svg#on-primary--disabled'); - --icon__gemini-tools_success_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/success.svg#on-disabled--enabled'); - --icon__gemini-tools_success_on-message--enabled: url('#{$icons-path}gemini-tools/dark/success.svg#on-message--enabled'); - --icon__gemini-tools_success_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/success.svg#on-elevation--enabled'); - --icon__gemini-tools_success_primary--enabled: url('#{$icons-path}gemini-tools/dark/success.svg#primary--enabled'); - --icon__gemini-tools_success_primary--hover: url('#{$icons-path}gemini-tools/dark/success.svg#primary--hover'); - --icon__gemini-tools_success_primary--active: url('#{$icons-path}gemini-tools/dark/success.svg#primary--active'); - --icon__gemini-tools_success_primary--disabled: url('#{$icons-path}gemini-tools/dark/success.svg#primary--disabled'); - --icon__gemini-tools_success_neutral--enabled: url('#{$icons-path}gemini-tools/dark/success.svg#neutral--enabled'); - --icon__gemini-tools_success_neutral--hover: url('#{$icons-path}gemini-tools/dark/success.svg#neutral--hover'); - --icon__gemini-tools_success_neutral--active: url('#{$icons-path}gemini-tools/dark/success.svg#neutral--active'); - --icon__gemini-tools_success_neutral--disabled: url('#{$icons-path}gemini-tools/dark/success.svg#neutral--disabled'); - --icon__gemini-tools_success_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/success.svg#highlighted--enabled'); - --icon__gemini-tools_success_bright--enabled: url('#{$icons-path}gemini-tools/dark/success.svg#bright--enabled'); - --icon__gemini-tools_show-more-vertical_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#on-surface--enabled'); - --icon__gemini-tools_show-more-vertical_on-surface--hover: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#on-surface--hover'); - --icon__gemini-tools_show-more-vertical_on-surface--active: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#on-surface--active'); - --icon__gemini-tools_show-more-vertical_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#on-surface--disabled'); - --icon__gemini-tools_show-more-vertical_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#on-primary--enabled'); - --icon__gemini-tools_show-more-vertical_on-primary--hover: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#on-primary--hover'); - --icon__gemini-tools_show-more-vertical_on-primary--active: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#on-primary--active'); - --icon__gemini-tools_show-more-vertical_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#on-primary--disabled'); - --icon__gemini-tools_show-more-vertical_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#on-disabled--enabled'); - --icon__gemini-tools_show-more-vertical_on-message--enabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#on-message--enabled'); - --icon__gemini-tools_show-more-vertical_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#on-elevation--enabled'); - --icon__gemini-tools_show-more-vertical_primary--enabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#primary--enabled'); - --icon__gemini-tools_show-more-vertical_primary--hover: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#primary--hover'); - --icon__gemini-tools_show-more-vertical_primary--active: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#primary--active'); - --icon__gemini-tools_show-more-vertical_primary--disabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#primary--disabled'); - --icon__gemini-tools_show-more-vertical_neutral--enabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#neutral--enabled'); - --icon__gemini-tools_show-more-vertical_neutral--hover: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#neutral--hover'); - --icon__gemini-tools_show-more-vertical_neutral--active: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#neutral--active'); - --icon__gemini-tools_show-more-vertical_neutral--disabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#neutral--disabled'); - --icon__gemini-tools_show-more-vertical_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#highlighted--enabled'); - --icon__gemini-tools_show-more-vertical_bright--enabled: url('#{$icons-path}gemini-tools/dark/show-more-vertical.svg#bright--enabled'); - --icon__gemini-tools_show-more-horizontal_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#on-surface--enabled'); - --icon__gemini-tools_show-more-horizontal_on-surface--hover: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#on-surface--hover'); - --icon__gemini-tools_show-more-horizontal_on-surface--active: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#on-surface--active'); - --icon__gemini-tools_show-more-horizontal_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#on-surface--disabled'); - --icon__gemini-tools_show-more-horizontal_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#on-primary--enabled'); - --icon__gemini-tools_show-more-horizontal_on-primary--hover: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#on-primary--hover'); - --icon__gemini-tools_show-more-horizontal_on-primary--active: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#on-primary--active'); - --icon__gemini-tools_show-more-horizontal_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#on-primary--disabled'); - --icon__gemini-tools_show-more-horizontal_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#on-disabled--enabled'); - --icon__gemini-tools_show-more-horizontal_on-message--enabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#on-message--enabled'); - --icon__gemini-tools_show-more-horizontal_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#on-elevation--enabled'); - --icon__gemini-tools_show-more-horizontal_primary--enabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#primary--enabled'); - --icon__gemini-tools_show-more-horizontal_primary--hover: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#primary--hover'); - --icon__gemini-tools_show-more-horizontal_primary--active: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#primary--active'); - --icon__gemini-tools_show-more-horizontal_primary--disabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#primary--disabled'); - --icon__gemini-tools_show-more-horizontal_neutral--enabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#neutral--enabled'); - --icon__gemini-tools_show-more-horizontal_neutral--hover: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#neutral--hover'); - --icon__gemini-tools_show-more-horizontal_neutral--active: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#neutral--active'); - --icon__gemini-tools_show-more-horizontal_neutral--disabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#neutral--disabled'); - --icon__gemini-tools_show-more-horizontal_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#highlighted--enabled'); - --icon__gemini-tools_show-more-horizontal_bright--enabled: url('#{$icons-path}gemini-tools/dark/show-more-horizontal.svg#bright--enabled'); - --icon__gemini-tools_share_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/share.svg#on-surface--enabled'); - --icon__gemini-tools_share_on-surface--hover: url('#{$icons-path}gemini-tools/dark/share.svg#on-surface--hover'); - --icon__gemini-tools_share_on-surface--active: url('#{$icons-path}gemini-tools/dark/share.svg#on-surface--active'); - --icon__gemini-tools_share_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/share.svg#on-surface--disabled'); - --icon__gemini-tools_share_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/share.svg#on-primary--enabled'); - --icon__gemini-tools_share_on-primary--hover: url('#{$icons-path}gemini-tools/dark/share.svg#on-primary--hover'); - --icon__gemini-tools_share_on-primary--active: url('#{$icons-path}gemini-tools/dark/share.svg#on-primary--active'); - --icon__gemini-tools_share_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/share.svg#on-primary--disabled'); - --icon__gemini-tools_share_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/share.svg#on-disabled--enabled'); - --icon__gemini-tools_share_on-message--enabled: url('#{$icons-path}gemini-tools/dark/share.svg#on-message--enabled'); - --icon__gemini-tools_share_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/share.svg#on-elevation--enabled'); - --icon__gemini-tools_share_primary--enabled: url('#{$icons-path}gemini-tools/dark/share.svg#primary--enabled'); - --icon__gemini-tools_share_primary--hover: url('#{$icons-path}gemini-tools/dark/share.svg#primary--hover'); - --icon__gemini-tools_share_primary--active: url('#{$icons-path}gemini-tools/dark/share.svg#primary--active'); - --icon__gemini-tools_share_primary--disabled: url('#{$icons-path}gemini-tools/dark/share.svg#primary--disabled'); - --icon__gemini-tools_share_neutral--enabled: url('#{$icons-path}gemini-tools/dark/share.svg#neutral--enabled'); - --icon__gemini-tools_share_neutral--hover: url('#{$icons-path}gemini-tools/dark/share.svg#neutral--hover'); - --icon__gemini-tools_share_neutral--active: url('#{$icons-path}gemini-tools/dark/share.svg#neutral--active'); - --icon__gemini-tools_share_neutral--disabled: url('#{$icons-path}gemini-tools/dark/share.svg#neutral--disabled'); - --icon__gemini-tools_share_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/share.svg#highlighted--enabled'); - --icon__gemini-tools_share_bright--enabled: url('#{$icons-path}gemini-tools/dark/share.svg#bright--enabled'); - --icon__gemini-tools_settings_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/settings.svg#on-surface--enabled'); - --icon__gemini-tools_settings_on-surface--hover: url('#{$icons-path}gemini-tools/dark/settings.svg#on-surface--hover'); - --icon__gemini-tools_settings_on-surface--active: url('#{$icons-path}gemini-tools/dark/settings.svg#on-surface--active'); - --icon__gemini-tools_settings_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/settings.svg#on-surface--disabled'); - --icon__gemini-tools_settings_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/settings.svg#on-primary--enabled'); - --icon__gemini-tools_settings_on-primary--hover: url('#{$icons-path}gemini-tools/dark/settings.svg#on-primary--hover'); - --icon__gemini-tools_settings_on-primary--active: url('#{$icons-path}gemini-tools/dark/settings.svg#on-primary--active'); - --icon__gemini-tools_settings_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/settings.svg#on-primary--disabled'); - --icon__gemini-tools_settings_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/settings.svg#on-disabled--enabled'); - --icon__gemini-tools_settings_on-message--enabled: url('#{$icons-path}gemini-tools/dark/settings.svg#on-message--enabled'); - --icon__gemini-tools_settings_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/settings.svg#on-elevation--enabled'); - --icon__gemini-tools_settings_primary--enabled: url('#{$icons-path}gemini-tools/dark/settings.svg#primary--enabled'); - --icon__gemini-tools_settings_primary--hover: url('#{$icons-path}gemini-tools/dark/settings.svg#primary--hover'); - --icon__gemini-tools_settings_primary--active: url('#{$icons-path}gemini-tools/dark/settings.svg#primary--active'); - --icon__gemini-tools_settings_primary--disabled: url('#{$icons-path}gemini-tools/dark/settings.svg#primary--disabled'); - --icon__gemini-tools_settings_neutral--enabled: url('#{$icons-path}gemini-tools/dark/settings.svg#neutral--enabled'); - --icon__gemini-tools_settings_neutral--hover: url('#{$icons-path}gemini-tools/dark/settings.svg#neutral--hover'); - --icon__gemini-tools_settings_neutral--active: url('#{$icons-path}gemini-tools/dark/settings.svg#neutral--active'); - --icon__gemini-tools_settings_neutral--disabled: url('#{$icons-path}gemini-tools/dark/settings.svg#neutral--disabled'); - --icon__gemini-tools_settings_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/settings.svg#highlighted--enabled'); - --icon__gemini-tools_settings_bright--enabled: url('#{$icons-path}gemini-tools/dark/settings.svg#bright--enabled'); - --icon__gemini-tools_search_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/search.svg#on-surface--enabled'); - --icon__gemini-tools_search_on-surface--hover: url('#{$icons-path}gemini-tools/dark/search.svg#on-surface--hover'); - --icon__gemini-tools_search_on-surface--active: url('#{$icons-path}gemini-tools/dark/search.svg#on-surface--active'); - --icon__gemini-tools_search_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/search.svg#on-surface--disabled'); - --icon__gemini-tools_search_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/search.svg#on-primary--enabled'); - --icon__gemini-tools_search_on-primary--hover: url('#{$icons-path}gemini-tools/dark/search.svg#on-primary--hover'); - --icon__gemini-tools_search_on-primary--active: url('#{$icons-path}gemini-tools/dark/search.svg#on-primary--active'); - --icon__gemini-tools_search_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/search.svg#on-primary--disabled'); - --icon__gemini-tools_search_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/search.svg#on-disabled--enabled'); - --icon__gemini-tools_search_on-message--enabled: url('#{$icons-path}gemini-tools/dark/search.svg#on-message--enabled'); - --icon__gemini-tools_search_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/search.svg#on-elevation--enabled'); - --icon__gemini-tools_search_primary--enabled: url('#{$icons-path}gemini-tools/dark/search.svg#primary--enabled'); - --icon__gemini-tools_search_primary--hover: url('#{$icons-path}gemini-tools/dark/search.svg#primary--hover'); - --icon__gemini-tools_search_primary--active: url('#{$icons-path}gemini-tools/dark/search.svg#primary--active'); - --icon__gemini-tools_search_primary--disabled: url('#{$icons-path}gemini-tools/dark/search.svg#primary--disabled'); - --icon__gemini-tools_search_neutral--enabled: url('#{$icons-path}gemini-tools/dark/search.svg#neutral--enabled'); - --icon__gemini-tools_search_neutral--hover: url('#{$icons-path}gemini-tools/dark/search.svg#neutral--hover'); - --icon__gemini-tools_search_neutral--active: url('#{$icons-path}gemini-tools/dark/search.svg#neutral--active'); - --icon__gemini-tools_search_neutral--disabled: url('#{$icons-path}gemini-tools/dark/search.svg#neutral--disabled'); - --icon__gemini-tools_search_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/search.svg#highlighted--enabled'); - --icon__gemini-tools_search_bright--enabled: url('#{$icons-path}gemini-tools/dark/search.svg#bright--enabled'); - --icon__gemini-tools_reset_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/reset.svg#on-surface--enabled'); - --icon__gemini-tools_reset_on-surface--hover: url('#{$icons-path}gemini-tools/dark/reset.svg#on-surface--hover'); - --icon__gemini-tools_reset_on-surface--active: url('#{$icons-path}gemini-tools/dark/reset.svg#on-surface--active'); - --icon__gemini-tools_reset_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/reset.svg#on-surface--disabled'); - --icon__gemini-tools_reset_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/reset.svg#on-primary--enabled'); - --icon__gemini-tools_reset_on-primary--hover: url('#{$icons-path}gemini-tools/dark/reset.svg#on-primary--hover'); - --icon__gemini-tools_reset_on-primary--active: url('#{$icons-path}gemini-tools/dark/reset.svg#on-primary--active'); - --icon__gemini-tools_reset_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/reset.svg#on-primary--disabled'); - --icon__gemini-tools_reset_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/reset.svg#on-disabled--enabled'); - --icon__gemini-tools_reset_on-message--enabled: url('#{$icons-path}gemini-tools/dark/reset.svg#on-message--enabled'); - --icon__gemini-tools_reset_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/reset.svg#on-elevation--enabled'); - --icon__gemini-tools_reset_primary--enabled: url('#{$icons-path}gemini-tools/dark/reset.svg#primary--enabled'); - --icon__gemini-tools_reset_primary--hover: url('#{$icons-path}gemini-tools/dark/reset.svg#primary--hover'); - --icon__gemini-tools_reset_primary--active: url('#{$icons-path}gemini-tools/dark/reset.svg#primary--active'); - --icon__gemini-tools_reset_primary--disabled: url('#{$icons-path}gemini-tools/dark/reset.svg#primary--disabled'); - --icon__gemini-tools_reset_neutral--enabled: url('#{$icons-path}gemini-tools/dark/reset.svg#neutral--enabled'); - --icon__gemini-tools_reset_neutral--hover: url('#{$icons-path}gemini-tools/dark/reset.svg#neutral--hover'); - --icon__gemini-tools_reset_neutral--active: url('#{$icons-path}gemini-tools/dark/reset.svg#neutral--active'); - --icon__gemini-tools_reset_neutral--disabled: url('#{$icons-path}gemini-tools/dark/reset.svg#neutral--disabled'); - --icon__gemini-tools_reset_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/reset.svg#highlighted--enabled'); - --icon__gemini-tools_reset_bright--enabled: url('#{$icons-path}gemini-tools/dark/reset.svg#bright--enabled'); - --icon__gemini-tools_read-only_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#on-surface--enabled'); - --icon__gemini-tools_read-only_on-surface--hover: url('#{$icons-path}gemini-tools/dark/read-only.svg#on-surface--hover'); - --icon__gemini-tools_read-only_on-surface--active: url('#{$icons-path}gemini-tools/dark/read-only.svg#on-surface--active'); - --icon__gemini-tools_read-only_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#on-surface--disabled'); - --icon__gemini-tools_read-only_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#on-primary--enabled'); - --icon__gemini-tools_read-only_on-primary--hover: url('#{$icons-path}gemini-tools/dark/read-only.svg#on-primary--hover'); - --icon__gemini-tools_read-only_on-primary--active: url('#{$icons-path}gemini-tools/dark/read-only.svg#on-primary--active'); - --icon__gemini-tools_read-only_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#on-primary--disabled'); - --icon__gemini-tools_read-only_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#on-disabled--enabled'); - --icon__gemini-tools_read-only_on-message--enabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#on-message--enabled'); - --icon__gemini-tools_read-only_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#on-elevation--enabled'); - --icon__gemini-tools_read-only_primary--enabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#primary--enabled'); - --icon__gemini-tools_read-only_primary--hover: url('#{$icons-path}gemini-tools/dark/read-only.svg#primary--hover'); - --icon__gemini-tools_read-only_primary--active: url('#{$icons-path}gemini-tools/dark/read-only.svg#primary--active'); - --icon__gemini-tools_read-only_primary--disabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#primary--disabled'); - --icon__gemini-tools_read-only_neutral--enabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#neutral--enabled'); - --icon__gemini-tools_read-only_neutral--hover: url('#{$icons-path}gemini-tools/dark/read-only.svg#neutral--hover'); - --icon__gemini-tools_read-only_neutral--active: url('#{$icons-path}gemini-tools/dark/read-only.svg#neutral--active'); - --icon__gemini-tools_read-only_neutral--disabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#neutral--disabled'); - --icon__gemini-tools_read-only_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#highlighted--enabled'); - --icon__gemini-tools_read-only_bright--enabled: url('#{$icons-path}gemini-tools/dark/read-only.svg#bright--enabled'); - --icon__gemini-tools_open-window_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#on-surface--enabled'); - --icon__gemini-tools_open-window_on-surface--hover: url('#{$icons-path}gemini-tools/dark/open-window.svg#on-surface--hover'); - --icon__gemini-tools_open-window_on-surface--active: url('#{$icons-path}gemini-tools/dark/open-window.svg#on-surface--active'); - --icon__gemini-tools_open-window_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#on-surface--disabled'); - --icon__gemini-tools_open-window_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#on-primary--enabled'); - --icon__gemini-tools_open-window_on-primary--hover: url('#{$icons-path}gemini-tools/dark/open-window.svg#on-primary--hover'); - --icon__gemini-tools_open-window_on-primary--active: url('#{$icons-path}gemini-tools/dark/open-window.svg#on-primary--active'); - --icon__gemini-tools_open-window_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#on-primary--disabled'); - --icon__gemini-tools_open-window_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#on-disabled--enabled'); - --icon__gemini-tools_open-window_on-message--enabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#on-message--enabled'); - --icon__gemini-tools_open-window_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#on-elevation--enabled'); - --icon__gemini-tools_open-window_primary--enabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#primary--enabled'); - --icon__gemini-tools_open-window_primary--hover: url('#{$icons-path}gemini-tools/dark/open-window.svg#primary--hover'); - --icon__gemini-tools_open-window_primary--active: url('#{$icons-path}gemini-tools/dark/open-window.svg#primary--active'); - --icon__gemini-tools_open-window_primary--disabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#primary--disabled'); - --icon__gemini-tools_open-window_neutral--enabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#neutral--enabled'); - --icon__gemini-tools_open-window_neutral--hover: url('#{$icons-path}gemini-tools/dark/open-window.svg#neutral--hover'); - --icon__gemini-tools_open-window_neutral--active: url('#{$icons-path}gemini-tools/dark/open-window.svg#neutral--active'); - --icon__gemini-tools_open-window_neutral--disabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#neutral--disabled'); - --icon__gemini-tools_open-window_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#highlighted--enabled'); - --icon__gemini-tools_open-window_bright--enabled: url('#{$icons-path}gemini-tools/dark/open-window.svg#bright--enabled'); - --icon__gemini-tools_notice_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/notice.svg#on-surface--enabled'); - --icon__gemini-tools_notice_on-surface--hover: url('#{$icons-path}gemini-tools/dark/notice.svg#on-surface--hover'); - --icon__gemini-tools_notice_on-surface--active: url('#{$icons-path}gemini-tools/dark/notice.svg#on-surface--active'); - --icon__gemini-tools_notice_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/notice.svg#on-surface--disabled'); - --icon__gemini-tools_notice_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/notice.svg#on-primary--enabled'); - --icon__gemini-tools_notice_on-primary--hover: url('#{$icons-path}gemini-tools/dark/notice.svg#on-primary--hover'); - --icon__gemini-tools_notice_on-primary--active: url('#{$icons-path}gemini-tools/dark/notice.svg#on-primary--active'); - --icon__gemini-tools_notice_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/notice.svg#on-primary--disabled'); - --icon__gemini-tools_notice_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/notice.svg#on-disabled--enabled'); - --icon__gemini-tools_notice_on-message--enabled: url('#{$icons-path}gemini-tools/dark/notice.svg#on-message--enabled'); - --icon__gemini-tools_notice_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/notice.svg#on-elevation--enabled'); - --icon__gemini-tools_notice_primary--enabled: url('#{$icons-path}gemini-tools/dark/notice.svg#primary--enabled'); - --icon__gemini-tools_notice_primary--hover: url('#{$icons-path}gemini-tools/dark/notice.svg#primary--hover'); - --icon__gemini-tools_notice_primary--active: url('#{$icons-path}gemini-tools/dark/notice.svg#primary--active'); - --icon__gemini-tools_notice_primary--disabled: url('#{$icons-path}gemini-tools/dark/notice.svg#primary--disabled'); - --icon__gemini-tools_notice_neutral--enabled: url('#{$icons-path}gemini-tools/dark/notice.svg#neutral--enabled'); - --icon__gemini-tools_notice_neutral--hover: url('#{$icons-path}gemini-tools/dark/notice.svg#neutral--hover'); - --icon__gemini-tools_notice_neutral--active: url('#{$icons-path}gemini-tools/dark/notice.svg#neutral--active'); - --icon__gemini-tools_notice_neutral--disabled: url('#{$icons-path}gemini-tools/dark/notice.svg#neutral--disabled'); - --icon__gemini-tools_notice_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/notice.svg#highlighted--enabled'); - --icon__gemini-tools_notice_bright--enabled: url('#{$icons-path}gemini-tools/dark/notice.svg#bright--enabled'); - --icon__gemini-tools_more-info_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#on-surface--enabled'); - --icon__gemini-tools_more-info_on-surface--hover: url('#{$icons-path}gemini-tools/dark/more-info.svg#on-surface--hover'); - --icon__gemini-tools_more-info_on-surface--active: url('#{$icons-path}gemini-tools/dark/more-info.svg#on-surface--active'); - --icon__gemini-tools_more-info_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#on-surface--disabled'); - --icon__gemini-tools_more-info_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#on-primary--enabled'); - --icon__gemini-tools_more-info_on-primary--hover: url('#{$icons-path}gemini-tools/dark/more-info.svg#on-primary--hover'); - --icon__gemini-tools_more-info_on-primary--active: url('#{$icons-path}gemini-tools/dark/more-info.svg#on-primary--active'); - --icon__gemini-tools_more-info_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#on-primary--disabled'); - --icon__gemini-tools_more-info_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#on-disabled--enabled'); - --icon__gemini-tools_more-info_on-message--enabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#on-message--enabled'); - --icon__gemini-tools_more-info_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#on-elevation--enabled'); - --icon__gemini-tools_more-info_primary--enabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#primary--enabled'); - --icon__gemini-tools_more-info_primary--hover: url('#{$icons-path}gemini-tools/dark/more-info.svg#primary--hover'); - --icon__gemini-tools_more-info_primary--active: url('#{$icons-path}gemini-tools/dark/more-info.svg#primary--active'); - --icon__gemini-tools_more-info_primary--disabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#primary--disabled'); - --icon__gemini-tools_more-info_neutral--enabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#neutral--enabled'); - --icon__gemini-tools_more-info_neutral--hover: url('#{$icons-path}gemini-tools/dark/more-info.svg#neutral--hover'); - --icon__gemini-tools_more-info_neutral--active: url('#{$icons-path}gemini-tools/dark/more-info.svg#neutral--active'); - --icon__gemini-tools_more-info_neutral--disabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#neutral--disabled'); - --icon__gemini-tools_more-info_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#highlighted--enabled'); - --icon__gemini-tools_more-info_bright--enabled: url('#{$icons-path}gemini-tools/dark/more-info.svg#bright--enabled'); - --icon__gemini-tools_minus_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/minus.svg#on-surface--enabled'); - --icon__gemini-tools_minus_on-surface--hover: url('#{$icons-path}gemini-tools/dark/minus.svg#on-surface--hover'); - --icon__gemini-tools_minus_on-surface--active: url('#{$icons-path}gemini-tools/dark/minus.svg#on-surface--active'); - --icon__gemini-tools_minus_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/minus.svg#on-surface--disabled'); - --icon__gemini-tools_minus_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/minus.svg#on-primary--enabled'); - --icon__gemini-tools_minus_on-primary--hover: url('#{$icons-path}gemini-tools/dark/minus.svg#on-primary--hover'); - --icon__gemini-tools_minus_on-primary--active: url('#{$icons-path}gemini-tools/dark/minus.svg#on-primary--active'); - --icon__gemini-tools_minus_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/minus.svg#on-primary--disabled'); - --icon__gemini-tools_minus_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/minus.svg#on-disabled--enabled'); - --icon__gemini-tools_minus_on-message--enabled: url('#{$icons-path}gemini-tools/dark/minus.svg#on-message--enabled'); - --icon__gemini-tools_minus_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/minus.svg#on-elevation--enabled'); - --icon__gemini-tools_minus_primary--enabled: url('#{$icons-path}gemini-tools/dark/minus.svg#primary--enabled'); - --icon__gemini-tools_minus_primary--hover: url('#{$icons-path}gemini-tools/dark/minus.svg#primary--hover'); - --icon__gemini-tools_minus_primary--active: url('#{$icons-path}gemini-tools/dark/minus.svg#primary--active'); - --icon__gemini-tools_minus_primary--disabled: url('#{$icons-path}gemini-tools/dark/minus.svg#primary--disabled'); - --icon__gemini-tools_minus_neutral--enabled: url('#{$icons-path}gemini-tools/dark/minus.svg#neutral--enabled'); - --icon__gemini-tools_minus_neutral--hover: url('#{$icons-path}gemini-tools/dark/minus.svg#neutral--hover'); - --icon__gemini-tools_minus_neutral--active: url('#{$icons-path}gemini-tools/dark/minus.svg#neutral--active'); - --icon__gemini-tools_minus_neutral--disabled: url('#{$icons-path}gemini-tools/dark/minus.svg#neutral--disabled'); - --icon__gemini-tools_minus_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/minus.svg#highlighted--enabled'); - --icon__gemini-tools_minus_bright--enabled: url('#{$icons-path}gemini-tools/dark/minus.svg#bright--enabled'); - --icon__gemini-tools_minus-circle_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#on-surface--enabled'); - --icon__gemini-tools_minus-circle_on-surface--hover: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#on-surface--hover'); - --icon__gemini-tools_minus-circle_on-surface--active: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#on-surface--active'); - --icon__gemini-tools_minus-circle_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#on-surface--disabled'); - --icon__gemini-tools_minus-circle_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#on-primary--enabled'); - --icon__gemini-tools_minus-circle_on-primary--hover: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#on-primary--hover'); - --icon__gemini-tools_minus-circle_on-primary--active: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#on-primary--active'); - --icon__gemini-tools_minus-circle_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#on-primary--disabled'); - --icon__gemini-tools_minus-circle_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#on-disabled--enabled'); - --icon__gemini-tools_minus-circle_on-message--enabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#on-message--enabled'); - --icon__gemini-tools_minus-circle_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#on-elevation--enabled'); - --icon__gemini-tools_minus-circle_primary--enabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#primary--enabled'); - --icon__gemini-tools_minus-circle_primary--hover: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#primary--hover'); - --icon__gemini-tools_minus-circle_primary--active: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#primary--active'); - --icon__gemini-tools_minus-circle_primary--disabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#primary--disabled'); - --icon__gemini-tools_minus-circle_neutral--enabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#neutral--enabled'); - --icon__gemini-tools_minus-circle_neutral--hover: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#neutral--hover'); - --icon__gemini-tools_minus-circle_neutral--active: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#neutral--active'); - --icon__gemini-tools_minus-circle_neutral--disabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#neutral--disabled'); - --icon__gemini-tools_minus-circle_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#highlighted--enabled'); - --icon__gemini-tools_minus-circle_bright--enabled: url('#{$icons-path}gemini-tools/dark/minus-circle.svg#bright--enabled'); - --icon__gemini-tools_list-view_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#on-surface--enabled'); - --icon__gemini-tools_list-view_on-surface--hover: url('#{$icons-path}gemini-tools/dark/list-view.svg#on-surface--hover'); - --icon__gemini-tools_list-view_on-surface--active: url('#{$icons-path}gemini-tools/dark/list-view.svg#on-surface--active'); - --icon__gemini-tools_list-view_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#on-surface--disabled'); - --icon__gemini-tools_list-view_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#on-primary--enabled'); - --icon__gemini-tools_list-view_on-primary--hover: url('#{$icons-path}gemini-tools/dark/list-view.svg#on-primary--hover'); - --icon__gemini-tools_list-view_on-primary--active: url('#{$icons-path}gemini-tools/dark/list-view.svg#on-primary--active'); - --icon__gemini-tools_list-view_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#on-primary--disabled'); - --icon__gemini-tools_list-view_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#on-disabled--enabled'); - --icon__gemini-tools_list-view_on-message--enabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#on-message--enabled'); - --icon__gemini-tools_list-view_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#on-elevation--enabled'); - --icon__gemini-tools_list-view_primary--enabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#primary--enabled'); - --icon__gemini-tools_list-view_primary--hover: url('#{$icons-path}gemini-tools/dark/list-view.svg#primary--hover'); - --icon__gemini-tools_list-view_primary--active: url('#{$icons-path}gemini-tools/dark/list-view.svg#primary--active'); - --icon__gemini-tools_list-view_primary--disabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#primary--disabled'); - --icon__gemini-tools_list-view_neutral--enabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#neutral--enabled'); - --icon__gemini-tools_list-view_neutral--hover: url('#{$icons-path}gemini-tools/dark/list-view.svg#neutral--hover'); - --icon__gemini-tools_list-view_neutral--active: url('#{$icons-path}gemini-tools/dark/list-view.svg#neutral--active'); - --icon__gemini-tools_list-view_neutral--disabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#neutral--disabled'); - --icon__gemini-tools_list-view_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#highlighted--enabled'); - --icon__gemini-tools_list-view_bright--enabled: url('#{$icons-path}gemini-tools/dark/list-view.svg#bright--enabled'); - --icon__gemini-tools_folder_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/folder.svg#on-surface--enabled'); - --icon__gemini-tools_folder_on-surface--hover: url('#{$icons-path}gemini-tools/dark/folder.svg#on-surface--hover'); - --icon__gemini-tools_folder_on-surface--active: url('#{$icons-path}gemini-tools/dark/folder.svg#on-surface--active'); - --icon__gemini-tools_folder_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/folder.svg#on-surface--disabled'); - --icon__gemini-tools_folder_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/folder.svg#on-primary--enabled'); - --icon__gemini-tools_folder_on-primary--hover: url('#{$icons-path}gemini-tools/dark/folder.svg#on-primary--hover'); - --icon__gemini-tools_folder_on-primary--active: url('#{$icons-path}gemini-tools/dark/folder.svg#on-primary--active'); - --icon__gemini-tools_folder_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/folder.svg#on-primary--disabled'); - --icon__gemini-tools_folder_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/folder.svg#on-disabled--enabled'); - --icon__gemini-tools_folder_on-message--enabled: url('#{$icons-path}gemini-tools/dark/folder.svg#on-message--enabled'); - --icon__gemini-tools_folder_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/folder.svg#on-elevation--enabled'); - --icon__gemini-tools_folder_primary--enabled: url('#{$icons-path}gemini-tools/dark/folder.svg#primary--enabled'); - --icon__gemini-tools_folder_primary--hover: url('#{$icons-path}gemini-tools/dark/folder.svg#primary--hover'); - --icon__gemini-tools_folder_primary--active: url('#{$icons-path}gemini-tools/dark/folder.svg#primary--active'); - --icon__gemini-tools_folder_primary--disabled: url('#{$icons-path}gemini-tools/dark/folder.svg#primary--disabled'); - --icon__gemini-tools_folder_neutral--enabled: url('#{$icons-path}gemini-tools/dark/folder.svg#neutral--enabled'); - --icon__gemini-tools_folder_neutral--hover: url('#{$icons-path}gemini-tools/dark/folder.svg#neutral--hover'); - --icon__gemini-tools_folder_neutral--active: url('#{$icons-path}gemini-tools/dark/folder.svg#neutral--active'); - --icon__gemini-tools_folder_neutral--disabled: url('#{$icons-path}gemini-tools/dark/folder.svg#neutral--disabled'); - --icon__gemini-tools_folder_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/folder.svg#highlighted--enabled'); - --icon__gemini-tools_folder_bright--enabled: url('#{$icons-path}gemini-tools/dark/folder.svg#bright--enabled'); - --icon__gemini-tools_flow-arrow_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#on-surface--enabled'); - --icon__gemini-tools_flow-arrow_on-surface--hover: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#on-surface--hover'); - --icon__gemini-tools_flow-arrow_on-surface--active: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#on-surface--active'); - --icon__gemini-tools_flow-arrow_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#on-surface--disabled'); - --icon__gemini-tools_flow-arrow_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#on-primary--enabled'); - --icon__gemini-tools_flow-arrow_on-primary--hover: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#on-primary--hover'); - --icon__gemini-tools_flow-arrow_on-primary--active: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#on-primary--active'); - --icon__gemini-tools_flow-arrow_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#on-primary--disabled'); - --icon__gemini-tools_flow-arrow_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#on-disabled--enabled'); - --icon__gemini-tools_flow-arrow_on-message--enabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#on-message--enabled'); - --icon__gemini-tools_flow-arrow_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#on-elevation--enabled'); - --icon__gemini-tools_flow-arrow_primary--enabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#primary--enabled'); - --icon__gemini-tools_flow-arrow_primary--hover: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#primary--hover'); - --icon__gemini-tools_flow-arrow_primary--active: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#primary--active'); - --icon__gemini-tools_flow-arrow_primary--disabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#primary--disabled'); - --icon__gemini-tools_flow-arrow_neutral--enabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#neutral--enabled'); - --icon__gemini-tools_flow-arrow_neutral--hover: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#neutral--hover'); - --icon__gemini-tools_flow-arrow_neutral--active: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#neutral--active'); - --icon__gemini-tools_flow-arrow_neutral--disabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#neutral--disabled'); - --icon__gemini-tools_flow-arrow_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#highlighted--enabled'); - --icon__gemini-tools_flow-arrow_bright--enabled: url('#{$icons-path}gemini-tools/dark/flow-arrow.svg#bright--enabled'); - --icon__gemini-tools_file_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/file.svg#on-surface--enabled'); - --icon__gemini-tools_file_on-surface--hover: url('#{$icons-path}gemini-tools/dark/file.svg#on-surface--hover'); - --icon__gemini-tools_file_on-surface--active: url('#{$icons-path}gemini-tools/dark/file.svg#on-surface--active'); - --icon__gemini-tools_file_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/file.svg#on-surface--disabled'); - --icon__gemini-tools_file_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/file.svg#on-primary--enabled'); - --icon__gemini-tools_file_on-primary--hover: url('#{$icons-path}gemini-tools/dark/file.svg#on-primary--hover'); - --icon__gemini-tools_file_on-primary--active: url('#{$icons-path}gemini-tools/dark/file.svg#on-primary--active'); - --icon__gemini-tools_file_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/file.svg#on-primary--disabled'); - --icon__gemini-tools_file_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/file.svg#on-disabled--enabled'); - --icon__gemini-tools_file_on-message--enabled: url('#{$icons-path}gemini-tools/dark/file.svg#on-message--enabled'); - --icon__gemini-tools_file_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/file.svg#on-elevation--enabled'); - --icon__gemini-tools_file_primary--enabled: url('#{$icons-path}gemini-tools/dark/file.svg#primary--enabled'); - --icon__gemini-tools_file_primary--hover: url('#{$icons-path}gemini-tools/dark/file.svg#primary--hover'); - --icon__gemini-tools_file_primary--active: url('#{$icons-path}gemini-tools/dark/file.svg#primary--active'); - --icon__gemini-tools_file_primary--disabled: url('#{$icons-path}gemini-tools/dark/file.svg#primary--disabled'); - --icon__gemini-tools_file_neutral--enabled: url('#{$icons-path}gemini-tools/dark/file.svg#neutral--enabled'); - --icon__gemini-tools_file_neutral--hover: url('#{$icons-path}gemini-tools/dark/file.svg#neutral--hover'); - --icon__gemini-tools_file_neutral--active: url('#{$icons-path}gemini-tools/dark/file.svg#neutral--active'); - --icon__gemini-tools_file_neutral--disabled: url('#{$icons-path}gemini-tools/dark/file.svg#neutral--disabled'); - --icon__gemini-tools_file_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/file.svg#highlighted--enabled'); - --icon__gemini-tools_file_bright--enabled: url('#{$icons-path}gemini-tools/dark/file.svg#bright--enabled'); - --icon__gemini-tools_error_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/error.svg#on-surface--enabled'); - --icon__gemini-tools_error_on-surface--hover: url('#{$icons-path}gemini-tools/dark/error.svg#on-surface--hover'); - --icon__gemini-tools_error_on-surface--active: url('#{$icons-path}gemini-tools/dark/error.svg#on-surface--active'); - --icon__gemini-tools_error_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/error.svg#on-surface--disabled'); - --icon__gemini-tools_error_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/error.svg#on-primary--enabled'); - --icon__gemini-tools_error_on-primary--hover: url('#{$icons-path}gemini-tools/dark/error.svg#on-primary--hover'); - --icon__gemini-tools_error_on-primary--active: url('#{$icons-path}gemini-tools/dark/error.svg#on-primary--active'); - --icon__gemini-tools_error_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/error.svg#on-primary--disabled'); - --icon__gemini-tools_error_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/error.svg#on-disabled--enabled'); - --icon__gemini-tools_error_on-message--enabled: url('#{$icons-path}gemini-tools/dark/error.svg#on-message--enabled'); - --icon__gemini-tools_error_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/error.svg#on-elevation--enabled'); - --icon__gemini-tools_error_primary--enabled: url('#{$icons-path}gemini-tools/dark/error.svg#primary--enabled'); - --icon__gemini-tools_error_primary--hover: url('#{$icons-path}gemini-tools/dark/error.svg#primary--hover'); - --icon__gemini-tools_error_primary--active: url('#{$icons-path}gemini-tools/dark/error.svg#primary--active'); - --icon__gemini-tools_error_primary--disabled: url('#{$icons-path}gemini-tools/dark/error.svg#primary--disabled'); - --icon__gemini-tools_error_neutral--enabled: url('#{$icons-path}gemini-tools/dark/error.svg#neutral--enabled'); - --icon__gemini-tools_error_neutral--hover: url('#{$icons-path}gemini-tools/dark/error.svg#neutral--hover'); - --icon__gemini-tools_error_neutral--active: url('#{$icons-path}gemini-tools/dark/error.svg#neutral--active'); - --icon__gemini-tools_error_neutral--disabled: url('#{$icons-path}gemini-tools/dark/error.svg#neutral--disabled'); - --icon__gemini-tools_error_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/error.svg#highlighted--enabled'); - --icon__gemini-tools_error_bright--enabled: url('#{$icons-path}gemini-tools/dark/error.svg#bright--enabled'); - --icon__gemini-tools_edit_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/edit.svg#on-surface--enabled'); - --icon__gemini-tools_edit_on-surface--hover: url('#{$icons-path}gemini-tools/dark/edit.svg#on-surface--hover'); - --icon__gemini-tools_edit_on-surface--active: url('#{$icons-path}gemini-tools/dark/edit.svg#on-surface--active'); - --icon__gemini-tools_edit_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/edit.svg#on-surface--disabled'); - --icon__gemini-tools_edit_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/edit.svg#on-primary--enabled'); - --icon__gemini-tools_edit_on-primary--hover: url('#{$icons-path}gemini-tools/dark/edit.svg#on-primary--hover'); - --icon__gemini-tools_edit_on-primary--active: url('#{$icons-path}gemini-tools/dark/edit.svg#on-primary--active'); - --icon__gemini-tools_edit_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/edit.svg#on-primary--disabled'); - --icon__gemini-tools_edit_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/edit.svg#on-disabled--enabled'); - --icon__gemini-tools_edit_on-message--enabled: url('#{$icons-path}gemini-tools/dark/edit.svg#on-message--enabled'); - --icon__gemini-tools_edit_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/edit.svg#on-elevation--enabled'); - --icon__gemini-tools_edit_primary--enabled: url('#{$icons-path}gemini-tools/dark/edit.svg#primary--enabled'); - --icon__gemini-tools_edit_primary--hover: url('#{$icons-path}gemini-tools/dark/edit.svg#primary--hover'); - --icon__gemini-tools_edit_primary--active: url('#{$icons-path}gemini-tools/dark/edit.svg#primary--active'); - --icon__gemini-tools_edit_primary--disabled: url('#{$icons-path}gemini-tools/dark/edit.svg#primary--disabled'); - --icon__gemini-tools_edit_neutral--enabled: url('#{$icons-path}gemini-tools/dark/edit.svg#neutral--enabled'); - --icon__gemini-tools_edit_neutral--hover: url('#{$icons-path}gemini-tools/dark/edit.svg#neutral--hover'); - --icon__gemini-tools_edit_neutral--active: url('#{$icons-path}gemini-tools/dark/edit.svg#neutral--active'); - --icon__gemini-tools_edit_neutral--disabled: url('#{$icons-path}gemini-tools/dark/edit.svg#neutral--disabled'); - --icon__gemini-tools_edit_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/edit.svg#highlighted--enabled'); - --icon__gemini-tools_edit_bright--enabled: url('#{$icons-path}gemini-tools/dark/edit.svg#bright--enabled'); - --icon__gemini-tools_edit-wand_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#on-surface--enabled'); - --icon__gemini-tools_edit-wand_on-surface--hover: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#on-surface--hover'); - --icon__gemini-tools_edit-wand_on-surface--active: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#on-surface--active'); - --icon__gemini-tools_edit-wand_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#on-surface--disabled'); - --icon__gemini-tools_edit-wand_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#on-primary--enabled'); - --icon__gemini-tools_edit-wand_on-primary--hover: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#on-primary--hover'); - --icon__gemini-tools_edit-wand_on-primary--active: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#on-primary--active'); - --icon__gemini-tools_edit-wand_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#on-primary--disabled'); - --icon__gemini-tools_edit-wand_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#on-disabled--enabled'); - --icon__gemini-tools_edit-wand_on-message--enabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#on-message--enabled'); - --icon__gemini-tools_edit-wand_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#on-elevation--enabled'); - --icon__gemini-tools_edit-wand_primary--enabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#primary--enabled'); - --icon__gemini-tools_edit-wand_primary--hover: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#primary--hover'); - --icon__gemini-tools_edit-wand_primary--active: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#primary--active'); - --icon__gemini-tools_edit-wand_primary--disabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#primary--disabled'); - --icon__gemini-tools_edit-wand_neutral--enabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#neutral--enabled'); - --icon__gemini-tools_edit-wand_neutral--hover: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#neutral--hover'); - --icon__gemini-tools_edit-wand_neutral--active: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#neutral--active'); - --icon__gemini-tools_edit-wand_neutral--disabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#neutral--disabled'); - --icon__gemini-tools_edit-wand_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#highlighted--enabled'); - --icon__gemini-tools_edit-wand_bright--enabled: url('#{$icons-path}gemini-tools/dark/edit-wand.svg#bright--enabled'); - --icon__gemini-tools_duplicate_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#on-surface--enabled'); - --icon__gemini-tools_duplicate_on-surface--hover: url('#{$icons-path}gemini-tools/dark/duplicate.svg#on-surface--hover'); - --icon__gemini-tools_duplicate_on-surface--active: url('#{$icons-path}gemini-tools/dark/duplicate.svg#on-surface--active'); - --icon__gemini-tools_duplicate_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#on-surface--disabled'); - --icon__gemini-tools_duplicate_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#on-primary--enabled'); - --icon__gemini-tools_duplicate_on-primary--hover: url('#{$icons-path}gemini-tools/dark/duplicate.svg#on-primary--hover'); - --icon__gemini-tools_duplicate_on-primary--active: url('#{$icons-path}gemini-tools/dark/duplicate.svg#on-primary--active'); - --icon__gemini-tools_duplicate_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#on-primary--disabled'); - --icon__gemini-tools_duplicate_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#on-disabled--enabled'); - --icon__gemini-tools_duplicate_on-message--enabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#on-message--enabled'); - --icon__gemini-tools_duplicate_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#on-elevation--enabled'); - --icon__gemini-tools_duplicate_primary--enabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#primary--enabled'); - --icon__gemini-tools_duplicate_primary--hover: url('#{$icons-path}gemini-tools/dark/duplicate.svg#primary--hover'); - --icon__gemini-tools_duplicate_primary--active: url('#{$icons-path}gemini-tools/dark/duplicate.svg#primary--active'); - --icon__gemini-tools_duplicate_primary--disabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#primary--disabled'); - --icon__gemini-tools_duplicate_neutral--enabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#neutral--enabled'); - --icon__gemini-tools_duplicate_neutral--hover: url('#{$icons-path}gemini-tools/dark/duplicate.svg#neutral--hover'); - --icon__gemini-tools_duplicate_neutral--active: url('#{$icons-path}gemini-tools/dark/duplicate.svg#neutral--active'); - --icon__gemini-tools_duplicate_neutral--disabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#neutral--disabled'); - --icon__gemini-tools_duplicate_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#highlighted--enabled'); - --icon__gemini-tools_duplicate_bright--enabled: url('#{$icons-path}gemini-tools/dark/duplicate.svg#bright--enabled'); - --icon__gemini-tools_download_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/download.svg#on-surface--enabled'); - --icon__gemini-tools_download_on-surface--hover: url('#{$icons-path}gemini-tools/dark/download.svg#on-surface--hover'); - --icon__gemini-tools_download_on-surface--active: url('#{$icons-path}gemini-tools/dark/download.svg#on-surface--active'); - --icon__gemini-tools_download_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/download.svg#on-surface--disabled'); - --icon__gemini-tools_download_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/download.svg#on-primary--enabled'); - --icon__gemini-tools_download_on-primary--hover: url('#{$icons-path}gemini-tools/dark/download.svg#on-primary--hover'); - --icon__gemini-tools_download_on-primary--active: url('#{$icons-path}gemini-tools/dark/download.svg#on-primary--active'); - --icon__gemini-tools_download_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/download.svg#on-primary--disabled'); - --icon__gemini-tools_download_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/download.svg#on-disabled--enabled'); - --icon__gemini-tools_download_on-message--enabled: url('#{$icons-path}gemini-tools/dark/download.svg#on-message--enabled'); - --icon__gemini-tools_download_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/download.svg#on-elevation--enabled'); - --icon__gemini-tools_download_primary--enabled: url('#{$icons-path}gemini-tools/dark/download.svg#primary--enabled'); - --icon__gemini-tools_download_primary--hover: url('#{$icons-path}gemini-tools/dark/download.svg#primary--hover'); - --icon__gemini-tools_download_primary--active: url('#{$icons-path}gemini-tools/dark/download.svg#primary--active'); - --icon__gemini-tools_download_primary--disabled: url('#{$icons-path}gemini-tools/dark/download.svg#primary--disabled'); - --icon__gemini-tools_download_neutral--enabled: url('#{$icons-path}gemini-tools/dark/download.svg#neutral--enabled'); - --icon__gemini-tools_download_neutral--hover: url('#{$icons-path}gemini-tools/dark/download.svg#neutral--hover'); - --icon__gemini-tools_download_neutral--active: url('#{$icons-path}gemini-tools/dark/download.svg#neutral--active'); - --icon__gemini-tools_download_neutral--disabled: url('#{$icons-path}gemini-tools/dark/download.svg#neutral--disabled'); - --icon__gemini-tools_download_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/download.svg#highlighted--enabled'); - --icon__gemini-tools_download_bright--enabled: url('#{$icons-path}gemini-tools/dark/download.svg#bright--enabled'); - --icon__gemini-tools_deleted_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#on-surface--enabled'); - --icon__gemini-tools_deleted_on-surface--hover: url('#{$icons-path}gemini-tools/dark/deleted.svg#on-surface--hover'); - --icon__gemini-tools_deleted_on-surface--active: url('#{$icons-path}gemini-tools/dark/deleted.svg#on-surface--active'); - --icon__gemini-tools_deleted_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#on-surface--disabled'); - --icon__gemini-tools_deleted_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#on-primary--enabled'); - --icon__gemini-tools_deleted_on-primary--hover: url('#{$icons-path}gemini-tools/dark/deleted.svg#on-primary--hover'); - --icon__gemini-tools_deleted_on-primary--active: url('#{$icons-path}gemini-tools/dark/deleted.svg#on-primary--active'); - --icon__gemini-tools_deleted_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#on-primary--disabled'); - --icon__gemini-tools_deleted_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#on-disabled--enabled'); - --icon__gemini-tools_deleted_on-message--enabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#on-message--enabled'); - --icon__gemini-tools_deleted_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#on-elevation--enabled'); - --icon__gemini-tools_deleted_primary--enabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#primary--enabled'); - --icon__gemini-tools_deleted_primary--hover: url('#{$icons-path}gemini-tools/dark/deleted.svg#primary--hover'); - --icon__gemini-tools_deleted_primary--active: url('#{$icons-path}gemini-tools/dark/deleted.svg#primary--active'); - --icon__gemini-tools_deleted_primary--disabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#primary--disabled'); - --icon__gemini-tools_deleted_neutral--enabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#neutral--enabled'); - --icon__gemini-tools_deleted_neutral--hover: url('#{$icons-path}gemini-tools/dark/deleted.svg#neutral--hover'); - --icon__gemini-tools_deleted_neutral--active: url('#{$icons-path}gemini-tools/dark/deleted.svg#neutral--active'); - --icon__gemini-tools_deleted_neutral--disabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#neutral--disabled'); - --icon__gemini-tools_deleted_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#highlighted--enabled'); - --icon__gemini-tools_deleted_bright--enabled: url('#{$icons-path}gemini-tools/dark/deleted.svg#bright--enabled'); - --icon__gemini-tools_delete_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/delete.svg#on-surface--enabled'); - --icon__gemini-tools_delete_on-surface--hover: url('#{$icons-path}gemini-tools/dark/delete.svg#on-surface--hover'); - --icon__gemini-tools_delete_on-surface--active: url('#{$icons-path}gemini-tools/dark/delete.svg#on-surface--active'); - --icon__gemini-tools_delete_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/delete.svg#on-surface--disabled'); - --icon__gemini-tools_delete_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/delete.svg#on-primary--enabled'); - --icon__gemini-tools_delete_on-primary--hover: url('#{$icons-path}gemini-tools/dark/delete.svg#on-primary--hover'); - --icon__gemini-tools_delete_on-primary--active: url('#{$icons-path}gemini-tools/dark/delete.svg#on-primary--active'); - --icon__gemini-tools_delete_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/delete.svg#on-primary--disabled'); - --icon__gemini-tools_delete_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/delete.svg#on-disabled--enabled'); - --icon__gemini-tools_delete_on-message--enabled: url('#{$icons-path}gemini-tools/dark/delete.svg#on-message--enabled'); - --icon__gemini-tools_delete_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/delete.svg#on-elevation--enabled'); - --icon__gemini-tools_delete_primary--enabled: url('#{$icons-path}gemini-tools/dark/delete.svg#primary--enabled'); - --icon__gemini-tools_delete_primary--hover: url('#{$icons-path}gemini-tools/dark/delete.svg#primary--hover'); - --icon__gemini-tools_delete_primary--active: url('#{$icons-path}gemini-tools/dark/delete.svg#primary--active'); - --icon__gemini-tools_delete_primary--disabled: url('#{$icons-path}gemini-tools/dark/delete.svg#primary--disabled'); - --icon__gemini-tools_delete_neutral--enabled: url('#{$icons-path}gemini-tools/dark/delete.svg#neutral--enabled'); - --icon__gemini-tools_delete_neutral--hover: url('#{$icons-path}gemini-tools/dark/delete.svg#neutral--hover'); - --icon__gemini-tools_delete_neutral--active: url('#{$icons-path}gemini-tools/dark/delete.svg#neutral--active'); - --icon__gemini-tools_delete_neutral--disabled: url('#{$icons-path}gemini-tools/dark/delete.svg#neutral--disabled'); - --icon__gemini-tools_delete_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/delete.svg#highlighted--enabled'); - --icon__gemini-tools_delete_bright--enabled: url('#{$icons-path}gemini-tools/dark/delete.svg#bright--enabled'); - --icon__gemini-tools_data-provider_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#on-surface--enabled'); - --icon__gemini-tools_data-provider_on-surface--hover: url('#{$icons-path}gemini-tools/dark/data-provider.svg#on-surface--hover'); - --icon__gemini-tools_data-provider_on-surface--active: url('#{$icons-path}gemini-tools/dark/data-provider.svg#on-surface--active'); - --icon__gemini-tools_data-provider_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#on-surface--disabled'); - --icon__gemini-tools_data-provider_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#on-primary--enabled'); - --icon__gemini-tools_data-provider_on-primary--hover: url('#{$icons-path}gemini-tools/dark/data-provider.svg#on-primary--hover'); - --icon__gemini-tools_data-provider_on-primary--active: url('#{$icons-path}gemini-tools/dark/data-provider.svg#on-primary--active'); - --icon__gemini-tools_data-provider_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#on-primary--disabled'); - --icon__gemini-tools_data-provider_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#on-disabled--enabled'); - --icon__gemini-tools_data-provider_on-message--enabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#on-message--enabled'); - --icon__gemini-tools_data-provider_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#on-elevation--enabled'); - --icon__gemini-tools_data-provider_primary--enabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#primary--enabled'); - --icon__gemini-tools_data-provider_primary--hover: url('#{$icons-path}gemini-tools/dark/data-provider.svg#primary--hover'); - --icon__gemini-tools_data-provider_primary--active: url('#{$icons-path}gemini-tools/dark/data-provider.svg#primary--active'); - --icon__gemini-tools_data-provider_primary--disabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#primary--disabled'); - --icon__gemini-tools_data-provider_neutral--enabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#neutral--enabled'); - --icon__gemini-tools_data-provider_neutral--hover: url('#{$icons-path}gemini-tools/dark/data-provider.svg#neutral--hover'); - --icon__gemini-tools_data-provider_neutral--active: url('#{$icons-path}gemini-tools/dark/data-provider.svg#neutral--active'); - --icon__gemini-tools_data-provider_neutral--disabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#neutral--disabled'); - --icon__gemini-tools_data-provider_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#highlighted--enabled'); - --icon__gemini-tools_data-provider_bright--enabled: url('#{$icons-path}gemini-tools/dark/data-provider.svg#bright--enabled'); - --icon__gemini-tools_copy_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/copy.svg#on-surface--enabled'); - --icon__gemini-tools_copy_on-surface--hover: url('#{$icons-path}gemini-tools/dark/copy.svg#on-surface--hover'); - --icon__gemini-tools_copy_on-surface--active: url('#{$icons-path}gemini-tools/dark/copy.svg#on-surface--active'); - --icon__gemini-tools_copy_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/copy.svg#on-surface--disabled'); - --icon__gemini-tools_copy_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/copy.svg#on-primary--enabled'); - --icon__gemini-tools_copy_on-primary--hover: url('#{$icons-path}gemini-tools/dark/copy.svg#on-primary--hover'); - --icon__gemini-tools_copy_on-primary--active: url('#{$icons-path}gemini-tools/dark/copy.svg#on-primary--active'); - --icon__gemini-tools_copy_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/copy.svg#on-primary--disabled'); - --icon__gemini-tools_copy_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/copy.svg#on-disabled--enabled'); - --icon__gemini-tools_copy_on-message--enabled: url('#{$icons-path}gemini-tools/dark/copy.svg#on-message--enabled'); - --icon__gemini-tools_copy_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/copy.svg#on-elevation--enabled'); - --icon__gemini-tools_copy_primary--enabled: url('#{$icons-path}gemini-tools/dark/copy.svg#primary--enabled'); - --icon__gemini-tools_copy_primary--hover: url('#{$icons-path}gemini-tools/dark/copy.svg#primary--hover'); - --icon__gemini-tools_copy_primary--active: url('#{$icons-path}gemini-tools/dark/copy.svg#primary--active'); - --icon__gemini-tools_copy_primary--disabled: url('#{$icons-path}gemini-tools/dark/copy.svg#primary--disabled'); - --icon__gemini-tools_copy_neutral--enabled: url('#{$icons-path}gemini-tools/dark/copy.svg#neutral--enabled'); - --icon__gemini-tools_copy_neutral--hover: url('#{$icons-path}gemini-tools/dark/copy.svg#neutral--hover'); - --icon__gemini-tools_copy_neutral--active: url('#{$icons-path}gemini-tools/dark/copy.svg#neutral--active'); - --icon__gemini-tools_copy_neutral--disabled: url('#{$icons-path}gemini-tools/dark/copy.svg#neutral--disabled'); - --icon__gemini-tools_copy_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/copy.svg#highlighted--enabled'); - --icon__gemini-tools_copy_bright--enabled: url('#{$icons-path}gemini-tools/dark/copy.svg#bright--enabled'); - --icon__gemini-tools_copy-to-clipboard_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#on-surface--enabled'); - --icon__gemini-tools_copy-to-clipboard_on-surface--hover: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#on-surface--hover'); - --icon__gemini-tools_copy-to-clipboard_on-surface--active: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#on-surface--active'); - --icon__gemini-tools_copy-to-clipboard_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#on-surface--disabled'); - --icon__gemini-tools_copy-to-clipboard_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#on-primary--enabled'); - --icon__gemini-tools_copy-to-clipboard_on-primary--hover: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#on-primary--hover'); - --icon__gemini-tools_copy-to-clipboard_on-primary--active: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#on-primary--active'); - --icon__gemini-tools_copy-to-clipboard_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#on-primary--disabled'); - --icon__gemini-tools_copy-to-clipboard_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#on-disabled--enabled'); - --icon__gemini-tools_copy-to-clipboard_on-message--enabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#on-message--enabled'); - --icon__gemini-tools_copy-to-clipboard_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#on-elevation--enabled'); - --icon__gemini-tools_copy-to-clipboard_primary--enabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#primary--enabled'); - --icon__gemini-tools_copy-to-clipboard_primary--hover: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#primary--hover'); - --icon__gemini-tools_copy-to-clipboard_primary--active: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#primary--active'); - --icon__gemini-tools_copy-to-clipboard_primary--disabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#primary--disabled'); - --icon__gemini-tools_copy-to-clipboard_neutral--enabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#neutral--enabled'); - --icon__gemini-tools_copy-to-clipboard_neutral--hover: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#neutral--hover'); - --icon__gemini-tools_copy-to-clipboard_neutral--active: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#neutral--active'); - --icon__gemini-tools_copy-to-clipboard_neutral--disabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#neutral--disabled'); - --icon__gemini-tools_copy-to-clipboard_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#highlighted--enabled'); - --icon__gemini-tools_copy-to-clipboard_bright--enabled: url('#{$icons-path}gemini-tools/dark/copy-to-clipboard.svg#bright--enabled'); - --icon__gemini-tools_color-picker_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#on-surface--enabled'); - --icon__gemini-tools_color-picker_on-surface--hover: url('#{$icons-path}gemini-tools/dark/color-picker.svg#on-surface--hover'); - --icon__gemini-tools_color-picker_on-surface--active: url('#{$icons-path}gemini-tools/dark/color-picker.svg#on-surface--active'); - --icon__gemini-tools_color-picker_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#on-surface--disabled'); - --icon__gemini-tools_color-picker_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#on-primary--enabled'); - --icon__gemini-tools_color-picker_on-primary--hover: url('#{$icons-path}gemini-tools/dark/color-picker.svg#on-primary--hover'); - --icon__gemini-tools_color-picker_on-primary--active: url('#{$icons-path}gemini-tools/dark/color-picker.svg#on-primary--active'); - --icon__gemini-tools_color-picker_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#on-primary--disabled'); - --icon__gemini-tools_color-picker_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#on-disabled--enabled'); - --icon__gemini-tools_color-picker_on-message--enabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#on-message--enabled'); - --icon__gemini-tools_color-picker_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#on-elevation--enabled'); - --icon__gemini-tools_color-picker_primary--enabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#primary--enabled'); - --icon__gemini-tools_color-picker_primary--hover: url('#{$icons-path}gemini-tools/dark/color-picker.svg#primary--hover'); - --icon__gemini-tools_color-picker_primary--active: url('#{$icons-path}gemini-tools/dark/color-picker.svg#primary--active'); - --icon__gemini-tools_color-picker_primary--disabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#primary--disabled'); - --icon__gemini-tools_color-picker_neutral--enabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#neutral--enabled'); - --icon__gemini-tools_color-picker_neutral--hover: url('#{$icons-path}gemini-tools/dark/color-picker.svg#neutral--hover'); - --icon__gemini-tools_color-picker_neutral--active: url('#{$icons-path}gemini-tools/dark/color-picker.svg#neutral--active'); - --icon__gemini-tools_color-picker_neutral--disabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#neutral--disabled'); - --icon__gemini-tools_color-picker_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#highlighted--enabled'); - --icon__gemini-tools_color-picker_bright--enabled: url('#{$icons-path}gemini-tools/dark/color-picker.svg#bright--enabled'); - --icon__gemini-tools_close_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/close.svg#on-surface--enabled'); - --icon__gemini-tools_close_on-surface--hover: url('#{$icons-path}gemini-tools/dark/close.svg#on-surface--hover'); - --icon__gemini-tools_close_on-surface--active: url('#{$icons-path}gemini-tools/dark/close.svg#on-surface--active'); - --icon__gemini-tools_close_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/close.svg#on-surface--disabled'); - --icon__gemini-tools_close_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/close.svg#on-primary--enabled'); - --icon__gemini-tools_close_on-primary--hover: url('#{$icons-path}gemini-tools/dark/close.svg#on-primary--hover'); - --icon__gemini-tools_close_on-primary--active: url('#{$icons-path}gemini-tools/dark/close.svg#on-primary--active'); - --icon__gemini-tools_close_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/close.svg#on-primary--disabled'); - --icon__gemini-tools_close_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/close.svg#on-disabled--enabled'); - --icon__gemini-tools_close_on-message--enabled: url('#{$icons-path}gemini-tools/dark/close.svg#on-message--enabled'); - --icon__gemini-tools_close_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/close.svg#on-elevation--enabled'); - --icon__gemini-tools_close_primary--enabled: url('#{$icons-path}gemini-tools/dark/close.svg#primary--enabled'); - --icon__gemini-tools_close_primary--hover: url('#{$icons-path}gemini-tools/dark/close.svg#primary--hover'); - --icon__gemini-tools_close_primary--active: url('#{$icons-path}gemini-tools/dark/close.svg#primary--active'); - --icon__gemini-tools_close_primary--disabled: url('#{$icons-path}gemini-tools/dark/close.svg#primary--disabled'); - --icon__gemini-tools_close_neutral--enabled: url('#{$icons-path}gemini-tools/dark/close.svg#neutral--enabled'); - --icon__gemini-tools_close_neutral--hover: url('#{$icons-path}gemini-tools/dark/close.svg#neutral--hover'); - --icon__gemini-tools_close_neutral--active: url('#{$icons-path}gemini-tools/dark/close.svg#neutral--active'); - --icon__gemini-tools_close_neutral--disabled: url('#{$icons-path}gemini-tools/dark/close.svg#neutral--disabled'); - --icon__gemini-tools_close_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/close.svg#highlighted--enabled'); - --icon__gemini-tools_close_bright--enabled: url('#{$icons-path}gemini-tools/dark/close.svg#bright--enabled'); - --icon__gemini-tools_category-ungroup_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#on-surface--enabled'); - --icon__gemini-tools_category-ungroup_on-surface--hover: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#on-surface--hover'); - --icon__gemini-tools_category-ungroup_on-surface--active: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#on-surface--active'); - --icon__gemini-tools_category-ungroup_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#on-surface--disabled'); - --icon__gemini-tools_category-ungroup_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#on-primary--enabled'); - --icon__gemini-tools_category-ungroup_on-primary--hover: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#on-primary--hover'); - --icon__gemini-tools_category-ungroup_on-primary--active: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#on-primary--active'); - --icon__gemini-tools_category-ungroup_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#on-primary--disabled'); - --icon__gemini-tools_category-ungroup_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#on-disabled--enabled'); - --icon__gemini-tools_category-ungroup_on-message--enabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#on-message--enabled'); - --icon__gemini-tools_category-ungroup_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#on-elevation--enabled'); - --icon__gemini-tools_category-ungroup_primary--enabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#primary--enabled'); - --icon__gemini-tools_category-ungroup_primary--hover: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#primary--hover'); - --icon__gemini-tools_category-ungroup_primary--active: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#primary--active'); - --icon__gemini-tools_category-ungroup_primary--disabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#primary--disabled'); - --icon__gemini-tools_category-ungroup_neutral--enabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#neutral--enabled'); - --icon__gemini-tools_category-ungroup_neutral--hover: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#neutral--hover'); - --icon__gemini-tools_category-ungroup_neutral--active: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#neutral--active'); - --icon__gemini-tools_category-ungroup_neutral--disabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#neutral--disabled'); - --icon__gemini-tools_category-ungroup_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#highlighted--enabled'); - --icon__gemini-tools_category-ungroup_bright--enabled: url('#{$icons-path}gemini-tools/dark/category-ungroup.svg#bright--enabled'); - --icon__gemini-tools_category-group_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#on-surface--enabled'); - --icon__gemini-tools_category-group_on-surface--hover: url('#{$icons-path}gemini-tools/dark/category-group.svg#on-surface--hover'); - --icon__gemini-tools_category-group_on-surface--active: url('#{$icons-path}gemini-tools/dark/category-group.svg#on-surface--active'); - --icon__gemini-tools_category-group_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#on-surface--disabled'); - --icon__gemini-tools_category-group_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#on-primary--enabled'); - --icon__gemini-tools_category-group_on-primary--hover: url('#{$icons-path}gemini-tools/dark/category-group.svg#on-primary--hover'); - --icon__gemini-tools_category-group_on-primary--active: url('#{$icons-path}gemini-tools/dark/category-group.svg#on-primary--active'); - --icon__gemini-tools_category-group_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#on-primary--disabled'); - --icon__gemini-tools_category-group_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#on-disabled--enabled'); - --icon__gemini-tools_category-group_on-message--enabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#on-message--enabled'); - --icon__gemini-tools_category-group_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#on-elevation--enabled'); - --icon__gemini-tools_category-group_primary--enabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#primary--enabled'); - --icon__gemini-tools_category-group_primary--hover: url('#{$icons-path}gemini-tools/dark/category-group.svg#primary--hover'); - --icon__gemini-tools_category-group_primary--active: url('#{$icons-path}gemini-tools/dark/category-group.svg#primary--active'); - --icon__gemini-tools_category-group_primary--disabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#primary--disabled'); - --icon__gemini-tools_category-group_neutral--enabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#neutral--enabled'); - --icon__gemini-tools_category-group_neutral--hover: url('#{$icons-path}gemini-tools/dark/category-group.svg#neutral--hover'); - --icon__gemini-tools_category-group_neutral--active: url('#{$icons-path}gemini-tools/dark/category-group.svg#neutral--active'); - --icon__gemini-tools_category-group_neutral--disabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#neutral--disabled'); - --icon__gemini-tools_category-group_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#highlighted--enabled'); - --icon__gemini-tools_category-group_bright--enabled: url('#{$icons-path}gemini-tools/dark/category-group.svg#bright--enabled'); - --icon__gemini-tools_card-view_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#on-surface--enabled'); - --icon__gemini-tools_card-view_on-surface--hover: url('#{$icons-path}gemini-tools/dark/card-view.svg#on-surface--hover'); - --icon__gemini-tools_card-view_on-surface--active: url('#{$icons-path}gemini-tools/dark/card-view.svg#on-surface--active'); - --icon__gemini-tools_card-view_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#on-surface--disabled'); - --icon__gemini-tools_card-view_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#on-primary--enabled'); - --icon__gemini-tools_card-view_on-primary--hover: url('#{$icons-path}gemini-tools/dark/card-view.svg#on-primary--hover'); - --icon__gemini-tools_card-view_on-primary--active: url('#{$icons-path}gemini-tools/dark/card-view.svg#on-primary--active'); - --icon__gemini-tools_card-view_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#on-primary--disabled'); - --icon__gemini-tools_card-view_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#on-disabled--enabled'); - --icon__gemini-tools_card-view_on-message--enabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#on-message--enabled'); - --icon__gemini-tools_card-view_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#on-elevation--enabled'); - --icon__gemini-tools_card-view_primary--enabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#primary--enabled'); - --icon__gemini-tools_card-view_primary--hover: url('#{$icons-path}gemini-tools/dark/card-view.svg#primary--hover'); - --icon__gemini-tools_card-view_primary--active: url('#{$icons-path}gemini-tools/dark/card-view.svg#primary--active'); - --icon__gemini-tools_card-view_primary--disabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#primary--disabled'); - --icon__gemini-tools_card-view_neutral--enabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#neutral--enabled'); - --icon__gemini-tools_card-view_neutral--hover: url('#{$icons-path}gemini-tools/dark/card-view.svg#neutral--hover'); - --icon__gemini-tools_card-view_neutral--active: url('#{$icons-path}gemini-tools/dark/card-view.svg#neutral--active'); - --icon__gemini-tools_card-view_neutral--disabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#neutral--disabled'); - --icon__gemini-tools_card-view_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#highlighted--enabled'); - --icon__gemini-tools_card-view_bright--enabled: url('#{$icons-path}gemini-tools/dark/card-view.svg#bright--enabled'); - --icon__gemini-tools_add_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/add.svg#on-surface--enabled'); - --icon__gemini-tools_add_on-surface--hover: url('#{$icons-path}gemini-tools/dark/add.svg#on-surface--hover'); - --icon__gemini-tools_add_on-surface--active: url('#{$icons-path}gemini-tools/dark/add.svg#on-surface--active'); - --icon__gemini-tools_add_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/add.svg#on-surface--disabled'); - --icon__gemini-tools_add_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/add.svg#on-primary--enabled'); - --icon__gemini-tools_add_on-primary--hover: url('#{$icons-path}gemini-tools/dark/add.svg#on-primary--hover'); - --icon__gemini-tools_add_on-primary--active: url('#{$icons-path}gemini-tools/dark/add.svg#on-primary--active'); - --icon__gemini-tools_add_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/add.svg#on-primary--disabled'); - --icon__gemini-tools_add_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/add.svg#on-disabled--enabled'); - --icon__gemini-tools_add_on-message--enabled: url('#{$icons-path}gemini-tools/dark/add.svg#on-message--enabled'); - --icon__gemini-tools_add_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/add.svg#on-elevation--enabled'); - --icon__gemini-tools_add_primary--enabled: url('#{$icons-path}gemini-tools/dark/add.svg#primary--enabled'); - --icon__gemini-tools_add_primary--hover: url('#{$icons-path}gemini-tools/dark/add.svg#primary--hover'); - --icon__gemini-tools_add_primary--active: url('#{$icons-path}gemini-tools/dark/add.svg#primary--active'); - --icon__gemini-tools_add_primary--disabled: url('#{$icons-path}gemini-tools/dark/add.svg#primary--disabled'); - --icon__gemini-tools_add_neutral--enabled: url('#{$icons-path}gemini-tools/dark/add.svg#neutral--enabled'); - --icon__gemini-tools_add_neutral--hover: url('#{$icons-path}gemini-tools/dark/add.svg#neutral--hover'); - --icon__gemini-tools_add_neutral--active: url('#{$icons-path}gemini-tools/dark/add.svg#neutral--active'); - --icon__gemini-tools_add_neutral--disabled: url('#{$icons-path}gemini-tools/dark/add.svg#neutral--disabled'); - --icon__gemini-tools_add_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/add.svg#highlighted--enabled'); - --icon__gemini-tools_add_bright--enabled: url('#{$icons-path}gemini-tools/dark/add.svg#bright--enabled'); - --icon__gemini-tools_add-circle_on-surface--enabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#on-surface--enabled'); - --icon__gemini-tools_add-circle_on-surface--hover: url('#{$icons-path}gemini-tools/dark/add-circle.svg#on-surface--hover'); - --icon__gemini-tools_add-circle_on-surface--active: url('#{$icons-path}gemini-tools/dark/add-circle.svg#on-surface--active'); - --icon__gemini-tools_add-circle_on-surface--disabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#on-surface--disabled'); - --icon__gemini-tools_add-circle_on-primary--enabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#on-primary--enabled'); - --icon__gemini-tools_add-circle_on-primary--hover: url('#{$icons-path}gemini-tools/dark/add-circle.svg#on-primary--hover'); - --icon__gemini-tools_add-circle_on-primary--active: url('#{$icons-path}gemini-tools/dark/add-circle.svg#on-primary--active'); - --icon__gemini-tools_add-circle_on-primary--disabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#on-primary--disabled'); - --icon__gemini-tools_add-circle_on-disabled--enabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#on-disabled--enabled'); - --icon__gemini-tools_add-circle_on-message--enabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#on-message--enabled'); - --icon__gemini-tools_add-circle_on-elevation--enabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#on-elevation--enabled'); - --icon__gemini-tools_add-circle_primary--enabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#primary--enabled'); - --icon__gemini-tools_add-circle_primary--hover: url('#{$icons-path}gemini-tools/dark/add-circle.svg#primary--hover'); - --icon__gemini-tools_add-circle_primary--active: url('#{$icons-path}gemini-tools/dark/add-circle.svg#primary--active'); - --icon__gemini-tools_add-circle_primary--disabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#primary--disabled'); - --icon__gemini-tools_add-circle_neutral--enabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#neutral--enabled'); - --icon__gemini-tools_add-circle_neutral--hover: url('#{$icons-path}gemini-tools/dark/add-circle.svg#neutral--hover'); - --icon__gemini-tools_add-circle_neutral--active: url('#{$icons-path}gemini-tools/dark/add-circle.svg#neutral--active'); - --icon__gemini-tools_add-circle_neutral--disabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#neutral--disabled'); - --icon__gemini-tools_add-circle_highlighted--enabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#highlighted--enabled'); - --icon__gemini-tools_add-circle_bright--enabled: url('#{$icons-path}gemini-tools/dark/add-circle.svg#bright--enabled'); - - } - - - /* ================================= - LIGHT CUSTOM PROPERTIES - ================================= */ - - :root.light { - /*bpm*/ - --icon__bpm_timer-6_neutral--enabled: url('#{$icons-path}bpm/light/timer-6.svg#neutral--enabled'); - --icon__bpm_timer-6_neutral--hover: url('#{$icons-path}bpm/light/timer-6.svg#neutral--hover'); - --icon__bpm_timer-6_neutral--active: url('#{$icons-path}bpm/light/timer-6.svg#neutral--active'); - --icon__bpm_timer-6_neutral--disabled: url('#{$icons-path}bpm/light/timer-6.svg#neutral--disabled'); - --icon__bpm_timer-5_neutral--enabled: url('#{$icons-path}bpm/light/timer-5.svg#neutral--enabled'); - --icon__bpm_timer-5_neutral--hover: url('#{$icons-path}bpm/light/timer-5.svg#neutral--hover'); - --icon__bpm_timer-5_neutral--active: url('#{$icons-path}bpm/light/timer-5.svg#neutral--active'); - --icon__bpm_timer-5_neutral--disabled: url('#{$icons-path}bpm/light/timer-5.svg#neutral--disabled'); - --icon__bpm_timer-2_neutral--enabled: url('#{$icons-path}bpm/light/timer-2.svg#neutral--enabled'); - --icon__bpm_timer-2_neutral--hover: url('#{$icons-path}bpm/light/timer-2.svg#neutral--hover'); - --icon__bpm_timer-2_neutral--active: url('#{$icons-path}bpm/light/timer-2.svg#neutral--active'); - --icon__bpm_timer-2_neutral--disabled: url('#{$icons-path}bpm/light/timer-2.svg#neutral--disabled'); - --icon__bpm_timer-1_neutral--enabled: url('#{$icons-path}bpm/light/timer-1.svg#neutral--enabled'); - --icon__bpm_timer-1_neutral--hover: url('#{$icons-path}bpm/light/timer-1.svg#neutral--hover'); - --icon__bpm_timer-1_neutral--active: url('#{$icons-path}bpm/light/timer-1.svg#neutral--active'); - --icon__bpm_timer-1_neutral--disabled: url('#{$icons-path}bpm/light/timer-1.svg#neutral--disabled'); - --icon__bpm_terminale-4_neutral--enabled: url('#{$icons-path}bpm/light/terminale-4.svg#neutral--enabled'); - --icon__bpm_terminale-4_neutral--hover: url('#{$icons-path}bpm/light/terminale-4.svg#neutral--hover'); - --icon__bpm_terminale-4_neutral--active: url('#{$icons-path}bpm/light/terminale-4.svg#neutral--active'); - --icon__bpm_terminale-4_neutral--disabled: url('#{$icons-path}bpm/light/terminale-4.svg#neutral--disabled'); - --icon__bpm_tasks_neutral--enabled: url('#{$icons-path}bpm/light/tasks.svg#neutral--enabled'); - --icon__bpm_tasks_neutral--hover: url('#{$icons-path}bpm/light/tasks.svg#neutral--hover'); - --icon__bpm_tasks_neutral--active: url('#{$icons-path}bpm/light/tasks.svg#neutral--active'); - --icon__bpm_tasks_neutral--disabled: url('#{$icons-path}bpm/light/tasks.svg#neutral--disabled'); - --icon__bpm_subprocess_neutral--enabled: url('#{$icons-path}bpm/light/subprocess.svg#neutral--enabled'); - --icon__bpm_subprocess_neutral--hover: url('#{$icons-path}bpm/light/subprocess.svg#neutral--hover'); - --icon__bpm_subprocess_neutral--active: url('#{$icons-path}bpm/light/subprocess.svg#neutral--active'); - --icon__bpm_subprocess_neutral--disabled: url('#{$icons-path}bpm/light/subprocess.svg#neutral--disabled'); - --icon__bpm_signal-6_neutral--enabled: url('#{$icons-path}bpm/light/signal-6.svg#neutral--enabled'); - --icon__bpm_signal-6_neutral--hover: url('#{$icons-path}bpm/light/signal-6.svg#neutral--hover'); - --icon__bpm_signal-6_neutral--active: url('#{$icons-path}bpm/light/signal-6.svg#neutral--active'); - --icon__bpm_signal-6_neutral--disabled: url('#{$icons-path}bpm/light/signal-6.svg#neutral--disabled'); - --icon__bpm_signal-5_neutral--enabled: url('#{$icons-path}bpm/light/signal-5.svg#neutral--enabled'); - --icon__bpm_signal-5_neutral--hover: url('#{$icons-path}bpm/light/signal-5.svg#neutral--hover'); - --icon__bpm_signal-5_neutral--active: url('#{$icons-path}bpm/light/signal-5.svg#neutral--active'); - --icon__bpm_signal-5_neutral--disabled: url('#{$icons-path}bpm/light/signal-5.svg#neutral--disabled'); - --icon__bpm_signal-4_neutral--enabled: url('#{$icons-path}bpm/light/signal-4.svg#neutral--enabled'); - --icon__bpm_signal-4_neutral--hover: url('#{$icons-path}bpm/light/signal-4.svg#neutral--hover'); - --icon__bpm_signal-4_neutral--active: url('#{$icons-path}bpm/light/signal-4.svg#neutral--active'); - --icon__bpm_signal-4_neutral--disabled: url('#{$icons-path}bpm/light/signal-4.svg#neutral--disabled'); - --icon__bpm_signal-3_neutral--enabled: url('#{$icons-path}bpm/light/signal-3.svg#neutral--enabled'); - --icon__bpm_signal-3_neutral--hover: url('#{$icons-path}bpm/light/signal-3.svg#neutral--hover'); - --icon__bpm_signal-3_neutral--active: url('#{$icons-path}bpm/light/signal-3.svg#neutral--active'); - --icon__bpm_signal-3_neutral--disabled: url('#{$icons-path}bpm/light/signal-3.svg#neutral--disabled'); - --icon__bpm_signal-2_neutral--enabled: url('#{$icons-path}bpm/light/signal-2.svg#neutral--enabled'); - --icon__bpm_signal-2_neutral--hover: url('#{$icons-path}bpm/light/signal-2.svg#neutral--hover'); - --icon__bpm_signal-2_neutral--active: url('#{$icons-path}bpm/light/signal-2.svg#neutral--active'); - --icon__bpm_signal-2_neutral--disabled: url('#{$icons-path}bpm/light/signal-2.svg#neutral--disabled'); - --icon__bpm_signal-1_neutral--enabled: url('#{$icons-path}bpm/light/signal-1.svg#neutral--enabled'); - --icon__bpm_signal-1_neutral--hover: url('#{$icons-path}bpm/light/signal-1.svg#neutral--hover'); - --icon__bpm_signal-1_neutral--active: url('#{$icons-path}bpm/light/signal-1.svg#neutral--active'); - --icon__bpm_signal-1_neutral--disabled: url('#{$icons-path}bpm/light/signal-1.svg#neutral--disabled'); - --icon__bpm_person_neutral--enabled: url('#{$icons-path}bpm/light/person.svg#neutral--enabled'); - --icon__bpm_person_neutral--hover: url('#{$icons-path}bpm/light/person.svg#neutral--hover'); - --icon__bpm_person_neutral--active: url('#{$icons-path}bpm/light/person.svg#neutral--active'); - --icon__bpm_person_neutral--disabled: url('#{$icons-path}bpm/light/person.svg#neutral--disabled'); - --icon__bpm_paralell-4_neutral--enabled: url('#{$icons-path}bpm/light/paralell-4.svg#neutral--enabled'); - --icon__bpm_paralell-4_neutral--hover: url('#{$icons-path}bpm/light/paralell-4.svg#neutral--hover'); - --icon__bpm_paralell-4_neutral--active: url('#{$icons-path}bpm/light/paralell-4.svg#neutral--active'); - --icon__bpm_paralell-4_neutral--disabled: url('#{$icons-path}bpm/light/paralell-4.svg#neutral--disabled'); - --icon__bpm_paralell-3_neutral--enabled: url('#{$icons-path}bpm/light/paralell-3.svg#neutral--enabled'); - --icon__bpm_paralell-3_neutral--hover: url('#{$icons-path}bpm/light/paralell-3.svg#neutral--hover'); - --icon__bpm_paralell-3_neutral--active: url('#{$icons-path}bpm/light/paralell-3.svg#neutral--active'); - --icon__bpm_paralell-3_neutral--disabled: url('#{$icons-path}bpm/light/paralell-3.svg#neutral--disabled'); - --icon__bpm_paralell-2_neutral--enabled: url('#{$icons-path}bpm/light/paralell-2.svg#neutral--enabled'); - --icon__bpm_paralell-2_neutral--hover: url('#{$icons-path}bpm/light/paralell-2.svg#neutral--hover'); - --icon__bpm_paralell-2_neutral--active: url('#{$icons-path}bpm/light/paralell-2.svg#neutral--active'); - --icon__bpm_paralell-2_neutral--disabled: url('#{$icons-path}bpm/light/paralell-2.svg#neutral--disabled'); - --icon__bpm_paralell-1_neutral--enabled: url('#{$icons-path}bpm/light/paralell-1.svg#neutral--enabled'); - --icon__bpm_paralell-1_neutral--hover: url('#{$icons-path}bpm/light/paralell-1.svg#neutral--hover'); - --icon__bpm_paralell-1_neutral--active: url('#{$icons-path}bpm/light/paralell-1.svg#neutral--active'); - --icon__bpm_paralell-1_neutral--disabled: url('#{$icons-path}bpm/light/paralell-1.svg#neutral--disabled'); - --icon__bpm_oval_neutral--enabled: url('#{$icons-path}bpm/light/oval.svg#neutral--enabled'); - --icon__bpm_oval_neutral--hover: url('#{$icons-path}bpm/light/oval.svg#neutral--hover'); - --icon__bpm_oval_neutral--active: url('#{$icons-path}bpm/light/oval.svg#neutral--active'); - --icon__bpm_oval_neutral--disabled: url('#{$icons-path}bpm/light/oval.svg#neutral--disabled'); - --icon__bpm_oval-doble_neutral--enabled: url('#{$icons-path}bpm/light/oval-doble.svg#neutral--enabled'); - --icon__bpm_oval-doble_neutral--hover: url('#{$icons-path}bpm/light/oval-doble.svg#neutral--hover'); - --icon__bpm_oval-doble_neutral--active: url('#{$icons-path}bpm/light/oval-doble.svg#neutral--active'); - --icon__bpm_oval-doble_neutral--disabled: url('#{$icons-path}bpm/light/oval-doble.svg#neutral--disabled'); - --icon__bpm_multiple-6_neutral--enabled: url('#{$icons-path}bpm/light/multiple-6.svg#neutral--enabled'); - --icon__bpm_multiple-6_neutral--hover: url('#{$icons-path}bpm/light/multiple-6.svg#neutral--hover'); - --icon__bpm_multiple-6_neutral--active: url('#{$icons-path}bpm/light/multiple-6.svg#neutral--active'); - --icon__bpm_multiple-6_neutral--disabled: url('#{$icons-path}bpm/light/multiple-6.svg#neutral--disabled'); - --icon__bpm_multiple-5_neutral--enabled: url('#{$icons-path}bpm/light/multiple-5.svg#neutral--enabled'); - --icon__bpm_multiple-5_neutral--hover: url('#{$icons-path}bpm/light/multiple-5.svg#neutral--hover'); - --icon__bpm_multiple-5_neutral--active: url('#{$icons-path}bpm/light/multiple-5.svg#neutral--active'); - --icon__bpm_multiple-5_neutral--disabled: url('#{$icons-path}bpm/light/multiple-5.svg#neutral--disabled'); - --icon__bpm_multiple-4_neutral--enabled: url('#{$icons-path}bpm/light/multiple-4.svg#neutral--enabled'); - --icon__bpm_multiple-4_neutral--hover: url('#{$icons-path}bpm/light/multiple-4.svg#neutral--hover'); - --icon__bpm_multiple-4_neutral--active: url('#{$icons-path}bpm/light/multiple-4.svg#neutral--active'); - --icon__bpm_multiple-4_neutral--disabled: url('#{$icons-path}bpm/light/multiple-4.svg#neutral--disabled'); - --icon__bpm_multiple-3_neutral--enabled: url('#{$icons-path}bpm/light/multiple-3.svg#neutral--enabled'); - --icon__bpm_multiple-3_neutral--hover: url('#{$icons-path}bpm/light/multiple-3.svg#neutral--hover'); - --icon__bpm_multiple-3_neutral--active: url('#{$icons-path}bpm/light/multiple-3.svg#neutral--active'); - --icon__bpm_multiple-3_neutral--disabled: url('#{$icons-path}bpm/light/multiple-3.svg#neutral--disabled'); - --icon__bpm_multiple-2_neutral--enabled: url('#{$icons-path}bpm/light/multiple-2.svg#neutral--enabled'); - --icon__bpm_multiple-2_neutral--hover: url('#{$icons-path}bpm/light/multiple-2.svg#neutral--hover'); - --icon__bpm_multiple-2_neutral--active: url('#{$icons-path}bpm/light/multiple-2.svg#neutral--active'); - --icon__bpm_multiple-2_neutral--disabled: url('#{$icons-path}bpm/light/multiple-2.svg#neutral--disabled'); - --icon__bpm_multiple-1_neutral--enabled: url('#{$icons-path}bpm/light/multiple-1.svg#neutral--enabled'); - --icon__bpm_multiple-1_neutral--hover: url('#{$icons-path}bpm/light/multiple-1.svg#neutral--hover'); - --icon__bpm_multiple-1_neutral--active: url('#{$icons-path}bpm/light/multiple-1.svg#neutral--active'); - --icon__bpm_multiple-1_neutral--disabled: url('#{$icons-path}bpm/light/multiple-1.svg#neutral--disabled'); - --icon__bpm_message-6_neutral--enabled: url('#{$icons-path}bpm/light/message-6.svg#neutral--enabled'); - --icon__bpm_message-6_neutral--hover: url('#{$icons-path}bpm/light/message-6.svg#neutral--hover'); - --icon__bpm_message-6_neutral--active: url('#{$icons-path}bpm/light/message-6.svg#neutral--active'); - --icon__bpm_message-6_neutral--disabled: url('#{$icons-path}bpm/light/message-6.svg#neutral--disabled'); - --icon__bpm_message-5_neutral--enabled: url('#{$icons-path}bpm/light/message-5.svg#neutral--enabled'); - --icon__bpm_message-5_neutral--hover: url('#{$icons-path}bpm/light/message-5.svg#neutral--hover'); - --icon__bpm_message-5_neutral--active: url('#{$icons-path}bpm/light/message-5.svg#neutral--active'); - --icon__bpm_message-5_neutral--disabled: url('#{$icons-path}bpm/light/message-5.svg#neutral--disabled'); - --icon__bpm_message-4_neutral--enabled: url('#{$icons-path}bpm/light/message-4.svg#neutral--enabled'); - --icon__bpm_message-4_neutral--hover: url('#{$icons-path}bpm/light/message-4.svg#neutral--hover'); - --icon__bpm_message-4_neutral--active: url('#{$icons-path}bpm/light/message-4.svg#neutral--active'); - --icon__bpm_message-4_neutral--disabled: url('#{$icons-path}bpm/light/message-4.svg#neutral--disabled'); - --icon__bpm_message-3_neutral--enabled: url('#{$icons-path}bpm/light/message-3.svg#neutral--enabled'); - --icon__bpm_message-3_neutral--hover: url('#{$icons-path}bpm/light/message-3.svg#neutral--hover'); - --icon__bpm_message-3_neutral--active: url('#{$icons-path}bpm/light/message-3.svg#neutral--active'); - --icon__bpm_message-3_neutral--disabled: url('#{$icons-path}bpm/light/message-3.svg#neutral--disabled'); - --icon__bpm_message-2_neutral--enabled: url('#{$icons-path}bpm/light/message-2.svg#neutral--enabled'); - --icon__bpm_message-2_neutral--hover: url('#{$icons-path}bpm/light/message-2.svg#neutral--hover'); - --icon__bpm_message-2_neutral--active: url('#{$icons-path}bpm/light/message-2.svg#neutral--active'); - --icon__bpm_message-2_neutral--disabled: url('#{$icons-path}bpm/light/message-2.svg#neutral--disabled'); - --icon__bpm_message-1_neutral--enabled: url('#{$icons-path}bpm/light/message-1.svg#neutral--enabled'); - --icon__bpm_message-1_neutral--hover: url('#{$icons-path}bpm/light/message-1.svg#neutral--hover'); - --icon__bpm_message-1_neutral--active: url('#{$icons-path}bpm/light/message-1.svg#neutral--active'); - --icon__bpm_message-1_neutral--disabled: url('#{$icons-path}bpm/light/message-1.svg#neutral--disabled'); - --icon__bpm_link-4_neutral--enabled: url('#{$icons-path}bpm/light/link-4.svg#neutral--enabled'); - --icon__bpm_link-4_neutral--hover: url('#{$icons-path}bpm/light/link-4.svg#neutral--hover'); - --icon__bpm_link-4_neutral--active: url('#{$icons-path}bpm/light/link-4.svg#neutral--active'); - --icon__bpm_link-4_neutral--disabled: url('#{$icons-path}bpm/light/link-4.svg#neutral--disabled'); - --icon__bpm_link-3_neutral--enabled: url('#{$icons-path}bpm/light/link-3.svg#neutral--enabled'); - --icon__bpm_link-3_neutral--hover: url('#{$icons-path}bpm/light/link-3.svg#neutral--hover'); - --icon__bpm_link-3_neutral--active: url('#{$icons-path}bpm/light/link-3.svg#neutral--active'); - --icon__bpm_link-3_neutral--disabled: url('#{$icons-path}bpm/light/link-3.svg#neutral--disabled'); - --icon__bpm_escalation-6_neutral--enabled: url('#{$icons-path}bpm/light/escalation-6.svg#neutral--enabled'); - --icon__bpm_escalation-6_neutral--hover: url('#{$icons-path}bpm/light/escalation-6.svg#neutral--hover'); - --icon__bpm_escalation-6_neutral--active: url('#{$icons-path}bpm/light/escalation-6.svg#neutral--active'); - --icon__bpm_escalation-6_neutral--disabled: url('#{$icons-path}bpm/light/escalation-6.svg#neutral--disabled'); - --icon__bpm_escalation-5_neutral--enabled: url('#{$icons-path}bpm/light/escalation-5.svg#neutral--enabled'); - --icon__bpm_escalation-5_neutral--hover: url('#{$icons-path}bpm/light/escalation-5.svg#neutral--hover'); - --icon__bpm_escalation-5_neutral--active: url('#{$icons-path}bpm/light/escalation-5.svg#neutral--active'); - --icon__bpm_escalation-5_neutral--disabled: url('#{$icons-path}bpm/light/escalation-5.svg#neutral--disabled'); - --icon__bpm_escalation-4_neutral--enabled: url('#{$icons-path}bpm/light/escalation-4.svg#neutral--enabled'); - --icon__bpm_escalation-4_neutral--hover: url('#{$icons-path}bpm/light/escalation-4.svg#neutral--hover'); - --icon__bpm_escalation-4_neutral--active: url('#{$icons-path}bpm/light/escalation-4.svg#neutral--active'); - --icon__bpm_escalation-4_neutral--disabled: url('#{$icons-path}bpm/light/escalation-4.svg#neutral--disabled'); - --icon__bpm_escalation-3_neutral--enabled: url('#{$icons-path}bpm/light/escalation-3.svg#neutral--enabled'); - --icon__bpm_escalation-3_neutral--hover: url('#{$icons-path}bpm/light/escalation-3.svg#neutral--hover'); - --icon__bpm_escalation-3_neutral--active: url('#{$icons-path}bpm/light/escalation-3.svg#neutral--active'); - --icon__bpm_escalation-3_neutral--disabled: url('#{$icons-path}bpm/light/escalation-3.svg#neutral--disabled'); - --icon__bpm_escalation-2_neutral--enabled: url('#{$icons-path}bpm/light/escalation-2.svg#neutral--enabled'); - --icon__bpm_escalation-2_neutral--hover: url('#{$icons-path}bpm/light/escalation-2.svg#neutral--hover'); - --icon__bpm_escalation-2_neutral--active: url('#{$icons-path}bpm/light/escalation-2.svg#neutral--active'); - --icon__bpm_escalation-2_neutral--disabled: url('#{$icons-path}bpm/light/escalation-2.svg#neutral--disabled'); - --icon__bpm_escalation-1_neutral--enabled: url('#{$icons-path}bpm/light/escalation-1.svg#neutral--enabled'); - --icon__bpm_escalation-1_neutral--hover: url('#{$icons-path}bpm/light/escalation-1.svg#neutral--hover'); - --icon__bpm_escalation-1_neutral--active: url('#{$icons-path}bpm/light/escalation-1.svg#neutral--active'); - --icon__bpm_escalation-1_neutral--disabled: url('#{$icons-path}bpm/light/escalation-1.svg#neutral--disabled'); - --icon__bpm_error-2_neutral--enabled: url('#{$icons-path}bpm/light/error-2.svg#neutral--enabled'); - --icon__bpm_error-2_neutral--hover: url('#{$icons-path}bpm/light/error-2.svg#neutral--hover'); - --icon__bpm_error-2_neutral--active: url('#{$icons-path}bpm/light/error-2.svg#neutral--active'); - --icon__bpm_error-2_neutral--disabled: url('#{$icons-path}bpm/light/error-2.svg#neutral--disabled'); - --icon__bpm_error-1_neutral--enabled: url('#{$icons-path}bpm/light/error-1.svg#neutral--enabled'); - --icon__bpm_error-1_neutral--hover: url('#{$icons-path}bpm/light/error-1.svg#neutral--hover'); - --icon__bpm_error-1_neutral--active: url('#{$icons-path}bpm/light/error-1.svg#neutral--active'); - --icon__bpm_error-1_neutral--disabled: url('#{$icons-path}bpm/light/error-1.svg#neutral--disabled'); - --icon__bpm_delete_neutral--enabled: url('#{$icons-path}bpm/light/delete.svg#neutral--enabled'); - --icon__bpm_delete_neutral--hover: url('#{$icons-path}bpm/light/delete.svg#neutral--hover'); - --icon__bpm_delete_neutral--active: url('#{$icons-path}bpm/light/delete.svg#neutral--active'); - --icon__bpm_delete_neutral--disabled: url('#{$icons-path}bpm/light/delete.svg#neutral--disabled'); - --icon__bpm_conditional_neutral--enabled: url('#{$icons-path}bpm/light/conditional.svg#neutral--enabled'); - --icon__bpm_conditional_neutral--hover: url('#{$icons-path}bpm/light/conditional.svg#neutral--hover'); - --icon__bpm_conditional_neutral--active: url('#{$icons-path}bpm/light/conditional.svg#neutral--active'); - --icon__bpm_conditional_neutral--disabled: url('#{$icons-path}bpm/light/conditional.svg#neutral--disabled'); - --icon__bpm_conditional-6_neutral--enabled: url('#{$icons-path}bpm/light/conditional-6.svg#neutral--enabled'); - --icon__bpm_conditional-6_neutral--hover: url('#{$icons-path}bpm/light/conditional-6.svg#neutral--hover'); - --icon__bpm_conditional-6_neutral--active: url('#{$icons-path}bpm/light/conditional-6.svg#neutral--active'); - --icon__bpm_conditional-6_neutral--disabled: url('#{$icons-path}bpm/light/conditional-6.svg#neutral--disabled'); - --icon__bpm_conditional-5_neutral--enabled: url('#{$icons-path}bpm/light/conditional-5.svg#neutral--enabled'); - --icon__bpm_conditional-5_neutral--hover: url('#{$icons-path}bpm/light/conditional-5.svg#neutral--hover'); - --icon__bpm_conditional-5_neutral--active: url('#{$icons-path}bpm/light/conditional-5.svg#neutral--active'); - --icon__bpm_conditional-5_neutral--disabled: url('#{$icons-path}bpm/light/conditional-5.svg#neutral--disabled'); - --icon__bpm_conditional-2_neutral--enabled: url('#{$icons-path}bpm/light/conditional-2.svg#neutral--enabled'); - --icon__bpm_conditional-2_neutral--hover: url('#{$icons-path}bpm/light/conditional-2.svg#neutral--hover'); - --icon__bpm_conditional-2_neutral--active: url('#{$icons-path}bpm/light/conditional-2.svg#neutral--active'); - --icon__bpm_conditional-2_neutral--disabled: url('#{$icons-path}bpm/light/conditional-2.svg#neutral--disabled'); - --icon__bpm_conditional-1_neutral--enabled: url('#{$icons-path}bpm/light/conditional-1.svg#neutral--enabled'); - --icon__bpm_conditional-1_neutral--hover: url('#{$icons-path}bpm/light/conditional-1.svg#neutral--hover'); - --icon__bpm_conditional-1_neutral--active: url('#{$icons-path}bpm/light/conditional-1.svg#neutral--active'); - --icon__bpm_conditional-1_neutral--disabled: url('#{$icons-path}bpm/light/conditional-1.svg#neutral--disabled'); - --icon__bpm_compensation-4_neutral--enabled: url('#{$icons-path}bpm/light/compensation-4.svg#neutral--enabled'); - --icon__bpm_compensation-4_neutral--hover: url('#{$icons-path}bpm/light/compensation-4.svg#neutral--hover'); - --icon__bpm_compensation-4_neutral--active: url('#{$icons-path}bpm/light/compensation-4.svg#neutral--active'); - --icon__bpm_compensation-4_neutral--disabled: url('#{$icons-path}bpm/light/compensation-4.svg#neutral--disabled'); - --icon__bpm_compensation-3_neutral--enabled: url('#{$icons-path}bpm/light/compensation-3.svg#neutral--enabled'); - --icon__bpm_compensation-3_neutral--hover: url('#{$icons-path}bpm/light/compensation-3.svg#neutral--hover'); - --icon__bpm_compensation-3_neutral--active: url('#{$icons-path}bpm/light/compensation-3.svg#neutral--active'); - --icon__bpm_compensation-3_neutral--disabled: url('#{$icons-path}bpm/light/compensation-3.svg#neutral--disabled'); - --icon__bpm_compensation-2_neutral--enabled: url('#{$icons-path}bpm/light/compensation-2.svg#neutral--enabled'); - --icon__bpm_compensation-2_neutral--hover: url('#{$icons-path}bpm/light/compensation-2.svg#neutral--hover'); - --icon__bpm_compensation-2_neutral--active: url('#{$icons-path}bpm/light/compensation-2.svg#neutral--active'); - --icon__bpm_compensation-2_neutral--disabled: url('#{$icons-path}bpm/light/compensation-2.svg#neutral--disabled'); - --icon__bpm_compensation-1_neutral--enabled: url('#{$icons-path}bpm/light/compensation-1.svg#neutral--enabled'); - --icon__bpm_compensation-1_neutral--hover: url('#{$icons-path}bpm/light/compensation-1.svg#neutral--hover'); - --icon__bpm_compensation-1_neutral--active: url('#{$icons-path}bpm/light/compensation-1.svg#neutral--active'); - --icon__bpm_compensation-1_neutral--disabled: url('#{$icons-path}bpm/light/compensation-1.svg#neutral--disabled'); - --icon__bpm_cancel-4_neutral--enabled: url('#{$icons-path}bpm/light/cancel-4.svg#neutral--enabled'); - --icon__bpm_cancel-4_neutral--hover: url('#{$icons-path}bpm/light/cancel-4.svg#neutral--hover'); - --icon__bpm_cancel-4_neutral--active: url('#{$icons-path}bpm/light/cancel-4.svg#neutral--active'); - --icon__bpm_cancel-4_neutral--disabled: url('#{$icons-path}bpm/light/cancel-4.svg#neutral--disabled'); - --icon__bpm_cancel-2_neutral--enabled: url('#{$icons-path}bpm/light/cancel-2.svg#neutral--enabled'); - --icon__bpm_cancel-2_neutral--hover: url('#{$icons-path}bpm/light/cancel-2.svg#neutral--hover'); - --icon__bpm_cancel-2_neutral--active: url('#{$icons-path}bpm/light/cancel-2.svg#neutral--active'); - --icon__bpm_cancel-2_neutral--disabled: url('#{$icons-path}bpm/light/cancel-2.svg#neutral--disabled'); - --icon__bpm_arrows_neutral--enabled: url('#{$icons-path}bpm/light/arrows.svg#neutral--enabled'); - --icon__bpm_arrows_neutral--hover: url('#{$icons-path}bpm/light/arrows.svg#neutral--hover'); - --icon__bpm_arrows_neutral--active: url('#{$icons-path}bpm/light/arrows.svg#neutral--active'); - --icon__bpm_arrows_neutral--disabled: url('#{$icons-path}bpm/light/arrows.svg#neutral--disabled'); - - } - - /* ================================= - DARK CUSTOM PROPERTIES - ================================= */ - - :root.dark { - /*bpm*/ - --icon__bpm_timer-6_neutral--enabled: url('#{$icons-path}bpm/dark/timer-6.svg#neutral--enabled'); - --icon__bpm_timer-6_neutral--hover: url('#{$icons-path}bpm/dark/timer-6.svg#neutral--hover'); - --icon__bpm_timer-6_neutral--active: url('#{$icons-path}bpm/dark/timer-6.svg#neutral--active'); - --icon__bpm_timer-6_neutral--disabled: url('#{$icons-path}bpm/dark/timer-6.svg#neutral--disabled'); - --icon__bpm_timer-5_neutral--enabled: url('#{$icons-path}bpm/dark/timer-5.svg#neutral--enabled'); - --icon__bpm_timer-5_neutral--hover: url('#{$icons-path}bpm/dark/timer-5.svg#neutral--hover'); - --icon__bpm_timer-5_neutral--active: url('#{$icons-path}bpm/dark/timer-5.svg#neutral--active'); - --icon__bpm_timer-5_neutral--disabled: url('#{$icons-path}bpm/dark/timer-5.svg#neutral--disabled'); - --icon__bpm_timer-2_neutral--enabled: url('#{$icons-path}bpm/dark/timer-2.svg#neutral--enabled'); - --icon__bpm_timer-2_neutral--hover: url('#{$icons-path}bpm/dark/timer-2.svg#neutral--hover'); - --icon__bpm_timer-2_neutral--active: url('#{$icons-path}bpm/dark/timer-2.svg#neutral--active'); - --icon__bpm_timer-2_neutral--disabled: url('#{$icons-path}bpm/dark/timer-2.svg#neutral--disabled'); - --icon__bpm_timer-1_neutral--enabled: url('#{$icons-path}bpm/dark/timer-1.svg#neutral--enabled'); - --icon__bpm_timer-1_neutral--hover: url('#{$icons-path}bpm/dark/timer-1.svg#neutral--hover'); - --icon__bpm_timer-1_neutral--active: url('#{$icons-path}bpm/dark/timer-1.svg#neutral--active'); - --icon__bpm_timer-1_neutral--disabled: url('#{$icons-path}bpm/dark/timer-1.svg#neutral--disabled'); - --icon__bpm_terminale-4_neutral--enabled: url('#{$icons-path}bpm/dark/terminale-4.svg#neutral--enabled'); - --icon__bpm_terminale-4_neutral--hover: url('#{$icons-path}bpm/dark/terminale-4.svg#neutral--hover'); - --icon__bpm_terminale-4_neutral--active: url('#{$icons-path}bpm/dark/terminale-4.svg#neutral--active'); - --icon__bpm_terminale-4_neutral--disabled: url('#{$icons-path}bpm/dark/terminale-4.svg#neutral--disabled'); - --icon__bpm_tasks_neutral--enabled: url('#{$icons-path}bpm/dark/tasks.svg#neutral--enabled'); - --icon__bpm_tasks_neutral--hover: url('#{$icons-path}bpm/dark/tasks.svg#neutral--hover'); - --icon__bpm_tasks_neutral--active: url('#{$icons-path}bpm/dark/tasks.svg#neutral--active'); - --icon__bpm_tasks_neutral--disabled: url('#{$icons-path}bpm/dark/tasks.svg#neutral--disabled'); - --icon__bpm_subprocess_neutral--enabled: url('#{$icons-path}bpm/dark/subprocess.svg#neutral--enabled'); - --icon__bpm_subprocess_neutral--hover: url('#{$icons-path}bpm/dark/subprocess.svg#neutral--hover'); - --icon__bpm_subprocess_neutral--active: url('#{$icons-path}bpm/dark/subprocess.svg#neutral--active'); - --icon__bpm_subprocess_neutral--disabled: url('#{$icons-path}bpm/dark/subprocess.svg#neutral--disabled'); - --icon__bpm_signal-6_neutral--enabled: url('#{$icons-path}bpm/dark/signal-6.svg#neutral--enabled'); - --icon__bpm_signal-6_neutral--hover: url('#{$icons-path}bpm/dark/signal-6.svg#neutral--hover'); - --icon__bpm_signal-6_neutral--active: url('#{$icons-path}bpm/dark/signal-6.svg#neutral--active'); - --icon__bpm_signal-6_neutral--disabled: url('#{$icons-path}bpm/dark/signal-6.svg#neutral--disabled'); - --icon__bpm_signal-5_neutral--enabled: url('#{$icons-path}bpm/dark/signal-5.svg#neutral--enabled'); - --icon__bpm_signal-5_neutral--hover: url('#{$icons-path}bpm/dark/signal-5.svg#neutral--hover'); - --icon__bpm_signal-5_neutral--active: url('#{$icons-path}bpm/dark/signal-5.svg#neutral--active'); - --icon__bpm_signal-5_neutral--disabled: url('#{$icons-path}bpm/dark/signal-5.svg#neutral--disabled'); - --icon__bpm_signal-4_neutral--enabled: url('#{$icons-path}bpm/dark/signal-4.svg#neutral--enabled'); - --icon__bpm_signal-4_neutral--hover: url('#{$icons-path}bpm/dark/signal-4.svg#neutral--hover'); - --icon__bpm_signal-4_neutral--active: url('#{$icons-path}bpm/dark/signal-4.svg#neutral--active'); - --icon__bpm_signal-4_neutral--disabled: url('#{$icons-path}bpm/dark/signal-4.svg#neutral--disabled'); - --icon__bpm_signal-3_neutral--enabled: url('#{$icons-path}bpm/dark/signal-3.svg#neutral--enabled'); - --icon__bpm_signal-3_neutral--hover: url('#{$icons-path}bpm/dark/signal-3.svg#neutral--hover'); - --icon__bpm_signal-3_neutral--active: url('#{$icons-path}bpm/dark/signal-3.svg#neutral--active'); - --icon__bpm_signal-3_neutral--disabled: url('#{$icons-path}bpm/dark/signal-3.svg#neutral--disabled'); - --icon__bpm_signal-2_neutral--enabled: url('#{$icons-path}bpm/dark/signal-2.svg#neutral--enabled'); - --icon__bpm_signal-2_neutral--hover: url('#{$icons-path}bpm/dark/signal-2.svg#neutral--hover'); - --icon__bpm_signal-2_neutral--active: url('#{$icons-path}bpm/dark/signal-2.svg#neutral--active'); - --icon__bpm_signal-2_neutral--disabled: url('#{$icons-path}bpm/dark/signal-2.svg#neutral--disabled'); - --icon__bpm_signal-1_neutral--enabled: url('#{$icons-path}bpm/dark/signal-1.svg#neutral--enabled'); - --icon__bpm_signal-1_neutral--hover: url('#{$icons-path}bpm/dark/signal-1.svg#neutral--hover'); - --icon__bpm_signal-1_neutral--active: url('#{$icons-path}bpm/dark/signal-1.svg#neutral--active'); - --icon__bpm_signal-1_neutral--disabled: url('#{$icons-path}bpm/dark/signal-1.svg#neutral--disabled'); - --icon__bpm_person_neutral--enabled: url('#{$icons-path}bpm/dark/person.svg#neutral--enabled'); - --icon__bpm_person_neutral--hover: url('#{$icons-path}bpm/dark/person.svg#neutral--hover'); - --icon__bpm_person_neutral--active: url('#{$icons-path}bpm/dark/person.svg#neutral--active'); - --icon__bpm_person_neutral--disabled: url('#{$icons-path}bpm/dark/person.svg#neutral--disabled'); - --icon__bpm_paralell-4_neutral--enabled: url('#{$icons-path}bpm/dark/paralell-4.svg#neutral--enabled'); - --icon__bpm_paralell-4_neutral--hover: url('#{$icons-path}bpm/dark/paralell-4.svg#neutral--hover'); - --icon__bpm_paralell-4_neutral--active: url('#{$icons-path}bpm/dark/paralell-4.svg#neutral--active'); - --icon__bpm_paralell-4_neutral--disabled: url('#{$icons-path}bpm/dark/paralell-4.svg#neutral--disabled'); - --icon__bpm_paralell-3_neutral--enabled: url('#{$icons-path}bpm/dark/paralell-3.svg#neutral--enabled'); - --icon__bpm_paralell-3_neutral--hover: url('#{$icons-path}bpm/dark/paralell-3.svg#neutral--hover'); - --icon__bpm_paralell-3_neutral--active: url('#{$icons-path}bpm/dark/paralell-3.svg#neutral--active'); - --icon__bpm_paralell-3_neutral--disabled: url('#{$icons-path}bpm/dark/paralell-3.svg#neutral--disabled'); - --icon__bpm_paralell-2_neutral--enabled: url('#{$icons-path}bpm/dark/paralell-2.svg#neutral--enabled'); - --icon__bpm_paralell-2_neutral--hover: url('#{$icons-path}bpm/dark/paralell-2.svg#neutral--hover'); - --icon__bpm_paralell-2_neutral--active: url('#{$icons-path}bpm/dark/paralell-2.svg#neutral--active'); - --icon__bpm_paralell-2_neutral--disabled: url('#{$icons-path}bpm/dark/paralell-2.svg#neutral--disabled'); - --icon__bpm_paralell-1_neutral--enabled: url('#{$icons-path}bpm/dark/paralell-1.svg#neutral--enabled'); - --icon__bpm_paralell-1_neutral--hover: url('#{$icons-path}bpm/dark/paralell-1.svg#neutral--hover'); - --icon__bpm_paralell-1_neutral--active: url('#{$icons-path}bpm/dark/paralell-1.svg#neutral--active'); - --icon__bpm_paralell-1_neutral--disabled: url('#{$icons-path}bpm/dark/paralell-1.svg#neutral--disabled'); - --icon__bpm_oval_neutral--enabled: url('#{$icons-path}bpm/dark/oval.svg#neutral--enabled'); - --icon__bpm_oval_neutral--hover: url('#{$icons-path}bpm/dark/oval.svg#neutral--hover'); - --icon__bpm_oval_neutral--active: url('#{$icons-path}bpm/dark/oval.svg#neutral--active'); - --icon__bpm_oval_neutral--disabled: url('#{$icons-path}bpm/dark/oval.svg#neutral--disabled'); - --icon__bpm_oval-doble_neutral--enabled: url('#{$icons-path}bpm/dark/oval-doble.svg#neutral--enabled'); - --icon__bpm_oval-doble_neutral--hover: url('#{$icons-path}bpm/dark/oval-doble.svg#neutral--hover'); - --icon__bpm_oval-doble_neutral--active: url('#{$icons-path}bpm/dark/oval-doble.svg#neutral--active'); - --icon__bpm_oval-doble_neutral--disabled: url('#{$icons-path}bpm/dark/oval-doble.svg#neutral--disabled'); - --icon__bpm_multiple-6_neutral--enabled: url('#{$icons-path}bpm/dark/multiple-6.svg#neutral--enabled'); - --icon__bpm_multiple-6_neutral--hover: url('#{$icons-path}bpm/dark/multiple-6.svg#neutral--hover'); - --icon__bpm_multiple-6_neutral--active: url('#{$icons-path}bpm/dark/multiple-6.svg#neutral--active'); - --icon__bpm_multiple-6_neutral--disabled: url('#{$icons-path}bpm/dark/multiple-6.svg#neutral--disabled'); - --icon__bpm_multiple-5_neutral--enabled: url('#{$icons-path}bpm/dark/multiple-5.svg#neutral--enabled'); - --icon__bpm_multiple-5_neutral--hover: url('#{$icons-path}bpm/dark/multiple-5.svg#neutral--hover'); - --icon__bpm_multiple-5_neutral--active: url('#{$icons-path}bpm/dark/multiple-5.svg#neutral--active'); - --icon__bpm_multiple-5_neutral--disabled: url('#{$icons-path}bpm/dark/multiple-5.svg#neutral--disabled'); - --icon__bpm_multiple-4_neutral--enabled: url('#{$icons-path}bpm/dark/multiple-4.svg#neutral--enabled'); - --icon__bpm_multiple-4_neutral--hover: url('#{$icons-path}bpm/dark/multiple-4.svg#neutral--hover'); - --icon__bpm_multiple-4_neutral--active: url('#{$icons-path}bpm/dark/multiple-4.svg#neutral--active'); - --icon__bpm_multiple-4_neutral--disabled: url('#{$icons-path}bpm/dark/multiple-4.svg#neutral--disabled'); - --icon__bpm_multiple-3_neutral--enabled: url('#{$icons-path}bpm/dark/multiple-3.svg#neutral--enabled'); - --icon__bpm_multiple-3_neutral--hover: url('#{$icons-path}bpm/dark/multiple-3.svg#neutral--hover'); - --icon__bpm_multiple-3_neutral--active: url('#{$icons-path}bpm/dark/multiple-3.svg#neutral--active'); - --icon__bpm_multiple-3_neutral--disabled: url('#{$icons-path}bpm/dark/multiple-3.svg#neutral--disabled'); - --icon__bpm_multiple-2_neutral--enabled: url('#{$icons-path}bpm/dark/multiple-2.svg#neutral--enabled'); - --icon__bpm_multiple-2_neutral--hover: url('#{$icons-path}bpm/dark/multiple-2.svg#neutral--hover'); - --icon__bpm_multiple-2_neutral--active: url('#{$icons-path}bpm/dark/multiple-2.svg#neutral--active'); - --icon__bpm_multiple-2_neutral--disabled: url('#{$icons-path}bpm/dark/multiple-2.svg#neutral--disabled'); - --icon__bpm_multiple-1_neutral--enabled: url('#{$icons-path}bpm/dark/multiple-1.svg#neutral--enabled'); - --icon__bpm_multiple-1_neutral--hover: url('#{$icons-path}bpm/dark/multiple-1.svg#neutral--hover'); - --icon__bpm_multiple-1_neutral--active: url('#{$icons-path}bpm/dark/multiple-1.svg#neutral--active'); - --icon__bpm_multiple-1_neutral--disabled: url('#{$icons-path}bpm/dark/multiple-1.svg#neutral--disabled'); - --icon__bpm_message-6_neutral--enabled: url('#{$icons-path}bpm/dark/message-6.svg#neutral--enabled'); - --icon__bpm_message-6_neutral--hover: url('#{$icons-path}bpm/dark/message-6.svg#neutral--hover'); - --icon__bpm_message-6_neutral--active: url('#{$icons-path}bpm/dark/message-6.svg#neutral--active'); - --icon__bpm_message-6_neutral--disabled: url('#{$icons-path}bpm/dark/message-6.svg#neutral--disabled'); - --icon__bpm_message-5_neutral--enabled: url('#{$icons-path}bpm/dark/message-5.svg#neutral--enabled'); - --icon__bpm_message-5_neutral--hover: url('#{$icons-path}bpm/dark/message-5.svg#neutral--hover'); - --icon__bpm_message-5_neutral--active: url('#{$icons-path}bpm/dark/message-5.svg#neutral--active'); - --icon__bpm_message-5_neutral--disabled: url('#{$icons-path}bpm/dark/message-5.svg#neutral--disabled'); - --icon__bpm_message-4_neutral--enabled: url('#{$icons-path}bpm/dark/message-4.svg#neutral--enabled'); - --icon__bpm_message-4_neutral--hover: url('#{$icons-path}bpm/dark/message-4.svg#neutral--hover'); - --icon__bpm_message-4_neutral--active: url('#{$icons-path}bpm/dark/message-4.svg#neutral--active'); - --icon__bpm_message-4_neutral--disabled: url('#{$icons-path}bpm/dark/message-4.svg#neutral--disabled'); - --icon__bpm_message-3_neutral--enabled: url('#{$icons-path}bpm/dark/message-3.svg#neutral--enabled'); - --icon__bpm_message-3_neutral--hover: url('#{$icons-path}bpm/dark/message-3.svg#neutral--hover'); - --icon__bpm_message-3_neutral--active: url('#{$icons-path}bpm/dark/message-3.svg#neutral--active'); - --icon__bpm_message-3_neutral--disabled: url('#{$icons-path}bpm/dark/message-3.svg#neutral--disabled'); - --icon__bpm_message-2_neutral--enabled: url('#{$icons-path}bpm/dark/message-2.svg#neutral--enabled'); - --icon__bpm_message-2_neutral--hover: url('#{$icons-path}bpm/dark/message-2.svg#neutral--hover'); - --icon__bpm_message-2_neutral--active: url('#{$icons-path}bpm/dark/message-2.svg#neutral--active'); - --icon__bpm_message-2_neutral--disabled: url('#{$icons-path}bpm/dark/message-2.svg#neutral--disabled'); - --icon__bpm_message-1_neutral--enabled: url('#{$icons-path}bpm/dark/message-1.svg#neutral--enabled'); - --icon__bpm_message-1_neutral--hover: url('#{$icons-path}bpm/dark/message-1.svg#neutral--hover'); - --icon__bpm_message-1_neutral--active: url('#{$icons-path}bpm/dark/message-1.svg#neutral--active'); - --icon__bpm_message-1_neutral--disabled: url('#{$icons-path}bpm/dark/message-1.svg#neutral--disabled'); - --icon__bpm_link-4_neutral--enabled: url('#{$icons-path}bpm/dark/link-4.svg#neutral--enabled'); - --icon__bpm_link-4_neutral--hover: url('#{$icons-path}bpm/dark/link-4.svg#neutral--hover'); - --icon__bpm_link-4_neutral--active: url('#{$icons-path}bpm/dark/link-4.svg#neutral--active'); - --icon__bpm_link-4_neutral--disabled: url('#{$icons-path}bpm/dark/link-4.svg#neutral--disabled'); - --icon__bpm_link-3_neutral--enabled: url('#{$icons-path}bpm/dark/link-3.svg#neutral--enabled'); - --icon__bpm_link-3_neutral--hover: url('#{$icons-path}bpm/dark/link-3.svg#neutral--hover'); - --icon__bpm_link-3_neutral--active: url('#{$icons-path}bpm/dark/link-3.svg#neutral--active'); - --icon__bpm_link-3_neutral--disabled: url('#{$icons-path}bpm/dark/link-3.svg#neutral--disabled'); - --icon__bpm_escalation-6_neutral--enabled: url('#{$icons-path}bpm/dark/escalation-6.svg#neutral--enabled'); - --icon__bpm_escalation-6_neutral--hover: url('#{$icons-path}bpm/dark/escalation-6.svg#neutral--hover'); - --icon__bpm_escalation-6_neutral--active: url('#{$icons-path}bpm/dark/escalation-6.svg#neutral--active'); - --icon__bpm_escalation-6_neutral--disabled: url('#{$icons-path}bpm/dark/escalation-6.svg#neutral--disabled'); - --icon__bpm_escalation-5_neutral--enabled: url('#{$icons-path}bpm/dark/escalation-5.svg#neutral--enabled'); - --icon__bpm_escalation-5_neutral--hover: url('#{$icons-path}bpm/dark/escalation-5.svg#neutral--hover'); - --icon__bpm_escalation-5_neutral--active: url('#{$icons-path}bpm/dark/escalation-5.svg#neutral--active'); - --icon__bpm_escalation-5_neutral--disabled: url('#{$icons-path}bpm/dark/escalation-5.svg#neutral--disabled'); - --icon__bpm_escalation-4_neutral--enabled: url('#{$icons-path}bpm/dark/escalation-4.svg#neutral--enabled'); - --icon__bpm_escalation-4_neutral--hover: url('#{$icons-path}bpm/dark/escalation-4.svg#neutral--hover'); - --icon__bpm_escalation-4_neutral--active: url('#{$icons-path}bpm/dark/escalation-4.svg#neutral--active'); - --icon__bpm_escalation-4_neutral--disabled: url('#{$icons-path}bpm/dark/escalation-4.svg#neutral--disabled'); - --icon__bpm_escalation-3_neutral--enabled: url('#{$icons-path}bpm/dark/escalation-3.svg#neutral--enabled'); - --icon__bpm_escalation-3_neutral--hover: url('#{$icons-path}bpm/dark/escalation-3.svg#neutral--hover'); - --icon__bpm_escalation-3_neutral--active: url('#{$icons-path}bpm/dark/escalation-3.svg#neutral--active'); - --icon__bpm_escalation-3_neutral--disabled: url('#{$icons-path}bpm/dark/escalation-3.svg#neutral--disabled'); - --icon__bpm_escalation-2_neutral--enabled: url('#{$icons-path}bpm/dark/escalation-2.svg#neutral--enabled'); - --icon__bpm_escalation-2_neutral--hover: url('#{$icons-path}bpm/dark/escalation-2.svg#neutral--hover'); - --icon__bpm_escalation-2_neutral--active: url('#{$icons-path}bpm/dark/escalation-2.svg#neutral--active'); - --icon__bpm_escalation-2_neutral--disabled: url('#{$icons-path}bpm/dark/escalation-2.svg#neutral--disabled'); - --icon__bpm_escalation-1_neutral--enabled: url('#{$icons-path}bpm/dark/escalation-1.svg#neutral--enabled'); - --icon__bpm_escalation-1_neutral--hover: url('#{$icons-path}bpm/dark/escalation-1.svg#neutral--hover'); - --icon__bpm_escalation-1_neutral--active: url('#{$icons-path}bpm/dark/escalation-1.svg#neutral--active'); - --icon__bpm_escalation-1_neutral--disabled: url('#{$icons-path}bpm/dark/escalation-1.svg#neutral--disabled'); - --icon__bpm_error-2_neutral--enabled: url('#{$icons-path}bpm/dark/error-2.svg#neutral--enabled'); - --icon__bpm_error-2_neutral--hover: url('#{$icons-path}bpm/dark/error-2.svg#neutral--hover'); - --icon__bpm_error-2_neutral--active: url('#{$icons-path}bpm/dark/error-2.svg#neutral--active'); - --icon__bpm_error-2_neutral--disabled: url('#{$icons-path}bpm/dark/error-2.svg#neutral--disabled'); - --icon__bpm_error-1_neutral--enabled: url('#{$icons-path}bpm/dark/error-1.svg#neutral--enabled'); - --icon__bpm_error-1_neutral--hover: url('#{$icons-path}bpm/dark/error-1.svg#neutral--hover'); - --icon__bpm_error-1_neutral--active: url('#{$icons-path}bpm/dark/error-1.svg#neutral--active'); - --icon__bpm_error-1_neutral--disabled: url('#{$icons-path}bpm/dark/error-1.svg#neutral--disabled'); - --icon__bpm_delete_neutral--enabled: url('#{$icons-path}bpm/dark/delete.svg#neutral--enabled'); - --icon__bpm_delete_neutral--hover: url('#{$icons-path}bpm/dark/delete.svg#neutral--hover'); - --icon__bpm_delete_neutral--active: url('#{$icons-path}bpm/dark/delete.svg#neutral--active'); - --icon__bpm_delete_neutral--disabled: url('#{$icons-path}bpm/dark/delete.svg#neutral--disabled'); - --icon__bpm_conditional_neutral--enabled: url('#{$icons-path}bpm/dark/conditional.svg#neutral--enabled'); - --icon__bpm_conditional_neutral--hover: url('#{$icons-path}bpm/dark/conditional.svg#neutral--hover'); - --icon__bpm_conditional_neutral--active: url('#{$icons-path}bpm/dark/conditional.svg#neutral--active'); - --icon__bpm_conditional_neutral--disabled: url('#{$icons-path}bpm/dark/conditional.svg#neutral--disabled'); - --icon__bpm_conditional-6_neutral--enabled: url('#{$icons-path}bpm/dark/conditional-6.svg#neutral--enabled'); - --icon__bpm_conditional-6_neutral--hover: url('#{$icons-path}bpm/dark/conditional-6.svg#neutral--hover'); - --icon__bpm_conditional-6_neutral--active: url('#{$icons-path}bpm/dark/conditional-6.svg#neutral--active'); - --icon__bpm_conditional-6_neutral--disabled: url('#{$icons-path}bpm/dark/conditional-6.svg#neutral--disabled'); - --icon__bpm_conditional-5_neutral--enabled: url('#{$icons-path}bpm/dark/conditional-5.svg#neutral--enabled'); - --icon__bpm_conditional-5_neutral--hover: url('#{$icons-path}bpm/dark/conditional-5.svg#neutral--hover'); - --icon__bpm_conditional-5_neutral--active: url('#{$icons-path}bpm/dark/conditional-5.svg#neutral--active'); - --icon__bpm_conditional-5_neutral--disabled: url('#{$icons-path}bpm/dark/conditional-5.svg#neutral--disabled'); - --icon__bpm_conditional-2_neutral--enabled: url('#{$icons-path}bpm/dark/conditional-2.svg#neutral--enabled'); - --icon__bpm_conditional-2_neutral--hover: url('#{$icons-path}bpm/dark/conditional-2.svg#neutral--hover'); - --icon__bpm_conditional-2_neutral--active: url('#{$icons-path}bpm/dark/conditional-2.svg#neutral--active'); - --icon__bpm_conditional-2_neutral--disabled: url('#{$icons-path}bpm/dark/conditional-2.svg#neutral--disabled'); - --icon__bpm_conditional-1_neutral--enabled: url('#{$icons-path}bpm/dark/conditional-1.svg#neutral--enabled'); - --icon__bpm_conditional-1_neutral--hover: url('#{$icons-path}bpm/dark/conditional-1.svg#neutral--hover'); - --icon__bpm_conditional-1_neutral--active: url('#{$icons-path}bpm/dark/conditional-1.svg#neutral--active'); - --icon__bpm_conditional-1_neutral--disabled: url('#{$icons-path}bpm/dark/conditional-1.svg#neutral--disabled'); - --icon__bpm_compensation-4_neutral--enabled: url('#{$icons-path}bpm/dark/compensation-4.svg#neutral--enabled'); - --icon__bpm_compensation-4_neutral--hover: url('#{$icons-path}bpm/dark/compensation-4.svg#neutral--hover'); - --icon__bpm_compensation-4_neutral--active: url('#{$icons-path}bpm/dark/compensation-4.svg#neutral--active'); - --icon__bpm_compensation-4_neutral--disabled: url('#{$icons-path}bpm/dark/compensation-4.svg#neutral--disabled'); - --icon__bpm_compensation-3_neutral--enabled: url('#{$icons-path}bpm/dark/compensation-3.svg#neutral--enabled'); - --icon__bpm_compensation-3_neutral--hover: url('#{$icons-path}bpm/dark/compensation-3.svg#neutral--hover'); - --icon__bpm_compensation-3_neutral--active: url('#{$icons-path}bpm/dark/compensation-3.svg#neutral--active'); - --icon__bpm_compensation-3_neutral--disabled: url('#{$icons-path}bpm/dark/compensation-3.svg#neutral--disabled'); - --icon__bpm_compensation-2_neutral--enabled: url('#{$icons-path}bpm/dark/compensation-2.svg#neutral--enabled'); - --icon__bpm_compensation-2_neutral--hover: url('#{$icons-path}bpm/dark/compensation-2.svg#neutral--hover'); - --icon__bpm_compensation-2_neutral--active: url('#{$icons-path}bpm/dark/compensation-2.svg#neutral--active'); - --icon__bpm_compensation-2_neutral--disabled: url('#{$icons-path}bpm/dark/compensation-2.svg#neutral--disabled'); - --icon__bpm_compensation-1_neutral--enabled: url('#{$icons-path}bpm/dark/compensation-1.svg#neutral--enabled'); - --icon__bpm_compensation-1_neutral--hover: url('#{$icons-path}bpm/dark/compensation-1.svg#neutral--hover'); - --icon__bpm_compensation-1_neutral--active: url('#{$icons-path}bpm/dark/compensation-1.svg#neutral--active'); - --icon__bpm_compensation-1_neutral--disabled: url('#{$icons-path}bpm/dark/compensation-1.svg#neutral--disabled'); - --icon__bpm_cancel-4_neutral--enabled: url('#{$icons-path}bpm/dark/cancel-4.svg#neutral--enabled'); - --icon__bpm_cancel-4_neutral--hover: url('#{$icons-path}bpm/dark/cancel-4.svg#neutral--hover'); - --icon__bpm_cancel-4_neutral--active: url('#{$icons-path}bpm/dark/cancel-4.svg#neutral--active'); - --icon__bpm_cancel-4_neutral--disabled: url('#{$icons-path}bpm/dark/cancel-4.svg#neutral--disabled'); - --icon__bpm_cancel-2_neutral--enabled: url('#{$icons-path}bpm/dark/cancel-2.svg#neutral--enabled'); - --icon__bpm_cancel-2_neutral--hover: url('#{$icons-path}bpm/dark/cancel-2.svg#neutral--hover'); - --icon__bpm_cancel-2_neutral--active: url('#{$icons-path}bpm/dark/cancel-2.svg#neutral--active'); - --icon__bpm_cancel-2_neutral--disabled: url('#{$icons-path}bpm/dark/cancel-2.svg#neutral--disabled'); - --icon__bpm_arrows_neutral--enabled: url('#{$icons-path}bpm/dark/arrows.svg#neutral--enabled'); - --icon__bpm_arrows_neutral--hover: url('#{$icons-path}bpm/dark/arrows.svg#neutral--hover'); - --icon__bpm_arrows_neutral--active: url('#{$icons-path}bpm/dark/arrows.svg#neutral--active'); - --icon__bpm_arrows_neutral--disabled: url('#{$icons-path}bpm/dark/arrows.svg#neutral--disabled'); - - } - - } - - // - - - - - - - - - - - - - - - - - - - - - // Typography - // - - - - - - - - - - - - - - - - - - - - - // font-face - @if $font-face { - // Light - @font-face { - font-family: "Inter"; - src: url("#{$font-face-path}Inter-Light.woff2"); - font-weight: 300; - font-style: normal; - } - @font-face { - font-family: "Inter"; - src: url("#{$font-face-path}Inter-LightItalic.woff2"); - font-weight: 300; - font-style: italic; - } - - // Regular - @font-face { - font-family: "Inter"; - src: url("#{$font-face-path}Inter-Regular.woff2"); - font-weight: 400; - font-style: normal; - } - @font-face { - font-family: "Inter"; - src: url("#{$font-face-path}Inter-Italic.woff2"); - font-weight: 400; - font-style: italic; - } - - // Medium - @font-face { - font-family: "Inter"; - src: url("#{$font-face-path}Inter-Medium.woff2"); - font-weight: 500; - font-style: normal; - } - @font-face { - font-family: "Inter"; - src: url("#{$font-face-path}Inter-MediumItalic.woff2"); - font-weight: 500; - font-style: italic; - } - - // SemiBold - @font-face { - font-family: "Inter"; - src: url("#{$font-face-path}Inter-SemiBold.woff2"); - font-weight: 600; - font-style: normal; - } - @font-face { - font-family: "Inter"; - src: url("#{$font-face-path}Inter-SemiBoldItalic.woff2"); - font-weight: 600; - font-style: italic; - } - - // Bold - @font-face { - font-family: "Inter"; - src: url("#{$font-face-path}Inter-Bold.woff2"); - font-weight: 700; - font-style: normal; - } - @font-face { - font-family: "Inter"; - src: url("#{$font-face-path}Inter-BoldItalic.woff2"); - font-weight: 700; - font-style: italic; - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Color Schemes - // - - - - - - - - - - - - - - - - - - - - - // Light - @if $colors and $light-theme and $tokens { - :root.light { - // Fixes issues in elements that force its color based on this property. - // For example, the font color of the input with autocomplete (:-webkit-autofill) - color-scheme: light; - @include foundation-colors--light($globant-colors: $globant-colors); - } - } - @if $colors and $tokens and $prefers-color-scheme-light { - @media (prefers-color-scheme: light) { - :root { - // Fixes issues in elements that force its color based on this property. - // For example, the font color of the input with autocomplete (:-webkit-autofill) - color-scheme: light; - @include foundation-colors--light($globant-colors: $globant-colors); - } - } - } - - // Dark - @if $colors and $dark-theme and $tokens { - :root.dark { - // Fixes issues in elements that force its color based on this property. - // For example, the font color of the input with autocomplete (:-webkit-autofill) - color-scheme: dark; - @include foundation-colors--dark($globant-colors: $globant-colors); - } - } - @if $colors and $tokens and $prefers-color-scheme-dark { - @media (prefers-color-scheme: dark) { - :root { - // Fixes issues in elements that force its color based on this property. - // For example, the font color of the input with autocomplete (:-webkit-autofill) - color-scheme: dark; - @include foundation-colors--dark($globant-colors: $globant-colors); - } - } - } - - // Gradients (independent of color scheme at the time of writing) - @if $colors and $tokens { - :root { - @include foundation-colors--gradients(); - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Other Tokens than Colors - // - - - - - - - - - - - - - - - - - - - - - @if $tokens and ($border or $colors or $font or $spacing or $timing) { - :root { - // Border - @if $border { - @include border(); - } - - // Semantic (Other than colors) - @include semantic-general(); - @include semantic-control(); - @include semantic-field(); - - // Semantic Colors (Are independent of color scheme) - @if $colors { - @include semantic-accent(); - @include semantic-border(); - @include semantic-heading(); - @include semantic-icon(); - @include semantic-item(); - @include semantic-surface(); - @include semantic-text(); - } - - @if $font { - @include font(); - } - - @if $spacing { - @include spacing(); - } - - @if $timing { - @include timing(); - } - } - } - - // - - - - - - - - - - - - - - - - - - - - - // General - // - - - - - - - - - - - - - - - - - - - - - @if $body { - // Reduce FOUC in Chameleon - :root:not(.hydrated) { - visibility: hidden; - } - - body { - @include document-common-styles(); - - @if $tokens { - // Default background-color and color - @if $colors { - background-color: var(--mer-surface); - color: var(--mer-text__on-surface); - } - - @if $font and $font-face { - font-family: var(--font-family-body); - } - @if $font { - @include body-font(); - } - } - } - } - - // - - - - - - - - - - - - - - - - - - - - - // Resets - // - - - - - - - - - - - - - - - - - - - - - @if $resets { - @if $box-sizing-reset { - @include box-sizing(); - } - - // - -
-
- - -
- - - - - - -
-
- -
-

- This variant includes a smooth animation effect when the - sidebar collapses or expands, providing a more polished and - dynamic user experience. The subtle motion helps users easily - follow the state change, making transitions feel more - intuitive and visually appealing. -

-
- - - - -
-
- - -
- -
- -
- - -
-
- -
-

- Combining the collapsed hidden and motion effects offers a - fully hidden sidebar with a smooth animation. This setup is - ideal for minimizing distractions, especially in cases where - the sidebar is accessed infrequently, but you still want an - elegant transition when it appears or disappears. -

-
- - - - -
-
- - -
-
- - -
- -
- -
- - - - - - diff --git a/packages/mercury/showcase/slider.html b/packages/mercury/showcase/slider.html deleted file mode 100644 index ba022245b..000000000 --- a/packages/mercury/showcase/slider.html +++ /dev/null @@ -1,108 +0,0 @@ - - - - - - Slider - - - - - - - - - - - -
-
- -
- -
-

slider

-

- A primary HTML slider is a versatile component used to allow users - to select a value or range within a predefined spectrum. It is - designed to be visually prominent and intuitive, often serving as - a control for adjusting settings like volume, brightness, or other - continuous data points. -

-

- Apply display:grid to the slider's container to make - the slider stretch to 100% width. -

-
-
- -
-
- -
-
- -
-
- - - -
- -
- -
- - -
-
- -
-
- -
-
- - - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/tab.html b/packages/mercury/showcase/tab.html deleted file mode 100644 index 7583c9f42..000000000 --- a/packages/mercury/showcase/tab.html +++ /dev/null @@ -1,282 +0,0 @@ - - - - - - Tab - - - - - - - - - - -
-
- -
- -
-

tab

-

- A tabs component is a versatile UI element that organizes content - into separate views, each accessible through individual tabs. It - enhances user experience by allowing easy navigation between - different sections without reloading the page, making it ideal for - displaying related content in a compact space. -

-
-
- -
-
- -
-
- -
-

Content of the item 1

-
-
-

Content of the item 2

-
-
-

Content of the item 3

-
-
- -
-
- - - -
- -
- -
- - -
-
- -
-
- -
-

Content of the item 1

-
-
-

Content of the item 2

-
-
-

Content of the item 3

-
-
- -
-
- - - -
- -
- -
- - -
-
- -
-
- -
-

Content of the item 1

-
-
-

Content of the item 2

-
-
-

Content of the item 3

-
-
- -
-
- - - -
- -
- -
- - -
-
- -
-
- -
-

Content of the item 1

-
-
-

Content of the item 2

-
-
-

Content of the item 3

-
-
- -
-
- - - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/tabular-grid.html b/packages/mercury/showcase/tabular-grid.html deleted file mode 100644 index c3959630f..000000000 --- a/packages/mercury/showcase/tabular-grid.html +++ /dev/null @@ -1,3831 +0,0 @@ - - - - - - Tabular Grid - - - - - - - - - - - -
-
- -
-
-

tabular grid

-

- A grid-table is a fundamental component on a webpage, designed to - display data in a structured, tabular format. It organizes - information into rows and columns, making it easy for users to - view, compare, and analyze data efficiently. This layout is ideal - for presenting large datasets, financial information, or any - content that benefits from a clear, orderly arrangement. -

-
-
- -
- -
- -
-
- - - - - - - - - - AR - Lorem ipsum dolor sit amet, consectetur adipiscing - elit. Sed do eiusmod tempor - incididunt - 45.400.000 - Español - - - BO - Bolivia - 11.800.000 - Español - - - BR - Brasil - 212.600.000 - Português - - - CL - Chile - 19.500.000 - Español - - - EC - Ecuador - 17.600.000 - Español - - - PY - Paraguay - 7.500.000 - Español - - - PE - Perú - 32.800.000 - Español - - - UY - Uruguay - 3.500.000 - Español - - - VE - Venezuela - 28.500.000 - Español - - -
- -
- - -
-
- -
- - -
- -
- -
-
- - - - - - - - - - América del Sur - - BO - Bolivia - 11.800.000 - Español - - - CL - Chile - 19.500.000 - Español - - - EC - Ecuador - 17.600.000 - Español - - - PY - Paraguay - 7.500.000 - Español - - - PE - Perú - 32.800.000 - Español - - - VE - Venezuela - 28.500.000 - Español - - - Campeones del mundo - - AR - Argentina - 45.400.000 - Español - - - BR - Brasil - 212.600.000 - Português - - - UY - Uruguay - 3.500.000 - Español - - - - - - América del Norte - - CA - Canadá - 38.000.000 - English - - - MX - México - 126.000.000 - Español - - - US - Estados Unidos - 331.000.000 - English - - - -
- -
- - -
-
- -
- - -
-
- -
-

- Keyboard navigation changes focus only. -

-
- - - - - - - - - - AR - Argentina - 45.400.000 - Español - - - BO - Bolivia - 11.800.000 - Español - - - BR - Brasil - 212.600.000 - Português - - - CL - Chile - 19.500.000 - Español - - - EC - Ecuador - 17.600.000 - Español - - - PY - Paraguay - 7.500.000 - Español - - - PE - Perú - 32.800.000 - Español - - - UY - Uruguay - 3.500.000 - Español - - - VE - Venezuela - 28.500.000 - Español - - -
-
- - - -
- -
- -
- - -
-
- -
-

- Keyboard navigation changes focus and selection. -

-
- - - - - - - - - - AR - Argentina - 45.400.000 - Español - - - BO - Bolivia - 11.800.000 - Español - - - BR - Brasil - 212.600.000 - Português - - - CL - Chile - 19.500.000 - Español - - - EC - Ecuador - 17.600.000 - Español - - - PY - Paraguay - 7.500.000 - Español - - - PE - Perú - 32.800.000 - Español - - - UY - Uruguay - 3.500.000 - Español - - - VE - Venezuela - 28.500.000 - Español - - -
-
- - - -
- -
- -
- - -
-
- -
-

- Keyboard navigation changes focus only. To select multiple - rows, press ctrl/cmd for individual selection, or - shift for multiple selection at once. -

-
- - - - - - - - - - AR - Argentina - 45.400.000 - Español - - - BO - Bolivia - 11.800.000 - Español - - - BR - Brasil - 212.600.000 - Português - - - CL - Chile - 19.500.000 - Español - - - EC - Ecuador - 17.600.000 - Español - - - PY - Paraguay - 7.500.000 - Español - - - PE - Perú - 32.800.000 - Español - - - UY - Uruguay - 3.500.000 - Español - - - VE - Venezuela - 28.500.000 - Español - - -
-
- - -
- -
- -
- - -
-
- -
-

- Keyboard navigation changes focus and selection. To select - multiple rows, press ctrl/cmd for individual - selection, or shift for multiple selection at - once. -

-
- - - - - - - - - - AR - Argentina - 45.400.000 - Español - - - BO - Bolivia - 11.800.000 - Español - - - BR - Brasil - 212.600.000 - Português - - - CL - Chile - 19.500.000 - Español - - - EC - Ecuador - 17.600.000 - Español - - - PY - Paraguay - 7.500.000 - Español - - - PE - Perú - 32.800.000 - Español - - - UY - Uruguay - 3.500.000 - Español - - - VE - Venezuela - 28.500.000 - Español - - -
-
- - -
- -
- -
- - -
-
- -
-
-

- Adds checkboxes that allows marking the rows (Keyboard - navigation changes focus and selection). Press - space-bar to mark a row, or multiple rows. -

-
-
- - - - - - - - - - AR - Argentina - 45.400.000 - Español - - - BO - Bolivia - 11.800.000 - Español - - - BR - Brasil - 212.600.000 - Português - - - CL - Chile - 19.500.000 - Español - - - EC - Ecuador - 17.600.000 - Español - - - PY - Paraguay - 7.500.000 - Español - - - PE - Perú - 32.800.000 - Español - - - UY - Uruguay - 3.500.000 - Español - - - VE - Venezuela - 28.500.000 - Español - - -
-
- - -
- -
- -
- - -
-
- -
-
-

- Adds checkboxes that allows marking the rows (keyboard - navigation changes focus only). Press - space-bar to select a row, or - shift and arrow cursors to select multiple - rows. -

-
-
- - - - - - - - - - AR - Argentina - 45.400.000 - Español - - - BO - Bolivia - 11.800.000 - Español - - - BR - Brasil - 212.600.000 - Português - - - CL - Chile - 19.500.000 - Español - - - EC - Ecuador - 17.600.000 - Español - - - PY - Paraguay - 7.500.000 - Español - - - PE - Perú - 32.800.000 - Español - - - UY - Uruguay - 3.500.000 - Español - - - VE - Venezuela - 28.500.000 - Español - - -
-
- - -
- -
- -
- - -
-
- -
-
-

It allows row re-ordering.

-
-
- - - - - - - - - - AR - Argentina - 45.400.000 - Español - - - BO - Bolivia - 11.800.000 - Español - - - BR - Brasil - 212.600.000 - Português - - - CL - Chile - 19.500.000 - Español - - - EC - Ecuador - 17.600.000 - Español - - - PY - Paraguay - 7.500.000 - Español - - - PE - Perú - 32.800.000 - Español - - - UY - Uruguay - 3.500.000 - Español - - - VE - Venezuela - 28.500.000 - Español - - -
-
- - -
- -
- -
- - -
-
- -
-
-

- It allows displaying a window with custom actions that he - user defines by using slotted content (hover a row, or right - click on it). Note: The stylization of buttons have to be - defined by the user. -

-
- -
- - - - - - - - - - - AR - Argentina - 45.400.000 - Español - - - - BO - Bolivia - 11.800.000 - Español - - - - BR - Brasil - 212.600.000 - Português - - - - CL - Chile - 19.500.000 - Español - - - - EC - Ecuador - 17.600.000 - Español - - - - PY - Paraguay - 7.500.000 - Español - - - - PE - Perú - 32.800.000 - Español - - - - UY - Uruguay - 3.500.000 - Español - - - - VE - Venezuela - 28.500.000 - Español - - - - - - - - - - - - - - - - - - - -
-
- - -
- -
- -
- - -
-
- -
-
-

- By default, node icons and node-leaf icons are not - displayed. To display these icons you have to add - tabular-grid-show-node-icons on the - ch-tabular-grid -

-
- -
- - - - - - - - - - Target - - Target - false - - - - Devices - - Devices List - true - - - - Device - - - - - - - DeviceToken - Character(500) - DeviceToken - false - - - - - - - Groups - - Groups - true - - - - Group - - - - - - - Name - Character(100) - Name - false - - - - - - - Targets - - Targets - true - - - - Filter - - - - - - - Name - Character(100) - Name - false - - - Value - Character(100) - Name - false - - - - - - - - -
-
- - -
- -
- -
- - -
-
- -
-
-

- By default, node icons and node-leaf icons are not - displayed. To display these icons you have to add - tabular-grid-show-node-icons on the - ch-tabular-grid -

-
-
- - - - - - - - Nombre - Productos - - - - English - Products - - - Português - Produtos - - - - - Redireccionar a - -
-
- Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; - Tecnologías soportadas; Tecnologías soportadas; -
-
-
-
- - Tipo de redirección - Found - - - - Url - - - Url amigable - productos - - - - English - products - - - Português - produtos - - - - - - Permalink - - - Id - 7867 - - - - - Guid - abcdef-peodfg-293845-3947 - - - - -
-
-
- - -
- -
- -
-
-
- - -
- -
-

tabular grid: helpers

-

- Helper classes in a tabular grid component are crucial for - ensuring flexibility and consistency in layout and styling across - complex tables. They allow developers to easily apply specific - alignments, spacing, and formatting to various table elements - without needing to write custom CSS for each instance. -

-
-
- -
- -
- -
-

- In some cases, you may wish to align the cell content to the - top in a vertical direction. To do this, simply add the class - .tabular-grid-align-cells-block-start - on the ch-tabular-grid element. -

-
- - - - - - - - - - AR - Argentina is a large country in South America, known - for its diverse landscapes, rich culture, and vibrant - history. It stretches from the tropical north to the - southern tip of the continent, encompassing a variety of - climates and terrains, from the Andes mountains to the - Pampas plains and the Patagonia region. - - 45.400.000 - Español - - - BO - Bolivia is a landlocked country in central South - America, known for its diverse cultures, rich history, - and stunning natural landscapes. It is one of the most - culturally diverse countries in the region, with a large - indigenous population that influences its traditions and - daily life. - 11.800.000 - Español - - - BR - Brazil is the largest country in South America and the - fifth largest in the world, known for its vibrant - culture, diverse ecosystems, and iconic landmarks. It is - a vast country with a mix of modern cities, colonial - architecture, and natural wonders. - 212.600.000 - Português - - -
- -
- - -
-
- -
- - -
- -
- -
-

- In some cases, you may wish to align the cell content to the - center in a vertical direction. To do this, simply add the - class - .tabular-grid-align-cells-block-center - on the ch-tabular-grid element. -

-
- - - - - - - - - - AR - Argentina is a large country in South America, known - for its diverse landscapes, rich culture, and vibrant - history. It stretches from the tropical north to the - southern tip of the continent, encompassing a variety of - climates and terrains, from the Andes mountains to the - Pampas plains and the Patagonia region. - - 45.400.000 - Español - - - BO - Bolivia is a landlocked country in central South - America, known for its diverse cultures, rich history, - and stunning natural landscapes. It is one of the most - culturally diverse countries in the region, with a large - indigenous population that influences its traditions and - daily life. - 11.800.000 - Español - - - BR - Brazil is the largest country in South America and the - fifth largest in the world, known for its vibrant - culture, diverse ecosystems, and iconic landmarks. It is - a vast country with a mix of modern cities, colonial - architecture, and natural wonders. - 212.600.000 - Português - - -
- -
- - -
-
- -
- - -
- -
- -
-

- In some cases, you may wish to align the cell content to the - bottom in a vertical direction. To do this, simply add the - class - .tabular-grid-align-cells-block-end - on the ch-tabular-grid element. -

-
- - - - - - - - - - AR - Argentina is a large country in South America, known - for its diverse landscapes, rich culture, and vibrant - history. It stretches from the tropical north to the - southern tip of the continent, encompassing a variety of - climates and terrains, from the Andes mountains to the - Pampas plains and the Patagonia region. - - 45.400.000 - Español - - - BO - Bolivia is a landlocked country in central South - America, known for its diverse cultures, rich history, - and stunning natural landscapes. It is one of the most - culturally diverse countries in the region, with a large - indigenous population that influences its traditions and - daily life. - 11.800.000 - Español - - - BR - Brazil is the largest country in South America and the - fifth largest in the world, known for its vibrant - culture, diverse ecosystems, and iconic landmarks. It is - a vast country with a mix of modern cities, colonial - architecture, and natural wonders. - 212.600.000 - Português - - -
- -
- - -
-
- -
- - -
- -
- -
-

- In some cases, you may wish to align the cell content to the - start in an horizontal direction. To do this, simply add the - class - .tabular-grid-align-cells-inline-start - on the ch-tabular-grid element. -

-
- - - - - - - - - - AR - Argentina is a large country in South America, known - for its diverse landscapes, rich culture, and vibrant - history. It stretches from the tropical north to the - southern tip of the continent, encompassing a variety of - climates and terrains, from the Andes mountains to the - Pampas plains and the Patagonia region. - - 45.400.000 - Español - - - BO - Bolivia is a landlocked country in central South - America, known for its diverse cultures, rich history, - and stunning natural landscapes. It is one of the most - culturally diverse countries in the region, with a large - indigenous population that influences its traditions and - daily life. - 11.800.000 - Español - - - BR - Brazil is the largest country in South America and the - fifth largest in the world, known for its vibrant - culture, diverse ecosystems, and iconic landmarks. It is - a vast country with a mix of modern cities, colonial - architecture, and natural wonders. - 212.600.000 - Português - - -
- -
- - -
-
- -
- - -
- -
- -
-

- In some cases, you may wish to align the cell content to the - center in an horizontal direction. To do this, simply add the - class - .tabular-grid-align-cells-inline-center - on the ch-tabular-grid element. -

-
- - - - - - - - - - AR - Argentina is a large country in South America, known - for its diverse landscapes, rich culture, and vibrant - history. It stretches from the tropical north to the - southern tip of the continent, encompassing a variety of - climates and terrains, from the Andes mountains to the - Pampas plains and the Patagonia region. - - 45.400.000 - Español - - - BO - Bolivia is a landlocked country in central South - America, known for its diverse cultures, rich history, - and stunning natural landscapes. It is one of the most - culturally diverse countries in the region, with a large - indigenous population that influences its traditions and - daily life. - 11.800.000 - Español - - - BR - Brazil is the largest country in South America and the - fifth largest in the world, known for its vibrant - culture, diverse ecosystems, and iconic landmarks. It is - a vast country with a mix of modern cities, colonial - architecture, and natural wonders. - 212.600.000 - Português - - -
- -
- - -
-
- -
- - -
- -
- -
-

- In some cases, you may wish to align the cell content to the - end in an horizontal direction. To do this, simply add the - class - .tabular-grid-align-cells-inline-end - on the ch-tabular-grid element. -

-
- - - - - - - - - - AR - Argentina is a large country in South America, known - for its diverse landscapes, rich culture, and vibrant - history. It stretches from the tropical north to the - southern tip of the continent, encompassing a variety of - climates and terrains, from the Andes mountains to the - Pampas plains and the Patagonia region. - - 45.400.000 - Español - - - BO - Bolivia is a landlocked country in central South - America, known for its diverse cultures, rich history, - and stunning natural landscapes. It is one of the most - culturally diverse countries in the region, with a large - indigenous population that influences its traditions and - daily life. - 11.800.000 - Español - - - BR - Brazil is the largest country in South America and the - fifth largest in the world, known for its vibrant - culture, diverse ecosystems, and iconic landmarks. It is - a vast country with a mix of modern cities, colonial - architecture, and natural wonders. - 212.600.000 - Português - - -
- -
- - -
-
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/templates/_starting-template.html b/packages/mercury/showcase/templates/_starting-template.html deleted file mode 100644 index ebc5d38df..000000000 --- a/packages/mercury/showcase/templates/_starting-template.html +++ /dev/null @@ -1,61 +0,0 @@ - - - - - - Template - - - - - - - - - - - -
-
- -
- -
-

section title

-

section description

-
-
- -
-
- -
-

Article Description

-
- -
-
- - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/templates/gxg-template.html b/packages/mercury/showcase/templates/gxg-template.html deleted file mode 100644 index ed988442f..000000000 --- a/packages/mercury/showcase/templates/gxg-template.html +++ /dev/null @@ -1,62 +0,0 @@ - -
diff --git a/packages/mercury/showcase/templates/icons-template.html b/packages/mercury/showcase/templates/icons-template.html deleted file mode 100644 index a031d282a..000000000 --- a/packages/mercury/showcase/templates/icons-template.html +++ /dev/null @@ -1,709 +0,0 @@ - - - - - - Icons Template - - - - - - - - - - - - -
-
- - - - -
-
- - diff --git a/packages/mercury/showcase/templates/links.html b/packages/mercury/showcase/templates/links.html deleted file mode 100644 index 574c8ffd7..000000000 --- a/packages/mercury/showcase/templates/links.html +++ /dev/null @@ -1,37 +0,0 @@ - -
- -
- - -
- -
- - -
-
- link -
-
- -

- See how to set the icon -

diff --git a/packages/mercury/showcase/tooltip.html b/packages/mercury/showcase/tooltip.html deleted file mode 100644 index 8bf6d7706..000000000 --- a/packages/mercury/showcase/tooltip.html +++ /dev/null @@ -1,119 +0,0 @@ - - - - - - Tooltip - - - - - - - - - - - - -
-
- -
- -
-

tooltip (work in progress)

-

- A tooltip in web development is a small, interactive pop-up that - appears when a user hovers over or focuses on an element. It - provides additional information or context without cluttering the - interface, offering users quick insights about features or - actions. Tooltips are commonly used to enhance usability by - clarifying unclear elements or providing guidance. -

-

- ch-tooltip allows a variety of positions from the - control that is applied on. Depending on the position a small - triangle will appear attached to the tooltip, with direction - towards the control. At the time of writing it is not possible for - Mercury to know the position of the tooltip. This is why there is - only one case in this page. Once the chameleon provides the - position to Mercury, all the tooltip possible positions will be - documented on this page. -

-
-
- -
-
- -
- -
-

- Hover me to see the tooltip -

- - This is my tooltip contextual information - - -
-
- - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/tree-view.html b/packages/mercury/showcase/tree-view.html deleted file mode 100644 index 26bc0750a..000000000 --- a/packages/mercury/showcase/tree-view.html +++ /dev/null @@ -1,255 +0,0 @@ - - - - - - Tree View - - - - - - - - - - -
-
- -
- -
-

tree view

-

- A custom tree component is a hierarchical UI element that visually - represents a nested data structure, allowing users to expand and - collapse branches. It's commonly used for navigating directories, - organizing data, and managing complex relationships within a - user-friendly interface. -

-
-
- -
-
- -
-

- A tree without icons offers a cleaner, more minimalist - interface that can reduce visual clutter. This simplicity can - help users focus more on the text and content itself, making - it easier for those who prefer a straightforward, text-based - hierarchy without additional visual elements. -

-
- - -
-
- - - -
- -
- -
- - -
-
- -
-

- Icons in tree components enhance user experience by providing - visual cues that make navigation and understanding the - structure easier. They help distinguish item types. -

-
- - -
-
- - - -
- -
- -
- - -
-
- -
-

- A tree component with checkboxes allows users to easily select - multiple items, enhancing tasks like batch operations and - filtering. This feature improves usability by providing a - clear, interactive way to manage selections within a - hierarchical structure. -

-
- - -
-
- - - -
- -
- -
- - -
-
- -
-

- A tree with only vertical lines offers a cleaner, more - streamlined appearance by removing the horizontal connectors. - This minimalist design reduces visual clutter, making it - easier for users to focus on the hierarchy and content of the - items, enhancing overall readability and aesthetics. -

-
- - -
-
- - - -
- -
- -
- - -
-
- -
-

- A tree structure without any lines can be beneficial in user - interfaces where the emphasis is on presenting a highly - minimalist and spacious design. It's particularly useful in - applications where the hierarchy is intuitive or where the - relationships between items are well-understood without the - need for visual connectors. -

-
- - -
-
- - - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/typography.html b/packages/mercury/showcase/typography.html deleted file mode 100644 index 8d0f30c29..000000000 --- a/packages/mercury/showcase/typography.html +++ /dev/null @@ -1,581 +0,0 @@ - - - - - - Typography - - - - - - - - - - - - -
-
- -
- -
-

headings: hierarchy

-

- Using HTML headings provides structure and clarity to your web - content, enhancing both accessibility and SEO. The h1 tag should - be used only once per page as the main title, representing the - primary topic. -

-

- Subsequent headings (h2, h3, etc.) should follow a cascading - order: h2 under h1, h3 under h2, and so on. Skipping levels, like - using h4 before h3, disrupts this flow and can confuse users and - search engines. Proper heading use ensures clear, organized - content, improving user experience. -

-
- -
- -
-
- -
-
-

- Genexus: Shaping Tomorrow's Technology Landscape with - Innovative Solutions -

-
-
- - -
- -
- -
- - -
-
- -
-
-

- Genexus: Shaping Tomorrow's Technology Landscape with - Innovative Solutions -

-
-
- - -
- -
- -
- - -
-
- -
-
-

- Genexus: Shaping Tomorrow's Technology Landscape with - Innovative Solutions -

-
-
- - -
- -
- -
- - -
-
- -
-
-

- Genexus: Shaping Tomorrow's Technology Landscape with - Innovative Solutions -

-
-
- - -
- -
- -
- - -
-
- -
-
-
- Genexus: Shaping Tomorrow's Technology Landscape with - Innovative Solutions -
-
-
- - -
- -
- -
- - -
-
- -
-
-
- Genexus: Shaping Tomorrow's Technology Landscape with - Innovative Solutions -
-
-
- - -
- -
- -
-
-
- - -
- -
-

headings: colors

-

- By default headings implement light gray color. To assign - any another color you have to add any of the allowed heading - colors classes. -

-

- The followings colors are displayed on a - heading 3 type , but they can be applied on any heading - type: h1, h2, h3, h4, h5 or h6. -

-
-
- -
-
- -
-
-

Light Gray Heading Color

-
-
- - -
- -
- -
-
-
- - -
- -
-

body text

-

- In web development, body text is essential for delivering content - to users. Properly structured and organized text ensures - readability and accessibility, enhancing the user experience by - making information easy to navigate and understand. Clear, - well-written text also improves SEO by providing search engines - with easily indexable content, helping your website rank higher in - search results. -

-
-
- - - -
-
- -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
-
- - -
- -
- -
- - -
-
- -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
-
- - -
- -
- -
- - -
-
- -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
-
- - -
- -
- -
- - -
-
- -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
-
- - -
- -
- -
- - - - -
-
- -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
-
- - -
- -
- -
- - -
-
- -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
-
- - -
- -
- -
- - -
-
- -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
-
- - -
- -
- -
- - -
-
- -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
-
- - -
- -
- -
- - - - -
-
- -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
-
- - -
- -
- -
- - -
-
- -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
-
- - -
- -
- -
- - -
-
- -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
-
- - -
- -
- -
- - -
-
- -
-
-

- Genexus is a development platform that automates application - creation using a model-driven approach. It allows developers - to focus on high-level design, generating code for web, - mobile, and desktop applications, resulting in faster - development cycles and fewer errors. -

-
-
- - -
- -
- -
-
-
-
-
- - diff --git a/packages/mercury/showcase/widget.html b/packages/mercury/showcase/widget.html deleted file mode 100644 index fc518e9e9..000000000 --- a/packages/mercury/showcase/widget.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - Widget - - - - - - - - - - - - -
-
- -
- -
-

widget

-

- A widget component is a versatile interface element used to - display dynamic content or provide interactive functionality - within a defined space. It can present anything from media, forms, - or data to tools, allowing users to engage with the content - directly without navigating away from the main context. -

-

- At the time of writing (October 2024) the widget only purpose is - to provide the spacing classes. -

-
-
- - -
-
-
-
- - diff --git a/packages/mercury/src/assets/scss/_helpers.scss b/packages/mercury/src/assets/scss/_helpers.scss index f694fff63..f972ab429 100644 --- a/packages/mercury/src/assets/scss/_helpers.scss +++ b/packages/mercury/src/assets/scss/_helpers.scss @@ -11,13 +11,13 @@ @mixin control-remove-border() { // This resets the border applied // (for controls inside the property grid) - --control__border-width: 0; - --control__border-color: transparent; - --control__border-radius: 0; + --control-border-width: 0; + --control-border-color: transparent; + --control-border-radius: 0; } @mixin grid-cell-remove-padding() { - // we should redefine '--grid-cell__padding-inline' here because when a control + // we should redefine '--grid-cell-padding-inline' here because when a control // is inside a a tabular-grid-cell the cell padding-inline value is required to // be applied on the control padding-inline. padding-block: 0; @@ -25,17 +25,17 @@ } @mixin grid-cell-padding-inline-block() { - padding-block: var(--grid-cell__padding-block); - padding-inline: var(--grid-cell__padding-inline); + padding-block: var(--grid-cell-padding-block); + padding-inline: var(--grid-cell-padding-inline); } @mixin focus-outline() { - outline: var(--focus__outline-width) var(--focus__outline-style) - var(--focus__outline-color); - outline-offset: var(--focus__outline-offset); + outline: var(--focus-outline-width) var(--focus-outline-style) + var(--focus-outline-color); + outline-offset: var(--focus-outline-offset); } @mixin focus-border() { - border-color: var(--borders-un-border-color__focused); + border-color: var(--borders-un-border-color-focused); } // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - @@ -52,7 +52,7 @@ @include grid-cell-remove-padding(); padding-block: 0; padding-inline: 0; - --control__padding-inline: var(--grid-cell__padding-inline); + --control-padding-inline: var(--grid-cell-padding-inline); // to stretch the control display: grid; align-items: stretch; @@ -60,9 +60,9 @@ } @mixin cell-node-type-element--hover() { - outline: var(--focus__outline-width) var(--focus__outline-style) - var(--control__border-color--hover); - outline-offset: var(--focus__outline-offset); + outline: var(--focus-outline-width) var(--focus-outline-style) + var(--control-border-color-hover); + outline-offset: var(--focus-outline-offset); } // cell alignment block diff --git a/packages/mercury/src/base/_common.scss b/packages/mercury/src/base/_common.scss index 546eb8e62..336cac36f 100644 --- a/packages/mercury/src/base/_common.scss +++ b/packages/mercury/src/base/_common.scss @@ -1,563 +1,18 @@ @use "../../../common/base"; @use "./typography" as *; -@mixin control-border() { - border-width: var(--control__border-width); - border-style: var(--control__border-style); - border-color: var(--control__border-color); - border-radius: var(--control__border-radius); -} - -// ---------------------- -// Focus -// ---------------------- -%focus-outline-base { - outline: var(--focus__outline-width) var(--focus__outline-style) - var(--focus__outline-color); - outline-offset: var(--focus__outline-offset); -} @mixin focus-outline() { - @extend %focus-outline-base; -} -@mixin focus-outline-primary() { - @extend %focus-outline-base; - --focus__outline-color: var(--mer-border-color__primary); -} -@mixin focus-border() { - border-color: var(--borders-un-border-color__focused); -} - -// ---------------------- -// Scrollbar Styles -// ---------------------- -@mixin scrollbar-styles() { - scrollbar-width: thin; - scrollbar-color: var(--scrollbar-thumb__bg-color) - var(--scrollbar-track__bg-color); - - //scrollbar - &::-webkit-scrollbar { - width: var(--scrollbar__size); - height: var(--scrollbar__size); - } - - // track - &::-webkit-scrollbar-track { - background-color: var(--scrollbar-track__bg-color); - border-radius: var(--scrollbar-track__border-radius); - } - - // thumb - &::-webkit-scrollbar-thumb { - background-color: var(--scrollbar-thumb__bg-color); - border-radius: var(--scrollbar-thumb__border-radius); - } - - // corner - &::-webkit-scrollbar-corner { - background: var(--scrollbar-corner__bg); - } -} - -// ---------------------- -// Scrollbar Components -// ---------------------- -@mixin scrollbar-components() { - :host(.ch-scrollable), - .ch-scrollable, - .scrollable { - @include scrollbar-styles(); - } -} - -// ---------------------- -// Control -// ---------------------- - -// Colors -@mixin control-colors-enabled() { - background-color: var(--control__bg-color); - color: var(--control__color); - --ch-placeholder-color: var(--control-placeholder__color); - // enabled border color is defined in control-border() -} -@mixin control-colors-hover() { - --control__border-color: var(--control__border-color--hover); -} -@mixin control-colors-disabled() { - --control__bg-color: var(--control__background-color--disabled); - --control__border-color: var(--control__border-color--disabled); - --control__color: var(--control__color--disabled); - --ch-placeholder-color: var(--control-placeholder__color--disabled); -} -@mixin control-colors-error() { - --control__border-color: var(--control__border-color--error); -} -// Border - -@mixin control-remove-border() { - // This resets the border applied - // (for controls inside the property grid) - --control__border-width: 0; - --control__border-color: transparent; - --control__border-radius: 0; -} -// Height -@mixin control-height-regular() { - block-size: var(--control__height); - // to be removed (TODO) - // fixed block-size comes with some issues. -} -// Padding -@mixin control-padding-inline() { - padding-inline: var(--control__padding-inline); -} -@mixin control-padding-block() { - padding-block: var(--control__padding-block); -} -@mixin control-padding-inline-block() { - padding-block: var(--control__padding-block); - padding-inline: var(--control__padding-inline); -} -// Placeholder -@mixin control-placeholder() { - color: var(--control-placeholder__color); - font-style: var(--control-placeholder__font-style); -} - -// ---------------------- -// Control Tiny -// ---------------------- - -@mixin control-tiny-size() { - block-size: var(--control-tiny__size); - inline-size: var(--control-tiny__size); -} -@mixin control-tiny-border() { - border-width: var(--control__border-width); - border-style: var(--control__border-style); - border-color: var(--control__border-color); - border-radius: var(--control__border-radius); + outline: var(--size-2) solid var(--color-border-primary-focused); + outline-offset: calc(var(--size-2) * -1); } -@mixin control-tiny-border-hover() { - --control__border-color: var(--control__border-color--hover); -} -@mixin control-tiny-border-disabled() { - --control__border-color: var(--control__border-color--disabled); -} -@mixin control-tiny-border-error() { - --control__border-color: var(--control__border-color--error); -} - -// ---------------------- -// Items Container -// ---------------------- - -@mixin items-container-border() { - border-style: var(--items-container__border-style); - border-width: var(--items-container__border-width); -} -@mixin items-container-border-radius() { - border-radius: var(--items-container__border-radius); -} -@mixin items-container-colors() { - background-color: var( - --elevation-background-color, - var(--items-container__bg-color) - ); - border-color: var( - --elevation-border-color, - var(--items-container__border-color) - ); -} -@mixin items-container-padding() { - padding-block: var(--items-container__padding-block); - padding-inline: var(--items-container__padding-inline); -} -@mixin items-container-dropdown() { - box-shadow: var(--items-container__box-shadow); -} -@mixin items-container-gap() { - gap: var(--items-container__gap); -} -@mixin items-container-gap-small() { - gap: var(--items-container__gap--small); -} -@mixin items-container-max-height() { - --ch-combo-box__popover-max-block-size: var( - --items-container__max-block-size - ); -} -@mixin items-container-separator() { - block-size: var(--items-container-separator__block-size); - inline-size: var(--items-container-separator__inline-size); - background-color: var(--items-container-separator__bg-color); -} - -// ------------------------------------ -// Single Item (Every item except grid) -// ------------------------------------ -@mixin item-colors-enabled() { - background-color: var(--item__bg-color); - border-color: var(--item__border-color); - color: var(--item__color); -} -@mixin item-colors-hover() { - --item__bg-color: var(--item__bg-color--hover); - --item__border-color: var(--item__border-color--hover); - --item__color: var(--item__color--hover); -} -@mixin item-colors-selected() { - --item__bg-color: var(--item__bg-color--selected); - --item__border-color: var(--item__border-color--selected); - --item__color: var(--item__color--selected); -} -@mixin item-colors-selected-hover() { - --item__bg-color: var(--item__bg-color--selected-hover); - --item__border-color: var(--item__border-color--selected-hover); - --item__color: var(--item__color--selected-hover); -} -@mixin item-colors-disabled() { - --item__bg-color: var(--item__bg-color--disabled); - --item__border-color: var(--item__border-color--disabled); - --item__color: var(--item__color--disabled); -} -@mixin item-border() { - border: var(--item__border-width) var(--item__border-style) - var(--item__border-color); -} -@mixin item-border-block-end() { - border-block-end: var(--item__border-width) var(--item__border-style) - var(--item__border-color); -} -@mixin item-border-radius() { - border-radius: var(--item__border-radius); -} -@mixin item-gap() { - gap: var(--item__gap--regular); -} -@mixin item-column-gap() { - column-gap: var(--item__gap--regular); -} -@mixin item-padding() { - padding-block: var(--item__padding-block); - padding-inline: var(--item__padding-inline); -} -@mixin item-padding-block() { - padding-block: var(--item__padding-inline); -} -@mixin item-padding-inline() { - padding-inline: var(--item__padding-inline); -} -@mixin item-height-regular() { - block-size: var(--item__height--regular); -} -@mixin item-height-large() { - block-size: var(--item__height--large); -} - -// --------------------------------- -// Grid Item -// --------------------------------- - -// Row -@mixin grid-row-colors-enabled() { - // Some controls using --item__** variables inside the tabular grid inherit - // unwanted styles. For example, when a row is selected, controls like a - // list-box inherit the selected background color. To prevent this, these - // properties cannot be directly applied to the tabular grid. - --grid-row__bg-color: var(--item__bg-color); - --grid-row__color: var(--item__color); - background-color: var(--grid-row__bg-color); - color: var(--grid-row__color); -} -@mixin grid-row-colors-highlighted() { - --grid-row__bg-color: var(--item__bg-color--hover); - --grid-row__color: var(--item__color--hover); -} -@mixin grid-row-colors-selected() { - --grid-row__bg-color: var(--item__bg-color--selected); - --grid-row__color: var(--item__color--selected); -} -@mixin grid-row-dragging() { - box-shadow: var(--mer-box-shadow--01); -} -@mixin grid-cell-border-inline-block() { - // this mixin uses the box-shadow property, but it looks - // as a border to the user. - box-shadow: var(--grid-cell__box-shadow-inline-block); -} -@mixin grid-cell-padding-inline() { - padding-inline: var(--grid-cell__padding-block); -} -@mixin grid-cell-padding-block() { - padding-block: var(--grid-cell__padding-block); -} -@mixin grid-cell-padding-inline-block() { - padding-block: var(--grid-cell__padding-block); - padding-inline: var(--grid-cell__padding-inline); -} -@mixin grid-cell-remove-padding() { - // we should redefine '--grid-cell__padding-inline' here because when a control - // is inside a a tabular-grid-cell the cell padding-inline value is required to - // be applied on the control padding-inline. - padding-block: 0; - padding-inline: 0; -} -@mixin grid-rowset-legend-padding-block() { - padding-block-start: var(--mer-spacing--xs); - padding-block-end: var(--mer-spacing--xs); -} -@mixin grid-rowset-legend-colors-enabled() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02); - background-color: var(--grid-rowset-legend__bg-color); -} -@mixin grid-rowset-legend-colors-hover() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--03); -} -@mixin grid-rowset-legend-colors-active() { - --grid-rowset-legend__bg-color: var(--mer-surface__elevation--02); -} - -// ---------------------- -// Tab Caption (Button) -// ---------------------- -@mixin tab-button-border-block() { - border-block: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-border-block-end() { - border-block-end: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-border-block-start() { - border-block-start: var(--tab-caption__border-width) - var(--tab-caption__border-style) var(--tab-caption__border-color); -} -@mixin tab-button-gap() { - gap: var(--tab-caption__gap); -} -@mixin tab-button-colors-enabled() { - background-color: var(--tab-caption__bg-color); - color: var(--tab-caption__color); - border-color: var(--tab-caption__border-color); -} -@mixin tab-button-colors-hover() { - --tab-caption__bg-color: var(--tab-caption__bg-color--hover); - // color remains the same - // border-color remains the same -} -@mixin tab-button-colors-disabled() { - --tab-caption__bg-color: var(--tab-caption__bg-color--disabled); - --tab-caption__color: var(--mer-text__primary--disabled); - --tab-caption__border-color--selected-inline: var( - --mer-border-color__primary--disabled - ); - --tab-caption__border-color--selected-stack: var( - --mer-surface__elevation--02 - ); -} -@mixin tab-button-colors-selected-inline() { - --tab-caption__bg-color: var(--tab-caption__bg-color--selected-inline); - --tab-caption__color: var(--tab-caption__color--selected); - --tab-caption__border-color: var( - --tab-caption__border-color--selected-inline - ); -} -@mixin tab-button-colors-selected-stack() { - --tab-caption__bg-color: var(--tab-caption__bg-color--selected-stack); - --tab-caption__color: var(--tab-caption__color--selected); - --tab-caption__border-color: var(--tab-caption__border-color--selected-stack); -} - -@mixin tab-button-padding-stack() { - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); -} - -// ---------------------- // Window -// ---------------------- // TODO: This styles should better be applied on the ch-window ? %window-styles { - border: var(--window__border); - border-radius: var(--window__border-radius); - padding: var(---window__padding); - background-color: var(--window__bg-color); - box-shadow: var(--mer-box-shadow--01); -} - -// ---------------------- -// Dropdown -// ---------------------- - -@mixin dropdown-styles() { - box-shadow: var(--mer-box-shadow--01); - border-radius: var(--mer-border__radius--sm); -} - -// ---------------------- -// Pseudo Dialog Footer -// ---------------------- - -@mixin control-footer-base() { - --control-footer-justify-content: end; - padding-block-start: var(--mer-spacing--xs); - display: flex; - justify-content: var(--control-footer-justify-content); - align-items: center; -} -@mixin control-footer-border() { - border-block-start: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); -} -@mixin control-footer( - $selector: ".control-footer", - $with-border-selector: ".control-footer-with-border", - $justify-start-selector: ".control-footer-start", - $justify-center-selector: ".control-footer-center", - $justify-space-between-selector: ".control-footer-space-between", - $with-border: true -) { - #{$selector}, - #{$with-border-selector} { - @include control-footer-base(); - } - #{$justify-start-selector} { - --control-footer-justify-content: start; - } - #{$justify-center-selector} { - --control-footer-justify-content: center; - } - #{$justify-space-between-selector} { - --control-footer-justify-content: space-between; - } - @if $with-border { - #{$with-border-selector} { - @include control-footer-border(); - } - } -} - -// ---------------------- -// Pseudo Dialog Header -// ---------------------- - -@mixin control-header-base() { - padding-block-end: var(--mer-spacing--md); -} -@mixin control-header-border() { - border-block-end: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); -} -@mixin control-header( - $selector: ".control-header", - $with-border-selector: ".control-header-with-border", - $with-border: true -) { - #{$selector}, - #{$with-border-selector} { - @include control-header-base(); - } - @if $with-border { - #{$with-border-selector} { - @include control-header-border(); - } - } -} - -// ---------------------- -// Body Spacing -// ---------------------- - -// This custom properties define the block and inline spacing of containers. -// i.e.: dialog, layout, etc.. - -%spacing-body { - padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); - padding-inline: var(--spacing-body-inline-start) - var(--spacing-body-inline-end); -} - -%spacing-body-block { - padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); -} -%spacing-body-block-start { - padding-block-start: var(--spacing-body-block-start); -} -%spacing-body-block-end { - padding-block-end: var(--spacing-body-block-end); -} - -%spacing-body-inline { - padding-inline: var(--spacing-body-inline-start) - var(--spacing-body-inline-end); -} -%spacing-body-inline-start { - padding-inline-start: var(--spacing-body-inline-start); -} -%spacing-body-inline-end { - padding-inline-end: var(--spacing-body-inline-end); -} - -@mixin spacing-body( - $body-selector: ".spacing-body,:host(.spacing-body)", - $body-block-selector: ".spacing-body-block,:host(.spacing-body-block)", - $body-block-start-selector: - ".spacing-body-block-start,:host(.spacing-body-block-start)", - $body-block-end-selector: - ".spacing-body-block-end,:host(.spacing-body-block-end)", - $body-inline-selector: ".spacing-body-inline,:host(.spacing-body-inline)", - $body-inline-start-selector: - ".spacing-body-inline-start,:host(.spacing-body-inline-start)", - $body-inline-end-selector: - ".spacing-body-inline-end,:host(.spacing-body-inline-end)" -) { - #{$body-selector} { - @extend %spacing-body; - } - // block - #{$body-block-selector} { - @extend %spacing-body-block; - } - #{$body-block-start-selector} { - @extend %spacing-body-block-start; - } - #{$body-block-end-selector} { - @extend %spacing-body-block-end; - } - // inline - #{$body-inline-selector} { - @extend %spacing-body-inline; - } - #{$body-inline-start-selector} { - @extend %spacing-body-inline-start; - } - #{$body-inline-end-selector} { - @extend %spacing-body-inline-end; - } -} - -// ---------------------- -// Spinner -// ---------------------- - -@mixin spinner($size, $spinner_color, $track_color) { - $border_thinness: 7; // the higher the thinner - width: $size; - height: $size; - border: calc($size / $border_thinness) solid $track_color; - border-top: calc($size / $border_thinness) solid $spinner_color; - border-radius: 50%; - animation: spin var(--mer-timing--regular) linear infinite; -} -@keyframes spin { - 0% { - transform: rotate(0deg); - } - 100% { - transform: rotate(360deg); - } + border: var(--window-border); + border-radius: var(--window-border-radius); + padding: var(---window-padding); + background-color: var(--window-bg-color); + box-shadow: var(--box-shadow); } diff --git a/packages/mercury/src/base/_control.scss b/packages/mercury/src/base/_control.scss new file mode 100644 index 000000000..15bdab903 --- /dev/null +++ b/packages/mercury/src/base/_control.scss @@ -0,0 +1,124 @@ +// - - - - - - - - - - - - - - - - - - - - +// Control +// - - - - - - - - - - - - - - - - - - - - + +@mixin control-border() { + border-width: var(--control-border-width); + border-style: var(--control-border-style); + border-color: var(--control-border-color); + border-radius: var(--control-border-radius); +} + +// Colors +@mixin control-colors-enabled() { + background-color: var(--control-bg-color); + color: var(--control-color); +} +@mixin control-colors-hover() { + --control-border-color: var(--control-border-color-hover); + --control-color: var(--control-color-hover); +} +@mixin control-colors-disabled() { + --control-bg-color: var(--control-background-color-disabled); + --control-border-color: var(--control-border-color-disabled); + --control-color: var(--control-color-disabled); + --ch-placeholder-color: var(--control-placeholder-color--disabled); +} +@mixin control-colors-error() { + --control-border-color: var(--control-border-color-error); + --control-color: var(--control-color-error); +} +// Border + +@mixin control-remove-border() { + // This resets the border applied + // (for controls inside the property grid) + --control-border-width: 0; + --control-border-color: transparent; + --control-border-radius: 0; +} +// Height +@mixin control-height-regular() { + block-size: var(--control-height); + // to be removed (TODO) + // fixed block-size comes with some issues. +} +// Padding +@mixin control-padding-inline() { + padding-inline: var(--control-padding-inline); +} +@mixin control-padding-block() { + padding-block: var(--control-padding-block); +} +@mixin control-padding-inline-block() { + padding-block: var(--control-padding-block); + padding-inline: var(--control-padding-inline); +} +// Placeholder +@mixin control-placeholder() { + @extend %body-italic-m; + color: var(--color-text-neutral-neutral); +} + +// - - - - - - - - - - - - - - - - - - - - +// Control Tiny +// - - - - - - - - - - - - - - - - - - - - + +@mixin control-tiny-border() { + border-width: var(--control-border-width); + border-style: var(--control-border-style); + border-color: var(--control-border-color); + border-radius: var(--control-tiny-border-radius); +} +@mixin control-tiny-border-hover() { + --control-border-color: var(--control-border-color-hover); +} +@mixin control-tiny-border-disabled() { + --control-border-color: var(--control-border-color-disabled); +} +@mixin control-tiny-border-error() { + --control-border-color: var(--control-border-color-error); +} + +@mixin control-tiny-size() { + block-size: var(--control-tiny-size); + inline-size: var(--control-tiny-size); +} +@mixin control-tiny-option-checked-size() { + block-size: var(--control-tiny-option-checked-size); + inline-size: var(--control-tiny-option-checked-size); +} +// Option +@mixin control-tiny-option-checked-position() { + position: absolute; + inset-block-start: calc( + (var(--control-tiny-size) - var(--control-tiny-option-checked-size)) / 2 + ); + inset-inline-start: calc( + (var(--control-tiny-size) - var(--control-tiny-option-checked-size)) / 2 + ); +} +@mixin control-tiny-option-indeterminate-size() { + block-size: var(--control-tiny-option-indeterminate-block-size); + inline-size: var(--control-tiny-option-checked-size); +} +@mixin control-tiny-option-indeterminate-position() { + position: absolute; + inset-block-start: calc( + ( + var(--control-tiny-size) - var( + --control-tiny-option-indeterminate-block-size + ) + ) / + 2 + ); + inset-inline-start: calc( + (var(--control-tiny-size) - var(--control-tiny-option-checked-size)) / 2 + ); +} +@mixin control-tiny-option-color() { + background-color: var(--control-tiny-option-color); +} +@mixin control-tiny-option-color-disabled() { + --control-tiny-option-color: var(--control-tiny-option-color-disabled); +} diff --git a/packages/mercury/src/base/_fields.scss b/packages/mercury/src/base/_fields.scss index 96426fd23..97ae075d6 100644 --- a/packages/mercury/src/base/_fields.scss +++ b/packages/mercury/src/base/_fields.scss @@ -2,12 +2,12 @@ display: grid; &-group { - --spacing-body-block-start: var(--mer-spacing--md); - --spacing-body-block-end: var(--mer-spacing--md); - --spacing-body-inline-start: var(--mer-spacing--md); - --spacing-body-inline-end: var(--mer-spacing--md); - row-gap: var(--field-group__row-gap); - column-gap: var(--field-group__column-gap); + --spacing-body-block-start: var(--size-16); + --spacing-body-block-end: var(--size-16); + --spacing-body-inline-start: var(--size-16); + --spacing-body-inline-end: var(--size-16); + row-gap: var(--field-group-row-gap); + column-gap: var(--field-group-column-gap); &-default { display: grid; @@ -20,19 +20,19 @@ &-justified { display: grid; - column-gap: var(--field__column-gap); - row-gap: var(--field-group__row-gap); + column-gap: var(--field-column-gap); + row-gap: var(--field-group-row-gap); grid-template-columns: max-content auto; } } &-block { - row-gap: var(--field__row-gap); + row-gap: var(--field-row-gap); grid-template-rows: max-content 1fr; } &-inline { - column-gap: var(--field__column-gap); + column-gap: var(--field-column-gap); grid-template-columns: max-content 1fr; &__label { diff --git a/packages/mercury/src/base/_icons.scss b/packages/mercury/src/base/_icons.scss index 3593d5915..f814c5f94 100644 --- a/packages/mercury/src/base/_icons.scss +++ b/packages/mercury/src/base/_icons.scss @@ -7,18 +7,18 @@ /// @group Icon @mixin icon-size--sm() { @include common-base.icon-background-common-styles( - $inline-size: var(--mer-icon__box--sm), - $block-size: var(--mer-icon__box--sm), - $background-size: var(--mer-icon__size--sm) + $inline-size: var(--icon-box-sm), + $block-size: var(--icon-box-sm), + $background-size: var(--icon-size-sm) ); } /// @group Icon @mixin icon-size--md() { @include common-base.icon-background-common-styles( - $inline-size: var(--mer-icon__box--md), - $block-size: var(--mer-icon__box--md), - $background-size: var(--mer-icon__size--md) + $inline-size: var(--icon-box-md), + $block-size: var(--icon-box-md), + $background-size: var(--icon-size-md) ); } @@ -35,7 +35,7 @@ // - - - - - - - - - - - - - - - - - - - - /// @group Icon @mixin icon-and-text() { - @include common-base.icon-and-text-styles($gap: var(--control__icon-gap)); + @include common-base.icon-and-text-styles($gap: var(--control-icon-gap)); } %icon-and-text { diff --git a/packages/mercury/src/base/_link.scss b/packages/mercury/src/base/_link.scss new file mode 100644 index 000000000..1254b49e7 --- /dev/null +++ b/packages/mercury/src/base/_link.scss @@ -0,0 +1,87 @@ +/// @group Link + +/// @param {String} $link-primary-selector [".link-primary"] - +/// @param {String} $link-secondary-selector [".link-secondary"] - +/// @param {String} $link-teritary-selector [".link-tertiary"] - + +%link { + // Note: the link style should not modify the font-size. + --link-color: inherit; + color: var(--link-color); + &__primary { + --link-color: var(--color-text-primary-default); + &--hover { + --link-color: var(--color-text-primary-hover); + } + &--active { + --link-color: var(--color-text-primary-pressed); + } + &--visited { + // --link-color: var(); TODO + } + } + &__tertiary { + &--hover { + --link-color: var(--color-text-primary-hover); + } + &--active { + --link-color: var(--color-text-primary-pressed); + } + &--visited { + // --link-color: var(); TODO + } + } + &--underlined { + text-decoration: underline; + } +} + +@mixin link-classes( + $link-primary-selector: ".link-primary", + $link-secondary-selector: ".link-secondary", + $link-tertiary-selector: ".link-tertiary" +) { + #{$link-primary-selector} { + @extend %link; + @extend %link__primary; + @extend %link--underlined; + &:hover { + @extend %link__primary--hover; + } + &:active { + @extend %link__primary--active; + } + &:visited { + @extend %link__primary--visited; + } + } + + #{$link-secondary-selector} { + // Same as primary, but not underlined + @extend %link; + @extend %link__primary; + &:hover { + @extend %link__primary--hover; + } + &:active { + @extend %link__primary--active; + } + &:visited { + @extend %link__primary--visited; + } + } + + #{$link-tertiary-selector} { + @extend %link__tertiary; + @extend %link--underlined; + &:hover { + @extend %link__tertiary--hover; + } + &:active { + @extend %link__tertiary--active; + } + &:visited { + @extend %link__tertiary--visited; + } + } +} diff --git a/packages/mercury/src/base/_list.scss b/packages/mercury/src/base/_list.scss new file mode 100644 index 000000000..a34d0b220 --- /dev/null +++ b/packages/mercury/src/base/_list.scss @@ -0,0 +1,134 @@ +// - - - - - - - - - - - - - - - - - - - - +// Items Container +// - - - - - - - - - - - - - - - - - - - - + +@mixin items-container-border() { + border-style: var(--items-container-border-style); + border-width: var(--items-container-border-width); +} +@mixin items-container-border-radius() { + border-radius: var(--items-container-border-radius); +} +@mixin items-container-colors() { + background-color: var( + --elevation-background-color, + var(--items-container-bg-color) + ); + border-color: var( + --elevation-border-color, + var(--items-container-border-color) + ); +} +@mixin items-container-padding() { + padding-block: var(--items-container-padding-block); + padding-inline: var(--items-container-padding-inline); +} +@mixin items-container-dropdown() { + box-shadow: var(--box-shadow); +} +@mixin items-container-gap() { + gap: var(--items-container-gap); +} +@mixin items-container-gap-small() { + gap: var(--items-container-gap-small); +} +@mixin items-container-max-height() { + --ch-combo-box__popover-max-block-size: var(--items-container-max-block-size); +} +@mixin items-container-separator() { + margin-block: var(--size-6); + margin-inline: var(--size-6); + background-color: var(--color-accent-neutral-default); +} + +// - - - - - - - - - - - - - - - - - - - - +// Items Header +// - - - - - - - - - - - - - - - - - - - - + +@mixin items-header-colors() { + --items-header-color: var(--color-accent-primary-on-hover); + color: var(--items-header-color); +} +@mixin items-header-expandable-colors-hover() { + --items-header-color: var(--color-text-primary-on-hover); +} +@mixin items-header-expandable-colors-pressed() { + --items-header-color: var(--color-text-primary-pressed); +} +@mixin items-header-expandable-colors-disabled() { + --items-header-color: var(--color-text-neutral-on-disabled); +} +@mixin items-header-font-style() { + @extend %body-semi-bold-s; +} + +// - - - - - - - - - - - - - - - - - - - - +// Item +// - - - - - - - - - - - - - - - - - - - - +// (Every item except grid) + +// colors +@mixin item-colors-enabled() { + // TODO: These tokens should be defined/initialized here. + background-color: var(--item-bg-color); + border-color: var(--item-border-color); + color: var(--item-color); +} +@mixin item-colors-hover() { + --item-bg-color: var(--item-bg-color-hover); + --item-border-color: var(--item-border-color-hover); + --item-color: var(--item-color-hover); +} +@mixin item-colors-selected() { + --item-bg-color: var(--item-bg-color-selected); + --item-border-color: var(--item-border-color-selected); + --item-color: var(--item-color-selected); +} +@mixin item-colors-selected-hover() { + --item-bg-color: var(--item-bg-color-selected-hover); + --item-border-color: var(--item-border-color-selected-hover); + --item-color: var(--item-color-selected-hover); +} +@mixin item-colors-disabled() { + --item-bg-color: var(--item-bg-color--disabled); + --item-border-color: var(--item-border-color-disabled); + --item-color: var(--item-color-disabled); +} + +// border +@mixin item-border() { + border: var(--item-border-width) var(--item-border-style) + var(--item-border-color); +} +@mixin item-border-block-end() { + border-block-end: var(--item-border-width) var(--item-border-style) + var(--item-border-color); +} +@mixin item-border-radius() { + border-radius: var(--item-border-radius); +} + +// gap +@mixin item-gap() { + gap: var(--item-gap-regular); +} +@mixin item-column-gap() { + column-gap: var(--item-gap-regular); +} + +// padding +@mixin item-padding() { + padding-block: var(--item-padding-block); + padding-inline: var(--item-padding-inline); +} +@mixin item-padding-block() { + padding-block: var(--item-padding-inline); +} +@mixin item-padding-inline() { + padding-inline: var(--item-padding-inline); +} + +// font style +@mixin item-font-style() { + @extend %body-regular-m; +} diff --git a/packages/mercury/src/base/_scrollbar.scss b/packages/mercury/src/base/_scrollbar.scss new file mode 100644 index 000000000..c5e01bb81 --- /dev/null +++ b/packages/mercury/src/base/_scrollbar.scss @@ -0,0 +1,28 @@ +@mixin scrollbar-styles() { + scrollbar-width: thin; + scrollbar-color: var(--color-border-surface-on-elevation-01) transparent; + + &::-webkit-scrollbar { + width: var(--size-4); + height: var(--size-4); + } + &::-webkit-scrollbar-track { + background-color: transparent; + border-radius: var(--size-8); + } + &::-webkit-scrollbar-thumb { + background-color: var(--color-border-surface-on-elevation-02); + border-radius: var(--size-8); + } + &::-webkit-scrollbar-corner { + background: transparent; + } +} + +@mixin scrollbar-components() { + :host(.ch-scrollable), + .ch-scrollable, + .scrollable { + @include scrollbar-styles(); + } +} diff --git a/packages/mercury/src/base/_spacing-body.scss b/packages/mercury/src/base/_spacing-body.scss new file mode 100644 index 000000000..6586855f7 --- /dev/null +++ b/packages/mercury/src/base/_spacing-body.scss @@ -0,0 +1,67 @@ +@mixin spacing-body( + $body-selector: ".spacing-body,:host(.spacing-body)", + $body-block-selector: ".spacing-body-block,:host(.spacing-body-block)", + $body-block-start-selector: + ".spacing-body-block-start,:host(.spacing-body-block-start)", + $body-block-end-selector: + ".spacing-body-block-end,:host(.spacing-body-block-end)", + $body-inline-selector: ".spacing-body-inline,:host(.spacing-body-inline)", + $body-inline-start-selector: + ".spacing-body-inline-start,:host(.spacing-body-inline-start)", + $body-inline-end-selector: + ".spacing-body-inline-end,:host(.spacing-body-inline-end)" +) { + #{$body-selector} { + @extend %spacing-body; + } + // block + #{$body-block-selector} { + @extend %spacing-body-block; + } + #{$body-block-start-selector} { + @extend %spacing-body-block-start; + } + #{$body-block-end-selector} { + @extend %spacing-body-block-end; + } + // inline + #{$body-inline-selector} { + @extend %spacing-body-inline; + } + #{$body-inline-start-selector} { + @extend %spacing-body-inline-start; + } + #{$body-inline-end-selector} { + @extend %spacing-body-inline-end; + } +} + +// This custom properties define the block and inline spacing of containers. +// i.e.: dialog, layout, etc.. + +%spacing-body { + padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); + padding-inline: var(--spacing-body-inline-start) + var(--spacing-body-inline-end); +} + +%spacing-body-block { + padding-block: var(--spacing-body-block-start) var(--spacing-body-block-end); +} +%spacing-body-block-start { + padding-block-start: var(--spacing-body-block-start); +} +%spacing-body-block-end { + padding-block-end: var(--spacing-body-block-end); +} + +%spacing-body-inline { + padding-inline: var(--spacing-body-inline-start) + var(--spacing-body-inline-end); +} +%spacing-body-inline-start { + padding-inline-start: var(--spacing-body-inline-start); +} +%spacing-body-inline-end { + padding-inline-end: var(--spacing-body-inline-end); +} diff --git a/packages/mercury/src/base/_spinner.scss b/packages/mercury/src/base/_spinner.scss new file mode 100644 index 000000000..ca243b7a5 --- /dev/null +++ b/packages/mercury/src/base/_spinner.scss @@ -0,0 +1,17 @@ +@mixin spinner($size, $spinner_color, $track_color) { + $border_thinness: 7; + width: $size; + height: $size; + border: calc($size / $border_thinness) solid $track_color; + border-top: calc($size / $border_thinness) solid $spinner_color; + border-radius: 50%; + animation: spin var(--timing-regular) linear infinite; +} +@keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} diff --git a/packages/mercury/src/base/_typography.scss b/packages/mercury/src/base/_typography.scss index a7d0a7927..4d763f0df 100644 --- a/packages/mercury/src/base/_typography.scss +++ b/packages/mercury/src/base/_typography.scss @@ -1,3 +1,11 @@ +// Figma rounds line-height values (e.g. 19.6 → 20). +// To keep designs pixel perfect, we also round the CSS +// calculation, since line-height affects the total +// box height (line-height + padding + border). +@function round-figma-line-height($line-height-value) { + @return round(calc(1em * #{$line-height-value}), 1px); +} + // heading @mixin heading-1() { @@ -31,8 +39,9 @@ } %heading { - font-weight: var(--font-weight-bold); - line-height: var(--line-height-tight); + font-family: var(--font-family-header); + font-weight: var(--font-style-bold); + line-height: round-figma-line-height(var(--line-height-tight)); &-1 { @include heading-1(); @@ -63,6 +72,12 @@ // subtitle: regular +@mixin subtitle-regular-xl() { + @extend %subtitle; + @extend %subtitle-regular; + @extend %subtitle-xl; +} + @mixin subtitle-regular-l() { @extend %subtitle; @extend %subtitle-regular; @@ -89,6 +104,12 @@ // subtitle: semi-bold +@mixin subtitle-semi-bold-xl() { + @extend %subtitle; + @extend %subtitle-semi-bold; + @extend %subtitle-xl; +} + @mixin subtitle-semi-bold-l() { @extend %subtitle; @extend %subtitle-semi-bold; @@ -116,28 +137,37 @@ %subtitle { font-family: var(--font-family-header); + &-xl { + font-size: var(--font-size-subtitle-xl); + line-height: round-figma-line-height(var(--line-height-regular)); + } + &-l { font-size: var(--font-size-subtitle-l); - line-height: var(--line-height-regular); + line-height: round-figma-line-height(var(--line-height-regular)); } &-m { font-size: var(--font-size-subtitle-m); - line-height: var(--line-height-regular); + line-height: round-figma-line-height(var(--line-height-regular)); } &-s { font-size: var(--font-size-subtitle-s); - line-height: var(--line-height-tight); + line-height: round-figma-line-height(var(--line-height-tight)); } &-xs { font-size: var(--font-size-subtitle-xs); - line-height: var(--line-height-tight); + line-height: round-figma-line-height(var(--line-height-tight)); } &-regular { - font-weight: var(--font-weight-regular); + font-weight: var(--font-style-regular); + + &-xl { + @include subtitle-regular-xl(); + } &-l { @include subtitle-regular-l(); @@ -157,7 +187,11 @@ } &-semi-bold { - font-weight: var(--font-weight-semi-bold); + font-weight: var(--font-style-semi-bold); + + &-xl { + @include subtitle-semi-bold-xl(); + } &-l { @include subtitle-semi-bold-l(); @@ -179,13 +213,12 @@ // body @mixin body-font() { - // "medium" is the body font weight. - font-size: var(--font-size-body-m); - line-height: var(--line-height-tight); - font-weight: var(--font-weight-regular); + // body tag font style + @include body-regular-m(); } // body: regular + @mixin body-regular-xl() { @extend %body; @extend %body-regular; @@ -280,32 +313,68 @@ @extend %body-xs; } -%body { - line-height: var(--line-height-tight); +// body: link + +@mixin body-link-xl() { + @extend %body; + @extend %body-link; + @extend %body-xl; +} + +@mixin body-link-l() { + @extend %body; + @extend %body-link; + @extend %body-l; +} + +@mixin body-link-m() { + @extend %body; + @extend %body-link; + @extend %body-m; +} + +@mixin body-link-s() { + @extend %body; + @extend %body-link; + @extend %body-s; +} + +@mixin body-link-xs() { + @extend %body; + @extend %body-link; + @extend %body-xs; +} +%body { // sizes + font-family: var(--font-family-body); &-xl { font-size: var(--font-size-body-xl); + line-height: round-figma-line-height(var(--line-height-relaxed)); } &-l { font-size: var(--font-size-body-l); + line-height: round-figma-line-height(var(--line-height-relaxed)); } &-m { font-size: var(--font-size-body-m); + line-height: round-figma-line-height(var(--line-height-relaxed)); } &-s { font-size: var(--font-size-body-s); + line-height: round-figma-line-height(var(--line-height-relaxed)); } &-xs { font-size: var(--font-size-body-xs); + line-height: round-figma-line-height(var(--line-height-relaxed)); } &-regular { - font-weight: var(--font-weight-regular); + font-weight: var(--font-style-regular); &-xl { @include body-regular-xl(); @@ -316,7 +385,7 @@ } &-m { - @include body-font(); + @include body-regular-m(); } &-s { @@ -329,7 +398,7 @@ } &-semi-bold { - font-weight: var(--font-weight-semi-bold); + font-weight: var(--font-style-semi-bold); &-xl { @include body-semi-bold-xl(); @@ -353,7 +422,7 @@ } &-italic { - font-weight: var(--font-weight-regular); + font-weight: var(--font-style-regular); font-style: italic; &-xl { @@ -376,120 +445,174 @@ @include body-italic-xs(); } } + + &-link { + font-weight: var(--font-style-regular); + text-decoration: underline; + + &-xl { + @include body-italic-xl(); + } + + &-l { + @include body-italic-l(); + } + + &-m { + @include body-italic-m(); + } + + &-s { + @include body-italic-s(); + } + + &-xs { + @include body-italic-xs(); + } + } } -// tiny +// caption -// tiny: regular +// caption: regular -@mixin tiny-regular-l() { - @extend %tiny; - @extend %tiny-regular; - @extend %tiny-l; +@mixin caption-regular-l() { + @extend %caption; + @extend %caption-regular; + @extend %caption-l; } -@mixin tiny-regular-m() { - @extend %tiny; - @extend %tiny-regular; - @extend %tiny-m; +@mixin caption-regular-m() { + @extend %caption; + @extend %caption-regular; + @extend %caption-m; } -@mixin tiny-regular-s() { - @extend %tiny; - @extend %tiny-regular; - @extend %tiny-s; +@mixin caption-regular-s() { + @extend %caption; + @extend %caption-regular; + @extend %caption-s; } -@mixin tiny-regular-xs() { - @extend %tiny; - @extend %tiny-regular; - @extend %tiny-xs; +@mixin caption-regular-xs() { + @extend %caption; + @extend %caption-regular; + @extend %caption-xs; } -// tiny: semi-bold +// caption: semi-bold -@mixin tiny-semi-bold-l() { - @extend %tiny; - @extend %tiny-semi-bold; - @extend %tiny-l; +@mixin caption-semi-bold-l() { + @extend %caption; + @extend %caption-semi-bold; + @extend %caption-l; } -@mixin tiny-semi-bold-m() { - @extend %tiny; - @extend %tiny-semi-bold; - @extend %tiny-m; +@mixin caption-semi-bold-m() { + @extend %caption; + @extend %caption-semi-bold; + @extend %caption-m; } -@mixin tiny-semi-bold-s() { - @extend %tiny; - @extend %tiny-semi-bold; - @extend %tiny-s; +@mixin caption-semi-bold-s() { + @extend %caption; + @extend %caption-semi-bold; + @extend %caption-s; } -@mixin tiny-semi-bold-xs() { - @extend %tiny; - @extend %tiny-semi-bold; - @extend %tiny-xs; +@mixin caption-semi-bold-xs() { + @extend %caption; + @extend %caption-semi-bold; + @extend %caption-xs; } -%tiny { - line-height: var(--line-height-tight); +%caption { + font-family: var(--font-family-body); + line-height: round-figma-line-height(var(--line-height-relaxed)); &-l { - font-size: var(--font-size-tiny-l); - line-height: var(--line-height-tight); + font-size: var(--font-size-caption-l); } &-m { - font-size: var(--font-size-tiny-m); - line-height: var(--line-height-tight); + font-size: var(--font-size-caption-m); } &-s { - font-size: var(--font-size-tiny-s); - line-height: var(--line-height-tight); + font-size: var(--font-size-caption-s); } &-xs { - font-size: var(--font-size-tiny-xs); - line-height: var(--line-height-tight); + font-size: var(--font-size-caption-xs); } &-regular { - font-weight: var(--font-weight-regular); + font-weight: var(--font-style-regular); &-l { - @include tiny-regular-l(); + @include caption-regular-l(); } &-m { - @include tiny-regular-m(); + @include caption-regular-m(); } &-s { - @include tiny-regular-s(); + @include caption-regular-s(); } &-xs { - @include tiny-regular-xs(); + @include caption-regular-xs(); } } &-semi-bold { - font-weight: var(--font-weight-semi-bold); + font-weight: var(--font-style-semi-bold); &-l { - @include tiny-semi-bold-l(); + @include caption-semi-bold-l(); } &-m { - @include tiny-semi-bold-m(); + @include caption-semi-bold-m(); } &-s { - @include tiny-semi-bold-s(); + @include caption-semi-bold-s(); } &-xs { - @include tiny-semi-bold-xs(); + @include caption-semi-bold-xs(); + } + } +} + +@mixin code-s() { + @extend %code; + @extend %code-regular; + @extend %code-s; +} + +@mixin code-m() { + @extend %code; + @extend %code-regular; + @extend %code-m; +} + +%code { + font-family: monospace; + line-height: round-figma-line-height(var(--line-height-spacious)); + + &-s { + font-size: var(--font-size-body-s); + } + &-m { + font-size: var(--font-size-body-m); + } + + &-regular { + font-weight: var(--font-style-regular); + + &-m { + @include code-m(); } } } @@ -502,11 +625,13 @@ /// @param {String} $heading-5-selector [".heading-5"] - /// @param {String} $heading-6-selector [".heading-6"] - +/// @param {String} $subtitle-regular-xl-selector [".subtitle-regular-xl"] - /// @param {String} $subtitle-regular-l-selector [".subtitle-regular-l"] - /// @param {String} $subtitle-regular-m-selector [".subtitle-regular-m"] - /// @param {String} $subtitle-regular-s-selector [".subtitle-regular-s"] - /// @param {String} $subtitle-regular-xs-selector [".subtitle-regular-xs"] - +/// @param {String} $subtitle-bold-xl-selector [".subtitle-bold-xl"] - /// @param {String} $subtitle-bold-l-selector [".subtitle-bold-l"] - /// @param {String} $subtitle-bold-m-selector [".subtitle-bold-m"] - /// @param {String} $subtitle-bold-s-selector [".subtitle-bold-s"] - @@ -530,15 +655,24 @@ /// @param {String} $body-italic-s-selector [".body-italic-s"] - /// @param {String} $body-italic-xs-selector [".body-italic-xs"] - -/// @param {String} $tiny-regular-l-selector [".tiny-regular-l"] - -/// @param {String} $tiny-regular-m-selector [".tiny-regular-m"] - -/// @param {String} $tiny-regular-s-selector [".tiny-regular-s"] - -/// @param {String} $tiny-regular-xs-selector [".tiny-regular-xs"] - +/// @param {String} $body-link-xl-selector [".body-link-xl"] - +/// @param {String} $body-link-l-selector [".body-link-l"] - +/// @param {String} $body-link-m-selector [".body-link-m"] - +/// @param {String} $body-link-s-selector [".body-link-s"] - +/// @param {String} $body-link-xs-selector [".body-link-xs"] - -/// @param {String} $tiny-semi-bold-l-selector [".tiny-semi-bold-l"] - -/// @param {String} $tiny-semi-bold-m-selector [".tiny-semi-bold-m"] - -/// @param {String} $tiny-semi-bold-s-selector [".tiny-semi-bold-s"] - -/// @param {String} $tiny-semi-bold-xs-selector [".tiny-semi-bold-xs"] - +/// @param {String} $caption-regular-l-selector [".caption-regular-l"] - +/// @param {String} $caption-regular-m-selector [".caption-regular-m"] - +/// @param {String} $caption-regular-s-selector [".caption-regular-s"] - +/// @param {String} $caption-regular-xs-selector [".caption-regular-xs"] - + +/// @param {String} $caption-semi-bold-l-selector [".caption-semi-bold-l"] - +/// @param {String} $caption-semi-bold-m-selector [".caption-semi-bold-m"] - +/// @param {String} $caption-semi-bold-s-selector [".caption-semi-bold-s"] - +/// @param {String} $caption-semi-bold-xs-selector [".caption-semi-bold-xs"] - + +/// @param {String} $code-m-selector [".code-m"] - +/// @param {String} $code-s-selector [".code-s"] - @mixin typography-classes( $heading-1-selector: ".heading-1", @@ -548,11 +682,13 @@ $heading-5-selector: ".heading-5", $heading-6-selector: ".heading-6", + $subtitle-regular-xl-selector: ".subtitle-regular-xl", $subtitle-regular-l-selector: ".subtitle-regular-l", $subtitle-regular-m-selector: ".subtitle-regular-m", $subtitle-regular-s-selector: ".subtitle-regular-s", $subtitle-regular-xs-selector: ".subtitle-regular-xs", + $subtitle-semi-bold-xl-selector: ".subtitle-semi-bold-xl", $subtitle-semi-bold-l-selector: ".subtitle-semi-bold-l", $subtitle-semi-bold-m-selector: ".subtitle-semi-bold-m", $subtitle-semi-bold-s-selector: ".subtitle-semi-bold-s", @@ -576,15 +712,24 @@ $body-italic-s-selector: ".body-italic-s", $body-italic-xs-selector: ".body-italic-xs", - $tiny-regular-l-selector: ".tiny-regular-l", - $tiny-regular-m-selector: ".tiny-regular-m", - $tiny-regular-s-selector: ".tiny-regular-s", - $tiny-regular-xs-selector: ".tiny-regular-xs", + $body-link-xl-selector: ".body-link-xl", + $body-link-l-selector: ".body-link-l", + $body-link-m-selector: ".body-link-m", + $body-link-s-selector: ".body-link-s", + $body-link-xs-selector: ".body-link-xs", + + $caption-regular-l-selector: ".caption-regular-l", + $caption-regular-m-selector: ".caption-regular-m", + $caption-regular-s-selector: ".caption-regular-s", + $caption-regular-xs-selector: ".caption-regular-xs", - $tiny-semi-bold-l-selector: ".tiny-semi-bold-l", - $tiny-semi-bold-m-selector: ".tiny-semi-bold-m", - $tiny-semi-bold-s-selector: ".tiny-semi-bold-s", - $tiny-semi-bold-xs-selector: ".tiny-semi-bold-xs" + $caption-semi-bold-l-selector: ".caption-semi-bold-l", + $caption-semi-bold-m-selector: ".caption-semi-bold-m", + $caption-semi-bold-s-selector: ".caption-semi-bold-s", + $caption-semi-bold-xs-selector: ".caption-semi-bold-xs", + + $code-m-selector: ".code-m", + $code-s-selector: ".code-s" ) { // Heading: @@ -609,6 +754,9 @@ // Subtitle: regular + #{$subtitle-regular-xl-selector} { + @extend %subtitle-regular-xl; + } #{$subtitle-regular-l-selector} { @extend %subtitle-regular-l; } @@ -624,6 +772,9 @@ // Subtitle: bold + #{$subtitle-semi-bold-xl-selector} { + @extend %subtitle-semi-bold-xl; + } #{$subtitle-semi-bold-l-selector} { @extend %subtitle-semi-bold-l; } @@ -691,51 +842,63 @@ @extend %body-italic-xs; } - // Body tiny: regular + // Caption: regular - #{$tiny-regular-l-selector} { - @extend %tiny-regular-l; + #{$caption-regular-l-selector} { + @extend %caption-regular-l; } - #{$tiny-regular-m-selector} { - @extend %tiny-regular-m; + #{$caption-regular-m-selector} { + @extend %caption-regular-m; } - #{$tiny-regular-s-selector} { - @extend %tiny-regular-s; + #{$caption-regular-s-selector} { + @extend %caption-regular-s; } - #{$tiny-regular-xs-selector} { - @extend %tiny-regular-xs; + #{$caption-regular-xs-selector} { + @extend %caption-regular-xs; } - // Body tiny: semi-bold + // Caption: semi-bold - #{$tiny-semi-bold-l-selector} { - @extend %tiny-semi-bold-l; + #{$caption-semi-bold-l-selector} { + @extend %caption-semi-bold-l; } - #{$tiny-semi-bold-m-selector} { - @extend %tiny-semi-bold-m; + #{$caption-semi-bold-m-selector} { + @extend %caption-semi-bold-m; } - #{$tiny-semi-bold-s-selector} { - @extend %tiny-semi-bold-s; + #{$caption-semi-bold-s-selector} { + @extend %caption-semi-bold-s; } - #{$tiny-semi-bold-xs-selector} { - @extend %tiny-semi-bold-xs; + #{$caption-semi-bold-xs-selector} { + @extend %caption-semi-bold-xs; + } + + // Code + + #{$code-m-selector} { + @extend %code-m; + } + + #{$code-s-selector} { + @extend %code-s; } } // link %text-link { - color: var(--mer-text__primary); + color: var(--color-text-primary-default); text-decoration-line: underline; } // property-grid %text-edited { - font-weight: var(--font-weight-bold); + font-weight: var(--font-style-bold); } %text-readonly { font-style: italic; - color: var(--item__color--disabled); + color: var(--item-color-disabled); } + +// code diff --git a/packages/mercury/src/base/_utilities.scss b/packages/mercury/src/base/_utilities.scss index 4f45e157b..fc31c877a 100644 --- a/packages/mercury/src/base/_utilities.scss +++ b/packages/mercury/src/base/_utilities.scss @@ -10,22 +10,21 @@ #{$elevation-1-selector}, #{$elevation-2-selector}, #{$elevation-3-selector} { - color: var(--mer-text__on-elevation); - --elevation-color: var(--mer-text__on-elevation); + --elevation-color: var(--color-text-neutral-default); + color: var(--color-text-neutral-default); + background-color: var(--elevation-background-color); + border-color: var(--elevation-border-color); } #{$elevation-1-selector} { - --elevation-background-color: var(--mer-surface__elevation--01); - background-color: var(--elevation-background-color); - --elevation-border-color: var(--mer-border-color__on-elevation--01); + --elevation-background-color: var(--color-accent-surface-elevation-01); + --elevation-border-color: var(--color-border-surface-on-elevation-01); } #{$elevation-2-selector} { - --elevation-background-color: var(--mer-surface__elevation--02); - background-color: var(--elevation-background-color); - --elevation-border-color: var(--mer-border-color__on-elevation--02); + --elevation-background-color: var(--color-accent-surface-elevation-02); + --elevation-border-color: var(--color-border-surface-on-elevation-02); } #{$elevation-3-selector} { - --elevation-background-color: var(--mer-surface__elevation--03); - background-color: var(--elevation-background-color); - --elevation-border-color: var(--mer-border-color__on-elevation--03); + --elevation-background-color: var(--color-accent-surface-elevation-03); + --elevation-border-color: var(--color-border-surface-on-elevation-03); } } diff --git a/packages/mercury/src/base/button/_button-styles.scss b/packages/mercury/src/base/button/_button-styles.scss index 920179859..9cdb4e563 100644 --- a/packages/mercury/src/base/button/_button-styles.scss +++ b/packages/mercury/src/base/button/_button-styles.scss @@ -1,4 +1,6 @@ +@use "../control" as *; @use "../common" as *; +@use "../spinner" as *; @use "../icons" as *; @use "../typography" as *; @use "../../../../common/base" as *; @@ -7,6 +9,7 @@ @include button-common-styles(); @include control-border(); @include control-padding-inline-block(); + @extend %body-semi-bold-m; box-sizing: border-box; background-color: var(--button-background-color); @@ -15,138 +18,126 @@ &--focus-visible { @include focus-outline(); } - &--focus-visible-primary { - @include focus-outline-primary(); - } } %button-primary { @extend %button-base; - @extend %body-semi-bold-m; // In primary button, border color matches with background-color. - --button-background-color: var(--mer-accent__primary); - --control__border-color: var(--button-background-color); - --button-color: var(--mer-text__on-primary); - // for the loader - --button-color--enabled: var( - --mer-text__on-primary - ); // a copy of --button-color - --button-color--active: var(--mer-text__on-primary--active); + --button-background-color: var(--color-accent-primary-default); + --button-color: var(--color-text-neutral-on-text); + --control-border-color: var(--button-background-color); &--hover { - --button-background-color: var(--mer-accent__primary--hover); - --button-color: var(--mer-text__on-primary); + --button-background-color: var(--color-accent-item-hover); + --button-color: var(--color-text-primary-on_hover); } &--active { - --button-background-color: var(--mer-accent__primary--active); - --button-color: var(--button-color--active); + --button-background-color: var(--color-accent-primary-pressed); + --button-color: var(--color-text-primary-on_pressed); + } + + &--selected { + --button-background-color: var(--color-accent-primary-default); + --button-color: var(--color-text-neutral-on-text); } &--disabled { - --button-background-color: var(--mer-accent__primary--disabled); - --button-color: var(--mer-text__on-disabled); + --button-background-color: var(--color-accent-neutral-disabled); + --button-color: var(--color-text-neutral-on-disabled); } &--destructive { - --button-background-color: var(--mer-accent__primary--destructive); - --button-color: var(--mer-text__on-primary); + --button-background-color: var(--color-accent-error-default); + --button-color: var(--color-text-neutral-on-text); &-hover { - --button-background-color: var(--mer-accent__primary--destructive-hover); - --button-color: var(--mer-text__on-primary); + --button-background-color: var(--color-accent-error-hover); + --button-color: var(--color-text-neutral-on-text); } &-active { - --button-background-color: var(--mer-accent__primary--destructive-active); - --button-color: var(--mer-text__highlighted); + --button-background-color: var(--color-accent-error-pressed); + --button-color: var(--color-text-neutral-pressed); } } &--success { - --button-background-color: var(--accent-success-enabled); - --button-color: var(--mer-text__on-primary); + --button-background-color: var(--color-accent-success-default); + --button-color: var(--color-text-neutral-on-text); &-hover { - --button-background-color: var(--accent-success-hover); - --button-color: var(--mer-text__on-primary); + --button-background-color: var(--color-accent-success-hover); + --button-color: var(--color-text-neutral-on-text); } &-active { - --button-background-color: var(--accent-success-active); - --button-color: var(--mer-text__highlighted); + --button-background-color: var(--color-accent-success-pressed); + --button-color: var(--color-text-neutral-pressed); } } } %button-secondary { @extend %button-base; - @extend %body-semi-bold-m; // Default styles for the secondary button --button-background-color: transparent; - --control__border-color: var(--button-color); - --button-color: var(--mer-text__neutral); - // for the loader - --button-color--enabled: var(--mer-text__neutral); // a copy of --button-color - --button-color--active: var(--mer-text__on-primary--active); + --button-color: var(--color-text-neutral-default); + --control-border-color: var(--color-border-neutral-default); &--hover { - --button-color: var(--mer-text__primary--hover); + --button-color: var(--color-text-primary-hover); + --control-border-color: var(--color-border-primary-hover); } &--active { - --control__border-color: var(--mer-border-color__primary--active); - --button-color: var(--button-color--active); + --control-border-color: var(--color-border-primary-pressed); + --button-color: var(--color-text-primary-pressed); } - &--disabled { - --button-color: var(--mer-text__on-disabled); + &--selected { + --control-border-color: var(--color-border-primary-default); + --button-color: var(--color-text-neutral-default); } - &--destructive { - --button-color: var(--mer-text__highlighted); - --control__border-color: var(--mer-border-color__error); - - &-hover { - --button-color: var(--mer-accent__primary--destructive-hover); - --control__border-color: var(--mer-border-color__error--hover); - } - - &-active { - --button-color: var(--mer-text__highlighted); - --control__border-color: var(--mer-border-color__error--active); - } + &--disabled { + --button-color: var(--color-text-neutral-disabled); + --control-border-color: var(--color-border-neutral-disabled); } } %button-tertiary { @extend %button-base; - @extend %body-regular-m; // Default styles for the tertiary button --button-background-color: transparent; - --control__border-color: transparent; - --button-color: var(--mer-text__primary); + --control-border-color: transparent; + --button-color: var(--color-text-primary-default); &--hover { - --button-color: var(--mer-text__primary--hover); + --button-color: var(--color-text-primary-hover); } &--active { - --button-color: var(--mer-text__primary--active); + --button-color: var(--color-text-primary-pressed); + } + + &--selected { + --button-background-color: var(--color-accent-primary-default); + --button-color: var(--color-text-neutral-on-text); } &--disabled { - --button-color: var(--mer-text__on-disabled); + --button-color: var(--color-text-neutral-disabled); } } %buttons-spacer { display: flex; - gap: var(--mer-spacing--xs); + gap: var(--size-8); } %button-loader { @@ -155,35 +146,33 @@ } &-primary { - --loader-spinner-color: var(--button-color--active); + --loader-spinner-color: var(--color-accent-neutral-pressed); --loader-track-color: var(--button-color); - + &--hover { + } &--active { - --loader-spinner-color: var(--button-color--enabled); } } &-secondary { - --loader-spinner-color: var(--mer-accent__primary--disabled); - --loader-track-color: var(--button-color); + --loader-spinner-color: var(--color-accent-neutral-pressed); + --loader-track-color: var(--color-accent-primary-default); &--hover { - --loader-spinner-color: var(--mer-accent__primary); } &--active { - --loader-spinner-color: var(--mer-accent__primary--disabled); } } } %button-with-loader { - --loader-size: var(--mer-icon__box--md); + --loader-size: var(--icon-box-md); @extend %icon-and-text; } %button-loader-only { --loader-size: 20px; - --control__padding-block: calc( + --control-padding-block: calc( ( - var(--control__block-size) - var(--loader-size) - var( - --control__border-width + var(--control-block-size) - var(--loader-size) - var( + --control-outline-width ) * 2 ) / @@ -193,22 +182,28 @@ /// @group Button /// @param {String} $selector [".button-primary"] - +/// @param {String} $selected-selector [".button-primary-selected"] - /// @param {String} $destructive-selector [".button-primary-destructive"] - /// @param {String} $success-selector [".button-primary-success"] - +/// @param {Boolean} $add--selected [false] - /// @param {Boolean} $add--disabled [true] - /// @param {Boolean} $add--destructive [true] - /// @param {Boolean} $add--success [true] - -/// @param {Boolean} $add--loading [true] - @mixin button-primary( $selector: ".button-primary", + $selected-selector: ".button-primary-selected", $destructive-selector: ".button-primary-destructive", $success-selector: ".button-primary-success", $with-loader-selector: ".button-primary-with-loader", + // new $loader-only-selector: ".button-primary-loader-only", + // new + $add--selected: false, $add--disabled: true, $add--destructive: true, - $add--success: true, - $add--loading: false + $add--loading: true, + // new + $add--success: true ) { #{$selector} { @extend %button-primary; @@ -232,6 +227,13 @@ } } + @if $add--selected { + #{$selected-selector} { + @extend %button-primary; + @extend %button-primary--selected; + } + } + @if $add--destructive { #{$destructive-selector} { @extend %button-primary; @@ -285,86 +287,87 @@ } } } - - // (TODO: uncomment when how loading buttons should be implemented) - // @if $add--loading { - // #{$with-loader-selector} { - // @extend %button-primary; - // @extend %button-loader; - // @extend %button-loader-primary; - // @extend %button-with-loader; - - // @include spinner( - // var(--loader-size), - // var(--loader-spinner-color), - // var(--loader-track-color) - // ); - - // &:focus-visible { - // @extend %button-base--focus-visible; - // } - - // &:hover { - // @extend %button-primary--hover; - // } - - // &:active { - // @extend %button-primary--active; - // @extend %button-loader-primary--active; - // } - - // @if $add--disabled { - // &:disabled { - // @extend %button-primary--disabled; - // } - // } - // } - - // #{$loader-only-selector} { - // @extend %button-primary; - // @extend %button-loader; - // @extend %button-loader-primary; - // @extend %button-loader-only; - - // &:focus-visible { - // @extend %button-base--focus-visible; - // } - - // &:hover { - // @extend %button-primary--hover; - // } - - // &:active { - // @extend %button-primary--active; - // @extend %button-loader-primary--active; - // } - - // @if $add--disabled { - // &:disabled { - // @extend %button-primary--disabled; - // } - // } - // } - // } } +// (TODO: uncomment when how loading buttons should be implemented) +// @if $add--loading { +// #{$with-loader-selector} { +// @extend %button-primary; +// @extend %button-loader; +// @extend %button-loader-primary; +// @extend %button-with-loader; + +// @include spinner( +// var(--loader-size), +// var(--loader-spinner-color), +// var(--loader-track-color) +// ); + +// &:focus-visible { +// @extend %button-base--focus-visible; +// } + +// &:hover { +// @extend %button-primary--hover; +// } + +// &:active { +// @extend %button-primary--active; +// @extend %button-loader-primary--active; +// } + +// @if $add--disabled { +// &:disabled { +// @extend %button-primary--disabled; +// } +// } +// } + +// #{$loader-only-selector} { +// @extend %button-primary; +// @extend %button-loader; +// @extend %button-loader-primary; +// @extend %button-loader-only; + +// &:focus-visible { +// @extend %button-base--focus-visible; +// } + +// &:hover { +// @extend %button-primary--hover; +// } + +// &:active { +// @extend %button-primary--active; +// @extend %button-loader-primary--active; +// } + +// @if $add--disabled { +// &:disabled { +// @extend %button-primary--disabled; +// } +// } +// } +// } + /// @group Button /// @param {String} $selector [".button-secondary"] - -/// @param {Boolean} $add--loading [true] - @mixin button-secondary( $selector: ".button-secondary", - $destructive-selector: ".button-secondary-destructive", + $selected-selector: ".button-secondary-selected", $with-loader-selector: ".button-secondary-with-loader", + // new $loader-only-selector: ".button-secondary-loader-only", + // new + $add--selected: false, $add--disabled: true, - $add--destructive: true, - $add--loading: true + $add--loading: true // new ) { #{$selector} { @extend %button-secondary; &:focus-visible { - @extend %button-base--focus-visible-primary; + @extend %button-base--focus-visible; } &:hover { @@ -382,30 +385,10 @@ } } - @if $add--destructive { - #{$destructive-selector} { + @if $add--selected { + #{$selected-selector} { @extend %button-secondary; - @extend %button-secondary--destructive; - - &:focus-visible { - // TODO: avoid duplcation - @extend %button-base--focus-visible; - } - - &:hover { - @extend %button-secondary--destructive-hover; - } - - &:active { - @extend %button-secondary--destructive-active; - } - - @if $add--disabled { - // TODO: avoid duplcation - &:disabled { - @extend %button-secondary--disabled; - } - } + @extend %button-secondary--selected; } } @@ -469,7 +452,12 @@ /// @group Button /// @param {String} $selector [".button-tertiary"] - -@mixin button-tertiary($selector: ".button-tertiary", $add--disabled: true) { +@mixin button-tertiary( + $selector: ".button-tertiary", + $selected-selector: ".button-tertiary-selected", + $add--selected: false, + $add--disabled: true +) { #{$selector} { @extend %button-tertiary; @@ -491,6 +479,13 @@ } } } + + @if $add--selected { + #{$selected-selector} { + @extend %button-tertiary; + @extend %button-tertiary--selected; + } + } } /// @group Button @@ -510,7 +505,4 @@ // Button tertiary @include button-tertiary(); - - // Buttons spacer - @include buttons-spacer(); } diff --git a/packages/mercury/src/base/components/_dialog.scss b/packages/mercury/src/base/components/_dialog.scss new file mode 100644 index 000000000..beaf2853e --- /dev/null +++ b/packages/mercury/src/base/components/_dialog.scss @@ -0,0 +1,63 @@ +// Pseudo Header +@mixin dialog-header-base() { + padding-block-end: var(--size-16); +} +@mixin dialog-header-border() { + border-block-end: var(--size-1) solid + var(--color-border-surface-on-elevation-01); +} +@mixin dialog-header( + $selector: ".dialog-header", + $with-border-selector: ".dialog-header-with-border", + $with-border: true +) { + #{$selector}, + #{$with-border-selector} { + @include dialog-header-base(); + } + @if $with-border { + #{$with-border-selector} { + @include dialog-header-border(); + } + } +} + +// Pseudo Footer +@mixin dialog-footer-base() { + --dialog-footer-justify-content: end; + padding-block-start: var(--size-8); + display: flex; + justify-content: var(--dialog-footer-justify-content); + align-items: center; +} +@mixin dialog-footer-border() { + border-block-start: var(--size-1) solid + var(--color-border-surface-on-elevation-01); +} +@mixin dialog-footer( + $selector: ".dialog-footer", + $with-border-selector: ".dialog-footer-with-border", + $justify-start-selector: ".dialog-footer-start", + $justify-center-selector: ".dialog-footer-center", + $justify-space-between-selector: ".dialog-footer-space-between", + $with-border: true +) { + #{$selector}, + #{$with-border-selector} { + @include dialog-footer-base(); + } + #{$justify-start-selector} { + --dialog-footer-justify-content: start; + } + #{$justify-center-selector} { + --dialog-footer-justify-content: center; + } + #{$justify-space-between-selector} { + --dialog-footer-justify-content: space-between; + } + @if $with-border { + #{$with-border-selector} { + @include dialog-footer-border(); + } + } +} diff --git a/packages/mercury/src/base/components/_grid.scss b/packages/mercury/src/base/components/_grid.scss new file mode 100644 index 000000000..1f057597f --- /dev/null +++ b/packages/mercury/src/base/components/_grid.scss @@ -0,0 +1,58 @@ +// Row +@mixin grid-row-colors-enabled() { + // Some controls using --item-** variables inside the tabular grid inherit + // unwanted styles. For example, when a row is selected, controls like a + // list-box inherit the selected background color. To prevent this, these + // properties cannot be directly applied to the tabular grid. + --grid-row-bg-color: var(--item-bg-color); + --grid-row-color: var(--item-color); + background-color: var(--grid-row-bg-color); + color: var(--grid-row-color); +} +@mixin grid-row-colors-highlighted() { + --grid-row-bg-color: var(--item-bg-color-hover); + --grid-row-color: var(--item-color-hover); +} +@mixin grid-row-colors-selected() { + --grid-row-bg-color: var(--item-bg-color-selected); + --grid-row-color: var(--item-color-selected); +} +@mixin grid-row-dragging() { + box-shadow: var(--box-shadow); +} +@mixin grid-cell-border-inline-block() { + // this mixin uses the box-shadow property, but it looks + // as a border to the user. + box-shadow: var(--grid-cell-box-shadow-inline-block); +} +@mixin grid-cell-padding-inline() { + padding-inline: var(--grid-cell-padding-block); +} +@mixin grid-cell-padding-block() { + padding-block: var(--grid-cell-padding-block); +} +@mixin grid-cell-padding-inline-block() { + padding-block: var(--grid-cell-padding-block); + padding-inline: var(--grid-cell-padding-inline); +} +@mixin grid-cell-remove-padding() { + // we should redefine '--grid-cell-padding-inline' here because when a control + // is inside a a tabular-grid-cell the cell padding-inline value is required to + // be applied on the control padding-inline. + padding-block: 0; + padding-inline: 0; +} +@mixin grid-rowset-legend-padding-block() { + padding-block-start: var(--size-8); + padding-block-end: var(--size-8); +} +@mixin grid-rowset-legend-colors-enabled() { + --grid-rowset-legend-bg-color: var(--color-accent-surface-elevation-02); + background-color: var(--grid-rowset-legend-bg-color); +} +@mixin grid-rowset-legend-colors-hover() { + --grid-rowset-legend-bg-color: var(--color-accent-surface-elevation-03); +} +@mixin grid-rowset-legend-colors-active() { + --grid-rowset-legend-bg-color: var(--color-accent-surface-elevation-02); +} diff --git a/packages/mercury/src/base/components/_tab.scss b/packages/mercury/src/base/components/_tab.scss new file mode 100644 index 000000000..09908e950 --- /dev/null +++ b/packages/mercury/src/base/components/_tab.scss @@ -0,0 +1,44 @@ +@mixin tab-button-border-block-start() { + border-block-start: var(--size-1) solid transparent; +} +@mixin tab-button-border-block-end() { + border-block-end: var(--size-1) solid transparent; +} +@mixin tab-button-border-inline-start() { + border-inline-start: var(--size-1) solid transparent; +} +@mixin tab-button-border-inline-end() { + border-inline-end: var(--size-1) solid transparent; +} + +@mixin tab-button-gap() { + gap: var(--size-8); +} + +@mixin tab-button-colors-enabled() { + color: var(--tab-caption-color); + background-color: var(--tab-caption-bg-color); + border-color: var(--tab-caption-border-color); +} + +@mixin tab-button-colors-hover() { + --tab-caption-bg-color: var(--color-accent-item-hover); + --tab-caption-color: var(--color-text-primary-hover); +} + +@mixin tab-button-colors-disabled() { + --tab-caption-bg-color: var(--color-accent-neutral-disabled); + --tab-caption-color: var(--color-text-neutral-on-disabled); + --tab-caption-border-color: var(--tab-caption-bg-color); +} + +@mixin tab-button-colors-selected() { + --tab-caption-bg-color: var(--color-accent-item-selected); + --tab-caption-color: var(--tab-caption-color-selected); + --tab-caption-border-color: var(---color-accent-primary-default); +} + +@mixin tab-button-padding-stack() { + padding-block: var(--tab-caption-padding-block); + padding-inline: var(--tab-caption-padding-inline); +} diff --git a/packages/mercury/src/base/label/_label-styles.scss b/packages/mercury/src/base/label/_label-styles.scss index 300f523a6..620eacfee 100644 --- a/packages/mercury/src/base/label/_label-styles.scss +++ b/packages/mercury/src/base/label/_label-styles.scss @@ -1,22 +1,22 @@ @use "../typography" as *; -@mixin label-color-enabled() { - color: var(--label__color); -} -@mixin label-color-hover() { - --label__color: var(--label__color--hover); -} -@mixin label-color-disabled() { - --label__color: var(--label__color--disabled); -} @mixin label-font() { @include body-semi-bold-m(); } @mixin label-gap-block() { - gap: var(--label__gap--block); + gap: var(--label-gap-block); } @mixin label-gap-inline() { - gap: var(--label__gap--inline); + gap: var(--label-gap-inline); +} +@mixin label-color() { + color: var(--label-color); +} +@mixin label-color-hover() { + --label-color: var(--label-color-hover); +} +@mixin label-color-disabled() { + --label-color: var(--label-color-disabled); } /// @group Label @@ -30,6 +30,7 @@ ) { #{$label-selector} { @include label-font(); + @include label-color(); } #{$label--disabled-selector} { @include label-color-disabled(); diff --git a/packages/mercury/src/base/layout/_layout-styles.scss b/packages/mercury/src/base/layout/_layout-styles.scss index 4cd1767a2..a30c5ada6 100644 --- a/packages/mercury/src/base/layout/_layout-styles.scss +++ b/packages/mercury/src/base/layout/_layout-styles.scss @@ -1,11 +1,11 @@ %layout { - --spacing-body-block-start: var(--mer-spacing--md); - --spacing-body-block-end: var(--mer-spacing--md); - --spacing-body-inline-start: var(--mer-spacing--lg); - --spacing-body-inline-end: var(--mer-spacing--lg); + --spacing-body-block-start: var(--size-16); + --spacing-body-block-end: var(--size-16); + --spacing-body-inline-start: var(--size-24); + --spacing-body-inline-end: var(--size-24); display: grid; - gap: var(--mer-spacing--md); + gap: var(--size-16); &__panel { display: grid; } diff --git a/packages/mercury/src/bundles.ts b/packages/mercury/src/bundles.ts index aa5bc647e..f6e4db396 100644 --- a/packages/mercury/src/bundles.ts +++ b/packages/mercury/src/bundles.ts @@ -208,6 +208,10 @@ export const getThemeBundles = (basePath: string, bundleNamePrefix?: string) => bundleName: "utils/layout", bundleNamePrefix }), + getThemeModelItem(basePath, { + bundleName: "utils/link", + bundleNamePrefix + }), getThemeModelItem(basePath, { bundleName: "utils/spacing", bundleNamePrefix diff --git a/packages/mercury/src/bundles/scss/base/base.scss b/packages/mercury/src/bundles/scss/base/base.scss index 588924a5d..8ac8356ef 100644 --- a/packages/mercury/src/bundles/scss/base/base.scss +++ b/packages/mercury/src/bundles/scss/base/base.scss @@ -13,9 +13,8 @@ $tokens: true, $colors: true, - $border: true, $font: true, - $spacing: true, + $size: true, $timing: true, $resets: true, diff --git a/packages/mercury/src/bundles/scss/components/paginator.scss b/packages/mercury/src/bundles/scss/components/paginator.scss index 4ba44e8a4..c5ba013be 100644 --- a/packages/mercury/src/bundles/scss/components/paginator.scss +++ b/packages/mercury/src/bundles/scss/components/paginator.scss @@ -1,3 +1,3 @@ -@import "../../../mercury.scss"; +@use "../../../mercury.scss" as *; @include mercury-only($components: true, $paginator: true); diff --git a/packages/mercury/src/bundles/scss/utils/link.scss b/packages/mercury/src/bundles/scss/utils/link.scss new file mode 100644 index 000000000..67e6e273d --- /dev/null +++ b/packages/mercury/src/bundles/scss/utils/link.scss @@ -0,0 +1,3 @@ +@use "../../../mercury.scss" as *; + +@include mercury-only($base-classes: true, $link-classes: true); diff --git a/packages/mercury/src/cli/bundle.ts b/packages/mercury/src/cli/bundle.ts index 60b527e5b..2b334c99a 100644 --- a/packages/mercury/src/cli/bundle.ts +++ b/packages/mercury/src/cli/bundle.ts @@ -15,6 +15,7 @@ import type { import { BASE_BUNDLES_OUT_DIR, CSS_BUNDLES_OUT_DIR, + CSS_NOT_PROCESSED_BUNDLES_OUT_DIR, SCSS_BUNDLES_INPUT_DIR // SCSS_BUNDLES_OUT_DIR } from "./internal/constants.js"; @@ -57,7 +58,7 @@ if (isMainThread) { // Check if the bundles processing is running in watch mode if (watchMode || ciMode) { - cliArgs = getArguments(); + cliArgs = await getArguments(); if (!cliArgs) { process.exit(); @@ -79,7 +80,9 @@ if (isMainThread) { // - - - - - - - - - - - - Sets to implement cache - - - - - - - - - - - - const BUNDLES_TO_AVOID_REBUILD: BundleToAvoidRebuild[] = [ "all", - "base/icons", + // TODO: For some reason, the bundles are being removed on every rebuild, + // we are commenting this ATM for working with the showcase + // "base/icons", "resets/box-sizing", "utils/form--full" ]; @@ -112,15 +115,21 @@ if (isMainThread) { SCSS_BUNDLES_INPUT_DIR, CSS_BUNDLES_OUT_DIR ); + const cssNotProcessedOutDir = fileMetadata.dir.replace( + SCSS_BUNDLES_INPUT_DIR, + CSS_NOT_PROCESSED_BUNDLES_OUT_DIR + ); - // Create the file directory if it does not exists + // Create the file directory if it does not exists. There is no need to + // check both dirs, since we create them at the same time if (CSS_CREATED_DIRS.has(cssOutDir)) { return Promise.resolve(); - } - CSS_CREATED_DIRS.add(cssOutDir); + } + CSS_CREATED_DIRS.add(cssNotProcessedOutDir); + CSS_CREATED_DIRS.add(cssOutDir); - return fs.mkdir(cssOutDir, { recursive: true }); - + fs.mkdir(cssNotProcessedOutDir, { recursive: true }); + return fs.mkdir(cssOutDir, { recursive: true }); }); }; diff --git a/packages/mercury/src/cli/internal/config-file/load-config-file.ts b/packages/mercury/src/cli/internal/config-file/load-config-file.ts new file mode 100644 index 000000000..42da2b4b1 --- /dev/null +++ b/packages/mercury/src/cli/internal/config-file/load-config-file.ts @@ -0,0 +1,81 @@ +import { build } from "esbuild"; +import { existsSync } from "fs"; +import { styleText } from "node:util"; +import { extname, join } from "path"; +import { pathToFileURL } from "url"; +import { DEFAULT_MERCURY_CONFIG_FILE_PATHS } from "../constants.js"; +import type { MercuryConfig } from "./types"; + +const tryToCheckIfDefaultConfigFileExists = (): string | undefined => { + // Typescript config + if (existsSync(join(process.cwd(), DEFAULT_MERCURY_CONFIG_FILE_PATHS.TS))) { + return DEFAULT_MERCURY_CONFIG_FILE_PATHS.TS; + } + + // JavaScript config + if (existsSync(join(process.cwd(), DEFAULT_MERCURY_CONFIG_FILE_PATHS.JS))) { + return DEFAULT_MERCURY_CONFIG_FILE_PATHS.JS; + } + + if (existsSync(join(process.cwd(), DEFAULT_MERCURY_CONFIG_FILE_PATHS.MJS))) { + return DEFAULT_MERCURY_CONFIG_FILE_PATHS.MJS; + } + + if (existsSync(join(process.cwd(), DEFAULT_MERCURY_CONFIG_FILE_PATHS.CJS))) { + return DEFAULT_MERCURY_CONFIG_FILE_PATHS.CJS; + } + + return undefined; +}; + +export const loadConfigFile = async ( + configFilePath: string | undefined +): Promise => { + const configFilePathOrDefault = + configFilePath ?? tryToCheckIfDefaultConfigFileExists(); + + if (!configFilePathOrDefault) { + return; + } + const configFileFullPath = join(process.cwd(), configFilePathOrDefault); + const ext = extname(configFileFullPath); + + try { + if (ext === ".ts") { + // Compile the module in memory using ESBuild. We have to do this, because + // we can only evaluate JS files + const result = await build({ + entryPoints: [configFileFullPath], + write: false, + bundle: true, + platform: "node", + format: "esm" + }); + const js = result.outputFiles[0].text; + const dataUrl = + "data:application/javascript;base64," + + Buffer.from(js).toString("base64"); + + const mercuryConfigFileContent = await import(dataUrl); + + return mercuryConfigFileContent.default as MercuryConfig | undefined; + } + + if (ext === ".js" || ext === ".mjs" || ext === ".cjs") { + const mercuryConfigFileContent = await import( + pathToFileURL(configFileFullPath).href + ); + return mercuryConfigFileContent.default as MercuryConfig | undefined; + } + } catch (error) { + console.log( + styleText("red", `Error while loading the config file ("`) + + styleText("redBright", configFilePath ?? "") + + styleText("red", `") for Mercury.`), + error + ); + return undefined; + } + + return undefined; +}; diff --git a/packages/mercury/src/cli/internal/config-file/types.ts b/packages/mercury/src/cli/internal/config-file/types.ts new file mode 100644 index 000000000..c235fd8cf --- /dev/null +++ b/packages/mercury/src/cli/internal/config-file/types.ts @@ -0,0 +1,17 @@ +import type { MercuryTokensDefinition } from "../../../tokens/_generated/mercury-generated-definition"; + +export type MercuryConfig = { + /** + * Specifies a set of options to override the implementation of Mercury, + * allowing to customize the values of the design tokens. + */ + overrides?: MercuryConfigOverrides; +}; + +export type MercuryConfigOverrides = { + /** + * Tokens to override their value. This structure is defined based on the + * tokens structure that comes from Figma. + */ + tokens?: MercuryTokensDefinition; +}; diff --git a/packages/mercury/src/cli/internal/constants.ts b/packages/mercury/src/cli/internal/constants.ts index 99cddb2c6..76b518699 100644 --- a/packages/mercury/src/cli/internal/constants.ts +++ b/packages/mercury/src/cli/internal/constants.ts @@ -5,11 +5,25 @@ import type { MercuryBundleBase } from "../../types"; export const KB = 1000; -export const SCSS_BUNDLES_INPUT_DIR = path.join("src", "bundles", "scss"); +const BUNDLES_FOLDER = "bundles"; -export const BASE_BUNDLES_OUT_DIR = path.join("dist", "bundles"); +export const SCSS_BUNDLES_INPUT_DIR = path.join("src", BUNDLES_FOLDER, "scss"); + +export const BASE_BUNDLES_OUT_DIR = path.join("dist", BUNDLES_FOLDER); export const SCSS_BUNDLES_OUT_DIR = path.join(BASE_BUNDLES_OUT_DIR, "scss"); export const CSS_BUNDLES_OUT_DIR = path.join(BASE_BUNDLES_OUT_DIR, "css"); +const CSS_NOT_PROCESSED_BUNDLES_DIR = "css-not-processed"; + +export const CSS_NOT_PROCESSED_BUNDLES_OUT_DIR = path.join( + BASE_BUNDLES_OUT_DIR, + CSS_NOT_PROCESSED_BUNDLES_DIR +); + +export const CSS_NOT_PROCESSED_BUNDLES_OUT_DIR_FROM_CLI = path.join( + "../../", + BUNDLES_FOLDER, + CSS_NOT_PROCESSED_BUNDLES_DIR +); export const BASE_BUNDLE = "base/base" satisfies MercuryBundleBase; export const BASE_GLOBANT_BUNDLE = "base/base-globant"; @@ -27,6 +41,12 @@ export const FONT_FACE_PATH_PLACEHOLDER = "{{FONT_FACE_PATH}}"; export const DEFAULT_FONT_FACE_PATH = "./assets/fonts/"; export const DEFAULT_ICONS_PATH = "./assets/icons/"; export const DEFAULT_OUT_DIR_PATH = "./.mercury"; +export const DEFAULT_MERCURY_CONFIG_FILE_PATHS = { + TS: "./mercury.config.ts", + JS: "./mercury.config.js", + MJS: "./mercury.config.mjs", + CJS: "./mercury.config.cjs" +}; export const SEPARATE_BY_COMMA_REGEX = /\s*,\s*/g; export const SPECIAL_CHARS_IN_BUNDLE_NAME_REGEX = /[/-]/g; diff --git a/packages/mercury/src/cli/internal/create-bundles-with-custom-paths.ts b/packages/mercury/src/cli/internal/create-bundles-with-custom-paths.ts index df5e8d1cd..1c1b146b3 100644 --- a/packages/mercury/src/cli/internal/create-bundles-with-custom-paths.ts +++ b/packages/mercury/src/cli/internal/create-bundles-with-custom-paths.ts @@ -14,11 +14,18 @@ import { BASE_GLOBANT_BUNDLE, BASE_GLOBANT_CSS_FILE, BUNDLE_MAPPING_TO_HASH_FILE, + CSS_NOT_PROCESSED_BUNDLES_OUT_DIR_FROM_CLI, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, - HASH_AND_LETTER_LENGTH + FONT_FACE_PATH_PLACEHOLDER, + HASH_AND_LETTER_LENGTH, + ICONS_PATH_PLACEHOLDER } from "./constants.js"; import { getFilesInDir } from "./file-management.js"; +import { + printBundleWasCreated, + printBundleWasCreatedTableHeader +} from "./print-utils.js"; import { getBundleFolderAndFileBaseDir, getBundleName, @@ -26,19 +33,17 @@ import { getFileNameWithoutExt, getFileSize, getHash, + replacePlaceholdersInBundle, sanitizeBundleName } from "./utils.js"; -import { - printBundleWasCreated, - printBundleWasCreatedTableHeader -} from "./print-utils.js"; export const createBundleWithCustomPath = ( args: CLIArguments, options: { bundleFolder: string; fileBaseDirToWrite: string }, fileMetadata: FileMetadata, avoidAllHashes: boolean, - actualFilePath: string + actualFilePath: string, + hasGlobantVariant: boolean ): { bundleName: string; bundleNameWithHash: string; fileSize: string } => { const { avoidHash, fontFacePath, iconsPath } = args; const { bundleFolder, fileBaseDirToWrite } = options; @@ -51,12 +56,15 @@ export const createBundleWithCustomPath = ( encoding: "utf8" }); - if (fontFacePath !== DEFAULT_FONT_FACE_PATH) { - css = css.replaceAll(DEFAULT_FONT_FACE_PATH, fontFacePath); - } - if (iconsPath !== DEFAULT_ICONS_PATH) { - css = css.replaceAll(DEFAULT_ICONS_PATH, iconsPath); - } + css = replacePlaceholdersInBundle( + css + .replaceAll(FONT_FACE_PATH_PLACEHOLDER, fontFacePath) + .replaceAll(ICONS_PATH_PLACEHOLDER, iconsPath), + DEFAULT_FONT_FACE_PATH, + DEFAULT_ICONS_PATH, + hasGlobantVariant ? "globant" : "mercury", + args?.overrides.tokensOverride + ); const fileNameWithHash = avoidAllHashes || avoidHash.has(bundleName) @@ -92,7 +100,10 @@ export const createBundlesWithCustomPaths = async ( // Directory name where the script is located (/dist/cli/) const __dirname = path.dirname(__filename); - const cssOutput = path.join(__dirname, "../../bundles/css"); + const cssOutput = path.join( + __dirname, + CSS_NOT_PROCESSED_BUNDLES_OUT_DIR_FROM_CLI + ); /** * Files to transpile @@ -133,19 +144,18 @@ export const createBundlesWithCustomPaths = async ( } // There is no need to copy the base-globant.css file, since the base.css - // file already contains this file - if (hasGlobantVariant) { - if (bundleName === BASE_GLOBANT_BUNDLE) { - return; - } - - // Replace the content of the base bundle with the Globant variant - if (bundleName === BASE_BUNDLE) { - actualFilePath = actualFilePath.replace( - BASE_CSS_FILE, - BASE_GLOBANT_CSS_FILE - ); - } + // file already contains this file when using the Globant theme + // if (bundleName === BASE_GLOBANT_BUNDLE) { + // return; + // } + + // Replace the content of the base bundle with the Globant theme if the + // Globant flag is set + if (hasGlobantVariant && bundleName === BASE_BUNDLE) { + actualFilePath = actualFilePath.replace( + BASE_CSS_FILE, + BASE_GLOBANT_CSS_FILE + ); } copiedFiles.push( @@ -154,7 +164,8 @@ export const createBundlesWithCustomPaths = async ( options, fileMetadata, avoidAllHashes, - actualFilePath + actualFilePath, + hasGlobantVariant || bundleName === BASE_GLOBANT_BUNDLE ) ); }); diff --git a/packages/mercury/src/cli/internal/transpile-bundle-and-create-mappings.ts b/packages/mercury/src/cli/internal/transpile-bundle-and-create-mappings.ts index ae2054bb0..81cf21101 100644 --- a/packages/mercury/src/cli/internal/transpile-bundle-and-create-mappings.ts +++ b/packages/mercury/src/cli/internal/transpile-bundle-and-create-mappings.ts @@ -2,22 +2,26 @@ import fs from "node:fs/promises"; import path from "node:path"; import * as sass from "sass"; -import type { BundleMetadata, CLIArguments, FileMetadata } from "./types"; +import type { FigmaTheme } from "../../tokens/generator/typings/figma-file-types.js"; import { BASE_BUNDLE, BASE_GLOBANT_BUNDLE, BASE_GLOBANT_CSS_FILE, CSS_BUNDLES_OUT_DIR, + CSS_NOT_PROCESSED_BUNDLES_OUT_DIR, DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, SCSS_BUNDLES_INPUT_DIR, SCSS_BUNDLES_OUT_DIR } from "./constants.js"; +import type { BundleMetadata, CLIArguments, FileMetadata } from "./types"; import { replacePlaceholdersInBundle, sanitizeBundleName } from "./utils.js"; -const transpileBundle = (filePath: string, globant: boolean) => +const transpileBundle = (filePath: string, figmaTheme: FigmaTheme) => sass.compile(filePath, { - loadPaths: [globant ? "src/config/globant" : "src/config/default"], + loadPaths: [ + figmaTheme === "globant" ? "src/config/globant" : "src/config/default" + ], style: "compressed" }).css; @@ -25,7 +29,9 @@ const BUNDLES: BundleMetadata[] = []; const transpileGlobantCssFile = async ( fileMetadata: FileMetadata, - cssOutDir: string + cssOutDir: string, + cssNotProcessedOutDir: string, + args?: CLIArguments ) => { const { filePath } = fileMetadata; @@ -35,31 +41,46 @@ const transpileGlobantCssFile = async ( .replace("\\", "/") }); - const transpiledBundle = transpileBundle(filePath, true); + const transpiledBundle = transpileBundle(filePath, "globant"); // Store the CSS file with its default values - await fs.writeFile( - path.join(cssOutDir, BASE_GLOBANT_CSS_FILE), - replacePlaceholdersInBundle( - transpiledBundle, - DEFAULT_FONT_FACE_PATH, - DEFAULT_ICONS_PATH + await Promise.all([ + // Store the not processed CSS file, to allow replacing the placeholders + // when executing the mercury cli utility + fs.writeFile( + path.join(cssNotProcessedOutDir, BASE_GLOBANT_CSS_FILE), + transpiledBundle + ), + + fs.writeFile( + path.join(cssOutDir, BASE_GLOBANT_CSS_FILE), + replacePlaceholdersInBundle( + transpiledBundle, + DEFAULT_FONT_FACE_PATH, + DEFAULT_ICONS_PATH, + "globant", + args?.overrides.tokensOverride + ) ) - ); + ]); }; export const transpileCssBundleWithPlaceholder = async ( fileMetadata: FileMetadata, - args?: CLIArguments + cliArgs?: CLIArguments ) => { const { fileName } = fileMetadata; let actualFilePath = fileMetadata.filePath; - const hasGlobantVariant = args?.globant ?? false; + const hasGlobantVariant = cliArgs?.globant ?? false; const cssOutDir = fileMetadata.dir.replace( SCSS_BUNDLES_INPUT_DIR, CSS_BUNDLES_OUT_DIR ); + const cssNotProcessedOutDir = fileMetadata.dir.replace( + SCSS_BUNDLES_INPUT_DIR, + CSS_NOT_PROCESSED_BUNDLES_OUT_DIR + ); const fileNameCssExt = fileName.replace(".scss", ".css"); const bundleName = sanitizeBundleName( actualFilePath.replace(SCSS_BUNDLES_INPUT_DIR, "").replace(".scss", "") @@ -86,7 +107,9 @@ export const transpileCssBundleWithPlaceholder = async ( fileName: fileName.replace(BASE_BUNDLE, BASE_GLOBANT_BUNDLE), filePath: actualFilePath }, - cssOutDir + cssOutDir, + cssNotProcessedOutDir, + cliArgs ); } @@ -96,15 +119,27 @@ export const transpileCssBundleWithPlaceholder = async ( .replace("\\", "/") }); - const transpiledBundle = transpileBundle(actualFilePath, hasGlobantVariant); + const transpiledBundle = transpileBundle(actualFilePath, "mercury"); // Store the CSS file with its default values - await fs.writeFile( - path.join(cssOutDir, fileNameCssExt), - replacePlaceholdersInBundle( - transpiledBundle, - DEFAULT_FONT_FACE_PATH, - DEFAULT_ICONS_PATH + await Promise.all([ + // Store the not processed CSS file, to allow replacing the placeholders + // when executing the mercury cli utility + fs.writeFile( + path.join(cssNotProcessedOutDir, fileNameCssExt), + transpiledBundle + ), + + // Processed CSS with placeholders replaced + fs.writeFile( + path.join(cssOutDir, fileNameCssExt), + replacePlaceholdersInBundle( + transpiledBundle, + DEFAULT_FONT_FACE_PATH, + DEFAULT_ICONS_PATH, + "mercury", + cliArgs?.overrides.tokensOverride + ) ) - ); + ]); }; diff --git a/packages/mercury/src/cli/internal/types.ts b/packages/mercury/src/cli/internal/types.ts index 8c418eee7..c7cd4498f 100644 --- a/packages/mercury/src/cli/internal/types.ts +++ b/packages/mercury/src/cli/internal/types.ts @@ -1,3 +1,5 @@ +import type { MercuryTokenPlaceholdersToValueDictionary } from "../../tokens/generator/typings/output-file-types"; + export type BundleMetadata = { fileDir: string; }; @@ -20,4 +22,7 @@ export type CLIArguments = { iconsPath: string; fontFacePath: string; outDirPath: string; + overrides: { + tokensOverride?: MercuryTokenPlaceholdersToValueDictionary; + }; }; diff --git a/packages/mercury/src/cli/internal/utils.ts b/packages/mercury/src/cli/internal/utils.ts index d9ae5384f..269fc9449 100644 --- a/packages/mercury/src/cli/internal/utils.ts +++ b/packages/mercury/src/cli/internal/utils.ts @@ -1,16 +1,18 @@ import crypto from "node:crypto"; +import path from "node:path"; import { styleText } from "node:util"; - -import type { FileMetadata } from "./types"; +import { replaceTokenPlaceholders } from "../../tokens/generator/internal/get-and-set-token-placeholder-values.js"; +import type { FigmaTheme } from "../../tokens/generator/typings/figma-file-types"; +import type { MercuryTokenPlaceholdersToValueDictionary } from "../../tokens/generator/typings/output-file-types.js"; import { - CSS_BUNDLES_OUT_DIR, + CSS_NOT_PROCESSED_BUNDLES_OUT_DIR, FONT_FACE_PATH_PLACEHOLDER, HASH_LENGTH, ICONS_PATH_PLACEHOLDER, KB // SPECIAL_CHARS_IN_BUNDLE_NAME_REGEX } from "./constants.js"; -import path from "node:path"; +import type { FileMetadata } from "./types"; export const getFileSize = (fileContent: string) => { const fileLength = fileContent.length; @@ -47,11 +49,17 @@ export const getFileNameWithHash = ( export const replacePlaceholdersInBundle = ( transpiledBundle: string, fontFaceValue: string, - iconsValue: string + iconsValue: string, + figmaTheme: FigmaTheme, + tokensOverride?: MercuryTokenPlaceholdersToValueDictionary ) => - transpiledBundle - .replaceAll(ICONS_PATH_PLACEHOLDER, iconsValue) - .replaceAll(FONT_FACE_PATH_PLACEHOLDER, fontFaceValue); + replaceTokenPlaceholders( + transpiledBundle + .replaceAll(ICONS_PATH_PLACEHOLDER, iconsValue) + .replaceAll(FONT_FACE_PATH_PLACEHOLDER, fontFaceValue), + figmaTheme, + tokensOverride + ); export const measureTime = async ( callback: (() => void) | (() => Promise) @@ -67,7 +75,7 @@ export const sanitizeBundleName = (bundleName: string) => bundleName.replaceAll("\\", "/").replace(/^\//, ""); export const getBundleFolder = (fileMetadata: FileMetadata) => - fileMetadata.dir.split(CSS_BUNDLES_OUT_DIR)[1]; + fileMetadata.dir.split(CSS_NOT_PROCESSED_BUNDLES_OUT_DIR)[1]; export const getBundleFolderAndFileBaseDir = ( fileMetadata: FileMetadata, diff --git a/packages/mercury/src/cli/internal/validate-args.ts b/packages/mercury/src/cli/internal/validate-args.ts index b36338817..0f61f48f4 100644 --- a/packages/mercury/src/cli/internal/validate-args.ts +++ b/packages/mercury/src/cli/internal/validate-args.ts @@ -1,3 +1,5 @@ +import { getAllTokensFromMercuryConfigFile } from "../../tokens/generator/internal/get-and-set-token-placeholder-values.js"; +import { loadConfigFile } from "./config-file/load-config-file.js"; import { DEFAULT_FONT_FACE_PATH, DEFAULT_ICONS_PATH, @@ -22,6 +24,7 @@ const SUCCESS_CHECK = true; const [, , ...args] = process.argv; const AVOID_HASH_ARGUMENTS = new Set(["--avoid-hash", "--ah", "-ah"]); +const CONFIG_FILE_ARGUMENTS = new Set(["--config"]); const ICONS_PATH_ARGUMENTS = new Set(["--icons-path", "--icons", "--i", "-i"]); const FONT_FACE_PATH_ARGUMENTS = new Set([ "--font-face-path", @@ -35,6 +38,9 @@ const GLOBANT_ARGUMENTS = new Set(["--globant", "--gl", "-gl"]); const isAvoidHashArgument = (arg: string) => AVOID_HASH_ARGUMENTS.has(arg.toLowerCase()); +const isConfigFileArgument = (arg: string) => + CONFIG_FILE_ARGUMENTS.has(arg.toLowerCase()); + const isFontFaceArgument = (arg: string) => FONT_FACE_PATH_ARGUMENTS.has(arg.toLowerCase()); @@ -48,6 +54,7 @@ const isOutDirArgument = (arg: string) => OUT_DIR_ARGUMENTS.has(arg.toLowerCase()); let hasAvoidHash = false; +let hasConfigFilePath = false; let hasGlobant = false; let hasFontFacePath = false; let hasIconsPath = false; @@ -56,6 +63,7 @@ let hasOutDirPath = false; let anyWarning = false; let avoidHash: string[] = []; +let configFilePath: string | undefined = undefined; let fontFacePath = ""; let iconsPath = ""; let outDirPath = ""; @@ -98,6 +106,17 @@ const checkArgument = (argument: string): boolean => { return SUCCESS_CHECK; } + if (isConfigFileArgument(argName)) { + if (hasConfigFilePath) { + printDuplicatedArgumentError(argument); + return ERROR_IN_CHECK; + } + + configFilePath = argValue; + hasConfigFilePath = true; + return SUCCESS_CHECK; + } + if (isFontFaceArgument(argName)) { if (hasFontFacePath) { printDuplicatedArgumentError(argument); @@ -135,7 +154,7 @@ const checkArgument = (argument: string): boolean => { return ERROR_IN_CHECK; }; -export const getArguments = (): CLIArguments | undefined => { +export const getArguments = async (): Promise => { for (let index = 0; index < args.length; index++) { if (checkArgument(args[index]) === ERROR_IN_CHECK) { return undefined; @@ -170,11 +189,18 @@ export const getArguments = (): CLIArguments | undefined => { avoidHash.map(bundleName => sanitizeBundleName(bundleName)) ); + const mercuryConfig = await loadConfigFile(configFilePath); + return { avoidHash: new Set(sanitizedAvoidHash), globant: hasGlobant, fontFacePath, iconsPath, + overrides: { + tokensOverride: mercuryConfig?.overrides?.tokens + ? getAllTokensFromMercuryConfigFile(mercuryConfig.overrides.tokens) + : undefined + }, outDirPath }; }; diff --git a/packages/mercury/src/cli/mercury.ts b/packages/mercury/src/cli/mercury.ts index 134fef4cb..fee9f8825 100644 --- a/packages/mercury/src/cli/mercury.ts +++ b/packages/mercury/src/cli/mercury.ts @@ -2,14 +2,14 @@ import { createBundlesWithCustomPaths } from "./internal/create-bundles-with-custom-paths.js"; import { ensureDirectoryExistsAndItsClear } from "./internal/file-management.js"; -import { getArguments } from "./internal/validate-args.js"; import { measureTime } from "./internal/utils.js"; +import { getArguments } from "./internal/validate-args.js"; measureTime(async () => { // Improve process visualization console.log(""); - const args = getArguments(); + const args = await getArguments(); if (args) { ensureDirectoryExistsAndItsClear(args.outDirPath); diff --git a/packages/mercury/src/components/_template/_styles.scss b/packages/mercury/src/components/_template/_styles.scss deleted file mode 100644 index 9ff2fda51..000000000 --- a/packages/mercury/src/components/_template/_styles.scss +++ /dev/null @@ -1,4 +0,0 @@ -@use "tokens"; - -@mixin template() { -} diff --git a/packages/mercury/src/components/_template/_tokens.scss b/packages/mercury/src/components/_template/_tokens.scss deleted file mode 100644 index 64f40b81a..000000000 --- a/packages/mercury/src/components/_template/_tokens.scss +++ /dev/null @@ -1,2 +0,0 @@ -@mixin template-tokens() { -} diff --git a/packages/mercury/src/components/accordion/_accordion-styles.scss b/packages/mercury/src/components/accordion/_accordion-styles.scss index 7cba30ab8..d9dad1c3b 100644 --- a/packages/mercury/src/components/accordion/_accordion-styles.scss +++ b/packages/mercury/src/components/accordion/_accordion-styles.scss @@ -6,84 +6,119 @@ @include accordion-tokens(); background-color: transparent !important; - gap: var(--mer-spacing--sm); // force elevation-* class not applying on the host + gap: var(--size-12); } -%accordion-header { - @extend %subtitle-semi-bold-xs; - color: var(--accordion-header__color); - gap: var(--mer-spacing--sm); - padding: var(--mer-spacing--sm); - --outline-width: var(--mer-border__width--sm); - outline: var(--mer-border__width--sm) solid - var(--accordion-header__outline-color); - border-radius: var(--accordion-panel__border-radius); +%accordion-panel { + border-radius: var(--accordion-border-radius); + + &-filled, + &-outlined { + --panel-border-color: transparent; + border: var(--size-1) solid var(--panel-border-color); + } &-filled { - --accordion-header__color: var(--elevation-color, --mer-text__on-elevation); + --accordion-panel-bg-color: var( + --elevation-background-color, + var(--color-accent-surface-elevation-01) + ); + --panel-border-color: var(--accordion-panel-bg-color); - outline-offset: calc(var(--outline-width) * -1); - background-color: var(--header__bg-color); + &--disabled { + --accordion-panel-bg-color: var(--color-accent-neutral-disabled); + } - --header__bg-color: var( - --elevation-background-color, - var(--mer-surface__elevation--01) + background-color: var(--accordion-panel-bg-color); + } + + &-outlined { + // --accordion-panel-bg-color: var(--elevation-background-color, transparent); + --panel-border-color: var( + --elevation-border-color, + var(--color-border-neutral-default) ); + &--disabled { - --header__bg-color: var(--mer-surface__elevation--02); - --accordion-header__color: var(--mer-accent__primary--disabled); + --panel-border-color: var(--color-border-neutral-disabled); } } +} + +%accordion-header { + @extend %subtitle-semi-bold-xs; + background-color: var(--accordion-bg-color); + color: var(--accordion-header-color); + border-radius: var(--accordion-header-border-radius); + gap: var(--size-12); + padding: var(--size-12); + // transition required since border-radius "block-end" is 0 only when collapsed. + transition: border-radius var(--ch-accordion-expand-collapse-duration); + + // filled and outlined share header color + --accordion-header-color: var( + --elevation-color, + --color-text-neutral-default + ); &--hover { - --accordion-header__outline-color: var(--mer-border-color__primary--hover); + --accordion-header-color: var(--color-text-primary-hover); + --ch-accordion__header-background-image: var( + --icon__system_chevron-down_neutral--hover + ); } + &--active { - --accordion-header__outline-color: var(--mer-border-color__primary--active); - } - &--focus-visible { - @include focus-outline(); - } - &--disabled { - --accordion-header__color: var(--mer-accent__primary--disabled); + --accordion-header-color: var(--color-text-primary-on-pressed); + --ch-accordion__header-background-image: var( + --icon__system_chevron-down_neutral--active + ); } -} - -%accordion-panel { - border-radius: var(--accordion-panel__border-radius); - &-filled, - &-outlined { - --panel-border-color: transparent; - border: var(--mer-border__width--sm) solid var(--panel-border-color); + &--expanded { + --accordion-header-border-radius: var(--accordion-border-radius) + var(--accordion-border-radius) 0 0; } &-filled { - --accordion-panel__bg-color: var( - --elevation-background-color, - var(--mer-surface__elevation--01) - ); - --panel-border-color: var(--accordion-panel__bg-color); - background-color: var(--accordion-panel__bg-color); - color: var(--elevation-color, --mer-text__on-elevation); + --accordion-header-bg-color: transparent; + background-color: var(--accordion-header-bg-color); + + &--hover { + --accordion-bg-color: var(--color-accent-primary-hover); + } + + &--active { + --accordion-bg-color: var(--color-accent-item-selected); + } &--disabled { - --accordion-panel__bg-color: var(--mer-surface__elevation--02); + --accordion-header-color: var(--color-text-neutral-on-disabled); } } &-outlined { - --accordion-panel__bg-color: var(--elevation-background-color, transparent); - --panel-border-color: var( - --elevation-border-color, - var(--mer-border-color__on-surface) - ); + --accordion-header-outline-color: transparent; + --accordion-header-outline-width: var(--size-1); + outline: var(--size-1) solid var(--accordion-header-outline-color); + + &--hover { + --accordion-header-outline-color: var(--color-border-primary-hover); + } + + &--active { + --accordion-header-outline-color: var(--color-border-item-selected); + } &--disabled { - --panel-border-color: var(--mer-border-color__primary--disabled); + --accordion-header-color: var(--color-text-neutral-disabled); } } + + &--focus-visible { + @include focus-outline(); + } } %accordion-section { @@ -95,6 +130,7 @@ $panel-selector: ".accordion-filled::part(panel)", $panel-disabled-selector: ".accordion-filled::part(panel disabled)", $header-selector: ".accordion-filled::part(header)", + $header-expanded-selector: ".accordion-filled::part(header expanded)", $header-disabled-selector: ".accordion-filled::part(header disabled)" ) { #{$accordion-selector} { @@ -114,48 +150,19 @@ &:hover { @extend %accordion-header--hover; + @extend %accordion-header-filled--hover; } &:active { @extend %accordion-header--active; + @extend %accordion-header-filled--active; } &:focus-visible { @extend %accordion-header--focus-visible; } } - #{$header-disabled-selector} { - @extend %accordion-header--disabled; - } -} - -@mixin accordion-filled-header( - $accordion-selector: ".accordion-filled-header", - $panel-selector: ".accordion-filled-header::part(panel)", - $panel-disabled-selector: ".accordion-filled-header::part(panel disabled)", - $header-selector: ".accordion-filled-header::part(header)", - $header-disabled-selector: ".accordion-filled-header::part(header disabled)" -) { - #{$accordion-selector} { - @extend %accordion; - } - - #{$panel-selector} { - @extend %accordion-panel; - } - - #{$header-selector} { - @extend %accordion-header; - @extend %accordion-header-filled; - - &:hover { - @extend %accordion-header--hover; - } - &:active { - @extend %accordion-header--active; - } - &:focus-visible { - @extend %accordion-header--focus-visible; - } + #{$header-expanded-selector} { + @extend %accordion-header--expanded; } #{$header-disabled-selector} { @@ -168,6 +175,7 @@ $panel-selector: ".accordion-outlined::part(panel)", $panel-disabled-selector: ".accordion-outlined::part(panel disabled)", $header-selector: ".accordion-outlined::part(header)", + $header-expanded-selector: ".accordion-outlined::part(header expanded)", $header-disabled-selector: ".accordion-outlined::part(header disabled)" ) { #{$accordion-selector} { @@ -184,19 +192,26 @@ #{$header-selector} { @extend %accordion-header; + @extend %accordion-header-outlined; &:hover { @extend %accordion-header--hover; + @extend %accordion-header-outlined--hover; } &:active { @extend %accordion-header--active; + @extend %accordion-header-outlined--active; } &:focus-visible { @extend %accordion-header--focus-visible; } } + #{$header-expanded-selector} { + @extend %accordion-header--expanded; + } + #{$header-disabled-selector} { - @extend %accordion-header--disabled; + @extend %accordion-header-outlined--disabled; } } diff --git a/packages/mercury/src/components/accordion/_accordion-tokens.scss b/packages/mercury/src/components/accordion/_accordion-tokens.scss index b13eae0e2..3725a019f 100644 --- a/packages/mercury/src/components/accordion/_accordion-tokens.scss +++ b/packages/mercury/src/components/accordion/_accordion-tokens.scss @@ -1,21 +1,27 @@ @mixin accordion-tokens() { // chameleon tokens (do not modify --ch names) - --ch-accordion__header-image-size: var(--mer-icon__box--sm); - --ch-accordion__chevron-size: var(--mer-icon__box--sm); - --ch-accordion-expand-collapse-duration: var(--mer-timing--fast); + --ch-accordion__header-image-size: var(--icon-box-sm); + --ch-accordion__chevron-size: var(--icon-box-sm); + --ch-accordion-expand-collapse-duration: var(--timing-fast); --ch-accordion-expand-collapse-timing-function: ease-in-out; // spacing - --spacing-body-block-start: var(--mer-spacing--sm); - --spacing-body-block-end: var(--mer-spacing--sm); - --spacing-body-inline-start: var(--mer-spacing--sm); - --spacing-body-inline-end: var(--mer-spacing--sm); + --spacing-body-block-start: var(--size-12); + --spacing-body-block-end: var(--size-12); + --spacing-body-inline-start: var(--size-12); + --spacing-body-inline-end: var(--size-12); // panel - --accordion-panel__border-radius: var(--mer-border__radius--sm); - --accordion-panel__border-color: transparent; - --accordion-panel__bg-color: transparent; + --accordion-border-radius: var(--size-4); + --accordion-panel-border-color: transparent; + --accordion-panel-bg-color: transparent; // header - --accordion-header__outline-color: transparent; + --accordion-header-outline-color: transparent; + --accordion-header-border-radius: var(--accordion-border-radius); + + // chevron icon + --ch-accordion__header-background-image: var( + --icon__system_chevron-down_neutral--enabled + ); } diff --git a/packages/mercury/src/components/chat/_chat-styles.scss b/packages/mercury/src/components/chat/_chat-styles.scss index b96bb4b16..591689753 100644 --- a/packages/mercury/src/components/chat/_chat-styles.scss +++ b/packages/mercury/src/components/chat/_chat-styles.scss @@ -9,24 +9,22 @@ @use "../../../../common/base" as *; // $commonSpacing: used to apply the same spacing in ::part(messages-container) and ::part(send-container). -$commonSpacing: var(--mer-spacing--md); +$commonSpacing: var(--size-16); // $sendInputColumnGap: used to apply as margin inline, inside ::part(send-container). -$sendInputColumnGap: var(--mer-spacing--xs); +$sendInputColumnGap: var(--size-8); // $sendInputRowGap: used to apply as margin block, inside ::part(send-container). -$sendInputRowGap: var(--mer-spacing--xs); -$messagePadding: var(--mer-spacing--xs); -$messageBorderRadius: var(--mer-border__radius--sm); -$sendInputPadding: var(--mer-spacing--xs); -$sendInputAfterMarginBlockStart: var(--mer-spacing--xs); +$sendInputRowGap: var(--size-8); +$messagePadding: var(--size-8); +$messageBorderRadius: var(--size-4); +$sendInputPadding: var(--size-10); +$sendInputAfterMarginBlockStart: var(--size-8); %chat { - --font-weight-regular: 100; // WA to force ch-markdown-viewer to use this font-weight - --line-height-tight: 1.4; // WA to force ch-markdown-viewer to use this line-height --files-viewer-max-block-size: 0px; // Used to calculate sand-input max-block-size --files-viewer-margin-block-start: 0px; // Involed on the calculation of sand-input max-block-size &__content { - gap: var(--mer-spacing--md); + gap: var(--size-16); padding: $commonSpacing; } @@ -34,22 +32,20 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); &__message { --message-content-border-color: transparent; + color: var(--color-text-neutral-default); @extend %body-regular-m; - color: var(--mer-color__neutral-gray--100); // Necessary to properly display line breaks &-header { align-items: center; display: flex; - font-size: var(--font-size-body-s); justify-content: space-between; - margin-block-end: var(--mer-spacing--xs); &-start { align-items: center; display: flex; - gap: var(--mer-spacing--xs); + gap: var(--size-8); } $avatarSize: 26px; @@ -72,18 +68,18 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); 90deg, var( --chat-avatar-border-color-from, - var(--mer-color__chat-avatar-circle-from) + var(--color-component-chat-01-start) ) 0%, var( --chat-avatar-border-color-to, - var(--mer-color__chat-avatar-circle-to) + var(--color-component-chat-01-end) ) 100% ); border-radius: 50%; -webkit-mask-image: radial-gradient( - circle 12px at center, + circle var(--size-12) at center, transparent 98%, black 100% ); @@ -91,8 +87,8 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); &-image { position: absolute; display: block; - inline-size: calc(100% - 6px); - block-size: calc(100% - 6px); + inline-size: calc(100% - var(--size-6)); + block-size: calc(100% - var(--size-6)); border-radius: 50%; background-image: var( --chat-avatar-background-image, @@ -100,7 +96,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); ); background-color: var( --chat-avatar-background-color, - var(--mer-color__primary--300) + var(--color-accent-primary-default) ); background-size: var(--chat-avatar-background-size, cover); background-repeat: no-repeat; @@ -114,7 +110,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); grid-template-columns: max-content max-content; &--before { - $bulletSize: var(--mer-spacing--2xs); + $bulletSize: var(--size-4); align-self: center; background-color: currentColor; block-size: $bulletSize; @@ -127,13 +123,13 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); } &-time { - @include body-italic-s(); - color: var(--mer-color__neutral-gray--400); + @extend %body-italic-xs; + color: var(--color-text-neutral-neutral); } } &--user { - background-color: var(--mer-color__chat-message--user); + background-color: var(--color-accent-surface-elevation-answer); inline-size: 90%; max-inline-size: 360px; justify-self: end; @@ -145,48 +141,56 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); } &-content { + --chat-content-margin-block-start: var(--size-4); + margin-block-start: var(--chat-content-margin-block-start); + @extend %body-regular-m; + &--with-icon { display: grid; grid-template-columns: max-content 1fr; - gap: var(--mer-spacing--sm); + gap: var(--size-12); align-items: center; &-before { - block-size: var(--mer-spacing--md); + block-size: var(--size-16); content: ""; display: grid; - inline-size: var(--mer-spacing--md); + inline-size: var(--size-16); justify-self: flex-end; background: var(--chat-message-icon) no-repeat center center / contain; } } + &--with-state { + --chat-content-margin-block-start: var(--size-8); + } + &--error { - background-color: var(--mer-color__chat-message--error); + background-color: var(--color-accent-error-contrast); --chat-message-icon: var(--icon__system_warning_error--enabled); } &--warning { - background-color: var(--mer-color__chat-message--warning); + background-color: var(--color-accent-warning-contrast); --chat-message-icon: var(--icon__system_warning_warning--enabled); } &--success { - background-color: var(--mer-color__chat-message--success); + background-color: var(--color-accent-success-contrast); --chat-message-icon: var(--icon__system_check_success--enabled); } &--waiting { display: flex; - gap: var(--mer-spacing--xs); - @extend %body-regular-m; + gap: var(--size-8); } } &__copy-button { --button-icon: var(--icon__system_copy_primary--enabled); &--before { + $copyButtonSize: var(--icon-box-md); content: ""; - inline-size: var(--mer-icon__box--md); - block-size: var(--mer-icon__box--md); + inline-size: $copyButtonSize; + block-size: $copyButtonSize; display: grid; -webkit-mask: no-repeat center / 100% var(--button-icon); @@ -198,29 +202,32 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); } } + &__actions-container { + margin-block-start: var(--size-6); + } + // - - - - - - - - - - - - - - - - - - - - // About files // - - - - - - - - - - - - - - - - - - - - &__file-container { - background-color: var(--mer-color__surface); - border-radius: var(--mer-border__width--lg); - border: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--02); + background-color: var(--color-accent-surface-elevation-01); + border-radius: var(--size-4); + border: var(--size-1) solid var(--color-border-surface-on-elevation-01); overflow: hidden; display: grid; &--format-audio { - --icon-path: var(--icon__system_headphones_on-surface--enabled); + --icon-path: var(--icon__system_headphones_primary--enabled); } &--format-video { - --icon-path: var(--icon__system_videocam_on-surface--enabled); + --icon-path: var(--icon__system_videocam_primary--enabled); } &--format-image { - --icon-path: var(--icon__system_photo_on-surface--enabled); + --icon-path: var(--icon__system_photo_primary--enabled); } &--format-file { - --icon-path: var(--icon__system_detail_on-surface--enabled); + --icon-path: var(--icon__system_detail_primary--enabled); } } @@ -229,7 +236,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); // formats &--format-audio { - padding: var(--mer-spacing--xs); + padding: var(--size-8); justify-self: center; } @@ -251,13 +258,15 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); justify-content: center; &--before { - --file-format-icon-size: var(--mer-spacing--xl); + --file-format-icon-size: var(--size-40); --file-format-display: inline-block; content: ""; display: inline-block; inline-size: var(--file-format-icon-size); block-size: var(--file-format-icon-size); - background: no-repeat center / 100% var(--icon-path); + background: no-repeat center / var(--size-22) var(--icon-path) + var(--color-accent-surface-elevation-02); + border-radius: var(--size-4); } &--in-progress { @@ -280,14 +289,14 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); // footer &-footer { // no padding block, to allow more vertical space for the spinner. - block-size: 40px; - padding-inline: var(--mer-spacing--sm); + block-size: var(--size-40); + padding-inline: var(--size-12); - background-color: var(--mer-surface__elevation--01); - @extend %body-regular-xs; + background-color: var(--color-accent-surface-elevation-02); &-caption { @include ellipsis(); + @extend %body-regular-xs; } &--with-icon { @@ -295,10 +304,10 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); align-items: center; justify-content: center; grid-template-columns: max-content 1fr; - gap: var(--mer-spacing--xs); + gap: var(--size-8); &--before { - --file-footer-format-icon-size: var(--mer-spacing--md); + --file-footer-format-icon-size: var(--size-16); content: ""; display: inline-block; inline-size: var(--file-footer-format-icon-size); @@ -334,7 +343,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); &--has-files-viewer { --files-viewer-max-block-size: 90px; - --files-viewer-margin-block-start: var(--mer-spacing--xs); + --files-viewer-margin-block-start: var(--size-8); overflow: auto; } &__attached-files { @@ -348,24 +357,24 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); &__files-container { display: grid; grid-auto-rows: max-content; - gap: var(--mer-spacing--xs); - margin-block-start: var(--mer-spacing--xs); + gap: var(--size-8); + margin-block-start: var(--size-8); } // live audio &__live-audio { &-button { + $liveAudioButtonSize: var(--icon-box-md); grid-area: live-audio-button; --icon-path: var(--icon__system_voice_neutral--enabled); &--before { content: ""; display: block; - inline-size: var(--mer-icon__box--md); - block-size: var(--mer-icon__box--md); - background: no-repeat center / var(--mer-icon__size--md) - var(--icon-path); + inline-size: $liveAudioButtonSize; + block-size: $liveAudioButtonSize; + background: no-repeat center / var(--icon-size-md) var(--icon-path); } &--hover { @@ -391,13 +400,13 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); // send &__send-container { - background-color: var(--mer-surface__elevation--02); - border-radius: var(--mer-spacing--2xs); + background-color: var(--color-accent-surface-elevation-02); + border-radius: var(--size-4); position: relative; margin: $commonSpacing; &-additional-content-after { - padding: var(--mer-spacing--xs); + padding: var(--size-8); } } @@ -410,7 +419,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); #{$sendInputPadding} * 2 + var(--font-size-body-m) * var(--line-height-tight) * var(--chat-send-input-max-lines, 12) + var(--files-viewer-max-block-size) + - var(--files-viewer-margin-block-start) + var(--control__block-size) + + var(--files-viewer-margin-block-start) + var(--control-block-size) + #{$sendInputAfterMarginBlockStart} ); @@ -419,6 +428,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); padding: $sendInputPadding; border: none; &--hover { + background-color: var(--color-accent-item-hover); } &--focus { } @@ -526,6 +536,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); /// @param {String} $file-format-audio-selector [".chat::part(file format-audio)"] - /// @param {String} $file-container-format-file-selector [".chat::part(file-container format-file)"] - /// @param {String} $file-format-file-selector [".chat::part(file format-file)"] - +/// @param {String} $file-format-file-in-progress-selector [".chat::part(file format-file in-progress)"] - /// @param {String} $file-container-format-image-selector [".chat::part(file-container format-image)"] - /// @param {String} $file-format-image-selector [".chat::part(file format-image)"] - /// @param {String} $file-container-format-video-selector [".chat::part(file-container format-video)"] - @@ -572,6 +583,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); $send-input-after-selector: ".chat::part(send-input-after)", // actions-container (action buttons on ::part(send-input-after) + $actions-container-selector: ".chat::part(actions-container)", $action-button-selector: ".chat::part(action-button)", $action-copy-message-selector: ".chat::part(action-copy-message)", $action-copy-message-copying-selector: @@ -601,6 +613,8 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); $file-container-format-file-selector: ".chat::part(file-container format-file)", $file-format-file-selector: ".chat::part(file format-file)", + $file-format-file-in-progress-selector: + ".chat::part(file format-file in-progress)", $file-container-format-image-selector: ".chat::part(file-container format-image)", $file-format-image-selector: ".chat::part(file format-image)", @@ -618,6 +632,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); $send-container-selector: ".chat::part(send-container)", // $send-input-wrapper-selector: ".chat::part(send-input-wrapper)", $send-input-selector: ".chat::part(send-input)", + $send-input-empty-placeholder-selector: ".chat::part(ch-edit--empty-value)", $chat-has-files-viewer-selector: ".chat:has([slot=" chat-attached-files-viewer "])", $send-button-selector: ".chat::part(send-button)", @@ -631,9 +646,10 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); @include input( $input-selector: $send-input-selector, + $empty-placeholder-selector: $send-input-empty-placeholder-selector, $add--disabled: false, - $add--placeholder: false, - $add--error: false + $add--error: false, + $add--placeholder: true ); #{$messages-container-selector} { @@ -687,6 +703,9 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); } // content + #{$content-selector} { + @extend %chat__message-content; + } #{$content-selector} { @extend %chat__message-content; @@ -696,6 +715,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); #{$content-success-selector} { @extend %chat__message--with-padding; @extend %chat__message-content--success; + @extend %chat__message-content--with-state; @extend %chat__message-content--with-icon; &::before { @extend %chat__message-content--with-icon-before; @@ -706,6 +726,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); #{$content-warning-selector} { @extend %chat__message--with-padding; @extend %chat__message-content--warning; + @extend %chat__message-content--with-state; @extend %chat__message-content--with-icon; &::before { @extend %chat__message-content--with-icon-before; @@ -721,6 +742,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); #{$error-content-selector} { @extend %chat__message--with-padding; @extend %chat__message-content--error; + @extend %chat__message-content--with-state; @extend %chat__message-content--with-icon; &::before { @extend %chat__message-content--with-icon-before; @@ -733,6 +755,10 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); // actions-container + #{$actions-container-selector} { + @extend %chat__actions-container; + } + @include button-tertiary( $selector: $action-button-selector, $add--disabled: true @@ -850,6 +876,9 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); @extend %chat__file--format-file--active; } } + #{$file-format-file-in-progress-selector} { + @extend %chat__file--format-file--in-progress; + } // live audio @@ -874,9 +903,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); } @include button-secondary( $selector: $live-audio-button-selector, - $add--disabled: true, - $add--destructive: false, - $add--loading: false + $add--disabled: true ); @include button-icon-only($selector: $live-audio-button-selector); @@ -917,9 +944,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); } @include button-secondary( $selector: $send-button-selector, - $add--disabled: true, - $add--destructive: false, - $add--loading: false + $add--disabled: true ); @include button-icon-only($selector: $send-button-selector); @@ -938,9 +963,7 @@ $sendInputAfterMarginBlockStart: var(--mer-spacing--xs); } @include button-secondary( $selector: $stop-response-button-selector, - $add--disabled: true, - $add--destructive: false, - $add--loading: false + $add--disabled: true ); @include button-icon-only($selector: $stop-response-button-selector); diff --git a/packages/mercury/src/components/chat/file.lit.ts b/packages/mercury/src/components/chat/file.lit.ts index 41f95a085..3cb5ad64b 100644 --- a/packages/mercury/src/components/chat/file.lit.ts +++ b/packages/mercury/src/components/chat/file.lit.ts @@ -55,7 +55,7 @@ const fileFooter = ( [file.parts!]: !!file.parts })} > - + ${file.caption}${file.extension && "." + file.extension.toLowerCase()} diff --git a/packages/mercury/src/components/chat/mer-animated-dots.ts b/packages/mercury/src/components/chat/mer-animated-dots.ts index 479c73e7d..1a7d73bac 100644 --- a/packages/mercury/src/components/chat/mer-animated-dots.ts +++ b/packages/mercury/src/components/chat/mer-animated-dots.ts @@ -19,26 +19,27 @@ export class MerAnimatedDots extends LitElement { border-radius: calc(var(--dot-size) / 2); opacity: var(--dot-initial-opacity); transform: scale(var(--dot-initial-scale)); - animation: animateDot var(--animation-duration) ease-in-out infinite alternate; + animation: animateDot var(--animation-duration) ease-in-out infinite + alternate; } .dot:first-child { background-color: var( --chat-avatar-waiting-dot-1-color, - var(--mer-color__chat-awaiting-dot-1) + var(--color-component-chat-01-start) ); } .dot:nth-child(2) { animation-delay: calc(var(--animation-duration) / 3); background-color: var( --chat-avatar-waiting-dot-2-color, - var(--mer-color__chat-awaiting-dot-2) + var(--color-component-chat-01-middle) ); } .dot:nth-child(3) { animation-delay: calc(var(--animation-duration) / 1.5); background-color: var( --chat-avatar-waiting-dot-3-color, - var(--mer-color__chat-awaiting-dot-3) + var(--color-component-chat-01-end) ); } diff --git a/packages/mercury/src/components/chat/mer-spinner.lit.ts b/packages/mercury/src/components/chat/mer-spinner.lit.ts index 9eeea6d45..7b32a0f00 100644 --- a/packages/mercury/src/components/chat/mer-spinner.lit.ts +++ b/packages/mercury/src/components/chat/mer-spinner.lit.ts @@ -3,9 +3,9 @@ import { LitElement, css, html } from "lit"; export class MerSpinner extends LitElement { static override styles = css` :host { - --spinner-size: var(--mer-spacing--md); - --spinner-color: var(--mer-color__primary--300); - --track-color: var(--mer-color__tinted-primary--50); + --spinner-size: var(--size-16); + --spinner-color: var(--color-neutral-1450); + --track-color: var(--color-primary-600); --border-thinness: 7; inline-size: var(--spinner-size); @@ -15,7 +15,7 @@ export class MerSpinner extends LitElement { border-block-start: calc(var(--spinner-size) / var(--border-thinness)) solid var(--spinner-color); border-radius: 50%; - animation: spin var(--mer-timing--regular, 1s) linear infinite; + animation: spin var(--timing-regular, 1s) linear infinite; } @keyframes spin { diff --git a/packages/mercury/src/components/checkbox/_checkbox-styles.scss b/packages/mercury/src/components/checkbox/_checkbox-styles.scss index 15d251ea0..c04af0856 100644 --- a/packages/mercury/src/components/checkbox/_checkbox-styles.scss +++ b/packages/mercury/src/components/checkbox/_checkbox-styles.scss @@ -1,26 +1,23 @@ @use "../../base/typography" as *; +@use "../../base/control" as *; @use "../../base/common" as *; @use "../../base/label/label-styles" as *; %checkbox { - --ch-checkbox__container-size: var(--control-tiny__size); - --ch-checkbox__option-size: calc(var(--control-tiny__size) / 2); - --ch-checkbox__image-size: var(--mer-icon__box--md); + --ch-checkbox__container-size: var(--control-tiny-size); + --ch-checkbox__option-size: var(--control-tiny-option-checked-size); + --ch-checkbox__image-size: var(--icon-box-md); @include label-gap-inline(); &--hover { @include control-tiny-border-hover(); - - &::part(label) { - @include label-color-hover(); - } + } + &--disabled { + @include control-tiny-border-disabled(); } - // Input &__input { - // --checkbox-border-color: var(--control__border-color); - // border-color: var(--checkbox-border-color); @include control-tiny-border(); &--focus { @@ -37,13 +34,13 @@ // Option &__option { - background-color: var(--control-tiny-option__color); + @include control-tiny-option-color(); &--checked { } &--indeterminate { - block-size: var(--mer-spacing--3xs); + block-size: var(--size-2); } // Not implemented yet in the control @@ -51,14 +48,18 @@ } &--disabled { + @include control-tiny-option-color-disabled(); } } // Label &__label { @include label-font(); - @include label-color-enabled(); + @include label-color(); + &--hover { + @include label-color-hover(); + } &--disabled { @include label-color-disabled(); } @@ -91,7 +92,7 @@ $checkbox__input--indeterminate-selector: ".checkbox::part(input indeterminate)", $checkbox__input--error-selector: ".checkbox::part(input error)", - + $checkbox__option-selector: ".checkbox::part(option)", $checkbox__option--disabled-selector: ".checkbox::part(option disabled)", $checkbox__option--checked-selector: ".checkbox::part(option checked)", $checkbox__option--indeterminate-selector: @@ -130,10 +131,12 @@ } // Option + #{$checkbox__option-selector} { + @extend %checkbox__option; + } #{$checkbox__option--checked-selector} { @extend %checkbox__option--checked; } - #{$checkbox__option--indeterminate-selector} { @extend %checkbox__option--indeterminate; } @@ -143,18 +146,24 @@ #{$checkbox__label-selector} { @extend %checkbox__label; } + #{$checkbox-selector} { + &:hover { + @extend %checkbox__label--hover; + } + } } // Disabled @if $add--disabled { // Input #{$checkbox__input--disabled-selector} { - --control__border-color: var(--control__border-color--disabled); + @extend %checkbox--disabled; } // Option + #{$checkbox__option--disabled-selector} { - --control__border-color: var(--control__border-color--disabled); + @extend %checkbox__option--disabled; } // Label diff --git a/packages/mercury/src/components/code/_code-styles.scss b/packages/mercury/src/components/code/_code-styles.scss index 66f78e873..3cc00f988 100644 --- a/packages/mercury/src/components/code/_code-styles.scss +++ b/packages/mercury/src/components/code/_code-styles.scss @@ -1,14 +1,14 @@ @use "tokens" as *; +@use "../../base/typography" as *; @mixin code($selector: ".code") { #{$selector} { @include code-tokens(); + @include code-s(); padding: var(--code__padding); background-color: var(--code__bg-color); border: var(--code__border); border-radius: var(--code__border-radius); - font-size: 13px; - line-height: 1.55em; overflow: auto; } } diff --git a/packages/mercury/src/components/code/_tokens.scss b/packages/mercury/src/components/code/_tokens.scss index 7ed8b565a..c3b33afe3 100644 --- a/packages/mercury/src/components/code/_tokens.scss +++ b/packages/mercury/src/components/code/_tokens.scss @@ -1,17 +1,16 @@ @mixin code-tokens() { // TODO: variable names should be updated to something more descriptive - --code__color-base: var(--mer-text__on-surface); - --code__color-blue: var(--mer-color__primary--400); - --code__color-light-blue: var(--mer-color__primary--200); - --code__color-red: var(--mer-color__message-red--200); - --code__color-green: var(--mer-color__message-green--200); - --code__bg-color: var(--mer-surface__elevation--01); - --code__border: var(--mer-border__width--sm) solid - var(--mer-surface__elevation--03); - --code__border-radius: var(--mer-border__radius--sm); + --code__color-base: var(--color-text-neutral-default); + --code__color-blue: var(--color-text-primary-pressed); + --code__color-light-blue: var(--color-text-primary-default); + --code__color-red: var(--color-text-semantic-error); + --code__color-green: var(--color-text-semantic-success); + --code__bg-color: var(--color-accent-surface-elevation-01); + --code__border: var(--size-1) solid var(--color-accent-surface-elevation-03); + --code__border-radius: var(--size-4); // TODO: Fix this. It MUST be two separated properties (padding-block and padding-inline) - --code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm); + --code__padding: var(--size-8) var(--size-12); --ch-code__doctag: var(--code__color-blue); --ch-code__keyword: var(--code__color-blue); diff --git a/packages/mercury/src/components/combo-box/_combo-box-styles.scss b/packages/mercury/src/components/combo-box/_combo-box-styles.scss index 24ae8495b..c74c373b1 100644 --- a/packages/mercury/src/components/combo-box/_combo-box-styles.scss +++ b/packages/mercury/src/components/combo-box/_combo-box-styles.scss @@ -1,15 +1,16 @@ +@use "../../base/control" as *; @use "../../base/common" as *; +@use "../../base/list" as *; @use "../../base/typography" as *; @use "../../config/tree-controls" as *; %combo-box { - --ch-combo-box-separation-y: var(--mer-spacing--3xs); - --ch-combo-box-item-gap: var(--mer-spacing--xs); - --ch-combo-box-item__image-size: var(--mer-icon__box--md); + --ch-combo-box-separation-y: var(--size-2); + --ch-combo-box-item-gap: var(--size-8); + --ch-combo-box-item__image-size: var(--icon-box-md); --ch-combo-box-item__background-image-size: 100%; - --ch-combo-box-group__expandable-button-size: var(--mer-spacing--md); - --ch-combo-box-group__expandable-button-image-size: var(--mer-spacing--sm); - --ch-combo-box__picker-size: var(--mer-icon__box--md); + --ch-combo-box-group__expandable-button-size: var(--size-16); + --ch-combo-box-group__expandable-button-image-size: var(--size-12); @include items-container-max-height(); @include body-regular-m(); @@ -23,7 +24,7 @@ } &--focus { - @include focus-border(); + @include focus-outline(); } &--disabled { @@ -58,6 +59,7 @@ } &-group__header { + @include body-semi-bold-m(); @include item-colors-enabled(); @include item-padding(); @@ -67,7 +69,10 @@ @include item-border-radius(); &-hover { - --item__color: var(--mer-accent__primary); + --item-color: var(--color-text-primary-hover); + } + &-active { + --item-color: var(--color-text-primary-pressed); } } @@ -86,7 +91,6 @@ &__item { @include item-colors-enabled(); - @include item-border(); @include item-border-radius(); @include item-padding(); @@ -95,7 +99,7 @@ calc( var(--ch-combo-box-item-gap) + var(--ch-combo-box-group__expandable-button-size) + - var(--item__padding-inline) + var(--item-padding-inline) ) ); } @@ -167,7 +171,7 @@ @if $add--placeholder { #{$combo-box__placeholder-selector} { - @extend %body-italic-m; + @include control-placeholder(); } } @@ -193,6 +197,9 @@ &:hover { @extend %combo-box-group__header--expandable-hover; } + &:active { + @extend %combo-box-group__header--expandable-active; + } } #{$group-selector} { diff --git a/packages/mercury/src/components/dialog/_dialog-styles.scss b/packages/mercury/src/components/dialog/_dialog-styles.scss index 20c198948..c53078223 100644 --- a/packages/mercury/src/components/dialog/_dialog-styles.scss +++ b/packages/mercury/src/components/dialog/_dialog-styles.scss @@ -1,6 +1,8 @@ @use "../../base/button/button-styles" as *; @use "../../icons/button" as *; +@use "../../base/components/dialog" as *; @use "../../base/common" as *; +@use "../../base/scrollbar" as *; @use "../../base/icons" as *; @use "../../base/typography" as *; @@ -14,31 +16,32 @@ --dialog-background-color: var( --elevation-background-color, - var(--mer-surface__elevation--01) + var(--color-accent-surface-elevation-01) ); --dialog-border-color: var( --elevation-border-color, - var(--mer-border-color__on-elevation--01) + var(--color-border-surface-on-elevation-01) ); } - --dialog-border-radius: var(--mer-border__width--lg); - --spacing-body-block-start: var(--mer-spacing--md); - --spacing-body-block-end: var(--mer-spacing--md); - --spacing-body-inline-start: var(--mer-spacing--sm); - --spacing-body-inline-end: var(--mer-spacing--sm); + --dialog-border-radius: var(--size-8); + --spacing-body-block-start: var(--size-20); + --spacing-body-block-end: var(--size-20); + --spacing-body-inline-start: var(--size-16); + --spacing-body-inline-end: var(--size-16); border-radius: var(--dialog-border-radius); - border: var(--mer-border__width--sm) solid var(--dialog-border-color); + border: var(--size-1) solid var(--dialog-border-color); background-color: var(--dialog-background-color); - box-shadow: var(--mer-box-shadow--01); + box-shadow: 0px 4px 20px 0px #0f0f0f66; &__backdrop { - background-color: color-mix( - in srgb, - var(--mer-color__neutral-gray--900) 71%, - transparent 30% - ); + // background-color: color-mix( + // in srgb, + // var(--color-neutral-1500) 70%, + // transparent 30% + // ); + background-color: var(--color-accent-backdrop-default); backdrop-filter: blur(15px); z-index: 108; // TODO: This is a WA to show the backdrop above the button of the dropdown } @@ -48,18 +51,17 @@ var(--font-size-subtitle-xs) and var(--font-size-subtitle-xs) represent the ::part(caption) font size and line-height, respectively. */ min-block-size: calc( - var(--mer-spacing--md) * 2 + var(--font-size-subtitle-xs) * + var(--size-16) * 2 + var(--font-size-subtitle-xs) * var(--line-height-tight) ); - gap: var(--mer-spacing--sm); - padding-inline: var(--mer-spacing--sm); - border-block-end: var(--mer-border__width--sm) solid - var(--dialog-border-color); + gap: var(--size-12); + padding-inline: var(--size-12); + border-block-end: var(--size-1) solid var(--dialog-border-color); } &__caption { @include subtitle-semi-bold-xs(); - padding: var(--mer-spacing--md) 0; + padding: var(--size-16) 0; word-break: break-word; } @@ -78,22 +80,23 @@ &__content { overflow: auto; + @include scrollbar-styles(); } &__footer { - padding-block: var(--mer-spacing--xs); - padding-inline: var(--mer-spacing--sm); + padding-block: var(--size-8); + padding-inline: var(--size-12); } // ------------------------------ // Edges (For dragging) // ------------------------------ &__edge { - $edge-border-width: var(--mer-border__width--lg); + $edge-border-width: var(--size-4); $edge-border-style: solid; - $edge-color: var(--mer-color__tinted-primary--20); + $edge-color: var(--color-border-primary-hover); border-color: transparent; - transition: var(--mer-timing--fast) border-color; + transition: var(--timing-fast) border-color; &--hover { border-color: $edge-color; @@ -194,7 +197,7 @@ @extend %dialog__footer; } // @include buttons-spacer($footer-selector); - @include control-footer($with-border-selector: $footer-selector); + @include dialog-footer($with-border-selector: $footer-selector); // ------------------------------ // Edges (For dragging) diff --git a/packages/mercury/src/components/dialog/_tokens.scss b/packages/mercury/src/components/dialog/_tokens.scss deleted file mode 100644 index bb6697120..000000000 --- a/packages/mercury/src/components/dialog/_tokens.scss +++ /dev/null @@ -1,2 +0,0 @@ -@mixin dialog-tokens() { -} diff --git a/packages/mercury/src/components/dropdown/_dropdown-styles.scss b/packages/mercury/src/components/dropdown/_dropdown-styles.scss index 6ad60b669..fa290c8da 100644 --- a/packages/mercury/src/components/dropdown/_dropdown-styles.scss +++ b/packages/mercury/src/components/dropdown/_dropdown-styles.scss @@ -1,5 +1,6 @@ @use "../../base/button/button-styles" as *; @use "../../base/common" as *; +@use "../../base/list" as *; @use "../../base/typography" as *; @use "../../base/icons" as *; @@ -14,16 +15,17 @@ @include items-container-dropdown(); @include items-container-border-radius(); @include items-container-gap(); + box-shadow: var(--box-shadow); } %dropdown-item-action { - --ch-dropdown-item__image-size: var(--mer-icon__box--md); + --ch-dropdown-item__image-size: var(--icon-box-md); @include item-colors-enabled(); @include item-border(); @include item-border-radius(); @include item-padding(); @include item-gap(); - @include body-regular-m(); + @include item-font-style(); &--focus { @include focus-outline(); @@ -34,7 +36,8 @@ } &--active { - @include item-colors-selected(); + // TODO: Check if a dropdwon item should implement active state. + // @include item-colors-selected(); } } @@ -43,7 +46,7 @@ } %dropdown-separator { - margin-block: var(--spacing--s); + @include items-container-separator(); } %dropdown-expandable-button { @@ -118,7 +121,7 @@ $dropdown__expandable-action-expanded-selector: ".dropdown::part(action expandable expanded)", - $dropdown-separator-selector: ".dropdown .dropdown-separator", + $dropdown-separator-selector: ".dropdown::part(separator)", $dropdown__slot-header-selector: ".dropdown .header-slot", @@ -198,17 +201,14 @@ $selector: $dropdown__expandable-button-primary-selector, $add--disabled: true, $add--destructive: false, - $add--success: false, - $add--loading: false + $add--success: false ); } @if $add-button-secondary { @include button-secondary( $selector: $dropdown__expandable-button-secondary-selector, - $add--disabled: true, - $add--destructive: false, - $add--loading: false + $add--disabled: true ); } diff --git a/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss b/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss index 4513339dd..8e7a170eb 100644 --- a/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss +++ b/packages/mercury/src/components/flexible-layout/_flexible-layout-styles.scss @@ -1,13 +1,14 @@ @use "../../base/common" as *; +@use "../../base/components/tab" as *; @use "../../base/typography" as *; @use "../tab/tab-styles" as *; %flexible-layout { --flexible-layout--tab-list-block__background-color: var( - --mer-surface__elevation--01 + --color-accent-surface-elevation-01 ); --flexible-layout--tab-list-inline__background-color: var( - --mer-surface__elevation--02 + --color-accent-surface-elevation-02 ); --flexible-layout--tab-list-inline__inline-size: 48px; @@ -27,21 +28,21 @@ ); --flexible-layout--tab-button-block-start__background-color--selected: var( - --mer-surface + --color-accent-surface-surface ); --flexible-layout--tab-button-block-end__background-color--selected: var( - --mer-surface + --color-accent-surface-surface ); &-tab { - --ch-tab-close-button__background-image-size: var(--mer-icon__size--md); - --ch-tab-close-button__image-size: var(--mer-spacing--md); - --ch-tab-button__image-size: var(--mer-icon__box--md); + --ch-tab-close-button__background-image-size: var(--icon-size-md); + --ch-tab-close-button__image-size: var(--size-16); + --ch-tab-button__image-size: var(--icon-box-md); - --spacing-body-block-start: var(--mer-spacing--md); - --spacing-body-block-end: var(--mer-spacing--md); - --spacing-body-inline-start: var(--mer-spacing--md); - --spacing-body-inline-end: var(--mer-spacing--md); + --spacing-body-block-start: var(--size-16); + --spacing-body-block-end: var(--size-16); + --spacing-body-inline-start: var(--size-16); + --spacing-body-inline-end: var(--size-16); } &-tab-button-block { @@ -53,18 +54,16 @@ } &-tab-button-block-not-closable { - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); + padding-block: var(--tab-caption-padding-block); + padding-inline: var(--tab-caption-padding-inline); } &-tab-button-block-closable { - // Due to border-block-width: 1px and padding: var(--mer-spacing--2xs) for the close button - padding-block: calc( - var(--tab-caption__padding-block) - var(--mer-spacing--2xs) - 1px - ); + // Due to border-block-width: 1px and padding: var(--size-4) for the close button + padding-block: calc(var(--tab-caption-padding-block) - var(--size-4) - 1px); - padding-inline: var(--tab-caption__padding-inline) - calc(var(--tab-caption__padding-inline) - var(--mer-spacing--2xs) - 1px); + padding-inline: var(--tab-caption-padding-inline) + calc(var(--tab-caption-padding-inline) - var(--size-4) - 1px); } &-tab-button-inline { @@ -72,17 +71,17 @@ @include tab-button-gap(); @extend %body-regular-s; - padding-block: var(--tab-caption__padding-block); + padding-block: var(--tab-caption-padding-block); // Due to border-inline-width: 1px; - padding-inline: calc(var(--tab-caption__padding-inline) - 1px); + padding-inline: calc(var(--tab-caption-padding-inline) - 1px); border-inline: 1px solid transparent; } // Style for the button of the selected tab &-tab-button--selected-before { - color: var(--mer-accent__primary); + color: var(--color-text-primary-default); } // Block Start @@ -101,11 +100,11 @@ } &-tab-button-block-start--selected { - border-block-start-color: var(--mer-accent__primary); + border-block-start-color: var(--color-border-primary-default); background-color: var( --flexible-layout--tab-button-block-start__background-color--selected ); - color: var(--tab-caption__color--selected); + color: var(--tab-caption-color-selected); } // Block End @@ -113,7 +112,7 @@ background-color: var( --flexible-layout--tab-button-block-end__background-color ); - color: var(--tab-caption__color--selected); + color: var(--tab-caption-color-selected); } &-tab-button-block-end--hover { @@ -125,7 +124,7 @@ } &-tab-button-block-end--selected { - border-block-end-color: var(--mer-accent__primary); + border-block-end-color: var(--color-border-primary-default); background-color: var( --flexible-layout--tab-button-block-end__background-color--selected ); @@ -148,8 +147,8 @@ } &-tab-button-inline-start--selected { - border-inline-start-color: var(--mer-accent__primary); - color: var(--mer-accent__primary); + border-inline-start-color: var(--color-border-primary-default); + color: var(--color-text-primary-default); } // Inline End @@ -169,8 +168,8 @@ } &-tab-button-inline-end--selected { - border-inline-end-color: var(--mer-accent__primary); - color: var(--mer-accent__primary); + border-inline-end-color: var(--color-border-primary-default); + color: var(--color-text-primary-default); } // Disabled @@ -197,13 +196,13 @@ &-droppable-area { background-color: color-mix( in srgb, - var(--mer-accent__primary) 25%, + var(--color-accent-primary-default) 25%, transparent ); } &-bar { - color: var(--mer-border-color__on-surface); + color: var(--color-text-neutral-default); } } diff --git a/packages/mercury/src/components/icon/_icon-styles.scss b/packages/mercury/src/components/icon/_icon-styles.scss index 28e28be06..c52b670c6 100644 --- a/packages/mercury/src/components/icon/_icon-styles.scss +++ b/packages/mercury/src/components/icon/_icon-styles.scss @@ -1,11 +1,11 @@ %icon { &--small { - --ch-image-size: var(--mer-icon__box--sm); - --ch-image-background-size: var(--mer-icon__size--sm); + --ch-image-size: var(--icon-box-sm); + --ch-image-background-size: var(--icon-size-sm); } &--medium { - --ch-image-size: var(--mer-icon__box--md); - --ch-image-background-size: var(--mer-icon__size--md); + --ch-image-size: var(--icon-box-md); + --ch-image-background-size: var(--icon-size-md); } } diff --git a/packages/mercury/src/components/input/_input-styles.scss b/packages/mercury/src/components/input/_input-styles.scss index c591fb7b1..05a8a4c0e 100644 --- a/packages/mercury/src/components/input/_input-styles.scss +++ b/packages/mercury/src/components/input/_input-styles.scss @@ -1,13 +1,14 @@ @use "../../config/tree-controls" as *; +@use "../../base/control" as *; @use "../../base/common" as *; @use "../../base/typography" as *; %input { // ch-chameleon custom vars (do not edit their names) // --ch-edit-auto-fill-background-color: var(); not defined by design yet - --ch-edit-gap: var(--control__icon-gap); - --ch-edit__image-size: var(--mer-icon__box--md); - --ch-placeholder-color: var(--mer-color__neutral-gray--400); + --ch-edit-gap: var(--control-icon-gap); + --ch-edit__image-size: var(--icon-box-md); + --ch-placeholder-color: var(--color-text-neutral-on-disabled); @include body-regular-m(); @include control-border(); diff --git a/packages/mercury/src/components/layout-splitter/_layout-splitter-styles.scss b/packages/mercury/src/components/layout-splitter/_layout-splitter-styles.scss index ebbbd6703..dd5dbb19b 100644 --- a/packages/mercury/src/components/layout-splitter/_layout-splitter-styles.scss +++ b/packages/mercury/src/components/layout-splitter/_layout-splitter-styles.scss @@ -1,6 +1,6 @@ %layout-splitter { &-bar { - color: var(--mer-border-color__on-surface); + color: var(--color-text-neutral-default); } } diff --git a/packages/mercury/src/components/list-box/_list-box-styles.scss b/packages/mercury/src/components/list-box/_list-box-styles.scss index 65dcf7983..b27aa79c5 100644 --- a/packages/mercury/src/components/list-box/_list-box-styles.scss +++ b/packages/mercury/src/components/list-box/_list-box-styles.scss @@ -1,13 +1,12 @@ @use "../../base/common" as *; +@use "../../base/list" as *; @use "../../base/typography" as *; %list-box { - --ch-action-list-group__expandable-button-image-size: var( - --mer-icon__box--md - ); - --ch-action-list-group__expandable-button-size: var(--mer-icon__box--md); - --ch-action-list-item__background-image-size: var(--mer-icon__size--md); - --ch-action-list-item__image-size: var(--mer-icon__box--md); + --ch-action-list-group__expandable-button-image-size: var(--icon-box-md); + --ch-action-list-group__expandable-button-size: var(--icon-box-md); + --ch-action-list-item__background-image-size: var(--icon-size-md); + --ch-action-list-item__image-size: var(--icon-box-md); @include items-container-border(); @include items-container-border-radius(); @@ -57,7 +56,7 @@ } &--nested { - margin-inline-start: var(--mer-spacing--lg); + margin-inline-start: var(--size-24); } &--nested-expandable { } @@ -67,17 +66,17 @@ @include items-container-gap(); &-action { @include item-gap(); + @include items-header-colors(); &--hover { - @include item-colors-hover(); - border-color: transparent; // WA to hide the border. - // without border the item does not align with the items - // that implement border. + @include items-header-expandable-colors-hover(); + } + &--active { + @include items-header-expandable-colors-pressed(); } } &-action, &-caption { - @extend %subtitle-semi-bold-xs; - @include item-colors-enabled(); + @extend %body-semi-bold-m; } &-caption { @include item-padding(); @@ -90,11 +89,11 @@ &-additional-item--image { // TODO: uncomment when '.action' class on Chameleon fixes the grid-template, and use back item-column-gap() instead. - margin-inline-end: var(--item__gap--regular); + margin-inline-end: var(--item-gap-regular); } &-additional-item--text { // TODO: uncomment when '.action' class on Chameleon fixes the grid-template, and use back item-column-gap() instead. - margin-inline-start: calc(var(--item__gap--regular) * 2); + margin-inline-start: calc(var(--item-gap-regular) * 2); } &-separator { @@ -223,6 +222,9 @@ &:hover { @extend %list-box-group-action--hover; } + &:active { + @extend %list-box-group-action--active; + } } #{$group-caption-selector} { @extend %list-box-group-caption; diff --git a/packages/mercury/src/components/list-box/_tokens.scss b/packages/mercury/src/components/list-box/_tokens.scss deleted file mode 100644 index 64f40b81a..000000000 --- a/packages/mercury/src/components/list-box/_tokens.scss +++ /dev/null @@ -1,2 +0,0 @@ -@mixin template-tokens() { -} diff --git a/packages/mercury/src/components/markdown-viewer/_markdown-viewer-styles.scss b/packages/mercury/src/components/markdown-viewer/_markdown-viewer-styles.scss index dfc33f865..b9b677354 100644 --- a/packages/mercury/src/components/markdown-viewer/_markdown-viewer-styles.scss +++ b/packages/mercury/src/components/markdown-viewer/_markdown-viewer-styles.scss @@ -14,9 +14,15 @@ // collapsing. This should probably be fixed in Chameleon. // related task: https://app.asana.com/1/10206720691358/project/1207081021030105/task/1210796573659472?focus=true - > :first-child { + > :first-child:not([part="code-block"]) { + // code-block as the first element requires margin-block-start margin-block-start: 0 !important; } + > :first-child[part="code-block"] { + // A code-block as the first element adds 4px margin-block-start. + // Together with 4px from ch-markdown-viewer, this gives the required 8px total. + margin-block-start: var(--size-4); + } > :last-child { margin-block-end: 0 !important; } @@ -28,39 +34,45 @@ h1 { @extend %heading-2; - margin-block: var(--mer-spacing--md) var(--mer-spacing--xs); - padding-block-end: var(--mer-spacing--xs); + margin-block: var(--size-16) var(--size-8); + padding-block-end: var(--size-8); } h2 { @extend %heading-3; - margin-block: var(--mer-spacing--sm) 6px; // It does not exists the --spacing--xm value + margin-block: var(--size-12) 6px; // It does not exists the --spacing--xm value padding-block-end: 6px; // It does not exists the --spacing--xm value } h3 { @extend %heading-4; - margin-block: var(--mer-spacing--xs) var(--mer-spacing--2xs); - padding-block-end: var(--mer-spacing--2xs); + margin-block: var(--size-8) var(--size-4); + padding-block-end: var(--size-4); } h4 { @extend %heading-5; - margin-block: var(--mer-spacing--2xs) var(--mer-spacing--3xs); - padding-block-end: var(--mer-spacing--3xs); + margin-block: var(--size-4) var(--size-2); + padding-block-end: var(--size-2); + } + + h5 { + @extend %heading-6; + margin-block: var(--size-4) var(--size-2); + padding-block-end: var(--size-2); } h5 { @extend %heading-6; - margin-block: var(--mer-spacing--2xs) var(--mer-spacing--3xs); - padding-block-end: var(--mer-spacing--3xs); + margin-block: var(--size-4) var(--size-2); + padding-block-end: var(--size-2); } h6 { @extend %heading; // No heading-* class for 16px - font-size: 16px; - margin-block: var(--mer-spacing--2xs) var(--mer-spacing--3xs); - padding-block-end: var(--mer-spacing--3xs); + font-size: var(--font-size-subtitle-s); // 16px + margin-block: var(--size-4) var(--size-2); + padding-block-end: var(--size-2); } h1, @@ -69,7 +81,7 @@ h4, h5, h6 { - border-block-end: 1px solid var(--mer-border-color__on-surface); + border-block-end: 1px solid var(--color-border-surface-on-elevation-01); } p, @@ -77,12 +89,12 @@ ol, table, ch-code { - margin-block: var(--mer-spacing--xs); + margin-block: var(--size-8); } ul, ol { - padding-inline-start: var(--mer-spacing--xl); + padding-inline-start: var(--size-32); } // TODO: Add hyperlink styles @@ -92,10 +104,10 @@ } blockquote { - margin-block: var(--mer-spacing--xs); - padding-block: var(--mer-spacing--xs); - padding-inline: calc(var(--mer-spacing--xl) - 4px) var(--mer-spacing--xl); - border-inline-start: 4px solid var(--mer-color__primary--400); + margin-block: var(--size-8); + padding-block: var(--size-8); + padding-inline: calc(var(--size-32) - 4px) var(--size-32); + border-inline-start: 4px solid var(--color-border-primary-default); // First

don't add margin-block-start, because the

adds it & > p:first-of-type { @@ -109,7 +121,7 @@ } strong { - font-weight: var(--font-weight-bold); + font-weight: var(--font-style-bold); } // - - - - - - - - - - - - - - - - - - - - @@ -118,14 +130,14 @@ // Rows tr { - border: 1px solid var(--mer-border-color__on-surface); + border: 1px solid var(--color-border-surface-on-elevation-01); } // Header and body cells th, td { - padding: var(--mer-spacing--xs); - border-inline-start: 1px solid var(--mer-border-color__on-surface); + padding: var(--size-8); + border-inline-start: 1px solid var(--color-border-surface-on-elevation-01); } // Remove left border in the first cell of each row @@ -136,7 +148,7 @@ thead > tr, tbody > tr:nth-child(2n) { - background-color: var(--mer-color__neutral-gray--700); + background-color: var(--color-accent-surface-elevation-02); } // - - - - - - - - - - - - - - - - - - - - @@ -152,10 +164,11 @@ grid-auto-flow: column; justify-content: flex-end; position: absolute; - inset-block-start: var(--mer-spacing--md); - inset-inline-end: var(--mer-spacing--xs); - background-color: var(--mer-surface__elevation--01); - border-radius: var(--mer-border__radius--xs); + inset-block-start: var(--size-16); + inset-inline-end: var(--size-8); + padding: 6px; + background-color: var(--color-accent-surface-elevation-01); + border-radius: var(--size-2); } $code-block-button-icon-only-selector: 'button[part~="code-block__button--icon-only"]'; @@ -167,8 +180,8 @@ #{$code-block-button-icon-only-selector}::before { content: ""; - inline-size: var(--mer-icon__box--md); - block-size: var(--mer-icon__box--md); + inline-size: var(--icon-box-md); + block-size: var(--icon-box-md); content: ""; display: grid; @@ -193,16 +206,16 @@ // Multiline code ch-code { // Override inline border-radius - border: 1px solid var(--mer-border-color__on-surface); + border: 1px solid var(--color-accent-surface-elevation-01); border-radius: 4px; - padding: var(--mer-spacing--md); + padding: var(--size-16); // & > .code-block__header { // display: grid; // grid-template-columns: 1fr max-content; // align-items: center; - // padding-inline: var(--mer-spacing--md); - // padding-block: var(--mer-spacing--xs); + // padding-inline: var(--size-16); + // padding-block: var(--size-8); // background-color: var(--surface--alternative); // } @@ -216,9 +229,9 @@ // Inline code code { - padding-block: var(--mer-spacing--3xs); - padding-inline: var(--mer-spacing--2xs); - background-color: var(--mer-elevation__bg-color--01); + padding-block: var(--size-2); + padding-inline: var(--size-4); + background-color: var(--color-accent-surface-elevation-01); border-radius: 2px; font-size: calc(1em - 2px); } @@ -250,7 +263,7 @@ span[part="code-block__header-caption"] { display: flex; align-items: center; - padding-inline-start: var(--mer-spacing--sm); + padding-inline-start: var(--size-12); @extend %body-regular-xs; text-transform: uppercase; } @@ -258,10 +271,9 @@ // TODO: This is a WA to avoid issues with white-spaces. This must be fixed // on Chameleon white-space: normal; - border: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); - border-radius: var(--mer-border__radius--sm); - background-color: var(--mer-surface); - margin-block: var(--mer-spacing--xs); + border: var(--size-1) solid var(--color-border-surface-on-elevation-01); + border-radius: var(--size-4); + background-color: var(--color-accent-surface-surface); + margin-block: var(--size-8); } } diff --git a/packages/mercury/src/components/navigation-list/_navigation-list-styles.scss b/packages/mercury/src/components/navigation-list/_navigation-list-styles.scss index 00c013ded..16393eaae 100644 --- a/packages/mercury/src/components/navigation-list/_navigation-list-styles.scss +++ b/packages/mercury/src/components/navigation-list/_navigation-list-styles.scss @@ -1,36 +1,36 @@ @use "../../base/typography" as *; %navigation-list { - --ch-navigation-list-item__tooltip-separation-x: var(--mer-spacing--2xs); + --ch-navigation-list-item__tooltip-separation-x: var(--size-4); --ch-navigation-list-item-custom-padding-inline-start: calc( - var(--mer-spacing--xs) - 1px + var(--size-8) - 1px ); - --ch-navigation-list-item-gap: var(--mer-spacing--xs); + --ch-navigation-list-item-gap: var(--size-8); --ch-navigation-list-item-expand-collapse-duration: 200ms; - --ch-navigation-list-item__image-size: var(--mer-spacing--md); + --ch-navigation-list-item__image-size: var(--size-16); --ch-navigation-list-item__expandable-button-size: 20px; --ch-navigation-list-item__expandable-button-image-size: calc( - var(--mer-spacing--md) - var(--mer-spacing--3xs) + var(--size-16) - var(--size-2) ); - color: var(--item__color); - line-height: var(--mer-spacing--md); - gap: var(--mer-spacing--sm); + color: var(--item-color); + line-height: var(--size-16); + gap: var(--size-12); &-item-action { - padding-block: var(--mer-spacing--xs); - padding-inline-end: var(--mer-spacing--xs); + padding-block: var(--size-8); + padding-inline-end: var(--size-8); } &-item-tooltip { - padding-block: var(--mer-spacing--2xs); - padding-inline: var(--mer-spacing--xs); - background-color: var(--mer-color__neutral-gray--1000); - border-radius: var(--mer-border__radius--sm); + padding-block: var(--size-4); + padding-inline: var(--size-8); + background-color: var(--color-accent-neutral-on-surface); + border-radius: var(--size-4); box-shadow: 4px 4px 12px 0px #00000033; - color: var(--mer-color__neutral-gray--300); + color: var(--color-neutral-400); // TODO: revise if this is the right token @include body-regular-m(); } @@ -43,24 +43,24 @@ &-item-button { &--hover { - color: var(--item__color--hover); + color: var(--item-color-hover); } } &-item-link { - padding-inline-end: calc(var(--mer-spacing--xs) - 1px); - padding-block: calc(var(--mer-spacing--xs) - 1px); + padding-inline-end: calc(var(--size-8) - 1px); + padding-block: calc(var(--size-8) - 1px); border: 1px solid transparent; border-radius: 4px; &--selected { - background-color: var(--item__bg-color--selected); - border-color: var(--item__border-color--selected); - color: var(--mer-accent__primary); + background-color: var(--item-bg-color-selected); + border-color: var(--item-border-color-selected); + color: var(--color-text-primary-default); } &--hover-not-selected { - color: var(--mer-accent__primary); + color: var(--color-text-primary-default); } } } diff --git a/packages/mercury/src/components/paginator/_paginator-styles.scss b/packages/mercury/src/components/paginator/_paginator-styles.scss index 30a527070..d6f46b06a 100644 --- a/packages/mercury/src/components/paginator/_paginator-styles.scss +++ b/packages/mercury/src/components/paginator/_paginator-styles.scss @@ -8,7 +8,7 @@ %paginator { display: grid; - gap: var(--mer-spacing--xs); + gap: var(--size-8); grid-template: "items-per-page items-per-page-info . first__button prev__button go-to next__button last__button" 1fr / auto auto 1fr auto auto auto auto; &__combo-box { @@ -18,25 +18,25 @@ &__go-to { align-items: center; display: inline-flex; - gap: var(--mer-spacing--xs); + gap: var(--size-8); } &__items-per-page { align-items: center; - gap: var(--mer-spacing--xs); + gap: var(--size-8); &__info { - color: var(--mer-text__complementary); + color: var(--color-text-semantic-neutral); } } &__pages { - gap: var(--mer-spacing--xs); + gap: var(--size-8); &__button { - border-radius: var(--mer-border__radius--sm); - color: var(--mer-icon__neutral); - padding: var(--mer-spacing--2xs) var(--mer-spacing--xs); + border-radius: var(--size-4); + color: var(--color-text-neutral-default); + padding: var(--size-4) var(--size-8); &--selected { background: var(--mer-accent__primary); @@ -44,8 +44,8 @@ } &--hover { - color: var(--mer-icon__on-primary--hover); - background-color: var(--item__bg-color--selected-hover); + color: var(--color-text-primary-hover); + background-color: var(--color-accent-item-hover); } } } @@ -53,9 +53,9 @@ %paginator__pages__button__selector--before { background-color: currentColor; - block-size: var(--mer-spacing--md); + block-size: var(--size-16); content: ""; - inline-size: var(--mer-spacing--md); + inline-size: var(--size-16); mask: no-repeat center / 100% var(--button-arrow-icon); -webkit-mask: no-repeat center / 100% var(--button-arrow-icon); } diff --git a/packages/mercury/src/components/pills/_pills-styles.scss b/packages/mercury/src/components/pills/_pills-styles.scss index 9a4773487..4dbaa2bf7 100644 --- a/packages/mercury/src/components/pills/_pills-styles.scss +++ b/packages/mercury/src/components/pills/_pills-styles.scss @@ -1,27 +1,30 @@ @use "../../../../common/resets"; +@use "../../base/control" as *; @use "../../base/common" as *; +@use "../../base/spinner" as *; +@use "../../base/list" as *; @use "../../base/typography" as *; %pills__container { --pills-container__display: flex; flex-wrap: wrap; display: var(--pills-container__display); - gap: var(--mer-spacing--md); + gap: var(--size-16); } %pill { // chameleon custom vars (do not edit the --ch-* vars names) - --ch-pills-separation-y: var(--mer-spacing--3xs); - --ch-pills-item-gap: var(--mer-spacing--xs); - --ch-pills-item__image-size: var(--mer-spacing--md); + --ch-pills-separation-y: var(--size-2); + --ch-pills-item-gap: var(--size-8); + --ch-pills-item__image-size: var(--size-16); --ch-pills-item__background-image-size: 100%; - --ch-pills-group__expandable-button-size: var(--mer-spacing--md); - --ch-pills-group__expandable-button-image-size: var(--mer-spacing--sm); + --ch-pills-group__expandable-button-size: var(--size-16); + --ch-pills-group__expandable-button-image-size: var(--size-12); @include items-container-max-height(); // "control" tokens overrides - --control__border-radius: var(--mer-spacing--md); - --control__padding-inline: var(--mer-spacing--sm); + --control-border-radius: var(--size-16); + --control-padding-inline: var(--size-12); @include control-border(); @include control-colors-enabled(); @@ -29,47 +32,25 @@ @include body-semi-bold-m(); - // states - &--enabled { - --control__border-color: var(--mer-border-color__dim); - --control__bg-color: transparent; - --control__color: var(--mer-text__neutral); - } &--processing { - --control__border-color: var(--mer-color__tinted-primary--50); - --control__bg-color: var(--mer-color__tinted-primary--8); - --control__color: var(--mer-accent__primary); - - // custom processing icon - $size: 12px; - --status-circle-color: transparent; - --status-circle-size: $size; - --status-circle-inset-inline-start: 14px; - - &::before { - // override left - inset-inline-start: 14px; - @include spinner( - $size, - var(--mer-color__primary--300), - var(--mer-color__tinted-primary--50) - ); - } + --control-border-color: var(--color-border-primary-default); + --control-bg-color: var(--color-accent-primary-contrast); + --control-color: var(--color-text-primary-default); } &--success { - --control__border-color: var(--mer-color__tinted-green--60); - --control__bg-color: var(--mer-color__tinted-green--5); - --control__color: var(--mer-text__success); + --control-border-color: var(--color-border-success-default); + --control-bg-color: var(--color-accent-success-contrast); + --control-color: var(--color-text-semantic-success); } &--warning { - --control__border-color: var(--mer-color__tinted-yellow--60); - --control__bg-color: var(--mer-color__tinted-yellow--5); - --control__color: var(--mer-text__warning); + --control-border-color: var(--color-border-warning-default); + --control-bg-color: var(--color-accent-warning-contrast); + --control-color: var(--color-text-semantic-warning); } &--error { - --control__border-color: var(--mer-color__tinted-red--60); - --control__bg-color: var(--mer-color__tinted-red--5); - --control__color: var(--mer-text__error); + --control-border-color: var(--color-border-error-default); + --control-bg-color: var(--color-accent-error-contrast); + --control-color: var(--color-text-semantic-error); } &--disabled { @@ -94,9 +75,9 @@ @extend %body-regular-m; &--with-icon { - padding-inline-start: var(--mer-spacing--xl); + padding-inline-start: var(--size-32); background-repeat: no-repeat; - background-size: var(--mer-icon__box--md); + background-size: var(--icon-box-md); background-position: 8px center; } @@ -124,7 +105,7 @@ %icon-styles { // custom icon styles - --status-circle-color: var(--control__color); + --status-circle-color: var(--control-color); --status-circle-size: 6px; --status-circle-inset-inline-start: 17px; @@ -202,13 +183,30 @@ } #{$pill--enabled-selector} { - @extend %pill--enabled; } #{$pill--disabled-selector} { @extend %pill--disabled; } #{$pill--processing-selector} { @extend %pill--processing; + + &::before { + // custom processing icon + $size: 14px; + --status-circle-color: transparent; + --status-circle-size: $size; + --status-circle-inset-inline-start: 14px; + + &-before { + // override left + inset-inline-start: 14px; + @include spinner( + $size, + var(--color-border-primary-default), + var(--color-border-primary-lighter) + ); + } + } } #{$pill--success-selector} { @extend %pill--success; @@ -242,7 +240,7 @@ @include items-container-dropdown(); @include items-container-gap(); @include items-container-border-radius(); - --items-container__border-radius: var(--mer-border__radius--lg); + --items-container-border-radius: var(--size-12); // TODO: define a items-container-border-radius-sm() and a // items-container-border-radius-md(); since container radius // of the pills is greater than the other containers: diff --git a/packages/mercury/src/components/property-grid/_property-grid-styles.scss b/packages/mercury/src/components/property-grid/_property-grid-styles.scss index 198b24169..e492f952d 100644 --- a/packages/mercury/src/components/property-grid/_property-grid-styles.scss +++ b/packages/mercury/src/components/property-grid/_property-grid-styles.scss @@ -444,7 +444,7 @@ #{$property-grid-row-actions-selector} { &[show-on-row-hover]::part(window) { - margin-inline-end: var(--mer-spacing--xs); + margin-inline-end: var(--size-8); } } diff --git a/packages/mercury/src/components/radio-group/_radio-group-styles.scss b/packages/mercury/src/components/radio-group/_radio-group-styles.scss index 5276095b0..57d79e2a4 100644 --- a/packages/mercury/src/components/radio-group/_radio-group-styles.scss +++ b/packages/mercury/src/components/radio-group/_radio-group-styles.scss @@ -1,19 +1,33 @@ @use "tokens" as *; @use "../../base/label/label-styles" as *; +@use "../../base/control" as *; @use "../../base/common" as *; @use "../../base/typography" as *; %radio-group { @include radio-group-tokens(); - gap: var(--controls__container-row-gap); + gap: var(--controls-container-row-gap); } %radio-item { @include label-gap-inline(); + + &__label { + @include label-font(); + @include label-color(); + } + &--hover { + @include label-color-hover(); + @include control-tiny-border-hover(); + } + &--disabled { + } } %radio__container { - border: var(--mer-form-input__border); + @include control-tiny-border(); + --control-tiny-border-radius: 50%; + flex-shrink: 0; &--focus { @@ -21,22 +35,20 @@ } &--disabled { - color: var(--borders-un-border-color__disabled); + // aca } &--checked { - color: var(--mer-form-input-check__border-color); + color: var(--control-tiny-option-color); } // Not implemented yet in the control &--error { - background-color: var(--colors-Foundation-un-color__red--100); - color: var(--borders-un-border-color__error); } } %radio__label { @include label-font(); - @include label-color-enabled(); + @include label-color(); &--disabled { @include label-color-disabled(); @@ -89,6 +101,9 @@ #{$radio-item-selector} { @extend %radio-item; + &:hover { + @extend %radio-item--hover; + } } #{$radio-item__container-selector} { @@ -102,13 +117,12 @@ @if $add--disabled { #{$radio-item__container--disabled-selector} { @extend %radio__container--disabled; - border-color: var(--mer-border-color__primary--disabled); } } #{$radio-item__container--checked-selector} { @extend %radio__container--checked; - border-color: var(--mer-color__neutral-gray--300); + border-color: var(--color-border-primary-default); } @if $add--error { @@ -119,7 +133,7 @@ @if $radio-item__label { #{$radio-item__label} { - @extend %radio__label; + @extend %radio-item__label; } } diff --git a/packages/mercury/src/components/radio-group/_tokens.scss b/packages/mercury/src/components/radio-group/_tokens.scss index 01eb831d2..04da5c7b6 100644 --- a/packages/mercury/src/components/radio-group/_tokens.scss +++ b/packages/mercury/src/components/radio-group/_tokens.scss @@ -1,5 +1,5 @@ @mixin radio-group-tokens() { // Css properties provided by the ch-radio-group-render - --ch-radio-group__radio-container-size: var(--control-tiny__size); - --ch-radio-group__radio-option-size: calc(var(--mer-spacing--2xs) * 1.5); + --ch-radio-group__radio-container-size: var(--control-tiny-size); + --ch-radio-group__radio-option-size: calc(var(--size-4) * 1.5); } diff --git a/packages/mercury/src/components/segmented-control/_segmented-control-styles.scss b/packages/mercury/src/components/segmented-control/_segmented-control-styles.scss index 78bc7308e..95202e284 100644 --- a/packages/mercury/src/components/segmented-control/_segmented-control-styles.scss +++ b/packages/mercury/src/components/segmented-control/_segmented-control-styles.scss @@ -3,32 +3,31 @@ /* Base */ %segmented-control { - --sc__bg-color: var( + --segmented-control-bg-color: var( --elevation-background-color, - var(--mer-surface__elevation--01) + var(--color-accent-surface-elevation-01) ); - --sc__border-color: var( + --segmented-control-border-color: var( --elevation-border-color, - var(--mer-border-color__on-elevation--01) + var(--color-border-surface-on-elevation-01) ); - --sc__color: var(--elevation-color, --mer-text__on-elevation); - gap: var(--mer-spacing--2xs); - padding: var(--mer-spacing--2xs); - border-radius: var(--mer-border__width--lg); - border: var(--mer-border__width--sm) solid var(--sc__border-color); - background-color: var(--sc__bg-color); + gap: var(--size-4); + padding: var(--size-4); + border-radius: var(--size-4); + border: var(--size-1) solid var(--segmented-control-border-color); + background-color: var(--segmented-control-bg-color); &-filled { &-item--unselected { --button-background-color: transparent; - --button-color: var(--mer-text__neutral); + --button-color: var(--color-text-neutral-default); } &-item--disabled { pointer-events: none; --button-background-color: transparent; - --button-color: var(--mer-text__on-disabled); + --button-color: var(--color-text-neutral-disabled); } } } @@ -91,8 +90,7 @@ // segmented-control disabled button does not match the button-primary disabled style $add--disabled: false, $add--destructive: false, - $add--success: false, - $add--loading: false + $add--success: false ); @if $add--disabled { diff --git a/packages/mercury/src/components/shortcuts/_tokens.scss b/packages/mercury/src/components/shortcuts/_tokens.scss index cbcf1ed7c..896daf990 100644 --- a/packages/mercury/src/components/shortcuts/_tokens.scss +++ b/packages/mercury/src/components/shortcuts/_tokens.scss @@ -1,19 +1,19 @@ @mixin shortcuts-tokens() { //tooltip - --shortcuts-tooltip__padding-inline-start: var(--mer-spacing--2xs); + --shortcuts-tooltip__padding-inline-start: var(--size-4); //key - --shortcuts-key__color: var(--mer-color__neutral-gray--900); - --shortcuts-key__background-color: var(--mer-color__message-red--600); - --shortcuts-key__border-radius: var(--mer-border__radius--md); - --shortcuts-key__padding: var(--mer-spacing--2xs); + --shortcuts-key__color: var(--color-text-neutral-black); + --shortcuts-key__background-color: var(--color-accent-error-default); + --shortcuts-key__border-radius: var(--size-8); + --shortcuts-key__padding: var(--size-4); //slash - --shortcuts-slash__color: var(--mer-color__message-red--100); - --shortcuts-slash__padding: var(--mer-spacing--2xs); + --shortcuts-slash__color: var(--color-accent-error-pressed); + --shortcuts-slash__padding: var(--size-4); //element - --shortcuts-element__outline: var(--mer-border__width--md) dotted - var(--mer-color__tinted-yellow--60); + --shortcuts-element__outline: var(--size-2) dotted + var(--color-border-warning-pressed); --shortcuts-element__outline-offset: -1px; } diff --git a/packages/mercury/src/components/sidebar/_sidebar-styles.scss b/packages/mercury/src/components/sidebar/_sidebar-styles.scss index e63dcce3d..fe27974f8 100644 --- a/packages/mercury/src/components/sidebar/_sidebar-styles.scss +++ b/packages/mercury/src/components/sidebar/_sidebar-styles.scss @@ -4,19 +4,19 @@ // chameleon tokens (do not modify names) --ch-sidebar-inline-size--collapsed: 42px; --ch-sidebar__chevron-size: 24px; - --ch-sidebar__chevron-image-size: var(--mer-spacing--sm); // 12px + --ch-sidebar__chevron-image-size: var(--size-12); // 12px --ch-sidebar__chevron-background-image: var( --icon__system_arrow-right_primary--enabled ); // spacing body tokens - --spacing-body-block-start: var(--mer-spacing--sm); - --spacing-body-block-end: var(--mer-spacing--sm); - --spacing-body-inline-start: var(--mer-spacing--sm); - --spacing-body-inline-end: var(--mer-spacing--sm); + --spacing-body-block-start: var(--size-12); + --spacing-body-block-end: var(--size-12); + --spacing-body-inline-start: var(--size-12); + --spacing-body-inline-end: var(--size-12); // sidebar tokens - --sidebar-button-border-width: var(--mer-border__width--sm); + --sidebar-button-border-width: var(--size-1); --sidebar-button-margin: calc( ( var(--ch-sidebar-inline-size--collapsed) - @@ -29,7 +29,7 @@ ); // TODO: Remove this background-color. The elevation must determine the color - background-color: var(--mer-color__neutral-gray--800); + background-color: var(--color-accent-surface-elevation-01); overflow: hidden; // Collapsed Hidden @@ -45,10 +45,10 @@ // WA to win over user "inline-size" property. This allows the transition. inline-size: var(--ch-sidebar-inline-size--collapsed) !important; } - transition: var(--mer-timing--super-fast) ease inline-size; + transition: var(--timing-super-fast) ease inline-size; &--button-before { - transition: var(--mer-timing--super-fast) ease transform; + transition: var(--timing-super-fast) ease transform; } } @@ -57,10 +57,10 @@ // - - - - - - - - &-expand-button { - background-color: var(--mer-surface__elevation--02); + background-color: var(--color-accent-surface-elevation-02); border: var(--sidebar-button-border-width) solid - var(--mer-border-color__on-elevation--01); - color: var(--mer-icon__neutral); + var(--color-border-surface-on-elevation-01); + color: var(--color-neutral-400); inline-size: calc( var(--ch-sidebar__chevron-size) + var(--sidebar-button-border-width) * 2 ); @@ -71,14 +71,14 @@ } &--hover { - background-color: var(--mer-surface__elevation--03); - border-color: var(--mer-border-color__on-elevation--02); - color: var(--mer-icon__highlighted); + background-color: var(--color-accent-surface-elevation-03); + border-color: var(--color-border-surface-on-elevation-02); + color: var(--color-accent-neutral-hover); } &--active { - background-color: var(--mer-surface__elevation--01); - border-color: var(--mer-border-color__on-elevation--01); + background-color: var(--color-accent-surface-elevation-01); + border-color: var(--color-border-surface-on-elevation-01); } &--focus-visible { diff --git a/packages/mercury/src/components/slider/_slider-styles.scss b/packages/mercury/src/components/slider/_slider-styles.scss index 267cb195d..4e0329cfa 100644 --- a/packages/mercury/src/components/slider/_slider-styles.scss +++ b/packages/mercury/src/components/slider/_slider-styles.scss @@ -1,46 +1,48 @@ @use "../../base/common" as *; +// --color-icon-neutral-default +// --color-accent-primary-pressed + %slider__slider { // - - - - - - - - - - - - - - - - - - - - // Chameleon (do not change the name) // - - - - - - - - - - - - - - - - - - - - - --ch-slider-track-block-size: var(--slider-track__block-size); + --ch-slider-track-block-size: var(--slider-track-block-size); --ch-slider-track__selected-background-color: var( - --slider-track__bg-color--selected + --slider-track-bg-color-selected ); --ch-slider-track__unselected-background-color: var( - --slider-track__bg-color--unselected + --slider-track-bg-color-unselected ); - --ch-slider-thumb-background-color: var(--slider-thumb__bg-color); + --ch-slider-thumb-background-color: var(--color-icon-neutral-default); - --ch-slider-thumb-size: var(--slider-thumb__size); + --ch-slider-thumb-size: var(--slider-thumb-size); // - - - - - - - - - - - - - - - - - - - - // Custom Properties // - - - - - - - - - - - - - - - - - - - - // track - --slider-track__block-size: var(--mer-spacing--2xs); - --slider-track__bg-color--selected: var(--mer-color__primary--200); - --slider-track__bg-color--unselected: var(--mer-color__neutral-gray--650); - --slider-track__bg-color--selected-disabled: var( - --mer-accent__primary--disabled + --slider-track-block-size: var(--size-4); + --slider-track-bg-color-selected: var(--color-accent-primary-default); + --slider-track-bg-color-unselected: var(--color-accent-neutral-default); + --slider-track-bg-color-selected-disabled: var( + --color-accent-neutral-disabled ); - --slider-track__bg-color--unselected-disabled: var( - --mer-color__neutral-gray--450 + --slider-track-bg-color-unselected-disabled: var( + --color-accent-neutral-disabled ); // thumb - --slider-thumb__bg-color: var(--mer-color__neutral-gray--200); - --slider-thumb__size: var(--mer-spacing--sm); + --slider-thumb-size: var(--size-12); &--disabled { --ch-slider-track__selected-background-color: var( - --slider-track__bg-color--selected-disabled + --slider-track-bg-color-selected-disabled ); --ch-slider-track__unselected-background-color: var( - --slider-track__bg-color--unselected-disabled + --slider-track-bg-color-unselected-disabled ); } } @@ -51,11 +53,15 @@ %slider__thumb { &--hover { - --ch-slider-thumb-background-color: var(--mer-color__primary--600); + --ch-slider-thumb-background-color: var(--color-accent-primary-pressed); + } + + &--disabled { + --ch-slider-thumb-background-color: var(--color-border-neutral-disabled); } &--active-focus { - --ch-slider-thumb-background-color: var(--mer-color__primary--600); + --ch-slider-thumb-background-color: var(--color-accent-primary-pressed); @include focus-outline(); } } @@ -64,6 +70,7 @@ /// @param {String} $slider-selector [".slider"] - /// @param {String} $track-selector [".slider::part(track)"] - /// @param {String} $thumb-selector [".slider::part(thumb)"] - +/// @param {String} $thumb-disabled-selector [".slider::part(thumb disabled)"] - /// @param {String} $thumb-focus-selector [".slider:focus-visible::part(thumb focus)"] - /// @example scss - Default case: Using the `.slider` class. /// SCSS: @@ -96,6 +103,7 @@ $slider-selector: ".slider", $track-selector: ".slider::part(track)", $thumb-active-selector: ".slider:active::part(thumb)", + $thumb-disabled-selector: ".slider::part(thumb disabled)", $thumb-focus-selector: ".slider:focus::part(thumb)" ) { #{$slider-selector} { @@ -119,6 +127,10 @@ @extend %slider__thumb--active-focus; } + #{$thumb-disabled-selector} { + @extend %slider__thumb--disabled; + } + #{$thumb-focus-selector} { @extend %slider__thumb--active-focus; } diff --git a/packages/mercury/src/components/switch/_switch-styles.scss b/packages/mercury/src/components/switch/_switch-styles.scss index fa254ad9d..511a43618 100644 --- a/packages/mercury/src/components/switch/_switch-styles.scss +++ b/packages/mercury/src/components/switch/_switch-styles.scss @@ -3,30 +3,36 @@ %switch-basic { --ch-switch-track__unchecked-background-color: var( - --mer-color__neutral-gray--650 + --color-accent-surface-elevation-03 ); --ch-switch-track__checked-background-color: var( - --mer-color__tinted-primary--50 + --color-accent-primary-default + ); + --ch-switch-thumb__unchecked-background-color: var( + --color-accent-neutral-hover + ); + --ch-switch-thumb__checked-background-color: var( + --color-accent-neutral-hover ); - --ch-switch-thumb__unchecked-background-color: var(--mer-icon__neutral); - --ch-switch-thumb__checked-background-color: var(--mer-icon__neutral); --ch-switch-thumb__state-transition-duration: 150ms; &__track { border-radius: var(--ch-switch-track-block-size); - margin-inline-end: var(--mer-spacing--xs); + margin-inline-end: var(--size-8); &--disabled { --ch-switch-track__unchecked-background-color: var( - --mer-accent__primary--disabled + --color-accent-neutral-disabled ); --ch-switch-track__checked-background-color: var( - --mer-accent__primary--disabled + --color-accent-neutral-disabled ); --ch-switch-thumb__unchecked-background-color: var( - --mer-icon__on-disabled + --color-icon-neutral-on-disabled + ); + --ch-switch-thumb__checked-background-color: var( + --color-icon-neutral-on-disabled ); - --ch-switch-thumb__checked-background-color: var(--mer-icon__on-disabled); } } diff --git a/packages/mercury/src/components/tab/_tab-styles.scss b/packages/mercury/src/components/tab/_tab-styles.scss index 9f28e5e5f..934c10835 100644 --- a/packages/mercury/src/components/tab/_tab-styles.scss +++ b/packages/mercury/src/components/tab/_tab-styles.scss @@ -1,15 +1,17 @@ @use "../../base/common" as *; +@use "../../base/components/tab" as *; +@use "../../base/list" as *; @use "../../base/typography" as *; %tab { - --ch-tab-close-button__background-image-size: var(--mer-icon__size--md); - --ch-tab-close-button__image-size: var(--mer-spacing--md); - --ch-tab-button__image-size: var(--mer-icon__box--md); + --ch-tab-close-button__background-image-size: var(--icon-size-md); + --ch-tab-close-button__image-size: var(--size-16); + --ch-tab-button__image-size: var(--icon-box-md); - --spacing-body-block-start: var(--mer-spacing--md); - --spacing-body-block-end: var(--mer-spacing--md); - --spacing-body-inline-start: var(--mer-spacing--md); - --spacing-body-inline-end: var(--mer-spacing--md); + --spacing-body-block-start: var(--size-16); + --spacing-body-block-end: var(--size-16); + --spacing-body-inline-start: var(--size-16); + --spacing-body-inline-end: var(--size-16); @include items-container-border(); @include items-container-colors(); @@ -20,28 +22,23 @@ @include tab-button-gap(); @extend %body-regular-s; - border-block: var(--tab-caption__border-width) - var(--tab-caption__border-style) transparent; - // TODO: Remove this mixin // @include tab-button-border-block-end(); } %tab-button-block-not-closable { // Due to border-block-width: 1px; - padding-block: var(--tab-caption__padding-block); - padding-inline: var(--tab-caption__padding-inline); + padding-block: var(--tab-caption-padding-block); + padding-inline: var(--tab-caption-padding-inline); } %tab-button-block-closable { - // Due to border-block-width: 1px and padding: var(--mer-spacing--2xs) for the close button - padding-block: calc( - var(--tab-caption__padding-block) - var(--mer-spacing--2xs) - 1px - ); - - // Due to padding: var(--mer-spacing--2xs) for the close button; - padding-inline: var(--tab-caption__padding-inline) - calc(var(--tab-caption__padding-inline) - var(--mer-spacing--2xs) - 1px); + // Due to border-block-width: 1px and padding: var(--size-4) for the close button + padding-block: calc(var(--tab-caption-padding-block) - var(--size-4) - 1px); + + // Due to padding: var(--size-4) for the close button; + padding-inline: var(--tab-caption-padding-inline) + calc(var(--tab-caption-padding-inline) - var(--size-4) - 1px); } %tab-button-inline { @@ -50,8 +47,8 @@ @extend %body-regular-s; @include tab-button-padding-stack(); - border-inline: var(--tab-caption__border-width) - var(--tab-caption__border-style) transparent; + border-inline: var(--tab-caption-border-width) var(--tab-caption-border-style) + transparent; // TODO: Remove this mixin // @include tab-button-border-block(); @@ -68,8 +65,8 @@ } %tab-button-block-start--selected { - @include tab-button-colors-selected-inline(); - border-block-end-color: var(--tab-caption__border-color); + @include tab-button-colors-selected(); + border-block-end-color: var(--tab-caption-border-color); } // Block End @@ -83,8 +80,8 @@ } %tab-button-block-end--selected { - @include tab-button-colors-selected-inline(); - border-block-start-color: var(--tab-caption__border-color); + @include tab-button-colors-selected(); + border-block-start-color: var(--tab-caption-border-color); } // Inline Start @@ -98,8 +95,8 @@ } %tab-button-inline-start--selected { - @include tab-button-colors-selected-stack(); - border-inline-end-color: var(--tab-caption__border-color); + @include tab-button-colors-selected(); + border-inline-end-color: var(--tab-caption-border-color); } // Inline End @@ -113,8 +110,8 @@ } %tab-button-inline-end--selected { - @include tab-button-colors-selected-stack(); - border-inline-start-color: var(--tab-caption__border-color); + @include tab-button-colors-selected(); + border-inline-start-color: var(--tab-caption-border-color); } // Focus @@ -129,12 +126,12 @@ } %tab-button-close-button { - padding: var(--mer-spacing--2xs); + padding: var(--size-4); border-radius: 4px; - margin-inline-start: calc(1px - var(--mer-spacing--2xs)); + margin-inline-start: calc(1px - var(--size-4)); &--hover { - background-color: var(--mer-color__tinted-primary--20); + //background-color: var(); } &--focus-visible { @@ -143,9 +140,9 @@ } %tab-list { - $tabListBorderCommonStyles: var(--items-container__border-width) - var(--items-container__border-style) - var(--elevation-border-color, var(--items-container__border-color)); + $tabListBorderCommonStyles: var(--items-container-border-width) + var(--items-container-border-style) + var(--elevation-border-color, var(--items-container-border-color)); &--block-start { border-block-end: $tabListBorderCommonStyles; @@ -236,6 +233,7 @@ // - - - - - - - - - - - - - - - - - - - - @if ($add--tab-button-block-start) { #{$tab-button-block-start-selector} { + @include tab-button-border-block-end(); &:hover { @extend %tab-button-block-start--hover; } @@ -251,6 +249,7 @@ #{$tab-button-block-start--selected-selector} { @extend %tab-button-block-start--selected; + border-block-end-color: var(--color-accent-primary-default); } @if $add--disabled { @@ -265,6 +264,7 @@ // - - - - - - - - - - - - - - - - - - - - @if ($add--tab-button-block-end) { #{$tab-button-block-end-selector} { + @include tab-button-border-block-start(); &:hover { @extend %tab-button-block-end--hover; } @@ -280,6 +280,7 @@ #{$tab-button-block-end--selected-selector} { @extend %tab-button-block-end--selected; + border-block-start-color: var(--color-accent-primary-default); } @if $add--disabled { @@ -294,6 +295,7 @@ // - - - - - - - - - - - - - - - - - - - - @if ($add--tab-button-inline-start) { #{$tab-button-inline-start-selector} { + @include tab-button-border-inline-end(); @extend %tab-button-inline; &:hover { @@ -311,6 +313,7 @@ #{$tab-button-inline-start--selected-selector} { @extend %tab-button-inline-start--selected; + border-inline-end-color: var(--color-accent-primary-default); } @if $add--disabled { @@ -325,6 +328,7 @@ // - - - - - - - - - - - - - - - - - - - - @if ($add--tab-button-inline-end) { #{$tab-button-inline-end-selector} { + @include tab-button-border-inline-start(); @extend %tab-button-inline; &:hover { @@ -342,6 +346,7 @@ #{$tab-button-inline-end--selected-selector} { @extend %tab-button-inline-end--selected; + border-inline-start-color: var(--color-accent-primary-default); } @if $add--disabled { diff --git a/packages/mercury/src/components/tabular-grid/_helpers.scss b/packages/mercury/src/components/tabular-grid/_helpers.scss index a410322ca..91b003064 100644 --- a/packages/mercury/src/components/tabular-grid/_helpers.scss +++ b/packages/mercury/src/components/tabular-grid/_helpers.scss @@ -2,7 +2,9 @@ // since the mixins in this page are being publicly exposed from _helpers.scss. // Once ch-tabular-grid exposes a render, this styles will no longer be requried. +@use "../../base/control" as *; @use "../../base/common" as *; +@use "../../base/components/grid" as *; // node type @mixin cell-node-type-text() { @@ -12,7 +14,7 @@ @mixin cell-node-type-element() { @include control-remove-border(); @include grid-cell-remove-padding(); - --control__padding-inline: var(--grid-cell__padding-inline); + --control-padding-inline: var(--grid-cell-padding-inline); // to stretch the control display: grid; align-items: stretch; @@ -20,9 +22,9 @@ } @mixin cell-node-type-element--hover() { - outline: var(--focus__outline-width) var(--focus__outline-style) - var(--control__border-color--hover); - outline-offset: var(--focus__outline-offset); + outline: var(--focus-outline-width) var(--focus-outline-style) + var(--control-border-color-hover); + outline-offset: var(--focus-outline-offset); } // cell alignment block diff --git a/packages/mercury/src/components/tabular-grid/_tabular-grid-styles.scss b/packages/mercury/src/components/tabular-grid/_tabular-grid-styles.scss index 20c394169..071bc0e67 100644 --- a/packages/mercury/src/components/tabular-grid/_tabular-grid-styles.scss +++ b/packages/mercury/src/components/tabular-grid/_tabular-grid-styles.scss @@ -3,6 +3,9 @@ @use "tokens-cell" as *; @use "../../config/tree-controls" as *; @use "../../base/common" as *; +@use "../../base/components/grid" as *; +@use "../../base/list" as *; +@use "../../base/control" as *; @use "../../base/icons" as *; @use "../../base/typography" as *; @@ -85,9 +88,9 @@ %tabular-grid { --grid-bar-resize-split__bg-color: transparent; - --focus__outline-offset: -2px; // WA since the box-shadow hides the outline-block-end and outline-inline-end. - --grid-label__gap: var(--mer-spacing--xs); - --grid-common__gap: var(--mer-spacing--xs); + --focus-outline-offset: -2px; // WA since the box-shadow hides the outline-block-end and outline-inline-end. + --grid-label__gap: var(--size-8); + --grid-common__gap: var(--size-8); max-block-size: 100%; // TODO: This reset must be placed in the control implementation. This property is a WA. @extend %tabular-grid-font-size; @@ -95,7 +98,7 @@ --indent: 16px; @include items-container-colors(); - --item__border-color--enabled: var(--mer-surface__elevation--01); + --item-border-color-enabled: var(--color-accent-surface-elevation-01); @include tabular-grid-row-tokens(); @include tabular-grid-column-tokens(); @include tabular-grid-cell-tokens(); @@ -108,10 +111,10 @@ // ch-tabular-grid-column-set // - - - - - - - - - - - - - - - - - - - - %tabular-grid-column-set { - border-block-end: var(--grid-cell__border); + border-block-end: var(--grid-cell-border); // &--hover { - // --grid-bar-resize-split__bg-color: var(--mer-surface__elevation--03); + // --grid-bar-resize-split__bg-color: var(--color-accent-surface-elevation-03); // } } @@ -121,7 +124,7 @@ %tabular-grid-column { // should equal the tabular-grid background-color - background-color: var(--items-container__bg-color); + background-color: var(--items-container-bg-color); @extend %body-semi-bold-s; } @@ -136,7 +139,7 @@ } &--hover { - --grid-bar-resize-split__bg-color: var(--mer-surface__elevation--03); + --grid-bar-resize-split__bg-color: var(--color-accent-primary-light); @extend %tabular-grid__icon-order-alphabetically--hover; } &--active { @@ -152,10 +155,10 @@ inline-size: var(--grid-bar-resize-split__inline-size); &--hover { // --grid-bar-resize-split__bg-color: var(--mer-accent__primary); - --grid-bar-resize-split__bg-color: var(--mer-accent__primary--hover); + --grid-bar-resize-split__bg-color: var(--color-accent-primary-default); } &--active { - --grid-bar-resize-split__bg-color: var(--mer-accent__primary--active); + --grid-bar-resize-split__bg-color: var(--color-accent-primary-light); } } @@ -189,7 +192,7 @@ %tabular-grid-rowset { &--collapsed { &__legend { - border-block-end: var(--grid-cell__border); + border-block-end: var(--grid-cell-border); } } } @@ -206,7 +209,7 @@ cursor: pointer; padding-inline-start: var(--grid-common__gap); box-shadow: calc(var(--indent) * (var(--level) - 1) * -1) 0px 0px 0px - var(--grid-rowset-legend__bg-color); + var(--grid-rowset-legend-bg-color); &--hover { @include grid-rowset-legend-colors-hover(); } @@ -240,7 +243,7 @@ @include grid-cell-border-inline-block(); @include grid-cell-padding-inline-block(); @include grid-row-colors-enabled(); - --item__bg-color: var(--items-container__bg-color); + --item-bg-color: var(--items-container-bg-color); // TODO: Check how controls font size's should be redefined inside tabular-grid cell, using the new font styles classes. @@ -283,9 +286,8 @@ } %tabular-grid-cell__selector-label { + @include control-tiny-size(); margin-inline-end: var(--grid-label__gap); - block-size: var(--control-tiny__size); - inline-size: var(--control-tiny__size); } %tabular-grid-cell__selector { @@ -295,50 +297,34 @@ height: 0; } -// Begin Checkbox - +// Checkbox %tabular-grid-cell__selector--before { + @include control-tiny-size(); + @include control-border(); + --control-border-radius: 0; content: ""; display: inline-block; - width: var(--control-tiny__size); - height: var(--control-tiny__size); - border: var(--mer-form-input__border); - border-radius: var(--control-tiny__border-radius); box-sizing: border-box; } %tabular-grid-cell__selector--after { - position: absolute; content: ""; - display: inline-block; - border-color: var(--mer-form-input-check__border-color); - top: calc(var(--control-tiny__size) / 4); - left: calc(var(--control-tiny__size) / 4); + @include control-tiny-option-color(); } %tabular-grid-cell__selector--after-checked { - inline-size: calc(var(--control-tiny__size) / 2); - block-size: calc(var(--control-tiny__size) / 2); - background-color: currentColor; + @include control-tiny-option-checked-size(); + @include control-tiny-option-checked-position(); pointer-events: none; - -webkit-mask: no-repeat center / 100% - var(--mer-checkbox__option-checked-image); - color: var(--mer-form-input-check__border-color); + -webkit-mask: no-repeat center / 100% var(--control-tiny-option-checked-image); } %tabular-grid-cell__selector--after-indeterminate { - inline-size: 8px; - block-size: var(--mer-form-input-check__border-width); - border-radius: 2px; - background-color: var(--mer-form-input-check__border-color); - top: calc( - var(--control-tiny__size) / 2 - var(--mer-form-input-check__border-width) / - 2 - ); + @include control-tiny-option-indeterminate-size(); + @include control-tiny-option-indeterminate-position(); + border-radius: var(--control-tiny-option-indeterminate-border-radius); } -// End Checkbox - // - - - - - - - - - - - - - - - - - - - - // ch-tabular-grid-row-actions // - - - - - - - - - - - - - - - - - - - - @@ -351,7 +337,7 @@ %tabular-grid-row-actions__main { display: flex; flex-direction: column; - gap: var(--window__gap); + // gap: var(--window-gap); } /// @group Grid @@ -761,6 +747,7 @@ --icon__gemini-tools_show-more-vertical_on-surface--enabled ); border: none; + background-size: contain !important; } #{$tabular-grid-cell__drag-icon-selector} { @@ -805,7 +792,7 @@ #{$tabular-grid-row-actions-selector} { &[show-on-row-hover]::part(window) { - margin-inline-end: var(--mer-spacing--xs); + margin-inline-end: var(--size-8); } } diff --git a/packages/mercury/src/components/tabular-grid/_tokens-cell.scss b/packages/mercury/src/components/tabular-grid/_tokens-cell.scss index c1c1fafe1..339009e56 100644 --- a/packages/mercury/src/components/tabular-grid/_tokens-cell.scss +++ b/packages/mercury/src/components/tabular-grid/_tokens-cell.scss @@ -15,5 +15,3 @@ // Part "selector" // - - - - - - - - - - - - - - - - - - - - } - -// --checkbox-check__color: var(--mer-border-color__neutral--active); diff --git a/packages/mercury/src/components/tabular-grid/_tokens-column.scss b/packages/mercury/src/components/tabular-grid/_tokens-column.scss index f3524c0d1..b23217060 100644 --- a/packages/mercury/src/components/tabular-grid/_tokens-column.scss +++ b/packages/mercury/src/components/tabular-grid/_tokens-column.scss @@ -3,11 +3,11 @@ // Part "bar" // ======================================= - --grid-column-bar__gap: var(--mer-spacing--xs); + --grid-column-bar__gap: var(--size-8); --grid-column-bar__bg-color: var(--grid-base__bg-color); - --grid-column-bar__color: var(--mer-text__bright); - --grid-column-bar__padding-inline: var(--mer-spacing--xs); - --grid-column-bar__padding-block: var(--mer-spacing--xs); + // --grid-column-bar__color: var(); + --grid-column-bar__padding-inline: var(--size-8); + --grid-column-bar__padding-block: var(--size-8); --grid-column-bar__font-size: var(--grid-base__font-size); // ======================================= @@ -62,10 +62,9 @@ // Part "bar-resize-split" // - - - - - - - - - - - - - - - - - - - - - --grid-bar-resize-split__inline-size: var(--mer-spacing--2xs); + --grid-bar-resize-split__inline-size: var(--size-4); --grid-bar-resize-split__bg-color: transparent; - --grid-bar-resize-split__border-inline-end: var(--mer-border__width--sm) solid - transparent; + --grid-bar-resize-split__border-inline-end: var(--size-1) solid transparent; --grid-bar-resize-split__border-inline-end-color--hover: var( --grid-column-bar__color ); diff --git a/packages/mercury/src/components/tabular-grid/_tokens-row.scss b/packages/mercury/src/components/tabular-grid/_tokens-row.scss index 439eb95c1..25a15f9d3 100644 --- a/packages/mercury/src/components/tabular-grid/_tokens-row.scss +++ b/packages/mercury/src/components/tabular-grid/_tokens-row.scss @@ -7,10 +7,10 @@ --grid-rowset-legend__font-size: var(--grid-base__font-size); --grid-rowset-legend__color: var(--grid-base__color); - --grid-rowset-legend__color--hover: var(--item__color--hover); - --grid-rowset-legend__padding-inline: var(--item__padding-inline); - --grid-rowset-legend__padding-block: var(--mer-spacing--3xs); - --grid-rowset-legend__indent: var(--mer-spacing--md); + --grid-rowset-legend__color--hover: var(--item-color-hover); + --grid-rowset-legend__padding-inline: var(--item-padding-inline); + --grid-rowset-legend__padding-block: var(--size-2); + --grid-rowset-legend__indent: var(--size-16); // ======================================= // ch-grid-rowset-legend @@ -44,9 +44,7 @@ // Part "window" // - - - - - - - - - - - - - - - - - - - - - --grid-row-actions-show-on-row-hover__margin-inline-end: var( - --mer-spacing--xs - ); + --grid-row-actions-show-on-row-hover__margin-inline-end: var(--size-8); // - - - - - - - - - - - - - - - - - - - - // Part "main" diff --git a/packages/mercury/src/components/ticket-list/_ticket-list-styles.scss b/packages/mercury/src/components/ticket-list/_ticket-list-styles.scss index 49cdeede7..27741ff75 100644 --- a/packages/mercury/src/components/ticket-list/_ticket-list-styles.scss +++ b/packages/mercury/src/components/ticket-list/_ticket-list-styles.scss @@ -1,24 +1,24 @@ @use "../../base/typography" as *; %ticket-list { - @include tiny-regular-l(); + @include caption-regular-l(); &-action { position: relative; - padding-inline: var(--mer-spacing--xs); - padding-block: var(--mer-spacing--md); + padding-inline: var(--size-8); + padding-block: var(--size-16); &--hover { - background-color: var(--item__bg-color--hover); + background-color: var(--item-bg-color-hover); } &--focus-visible { - outline: 1px solid var(--focus__outline-color); + outline: 1px solid var(--focus-outline-color); outline-offset: -1px; } &--selected { - background-color: var(--item__bg-color--selected-hover); + background-color: var(--item-bg-color-selected-hover); &-before { content: ""; @@ -27,17 +27,17 @@ inset-block: -1px; inset-inline-start: 0px; inline-size: 1px; - background-color: var(--mer-accent__primary); + background-color: var(--color-accent-primary-default); } } } &-separator { - background-color: var(--mer-border-color__on-elevation--01); + background-color: var(--color-accent-surface-elevation-01); } &-caption { - font-weight: var(--font-weight-semi-bold); + font-weight: var(--font-style-semi-bold); } &-description { @@ -45,26 +45,26 @@ } &-status { - font-weight: var(--font-weight-semi-bold); - margin-block-end: var(--mer-spacing--xs); - gap: var(--mer-spacing--2xs); + font-weight: var(--font-style-semi-bold); + margin-block-end: var(--size-8); + gap: var(--size-4); &-open, &-pending { - color: var(--mer-text__on-surface); + color: var(--color-text-neutral-default); } &-processing { - color: var(--mer-accent__primary); - margin-inline-start: var(--mer-spacing--2xs); + color: var(--color-accent-primary-default); + margin-inline-start: var(--size-4); } &-error { - color: var(--mer-color__message-red--300); + color: var(--color-text-semantic-error); } &-closed { - color: var(--mer-color__message-green--200); + color: var(--color-text-semantic-success); } &-dot { @@ -78,15 +78,15 @@ } &-priority { - padding-block: calc(var(--mer-spacing--2xs) + var(--mer-spacing--3xs)); - padding-inline: var(--mer-spacing--sm); - gap: var(--mer-spacing--xs); - border: 1px solid var(--mer-color__neutral-gray--500); - border-radius: 30px; - font-weight: var(--font-weight-semi-bold); + padding-block: calc(var(--size-4) + var(--size-2)); + padding-inline: var(--size-12); + gap: var(--size-8); + border: (--size-1) solid var(--color-border-surface-on-elevation-02); + border-radius: var(--size-32); + font-weight: var(--font-style-semi-bold); &--selected { - border-color: var(--mer-border-color__primary--focused); + border-color: var(--color-border-primary-focused); } } } diff --git a/packages/mercury/src/components/tooltip/_tokens.scss b/packages/mercury/src/components/tooltip/_tokens.scss deleted file mode 100644 index 01ae17ff6..000000000 --- a/packages/mercury/src/components/tooltip/_tokens.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin tooltip-tokens() { - --tooltip__background-color: var(--mer-color__neutral-gray--600); - --tooltip__border-radius: var(--mer-border__radius--sm); - --tooltip__color: var(--mer-text__on-surface); - --tooltip__padding-block: var(--mer-spacing--xs); - --tooltip__padding-inline: var(--mer-spacing--xs); - - // chameleon tokens - --ch-tooltip-separation: var(--mer-spacing--2xs); - --ch-tooltip-separation-x: var(--mer-spacing--2xs); - --ch-tooltip-separation-y: var(--mer-spacing--2xs); -} diff --git a/packages/mercury/src/components/tooltip/_tooltip-styles.scss b/packages/mercury/src/components/tooltip/_tooltip-styles.scss index 2c975e926..0c2c62f60 100644 --- a/packages/mercury/src/components/tooltip/_tooltip-styles.scss +++ b/packages/mercury/src/components/tooltip/_tooltip-styles.scss @@ -1,14 +1,16 @@ -@use "tokens" as *; @use "../../base/typography" as *; %tooltip { - @include tooltip-tokens(); + // chameleon tokens + --ch-tooltip-separation: var(--size-4); + --ch-tooltip-separation-x: var(--size-4); + --ch-tooltip-separation-y: var(--size-4); - background-color: var(--tooltip__background-color); - border-radius: var(--tooltip__border-radius); - color: var(--tooltip__color); - padding-block: var(--tooltip__padding-block); - padding-inline: var(--tooltip__padding-inline); + background-color: var(--color-accent-neutral-disabled); + border-radius: var(--size-4); + color: var(--color-text-neutral-default); + padding-block: var(--size-8); + padding-inline: var(--size-8); @include body-regular-s(); } diff --git a/packages/mercury/src/components/tree-view/_tokens.scss b/packages/mercury/src/components/tree-view/_tokens.scss deleted file mode 100644 index ac6574e05..000000000 --- a/packages/mercury/src/components/tree-view/_tokens.scss +++ /dev/null @@ -1,56 +0,0 @@ -@mixin tree-view-tokens() { - // - - - - - - - - - - - - - - - - - - - - - // Tree View - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Item (Provided by the ch-tree) - // - - - - - - - - - - - - - - - - - - - - - --ch-tree-view-item-custom-padding-inline-start: var(--mer-spacing--xs); - --ch-tree-view-item-gap: var(--mer-spacing--xs); - --ch-tree-view-item__checkbox-size: var(--mer-spacing--md); - --ch-tree-view-item__expandable-button-size: var(--mer-spacing--md); - --ch-tree-view-item__image-size: var(--mer-spacing--md); - --ch-tree-view-item__background-image-size: var(--mer-icon__box--md); - --ch-tree-view-item__line--inset-inline-end: 4px; - - // - - - - - - - - - - - - - - - - - - - - - // Item (Custom css properties) - // - - - - - - - - - - - - - - - - - - - - - - --tree-view__min-inline-size: max-content; - --tree-view-item-custom__padding-inline-end: var(--mer-spacing--2xs); - - // - - - - - - - - - - - - - - - - - - - - - // Item states - // - - - - - - - - - - - - - - - - - - - - - // Hover - // --tree-view-item__color--hover: var(--item__color--hover); - // --tree-view-item__bg-color--hover: var(--item__bg-color--hover); - - // Selected - // --tree-view-item__color--selected: var(--item__color--selected); - // --tree-view-item__bg-color--selected: var(--item__bg-color--selected); - - // - - - - - - - - - - - - - - - - - - - - - // Item line - // - - - - - - - - - - - - - - - - - - - - - --tree-view-item-dashed-line__border-color: var(--mer-text__on-surface); - --tree-view-item-dashed-line__opacity: 0.3; - - // - - - - - - - - - - - - - - - - - - - - - // Item header - // - - - - - - - - - - - - - - - - - - - - - --tree-view-item-header__padding-block: calc(var(--mer-spacing--3xs)); - - // - - - - - - - - - - - - - - - - - - - - - // Item downloading - // - - - - - - - - - - - - - - - - - - - - - --tree-view-item-downloading__inline-size: var(--mer-spacing--sm); - --tree-view-item-downloading__block-size: var(--mer-spacing--sm); - --tree-view-item-downloading__border: var(--mer-border__width--md) solid - var(--mer-accent__primary--active); - - // TODO: pending commit - // --tree-view-item-pending-commit__bg-color: var(--mer-accent__primary); -} diff --git a/packages/mercury/src/components/tree-view/_tree-view-styles.scss b/packages/mercury/src/components/tree-view/_tree-view-styles.scss index f13743d5a..fc860ce35 100644 --- a/packages/mercury/src/components/tree-view/_tree-view-styles.scss +++ b/packages/mercury/src/components/tree-view/_tree-view-styles.scss @@ -1,31 +1,41 @@ -@use "tokens" as *; @use "../../base/common" as *; +@use "../../base/list" as *; +@use "../../base/scrollbar" as *; @use "../../base/typography" as *; @use "../checkbox/checkbox-styles" as *; %tree-view { - @include tree-view-tokens(); - line-height: var(--tree-view-item__line-height); - min-inline-size: var(--tree-view__min-inline-size); + --ch-tree-view-item-custom-padding-inline-start: var(--size-8); + --ch-tree-view-item-gap: var(--size-8); + --ch-tree-view-item__checkbox-size: var(--size-16); + --ch-tree-view-item__expandable-button-size: var(--size-16); + --ch-tree-view-item__image-size: var(--size-16); + --ch-tree-view-item__background-image-size: var(--icon-box-md); + --ch-tree-view-item__line--inset-inline-end: 4px; + + --tree-view__min-inline-size: max-content; + + line-height: var(--tree-view-item-line-height); + min-inline-size: var(--tree-view-min-inline-size); @include body-regular-s(); } // TODO: Improve this %tree-view--drag-preview { padding-inline: 8px; - background-color: var(--mer-surface__elevation--01); + background-color: var(--color-accent-surface-elevation-01); border-radius: 10px; - box-shadow: var(--mer-elevation__box-shadow--03); - @include tiny-semi-bold-xs(); + box-shadow: var(--box-shadow); + @include caption-semi-bold-xs(); } %tree-view-item--drag-enter { - background-color: var(--tree-view-item__bg-color--hover); + // background-color:; // TODO @include focus-outline(); } %tree-view-drop--after { - background-color: var(--mer-color__primary--200); + // background-color:; // TODO } %tree-view-item { @@ -35,7 +45,7 @@ } %tree-view-item__header { - min-inline-size: var(--tree-view__min-inline-size); + min-inline-size: var(--tree-view-min-inline-size); @include item-colors-enabled(); @include item-border-radius(); @include item-border(); @@ -57,19 +67,17 @@ } %tree-view-item__action { - padding-block: var(--tree-view-item-header__padding-block); + padding-block: var(--size-2); } %tree-view-item__line { - border-color: var(--tree-view-item-dashed-line__border-color); - opacity: var(--tree-view-item-dashed-line__opacity); + border-color: var(--color-border-neutral-default); } %tree-view-item__downloading { - inline-size: var(--tree-view-item-downloading__inline-size); - block-size: var(--tree-view-item-downloading__block-size); - border: var(--tree-view-item-downloading__border); - border-inline-start-color: transparent; + inline-size: var(--size-12); + block-size: var(--size-12); + border: var(--size-2) solid var(--color-border-primary-default); } /// @group Tree View diff --git a/packages/mercury/src/components/widget/_widget-styles.scss b/packages/mercury/src/components/widget/_widget-styles.scss index 59763f25d..a72f7c9d0 100644 --- a/packages/mercury/src/components/widget/_widget-styles.scss +++ b/packages/mercury/src/components/widget/_widget-styles.scss @@ -1,8 +1,8 @@ %widget { - --spacing-body-block-start: var(--mer-spacing--sm); - --spacing-body-block-end: var(--mer-spacing--sm); - --spacing-body-inline-start: var(--mer-spacing--sm); - --spacing-body-inline-end: var(--mer-spacing--sm); + --spacing-body-block-start: var(--size-12); + --spacing-body-block-end: var(--size-12); + --spacing-body-inline-start: var(--size-12); + --spacing-body-inline-end: var(--size-12); } /// @group Widget diff --git a/packages/mercury/src/icons/_button.scss b/packages/mercury/src/icons/_button.scss index 6cc0d12a3..a95478af6 100644 --- a/packages/mercury/src/icons/_button.scss +++ b/packages/mercury/src/icons/_button.scss @@ -1,18 +1,19 @@ -@use "../base/common" as *; +@use "../base/control" as *; @use "../../../common/base" as *; %button-icon-only { padding: calc( ( - var(--control__block-size) - 2 * var(--control__border-width) - - var(--mer-icon__box--md) - ) / 2 + var(--control-block-size) - 2 * + var(--control-border-width) - var(--icon-box-md) + ) / + 2 ); @include control-border(); } %button-icon-and-text { - @include icon-and-text-styles(var(--mer-spacing--xs)); + @include icon-and-text-styles(var(--size-8)); } @mixin button-icon-only($selector: ".button-icon-only") { diff --git a/packages/mercury/src/index.ts b/packages/mercury/src/index.ts index b1fb37f04..053538230 100644 --- a/packages/mercury/src/index.ts +++ b/packages/mercury/src/index.ts @@ -1,6 +1,8 @@ export * from "./assets-manager.js"; export * from "./bundles.js"; export * from "./register-mercury.js"; + +export * from "./cli/internal/config-file/types.js"; export * from "./types.js"; // chat diff --git a/packages/mercury/src/mercury.scss b/packages/mercury/src/mercury.scss index 197a36a82..280919522 100644 --- a/packages/mercury/src/mercury.scss +++ b/packages/mercury/src/mercury.scss @@ -3,7 +3,10 @@ @use "../../common/utilities"; @use "../../common/icons/tree-view"; @use "base/common" as *; +@use "base/components/dialog" as *; @use "base/utilities" as *; +@use "base/scrollbar" as *; +@use "base/spacing-body" as *; // Resets @use "../../common/resets" as *; @@ -22,31 +25,30 @@ @use "font-face/Inter/Inter-latin" as *; @use "font-face/Inter/Inter-vietnamese" as *; -// Tokens Primitive -@use "tokens/primitive/border" as *; -@use "tokens/primitive/color" as *; -@use "tokens/primitive/font" as *; -@use "tokens/primitive/gradients" as *; -@use "tokens/primitive/spacing" as *; -@use "tokens/primitive/timing" as *; - -// Tokens Semantic -@use "tokens/semantic/accent" as *; -@use "tokens/semantic/border" as *; -@use "tokens/semantic/control" as *; -@use "tokens/semantic/field" as *; -@use "tokens/semantic/general" as *; -@use "tokens/semantic/heading" as *; -@use "tokens/semantic/icon" as *; -@use "tokens/semantic/item" as *; -@use "tokens/semantic/surface" as *; -@use "tokens/semantic/text" as *; +// Tokens +@use "tokens/control" as *; +@use "tokens/field" as *; +@use "tokens/font-styles" as *; +@use "tokens/general" as *; +@use "tokens/gradients" as *; +@use "tokens/item" as *; +@use "tokens/timing" as *; +// Generated tokens +@use "tokens/_generated/color-globant" as *; +@use "tokens/_generated/color-mercury" as *; +@use "tokens/_generated/font-size" as *; +@use "tokens/_generated/primitive-color-globant" as *; +@use "tokens/_generated/primitive-color-mercury" as *; +@use "tokens/_generated/primitive-font-family" as *; +@use "tokens/_generated/primitive-font-style" as *; +@use "tokens/_generated/primitive-size" as *; // Base classes @use "base/label/label-styles" as *; // should be at the top, since other elements use it. @use "base/button/button-styles" as *; @use "base/fields" as *; @use "base/icons" as *; +@use "base/link" as *; @use "base/layout/layout-styles" as *; @use "base/typography" as *; @@ -96,10 +98,9 @@ $other-reset: true, $typography-reset: true, - // body $body: true, - // Theme + // Light or dark $dark-theme: true, $light-theme: true, $prefers-color-scheme-dark: false, @@ -107,12 +108,11 @@ $globant-colors: false, // Tokens - $tokens: true, - $border: true, $colors: true, $font: true, - $spacing: true, + $size: true, $timing: true, + $tokens: true, // Icons $icons-path: "./assets/icons/", @@ -127,19 +127,20 @@ $button-classes: true, $form-controls-classes: true, $icon-classes: true, + $link-classes: true, $layout-classes: true, + $scrollbar-components: true, $spacing-classes: true, $typography-classes: true, - $scrollbar-components: true, $utility-classes: true, // Components - $components: true, $accordion: true, $chat: true, $checkbox: true, $code: true, $combo-box: true, + $components: true, $dialog: true, $dropdown: true, $edit: true, @@ -155,24 +156,18 @@ $segmented-control: true, $sidebar: true, $slider: true, + $switch: true, $tab: true, $tabular-grid: true, $ticket-list: true, - $switch: true, $tooltip: true, $tree-view: true, $widget: true ) { - // - - - - - - - - - - - - - - - - - - - - - // Icons - // - - - - - - - - - - - - - - - - - - - - @if $icons-variables { @include multi-state-icons($icons-path: $icons-path); } - // - - - - - - - - - - - - - - - - - - - - - // Typography - // - - - - - - - - - - - - - - - - - - - - @if $font-face { @include font-face-inter-cyrillic-ext($font-face-path); @include font-face-inter-cyrillic($font-face-path); @@ -183,16 +178,27 @@ @include font-face-inter-vietnamese($font-face-path); } - // - - - - - - - - - - - - - - - - - - - - - // Color Schemes - // - - - - - - - - - - - - - - - - - - - - - // Light + @if $colors and $tokens { + :root { + @if $globant-colors { + @include primitive-color-globant(); + } @else { + @include primitive-color-mercury(); + } + } + } + + // Light theme @if $colors and $light-theme and $tokens { :root.light { // Fixes issues in elements that force its color based on this property. // For example, the font color of the input with autocomplete (:-webkit-autofill) color-scheme: light; - @include foundation-colors--light($globant-colors: $globant-colors); + @if $globant-colors { + @include semantic-color-globant-light(); + } @else { + @include semantic-color-mercury-light(); + } } } @if $colors and $tokens and $prefers-color-scheme-light { @@ -201,18 +207,26 @@ // Fixes issues in elements that force its color based on this property. // For example, the font color of the input with autocomplete (:-webkit-autofill) color-scheme: light; - @include foundation-colors--light($globant-colors: $globant-colors); + @if $globant-colors { + @include semantic-color-globant-light(); + } @else { + @include semantic-color-mercury-light(); + } } } } - // Dark + // Dark theme @if $colors and $dark-theme and $tokens { :root.dark { // Fixes issues in elements that force its color based on this property. // For example, the font color of the input with autocomplete (:-webkit-autofill) color-scheme: dark; - @include foundation-colors--dark($globant-colors: $globant-colors); + @if $globant-colors { + @include semantic-color-globant-dark(); + } @else { + @include semantic-color-mercury-dark(); + } } } @if $colors and $tokens and $prefers-color-scheme-dark { @@ -221,50 +235,37 @@ // Fixes issues in elements that force its color based on this property. // For example, the font color of the input with autocomplete (:-webkit-autofill) color-scheme: dark; - @include foundation-colors--dark($globant-colors: $globant-colors); + @if $globant-colors { + @include semantic-color-globant-dark(); + } @else { + @include semantic-color-mercury-dark(); + } } } } // Gradients (independent of color scheme at the time of writing) - @if $colors and $tokens { + + @if $tokens and $colors { :root { @include foundation-colors--gradients(); } } - // - - - - - - - - - - - - - - - - - - - - - // Other Tokens than Colors - // - - - - - - - - - - - - - - - - - - - - - @if $tokens and ($border or $colors or $font or $spacing or $timing) { + @if $tokens and ($font or $timing or $size) { :root { - // Border - @if $border { - @include border(); - } - - // Semantic (Other than colors) - @include semantic-general(); - @include semantic-control(); - @include semantic-field(); - - // Semantic Colors (Are independent of color scheme) - @if $colors { - @include semantic-accent(); - @include semantic-border(); - @include semantic-heading(); - @include semantic-icon(); - @include semantic-item(); - @include semantic-surface(); - @include semantic-text(); + @if $size { + @include size(); } @if $font { - @include font(); + @include font-family(); + @include font-style(); + @include font-styles(); } - @if $spacing { - @include spacing(); + @if $font and $size { + @include font-size(); } @if $timing { @@ -273,9 +274,16 @@ } } - // - - - - - - - - - - - - - - - - - - - - - // General - // - - - - - - - - - - - - - - - - - - - - + @if $tokens { + // TODO: Think about what other variables (rather than $tokens) should be involved. + :root { + @include semantic-control(); + @include semantic-field(); + @include semantic-general(); + @include semantic-item(); + } + } + @if $body { // Reduce FOUC in Chameleon :root:not(.hydrated) { @@ -288,8 +296,8 @@ @if $tokens { // Default background-color and color @if $colors { - background-color: var(--mer-surface); - color: var(--mer-text__on-surface); + background-color: var(--color-accent-surface-surface); + color: var(--color-text-neutral-default); } @if $font and $font-face { @@ -302,9 +310,8 @@ } } - // - - - - - - - - - - - - - - - - - - - - - // Resets - // - - - - - - - - - - - - - - - - - - - - + // Resets + @if $resets { @if $box-sizing-reset { @include box-sizing(); @@ -329,9 +336,7 @@ } } - // - - - - - - - - - - - - - - - - - - - - - // Base classes - // - - - - - - - - - - - - - - - - - - - - + // Base classes @if $base-classes { // Button classes @@ -354,14 +359,18 @@ @include icon-classes(); } + @if $link-classes { + @include link-classes(); + } + @if $utility-classes { @include utilities-elevation(); } @if $layout-classes { @include layout(); - @include control-footer(); - @include control-header(); + @include dialog-footer(); + @include dialog-header(); } @if $spacing-classes { @@ -377,12 +386,10 @@ } } - // - - - - - - - - - - - - - - - - - - - - // Components - // - - - - - - - - - - - - - - - - - - - + // Components + @if $accordion { @include accordion-filled(); - @include accordion-filled-header(); @include accordion-outlined(); } @@ -515,10 +522,9 @@ // Tokens $tokens: false, - $border: false, $colors: false, $font: false, - $spacing: false, + $size: false, $timing: false, // Icons @@ -534,6 +540,7 @@ $button-classes: false, $form-controls-classes: false, $icon-classes: false, + $link-classes: false, $layout-classes: false, $spacing-classes: false, $typography-classes: false, @@ -579,7 +586,6 @@ $other-reset: $other-reset, $typography-reset: $typography-reset, - // body $body: $body, // Theme @@ -591,10 +597,9 @@ // Tokens $tokens: $tokens, - $border: $border, $colors: $colors, $font: $font, - $spacing: $spacing, + $size: $size, $timing: $timing, // Icons @@ -610,6 +615,7 @@ $button-classes: $button-classes, $form-controls-classes: $form-controls-classes, $icon-classes: $icon-classes, + $link-classes: $link-classes, $layout-classes: $layout-classes, $spacing-classes: $spacing-classes, $typography-classes: $typography-classes, diff --git a/packages/mercury/src/tests/bundles/created-bundles.spec.ts b/packages/mercury/src/tests/bundles/created-bundles.spec.ts index 5486e6031..f42806951 100644 --- a/packages/mercury/src/tests/bundles/created-bundles.spec.ts +++ b/packages/mercury/src/tests/bundles/created-bundles.spec.ts @@ -29,9 +29,6 @@ describe("dist/bundles/css", () => { ) .sort((a, b) => (a <= b ? -1 : 0)); - console.log("filesInOutputDir", filesInOutputDir); - console.log("OUTPUT_BUNDLES", OUTPUT_BUNDLES); - expect(filesInOutputDir).toEqual(OUTPUT_BUNDLES); }); }); diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/chameleon/scrollbar.json b/packages/mercury/src/tests/bundles/expected-bundle-content/chameleon/scrollbar.json index 869265166..5c895ede2 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/chameleon/scrollbar.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/chameleon/scrollbar.json @@ -5,4 +5,4 @@ ":host(.ch-scrollable)::-webkit-scrollbar-thumb, .ch-scrollable::-webkit-scrollbar-thumb, .scrollable::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb__bg-color); border-radius: var(--scrollbar-thumb__border-radius); }", ":host(.ch-scrollable)::-webkit-scrollbar-track, .ch-scrollable::-webkit-scrollbar-track, .scrollable::-webkit-scrollbar-track { background-color: var(--scrollbar-track__bg-color); border-radius: var(--scrollbar-track__border-radius); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/accordion.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/accordion.json index 788204f07..3599d3bff 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/accordion.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/accordion.json @@ -17,4 +17,4 @@ ".accordion-outlined::part(panel disabled) { --panel-border-color: var(--mer-border-color__primary--disabled); }", ".accordion-outlined::part(panel) { --accordion-panel__bg-color: var(--elevation-background-color, transparent); --panel-border-color: var( --elevation-border-color, var(--mer-border-color__on-surface) ); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/chat.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/chat.json index ba7e0ce2d..a15521ccb 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/chat.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/chat.json @@ -102,4 +102,4 @@ ".dropdown::part(action):hover { --item__bg-color: var(--item__bg-color--hover); --item__border-color: var(--item__border-color--hover); --item__color: var(--item__color--hover); }", ".dropdown::part(window) { background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); padding-block: var(--items-container__padding-block); padding-inline: var(--items-container__padding-inline); border-style: var(--items-container__border-style); border-width: var(--items-container__border-width); box-shadow: var(--items-container__box-shadow); border-radius: var(--items-container__border-radius); gap: var(--items-container__gap); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/checkbox.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/checkbox.json index ee7ffd287..83e148f32 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/checkbox.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/checkbox.json @@ -14,4 +14,4 @@ ".checkbox:hover { --control__border-color: var(--control__border-color--hover); }", ".checkbox:hover::part(label) { --label__color: var(--label__color--hover); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/code.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/code.json index ff6c6410c..602f55bfe 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/code.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/code.json @@ -1,4 +1,4 @@ [ ".code { --code__color-base: var(--mer-text__on-surface); --code__color-blue: var(--mer-color__primary--400); --code__color-light-blue: var(--mer-color__primary--200); --code__color-red: var(--mer-color__message-red--200); --code__color-green: var(--mer-color__message-green--200); --code__bg-color: var(--mer-surface__elevation--01); --code__border: var(--mer-border__width--sm) solid var(--mer-surface__elevation--03); --code__border-radius: var(--mer-border__radius--sm); --code__padding: var(--mer-spacing--xs) var(--mer-spacing--sm); --ch-code__doctag: var(--code__color-blue); --ch-code__keyword: var(--code__color-blue); --ch-code__meta__keyword: var(--code__color-blue); --ch-code__template-tag: var(--code__color-blue); --ch-code__template-variable: var(--code__color-blue); --ch-code__type: var(--code__color-blue); --ch-code__variable-language: var(--code__color-blue); --ch-code__title: var(--code__color-base); --ch-code__title-class: var(--code__color-base); --ch-code__title-class-inherited: var(--code__color-base); --ch-code__title-function: var(--code__color-base); --ch-code__attr: var(--code__color-blue); --ch-code__attribute: var(--code__color-blue); --ch-code__literal: var(--code__color-blue); --ch-code__meta: var(--code__color-blue); --ch-code__number: var(--code__color-blue); --ch-code__operator: var(--code__color-blue); --ch-code__variable: var(--code__color-blue); --ch-code__selector-attr: var(--code__color-blue); --ch-code__selector-class: var(--code__color-blue); --ch-code__selector-id: var(--code__color-blue); --ch-code__regexp: var(--code__color-green); --ch-code__string: var(--code__color-green); --ch-code__meta__string: var(--code__color-green); --ch-code__built-in: var(--code__color-green); --ch-code__symbol: #e36209; --ch-code__comment: var(--code__color-green); --ch-code__code: var(--code__color-green); --ch-code__formula: var(--code__color-green); --ch-code__name: var(--code__color-light-blue); --ch-code__quote: var(--code__color-light-blue); --ch-code__selector-tag: var(--code__color-light-blue); --ch-code__selector-pseudo: var(--code__color-light-blue); --ch-code__subst: #24292e; padding: var(--code__padding); background-color: var(--code__bg-color); border: var(--code__border); border-radius: var(--code__border-radius); font-size: 13px; line-height: 1.55em; overflow: auto; }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/combo-box.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/combo-box.json index e189a5a2d..f93b9d259 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/combo-box.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/combo-box.json @@ -22,4 +22,4 @@ ".combo-box:hover { --control__border-color: var(--control__border-color--hover); }", ".combo-box[part=\"ch-combo-box-render--placeholder\"] { font-weight: var(--font-weight-regular); font-style: italic; }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/edit.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/edit.json index 6ea8519b1..1ad138a99 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/edit.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/edit.json @@ -9,4 +9,4 @@ ".input:hover { --control__border-color: var(--control__border-color--hover); }", ".input[part*=\"ch-edit--empty-value\"] { font-weight: var(--font-weight-regular); font-style: italic; }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/icon.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/icon.json index 3acf5256d..306641631 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/icon.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/icon.json @@ -5,4 +5,4 @@ ".icon-size-sm { content: \"\"; display: block; inline-size: var(--mer-icon__box--sm); block-size: var(--mer-icon__box--sm); background: no-repeat center/var(--mer-icon__size--sm) var(--icon-path); }", ".icon-sm { --ch-image-size: var(--mer-icon__box--sm); --ch-image-background-size: var(--mer-icon__size--sm); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/layout-splitter.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/layout-splitter.json index 3beb21cea..43ad9a51b 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/layout-splitter.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/layout-splitter.json @@ -1,4 +1,4 @@ [ ".layout-splitter::part(bar) { color: var(--mer-border-color__on-surface); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/list-box.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/list-box.json index 4f44c3ded..be93dfbca 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/list-box.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/list-box.json @@ -24,4 +24,4 @@ ".list-box::part(item__additional-item text) { margin-inline-start: calc(var(--item__gap--regular)*2); }", ".list-box::part(separator) { block-size: var(--items-container-separator__block-size); inline-size: var(--items-container-separator__inline-size); background-color: var(--items-container-separator__bg-color); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/markdown-viewer.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/markdown-viewer.json index 66b0cf475..41a40b405 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/markdown-viewer.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/markdown-viewer.json @@ -53,4 +53,4 @@ "tr > td:first-child, tr > th:first-child { border-inline-start: unset; }", "tr { border: 1px solid var(--mer-border-color__on-surface); }", "ul, ol { padding-inline-start: var(--mer-spacing--xl); }" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/navigation-list.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/navigation-list.json index 9fe3a148e..5f635e25d 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/navigation-list.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/navigation-list.json @@ -11,4 +11,4 @@ ".navigation-list::part(item__link selected) { background-color: var(--item__bg-color--selected); border-color: var(--item__border-color--selected); color: var(--mer-accent__primary); }", ".navigation-list::part(item__link) { padding-inline-end: calc(var(--mer-spacing--xs) - 1px); padding-block: calc(var(--mer-spacing--xs) - 1px); border: 1px solid rgba(0, 0, 0, 0); border-radius: 4px; }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/pills.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/pills.json index e449df9cd..854a5a5fb 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/pills.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/pills.json @@ -28,4 +28,4 @@ ".pills-container { --pills-container__display: flex; flex-wrap: wrap; display: var(--pills-container__display); gap: var(--mer-spacing--md); }", ".pills::part(placeholder) { color: var(--control-placeholder__color); font-style: var(--control-placeholder__font-style); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/radio-group.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/radio-group.json index 846f7a415..09a0edc4c 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/radio-group.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/radio-group.json @@ -14,4 +14,4 @@ ".radio-group::part(radio__label) { font-weight: var(--font-weight-semi-bold); }", ".radio-group::part(radio__label) { line-height: var(--line-height-tight); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/segmented-control.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/segmented-control.json index 1e2334a55..1f212dc1c 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/segmented-control.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/segmented-control.json @@ -11,4 +11,4 @@ ".segmented-control-filled .segmented-control-item::part(unselected) { --button-background-color: transparent; --button-color: var(--mer-text__neutral); }", ".segmented-control-filled { --sc__bg-color: var( --elevation-background-color, var(--mer-surface__elevation--01) ); --sc__border-color: var( --elevation-border-color, var(--mer-border-color__on-elevation--01) ); --sc__color: var(--elevation-color, --mer-text__on-elevation); gap: var(--mer-spacing--2xs); padding: var(--mer-spacing--2xs); border-radius: var(--mer-border__width--lg); border: var(--mer-border__width--sm) solid var(--sc__border-color); background-color: var(--sc__bg-color); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/sidebar.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/sidebar.json index 0faf594e1..669b2ce89 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/sidebar.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/sidebar.json @@ -11,4 +11,4 @@ ".sidebar::part(expand-button):focus-visible { outline: var(--focus__outline-width) var(--focus__outline-style) var(--focus__outline-color); outline-offset: var(--focus__outline-offset); }", ".sidebar::part(expand-button):hover { background-color: var(--mer-surface__elevation--03); border-color: var(--mer-border-color__on-elevation--02); color: var(--mer-icon__highlighted); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/ticket-list.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/ticket-list.json index ce389d704..4658a538b 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/ticket-list.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/ticket-list.json @@ -19,4 +19,4 @@ ".ticket-list::part(status processing) { color: var(--mer-accent__primary); margin-inline-start: var(--mer-spacing--2xs); }", ".ticket-list::part(status) { font-weight: var(--font-weight-semi-bold); margin-block-end: var(--mer-spacing--xs); gap: var(--mer-spacing--2xs); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/tooltip.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/tooltip.json index 2aaeca413..4f502cce1 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/tooltip.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/tooltip.json @@ -4,4 +4,4 @@ ".tooltip::part(window) { font-weight: var(--font-weight-regular); }", ".tooltip::part(window) { line-height: var(--line-height-tight); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/components/widget.json b/packages/mercury/src/tests/bundles/expected-bundle-content/components/widget.json index f4cfb832b..e7041c5e1 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/components/widget.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/components/widget.json @@ -1,4 +1,4 @@ [ ".widget, :host(.widget) { --spacing-body-block-start: var(--mer-spacing--sm); --spacing-body-block-end: var(--mer-spacing--sm); --spacing-body-inline-start: var(--mer-spacing--sm); --spacing-body-inline-end: var(--mer-spacing--sm); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/resets/box-sizing.json b/packages/mercury/src/tests/bundles/expected-bundle-content/resets/box-sizing.json index 1e9157c40..a5a75554a 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/resets/box-sizing.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/resets/box-sizing.json @@ -1,4 +1,4 @@ [ "*, ::after, ::before { box-sizing: border-box; }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/utils/elevation.json b/packages/mercury/src/tests/bundles/expected-bundle-content/utils/elevation.json index dabc91452..d85afb4f7 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/utils/elevation.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/utils/elevation.json @@ -4,4 +4,4 @@ ".elevation-2, :host(.elevation-2) { --elevation-background-color: var(--mer-surface__elevation--02); background-color: var(--elevation-background-color); --elevation-border-color: var(--mer-border-color__on-elevation--02); }", ".elevation-3, :host(.elevation-3) { --elevation-background-color: var(--mer-surface__elevation--03); background-color: var(--elevation-background-color); --elevation-border-color: var(--mer-border-color__on-elevation--03); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/utils/form--full.json b/packages/mercury/src/tests/bundles/expected-bundle-content/utils/form--full.json index 4c81fd6d8..c979498af 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/utils/form--full.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/utils/form--full.json @@ -97,4 +97,4 @@ ":where(button, a) { color-scheme: unset; forced-color-adjust: unset; mask: unset; math-depth: unset; position: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; color: unset; font: unset; font-palette: unset; font-synthesis: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; align-items: center; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-decoration-break: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; column-rule: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: pointer; cx: unset; cy: unset; d: unset; display: inline-flex; dominant-baseline: unset; dynamic-range-limit: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interpolate-size: unset; isolation: unset; justify-items: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; list-style: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-overflow: unset; text-shadow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; text-wrap: unset; timeline-scope: unset; touch-action: manipulation; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; user-select: none; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}", "button:disabled { pointer-events: none; }" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/utils/form.json b/packages/mercury/src/tests/bundles/expected-bundle-content/utils/form.json index 03babe709..5ec20cc4c 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/utils/form.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/utils/form.json @@ -13,4 +13,4 @@ ".label { line-height: var(--line-height-tight); }", ".label--disabled { --label__color: var(--label__color--disabled); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/utils/layout.json b/packages/mercury/src/tests/bundles/expected-bundle-content/utils/layout.json index 7caf05865..6cc62fab9 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/utils/layout.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/utils/layout.json @@ -15,4 +15,4 @@ ".layout--cols-4 { grid-template-rows: 1fr; grid-template-columns: repeat(4, 1fr); }", ".layout__panel { display: grid; }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/utils/spacing.json b/packages/mercury/src/tests/bundles/expected-bundle-content/utils/spacing.json index 06e693ec7..0a62fa061 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/utils/spacing.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/utils/spacing.json @@ -7,4 +7,4 @@ ".spacing-body-inline-end, :host(.spacing-body-inline-end) { padding-inline-end: var(--spacing-body-inline-end); }", ".spacing-body-inline-start, :host(.spacing-body-inline-start) { padding-inline-start: var(--spacing-body-inline-start); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/expected-bundle-content/utils/typography.json b/packages/mercury/src/tests/bundles/expected-bundle-content/utils/typography.json index af1d0d80f..a26ecdeec 100644 --- a/packages/mercury/src/tests/bundles/expected-bundle-content/utils/typography.json +++ b/packages/mercury/src/tests/bundles/expected-bundle-content/utils/typography.json @@ -32,4 +32,4 @@ ".tiny-semi-bold-xs, .tiny-semi-bold-s, .tiny-semi-bold-m, .tiny-semi-bold-l, .tiny-regular-xs, .tiny-regular-s, .tiny-regular-m, .tiny-regular-l { line-height: var(--line-height-tight); }", "@keyframes spin { \n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}", "h1, h2, h3, h4, h5, h6, p { font: unset; margin: 0px; padding: 0px; color: unset; }" -] +] \ No newline at end of file diff --git a/packages/mercury/src/tests/bundles/utils.ts b/packages/mercury/src/tests/bundles/utils.ts index 8ffc02ee2..3748e320a 100644 --- a/packages/mercury/src/tests/bundles/utils.ts +++ b/packages/mercury/src/tests/bundles/utils.ts @@ -42,6 +42,7 @@ export const OUTPUT_BUNDLES = [ "utils/form--full.css", "utils/form.css", "utils/layout.css", + "utils/link.css", "utils/spacing.css", "utils/typography.css" ] as const; diff --git a/packages/mercury/src/tokens/_control.scss b/packages/mercury/src/tokens/_control.scss new file mode 100644 index 000000000..e4bdd0460 --- /dev/null +++ b/packages/mercury/src/tokens/_control.scss @@ -0,0 +1,75 @@ +@mixin semantic-control() { + // - - - - - - - - - - - - - - - - - - - - - - - - - - - - + // Tiny controls (ie.: checkbox, radio-button) + // - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + --control-tiny-size: var(--size-16); + --control-tiny-border-radius: 1px; + --control-tiny-option-checked-size: calc(var(--control-tiny-size) / 2); + --control-tiny-option-checked-image: url("data:image/svg+xml, "); + --control-tiny-option-indeterminate-block-size: 2px; + --control-tiny-option-indeterminate-border-radius: 2px; + --control-tiny-option-color: var(--color-accent-neutral-on-surface); + --control-tiny-option-color-disabled: var(--color-icon-neutral-disabled); + + // - - - - - - - - - - - - - - - - - - - - - - - - - - - - + // Inline Controls should have the same height to look good inline + // - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + // Size + --control-block-size: 32px; // Used for calculations + // Figma uses "outline" instead of border. For this reason, the "border" width + // does not sums up the total width or height. We substract the border width + // in order to adhere to Figma. + --control-padding-block: calc(var(--size-6) - var(--control-border-width)); + --control-padding-inline: var(--size-8); + --control-icon-gap: var(--size-8); + + // Colors + --control-bg-color: var(--control-bg-color-enabled); + --control-border-color: var(--control-border-color-enabled); + --control-color: var(--control-color-enabled); + // enabled + --control-bg-color-enabled: transparent; + --control-border-color-enabled: var(--color-border-neutral-default); + --control-color-enabled: var(--color-text-neutral-default); + // hover + --control-border-color-hover: var(--color-border-primary-hover); + --control-color-hover: var(--color-text-primary-hover); + // disabled + --control-background-color-disabled: var(--color-accent-neutral-disabled); + --control-border-color-disabled: var(--color-border-neutral-disabled); + --control-color-disabled: var(--color-text-neutral-on-disabled); + // error + --control-border-color-error: var(--color-border-error-default); + --control-color-error: var(--color-text-neutral-default); + + // Border + --control-border-width: var(--size-1); + --control-border-style: solid; + --control-border-radius: var(--size-4); + + // Placeholder + --control-placeholder-color: var(--color-text-neutral-default); + --control-placeholder-color-disabled: var(--color-text-neutral-on-disabled); + --control-placeholder-font-style: italic; + + // - - - - - - - - - - - - - - - - - - - - - - - - - - - - + // Controls Container + // - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + --controls-container-row-gap: var(--size-16); + --controls-group-gap-block: var(--size-12); + --controls-group-gap-inline: var(--size-16); + + // - - - - - - - - - - - - - - - - - - - - - - - - - - - - + // Label + // - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + --label-gap-inline: var(--size-8); + --label-gap-block: var(--size-8); + --label-color: var(--label-color-enabled); + --label-color-enabled: var(--color-text-neutral-default); + --label-color-hover: var(--color-text-primary-hover); + --label-color-disabled: var(--color-text-neutral-disabled); +} diff --git a/packages/mercury/src/tokens/_field.scss b/packages/mercury/src/tokens/_field.scss new file mode 100644 index 000000000..359a1f0af --- /dev/null +++ b/packages/mercury/src/tokens/_field.scss @@ -0,0 +1,10 @@ +@mixin semantic-field() { + // field group + --field-group-row-gap: var(--size-16); + --field-group-column-gap: var(--size-24); + + // field + --field-row-gap: var(--size-8); + --field-column-gap: var(--size-16); + --field-inline-label-margin-block-start: 6px; // 6px is the proper value, but it does not exists on the mercury ds. +} diff --git a/packages/mercury/src/tokens/_font-styles.scss b/packages/mercury/src/tokens/_font-styles.scss new file mode 100644 index 000000000..64cfcb2b9 --- /dev/null +++ b/packages/mercury/src/tokens/_font-styles.scss @@ -0,0 +1,8 @@ +@mixin font-styles() { + // line-heights + --line-height-tight: 1.2; + --line-height-regular: 1.3; + --line-height-relaxed: 1.4; + --line-height-spacious: 1.5; + --line-height-loose: 1.6; +} diff --git a/packages/mercury/src/tokens/_general.scss b/packages/mercury/src/tokens/_general.scss new file mode 100644 index 000000000..f1d9bea3a --- /dev/null +++ b/packages/mercury/src/tokens/_general.scss @@ -0,0 +1,27 @@ +@mixin semantic-general() { + // Icon box (shell) and size + --icon-box-sm: var(--size-12); + --icon-box-md: 14px; + --icon-size-sm: 100%; + --icon-size-md: 100%; + + // Focus + --focus-outline-width: var(--size-1); + --focus-outline-style: solid; + --focus-outline-color: var(--color-border-primary-focused); + --focus-outline-offset: calc(var(--control-border-width) * -1); + --borders-un-border-color-focused: var(--focus-outline-color); + + // ---------------------- + // Window + // ---------------------- + // TODO: This styles should better be applied on the ch-window. + --window-border: var(--size-1) solid var(--color-accent-surface-elevation-01); + --window-border-radius: var(--size-4); + --window-padding: var(--size-8); + --window-bg-color: var(--color-accent-surface-elevation-01); + --window-gap: var(--size-8); + --window-box-shadow: var(--box-shadow); + + --box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); +} diff --git a/packages/mercury/src/tokens/_generated/_color-globant.scss b/packages/mercury/src/tokens/_generated/_color-globant.scss new file mode 100644 index 000000000..0ebdf5415 --- /dev/null +++ b/packages/mercury/src/tokens/_generated/_color-globant.scss @@ -0,0 +1,317 @@ +@mixin semantic-color-globant-light() { + // accent + --color-accent-backdrop-default: $--color-accent-backdrop-default$; // --rgba(23, 23, 23, 0-8) + --color-accent-branding-surface: $--color-accent-branding-surface$; // --color-neutral-1800 + --color-accent-error-contrast: $--color-accent-error-contrast$; // --color-scarlet-200 + --color-accent-error-default: $--color-accent-error-default$; // --color-scarlet-500 + --color-accent-error-hover: $--color-accent-error-hover$; // --color-scarlet-800 + --color-accent-error-light: $--color-accent-error-light$; // --color-scarlet-300 + --color-accent-error-lighter: $--color-accent-error-lighter$; // --color-scarlet-200 + --color-accent-error-pressed: $--color-accent-error-pressed$; // --color-scarlet-900 + --color-accent-gradient-01-end: $--color-accent-gradient-01-end$; // --color-gradient-lemon + --color-accent-gradient-01-start: $--color-accent-gradient-01-start$; // --color-gradient-greenwood + --color-accent-gradient-02-end: $--color-accent-gradient-02-end$; // --color-gradient-mint + --color-accent-gradient-02-start: $--color-accent-gradient-02-start$; // --color-gradient-gaserage + --color-accent-item-active: $--color-accent-item-active$; // --color-avocado-1000 + --color-accent-item-hover: $--color-accent-item-hover$; // --color-avocado-300 + --color-accent-item-selected: $--color-accent-item-selected$; // --color-avocado-1000 + --color-accent-neutral-black: $--color-accent-neutral-black$; // --color-neutral-1300 + --color-accent-neutral-contrast: $--color-accent-neutral-contrast$; // --color-neutral-1550 + --color-accent-neutral-default: $--color-accent-neutral-default$; // --color-neutral-900 + --color-accent-neutral-disabled: $--color-accent-neutral-disabled$; // --color-neutral-500 + --color-accent-neutral-hover: $--color-accent-neutral-hover$; // --color-neutral-1550 + --color-accent-neutral-light: $--color-accent-neutral-light$; // --color-neutral-600 + --color-accent-neutral-neutral: $--color-accent-neutral-neutral$; // --color-neutral-900 + --color-accent-neutral-on-surface: $--color-accent-neutral-on-surface$; // --color-neutral-1550 + --color-accent-neutral-pressed: $--color-accent-neutral-pressed$; // --color-neutral-200 + --color-accent-neutral-white: $--color-accent-neutral-white$; // --color-neutral-100 + --color-accent-primary-contrast: $--color-accent-primary-contrast$; // --color-primary-300 + --color-accent-primary-dark: $--color-accent-primary-dark$; // --color-primary-1000 + --color-accent-primary-default: $--color-accent-primary-default$; // --color-avocado-600 + --color-accent-primary-focused: $--color-accent-primary-focused$; // --color-avocado-1100 + --color-accent-primary-hover: $--color-accent-primary-hover$; // --color-avocado-300 + --color-accent-primary-light: $--color-accent-primary-light$; // --color-avocado-300 + --color-accent-primary-lighter: $--color-accent-primary-lighter$; // --color-avocado-200 + --color-accent-primary-on-default: $--color-accent-primary-on-default$; // --color-avocado-300 + --color-accent-primary-on-hover: $--color-accent-primary-on-hover$; // --color-primary-1000 + --color-accent-primary-on-pressed: $--color-accent-primary-on-pressed$; // --color-neutral-300 + --color-accent-primary-pressed: $--color-accent-primary-pressed$; // --color-primary-1000 + --color-accent-semantic-error: $--color-accent-semantic-error$; // --color-scarlet-200 + --color-accent-semantic-info: $--color-accent-semantic-info$; // --color-azure-200 + --color-accent-semantic-neutral: $--color-accent-semantic-neutral$; // --color-accent-neutral-disabled + --color-accent-semantic-success: $--color-accent-semantic-success$; // --color-chateau-200 + --color-accent-semantic-warning: $--color-accent-semantic-warning$; // --color-ember-200 + --color-accent-shadow-shadow: $--color-accent-shadow-shadow$; // --rgba(11, 18, 7, 0-2) + --color-accent-success-contrast: $--color-accent-success-contrast$; // --color-chateau-200 + --color-accent-success-default: $--color-accent-success-default$; // --color-chateau-500 + --color-accent-success-hover: $--color-accent-success-hover$; // --color-chateau-800 + --color-accent-success-light: $--color-accent-success-light$; // --color-chateau-400 + --color-accent-success-lighter: $--color-accent-success-lighter$; // --color-chateau-200 + --color-accent-success-pressed: $--color-accent-success-pressed$; // --color-chateau-900 + --color-accent-surface-elevation-01: $--color-accent-surface-elevation-01$; // --color-neutral-200 + --color-accent-surface-elevation-02: $--color-accent-surface-elevation-02$; // --color-neutral-350 + --color-accent-surface-elevation-03: $--color-accent-surface-elevation-03$; // --color-neutral-500 + --color-accent-surface-elevation-answer: $--color-accent-surface-elevation-answer$; // --color-neutral-600 + --color-accent-surface-surface: $--color-accent-surface-surface$; // --color-neutral-100 + --color-accent-warning-contrast: $--color-accent-warning-contrast$; // --color-ember-200 + --color-accent-warning-default: $--color-accent-warning-default$; // --color-ember-400 + --color-accent-warning-hover: $--color-accent-warning-hover$; // --color-ember-500 + --color-accent-warning-light: $--color-accent-warning-light$; // --color-ember-300 + --color-accent-warning-lighter: $--color-accent-warning-lighter$; // --color-ember-200 + --color-accent-warning-pressed: $--color-accent-warning-pressed$; // --color-ember-800 + + // border + --color-border-branding-surface: $--color-border-branding-surface$; // --color-neutral-1400 + --color-border-error-dark: $--color-border-error-dark$; // --color-scarlet-200 + --color-border-error-default: $--color-border-error-default$; // --color-scarlet-600 + --color-border-error-hover: $--color-border-error-hover$; // --color-scarlet-700 + --color-border-error-light: $--color-border-error-light$; // --color-scarlet-300 + --color-border-error-lighter: $--color-border-error-lighter$; // --color-scarlet-200 + --color-border-error-pressed: $--color-border-error-pressed$; // --color-scarlet-900 + --color-border-item-active: $--color-border-item-active$; // --color-avocado-900 + --color-border-item-hover: $--color-border-item-hover$; // --color-avocado-800 + --color-border-item-selected: $--color-border-item-selected$; // --color-avocado-900 + --color-border-neutral-black: $--color-border-neutral-black$; // --color-neutral-1300 + --color-border-neutral-default: $--color-border-neutral-default$; // --color-neutral-800 + --color-border-neutral-disabled: $--color-border-neutral-disabled$; // --color-neutral-1000 + --color-border-neutral-hover: $--color-border-neutral-hover$; // --color-neutral-1550 + --color-border-neutral-light: $--color-border-neutral-light$; // --color-neutral-600 + --color-border-neutral-neutral: $--color-border-neutral-neutral$; // --color-neutral-900 + --color-border-neutral-on-border: $--color-border-neutral-on-border$; // --color-neutral-1550 + --color-border-neutral-pressed: $--color-border-neutral-pressed$; // --color-neutral-1500 + --color-border-neutral-white: $--color-border-neutral-white$; // --color-neutral-100 + --color-border-primary-dark: $--color-border-primary-dark$; // --color-avocado-1200 + --color-border-primary-default: $--color-border-primary-default$; // --color-avocado-500 + --color-border-primary-focused: $--color-border-primary-focused$; // --color-avocado-1100 + --color-border-primary-hover: $--color-border-primary-hover$; // --color-avocado-800 + --color-border-primary-light: $--color-border-primary-light$; // --color-avocado-300 + --color-border-primary-lighter: $--color-border-primary-lighter$; // --color-avocado-200 + --color-border-primary-on_default: $--color-border-primary-on_default$; // --color-avocado-300 + --color-border-primary-on_hover: $--color-border-primary-on_hover$; // --color-primary-1000 + --color-border-primary-on_pressed: $--color-border-primary-on_pressed$; // --color-neutral-300 + --color-border-primary-pressed: $--color-border-primary-pressed$; // --color-avocado-900 + --color-border-success-dark: $--color-border-success-dark$; // --color-chateau-200 + --color-border-success-default: $--color-border-success-default$; // --color-chateau-500 + --color-border-success-hover: $--color-border-success-hover$; // --color-chateau-800 + --color-border-success-light: $--color-border-success-light$; // --color-chateau-400 + --color-border-success-lighter: $--color-border-success-lighter$; // --color-chateau-200 + --color-border-success-pressed: $--color-border-success-pressed$; // --color-chateau-900 + --color-border-surface-on-elevation-01: $--color-border-surface-on-elevation-01$; // --color-neutral-400 + --color-border-surface-on-elevation-02: $--color-border-surface-on-elevation-02$; // --color-neutral-500 + --color-border-surface-on-elevation-03: $--color-border-surface-on-elevation-03$; // --color-neutral-600 + --color-border-warning-dark: $--color-border-warning-dark$; // --color-ember-200 + --color-border-warning-default: $--color-border-warning-default$; // --color-ember-500 + --color-border-warning-hover: $--color-border-warning-hover$; // --color-ember-800 + --color-border-warning-light: $--color-border-warning-light$; // --color-ember-300 + --color-border-warning-lighter: $--color-border-warning-lighter$; // --color-ember-200 + --color-border-warning-pressed: $--color-border-warning-pressed$; // --color-ember-900 + + // component + --color-component-chat-01-end: $--color-component-chat-01-end$; // --#ff00ff + --color-component-chat-01-middle: $--color-component-chat-01-middle$; // --#a300ff + --color-component-chat-01-start: $--color-component-chat-01-start$; // --#00ccff + + // icon + --color-icon-neutral-dark: $--color-icon-neutral-dark$; // --color-neutral-1700 + --color-icon-neutral-default: $--color-icon-neutral-default$; // --color-neutral-1400 + --color-icon-neutral-disabled: $--color-icon-neutral-disabled$; // --color-neutral-1000 + --color-icon-neutral-hover: $--color-icon-neutral-hover$; // --color-neutral-1550 + --color-icon-neutral-light: $--color-icon-neutral-light$; // --color-neutral-600 + --color-icon-neutral-neutral: $--color-icon-neutral-neutral$; // --color-neutral-900 + --color-icon-neutral-on-disabled: $--color-icon-neutral-on-disabled$; // --color-neutral-1100 + --color-icon-neutral-on-icon: $--color-icon-neutral-on-icon$; // --color-neutral-200 + --color-icon-neutral-pressed: $--color-icon-neutral-pressed$; // --color-neutral-1450 + --color-icon-neutral-white: $--color-icon-neutral-white$; // --color-neutral-100 + --color-icon-primary-default: $--color-icon-primary-default$; // --color-primary-800 + --color-icon-primary-hover: $--color-icon-primary-hover$; // --color-primary-900 + --color-icon-primary-on_default: $--color-icon-primary-on_default$; // --color-avocado-300 + --color-icon-primary-on_hover: $--color-icon-primary-on_hover$; // --color-primary-1000 + --color-icon-primary-on_pressed: $--color-icon-primary-on_pressed$; // --color-neutral-300 + --color-icon-primary-pressed: $--color-icon-primary-pressed$; // --color-primary-1000 + --color-icon-semantic-error: $--color-icon-semantic-error$; // --color-scarlet-900 + --color-icon-semantic-neutral: $--color-icon-semantic-neutral$; // --color-neutral-1400 + --color-icon-semantic-success: $--color-icon-semantic-success$; // --color-chateau-900 + --color-icon-semantic-warning: $--color-icon-semantic-warning$; // --color-ember-900 + + // text + --color-text-branding-surface: $--color-text-branding-surface$; // --color-neutral-100 + --color-text-neutral-dark: $--color-text-neutral-dark$; // --color-neutral-1700 + --color-text-neutral-default: $--color-text-neutral-default$; // --color-neutral-1400 + --color-text-neutral-disabled: $--color-text-neutral-disabled$; // --color-neutral-1000 + --color-text-neutral-hover: $--color-text-neutral-hover$; // --color-neutral-1550 + --color-text-neutral-light: $--color-text-neutral-light$; // --color-neutral-600 + --color-text-neutral-neutral: $--color-text-neutral-neutral$; // --color-neutral-900 + --color-text-neutral-on-disabled: $--color-text-neutral-on-disabled$; // --color-neutral-1100 + --color-text-neutral-on-text: $--color-text-neutral-on-text$; // --color-neutral-200 + --color-text-neutral-pressed: $--color-text-neutral-pressed$; // --color-neutral-1450 + --color-text-neutral-white: $--color-text-neutral-white$; // --color-neutral-100 + --color-text-primary-default: $--color-text-primary-default$; // --color-avocado-600 + --color-text-primary-hover: $--color-text-primary-hover$; // --color-primary-900 + --color-text-primary-on_default: $--color-text-primary-on_default$; // --color-avocado-300 + --color-text-primary-on_hover: $--color-text-primary-on_hover$; // --color-primary-1000 + --color-text-primary-on_pressed: $--color-text-primary-on_pressed$; // --color-neutral-300 + --color-text-primary-pressed: $--color-text-primary-pressed$; // --color-primary-1000 + --color-text-semantic-error: $--color-text-semantic-error$; // --color-scarlet-900 + --color-text-semantic-neutral: $--color-text-semantic-neutral$; // --color-neutral-1400 + --color-text-semantic-success: $--color-text-semantic-success$; // --color-chateau-900 + --color-text-semantic-warning: $--color-text-semantic-warning$; // --color-ember-900 +} + +@mixin semantic-color-globant-dark() { + // accent + --color-accent-backdrop-default: $--color-accent-backdrop-default$; // --rgba(23, 23, 23, 0-7) + --color-accent-branding-surface: $--color-accent-branding-surface$; // --color-neutral-100 + --color-accent-error-contrast: $--color-accent-error-contrast$; // --color-red-1300 + --color-accent-error-default: $--color-accent-error-default$; // --color-red-600 + --color-accent-error-hover: $--color-accent-error-hover$; // --color-red-800 + --color-accent-error-light: $--color-accent-error-light$; // --color-red-500 + --color-accent-error-lighter: $--color-accent-error-lighter$; // --color-red-300 + --color-accent-error-pressed: $--color-accent-error-pressed$; // --color-red-1000 + --color-accent-gradient-01-end: $--color-accent-gradient-01-end$; // --color-gradient-lemon + --color-accent-gradient-01-start: $--color-accent-gradient-01-start$; // --color-gradient-greenwood + --color-accent-gradient-02-end: $--color-accent-gradient-02-end$; // --color-gradient-mint + --color-accent-gradient-02-start: $--color-accent-gradient-02-start$; // --color-gradient-gaserage + --color-accent-item-active: $--color-accent-item-active$; // --color-olive-1100 + --color-accent-item-hover: $--color-accent-item-hover$; // --color-olive-1000 + --color-accent-item-selected: $--color-accent-item-selected$; // --color-olive-1100 + --color-accent-neutral-black: $--color-accent-neutral-black$; // --color-neutral-1300 + --color-accent-neutral-contrast: $--color-accent-neutral-contrast$; // --color-neutral-1550 + --color-accent-neutral-default: $--color-accent-neutral-default$; // --color-neutral-900 + --color-accent-neutral-disabled: $--color-accent-neutral-disabled$; // --color-neutral-1300 + --color-accent-neutral-hover: $--color-accent-neutral-hover$; // --color-neutral-300 + --color-accent-neutral-light: $--color-accent-neutral-light$; // --color-neutral-400 + --color-accent-neutral-neutral: $--color-accent-neutral-neutral$; // --color-neutral-600 + --color-accent-neutral-on-surface: $--color-accent-neutral-on-surface$; // --color-neutral-100 + --color-accent-neutral-pressed: $--color-accent-neutral-pressed$; // --color-neutral-600 + --color-accent-neutral-white: $--color-accent-neutral-white$; // --color-neutral-100 + --color-accent-primary-contrast: $--color-accent-primary-contrast$; // --color-olive-1300 + --color-accent-primary-dark: $--color-accent-primary-dark$; // --color-olive-1100 + --color-accent-primary-default: $--color-accent-primary-default$; // --color-olive-600 + --color-accent-primary-focused: $--color-accent-primary-focused$; // --color-extra-violet-600 + --color-accent-primary-hover: $--color-accent-primary-hover$; // --color-olive-1000 + --color-accent-primary-light: $--color-accent-primary-light$; // --color-olive-300 + --color-accent-primary-lighter: $--color-accent-primary-lighter$; // --color-olive-200 + --color-accent-primary-on-default: $--color-accent-primary-on-default$; // --color-olive-600 + --color-accent-primary-on-hover: $--color-accent-primary-on-hover$; // --color-olive-200 + --color-accent-primary-on-pressed: $--color-accent-primary-on-pressed$; // --color-neutral-300 + --color-accent-primary-pressed: $--color-accent-primary-pressed$; // --color-olive-1100 + --color-accent-semantic-error: $--color-accent-semantic-error$; // --color-red-600 + --color-accent-semantic-info: $--color-accent-semantic-info$; // --color-primary-600 + --color-accent-semantic-neutral: $--color-accent-semantic-neutral$; // --color-neutral-800 + --color-accent-semantic-success: $--color-accent-semantic-success$; // --color-green-600 + --color-accent-semantic-warning: $--color-accent-semantic-warning$; // --color-yellow-600 + --color-accent-shadow-shadow: $--color-accent-shadow-shadow$; // --rgba(0, 0, 0, 0-2) + --color-accent-success-contrast: $--color-accent-success-contrast$; // --color-green-1300 + --color-accent-success-default: $--color-accent-success-default$; // --color-green-600 + --color-accent-success-hover: $--color-accent-success-hover$; // --color-green-800 + --color-accent-success-light: $--color-accent-success-light$; // --color-green-500 + --color-accent-success-lighter: $--color-accent-success-lighter$; // --color-green-300 + --color-accent-success-pressed: $--color-accent-success-pressed$; // --color-green-1000 + --color-accent-surface-elevation-01: $--color-accent-surface-elevation-01$; // --color-neutral-1600 + --color-accent-surface-elevation-02: $--color-accent-surface-elevation-02$; // --color-neutral-1500 + --color-accent-surface-elevation-03: $--color-accent-surface-elevation-03$; // --color-neutral-1300 + --color-accent-surface-elevation-answer: $--color-accent-surface-elevation-answer$; // --color-neutral-1450 + --color-accent-surface-surface: $--color-accent-surface-surface$; // --color-neutral-1700 + --color-accent-warning-contrast: $--color-accent-warning-contrast$; // --color-yellow-1300 + --color-accent-warning-default: $--color-accent-warning-default$; // --color-yellow-600 + --color-accent-warning-hover: $--color-accent-warning-hover$; // --color-yellow-900 + --color-accent-warning-light: $--color-accent-warning-light$; // --color-yellow-400 + --color-accent-warning-lighter: $--color-accent-warning-lighter$; // --color-yellow-300 + --color-accent-warning-pressed: $--color-accent-warning-pressed$; // --color-yellow-1000 + + // border + --color-border-branding-surface: $--color-border-branding-surface$; // --color-neutral-1700 + --color-border-error-dark: $--color-border-error-dark$; // --color-red-1300 + --color-border-error-default: $--color-border-error-default$; // --color-red-600 + --color-border-error-hover: $--color-border-error-hover$; // --color-red-700 + --color-border-error-light: $--color-border-error-light$; // --color-red-500 + --color-border-error-lighter: $--color-border-error-lighter$; // --color-red-300 + --color-border-error-pressed: $--color-border-error-pressed$; // --color-red-900 + --color-border-item-active: $--color-border-item-active$; // --color-olive-900 + --color-border-item-hover: $--color-border-item-hover$; // --color-olive-700 + --color-border-item-selected: $--color-border-item-selected$; // --color-olive-900 + --color-border-neutral-black: $--color-border-neutral-black$; // --color-neutral-1300 + --color-border-neutral-default: $--color-border-neutral-default$; // --color-neutral-900 + --color-border-neutral-disabled: $--color-border-neutral-disabled$; // --color-neutral-1050 + --color-border-neutral-hover: $--color-border-neutral-hover$; // --color-neutral-100 + --color-border-neutral-light: $--color-border-neutral-light$; // --color-neutral-400 + --color-border-neutral-neutral: $--color-border-neutral-neutral$; // --color-neutral-600 + --color-border-neutral-on-border: $--color-border-neutral-on-border$; // --color-neutral-100 + --color-border-neutral-pressed: $--color-border-neutral-pressed$; // --color-neutral-400 + --color-border-neutral-white: $--color-border-neutral-white$; // --color-neutral-100 + --color-border-primary-dark: $--color-border-primary-dark$; // --color-olive-1100 + --color-border-primary-default: $--color-border-primary-default$; // --color-olive-500 + --color-border-primary-focused: $--color-border-primary-focused$; // --color-extra-violet-600 + --color-border-primary-hover: $--color-border-primary-hover$; // --color-olive-700 + --color-border-primary-light: $--color-border-primary-light$; // --color-olive-300 + --color-border-primary-lighter: $--color-border-primary-lighter$; // --color-olive-200 + --color-border-primary-on_default: $--color-border-primary-on_default$; // --color-olive-600 + --color-border-primary-on_hover: $--color-border-primary-on_hover$; // --color-olive-200 + --color-border-primary-on_pressed: $--color-border-primary-on_pressed$; // --color-neutral-300 + --color-border-primary-pressed: $--color-border-primary-pressed$; // --color-olive-900 + --color-border-success-dark: $--color-border-success-dark$; // --color-green-1300 + --color-border-success-default: $--color-border-success-default$; // --color-green-600 + --color-border-success-hover: $--color-border-success-hover$; // --color-green-800 + --color-border-success-light: $--color-border-success-light$; // --color-green-500 + --color-border-success-lighter: $--color-border-success-lighter$; // --color-green-300 + --color-border-success-pressed: $--color-border-success-pressed$; // --color-green-1000 + --color-border-surface-on-elevation-01: $--color-border-surface-on-elevation-01$; // --color-neutral-1300 + --color-border-surface-on-elevation-02: $--color-border-surface-on-elevation-02$; // --color-neutral-1100 + --color-border-surface-on-elevation-03: $--color-border-surface-on-elevation-03$; // --color-neutral-900 + --color-border-warning-dark: $--color-border-warning-dark$; // --color-yellow-1300 + --color-border-warning-default: $--color-border-warning-default$; // --color-yellow-500 + --color-border-warning-hover: $--color-border-warning-hover$; // --color-yellow-800 + --color-border-warning-light: $--color-border-warning-light$; // --color-yellow-400 + --color-border-warning-lighter: $--color-border-warning-lighter$; // --color-yellow-300 + --color-border-warning-pressed: $--color-border-warning-pressed$; // --color-yellow-900 + + // component + --color-component-chat-01-end: $--color-component-chat-01-end$; // --color-gradient-greenwood + --color-component-chat-01-middle: $--color-component-chat-01-middle$; // --color-gradient-mint + --color-component-chat-01-start: $--color-component-chat-01-start$; // --color-gradient-gaserage + + // icon + --color-icon-neutral-dark: $--color-icon-neutral-dark$; // --color-neutral-1700 + --color-icon-neutral-default: $--color-icon-neutral-default$; // --color-neutral-400 + --color-icon-neutral-disabled: $--color-icon-neutral-disabled$; // --color-neutral-1050 + --color-icon-neutral-hover: $--color-icon-neutral-hover$; // --color-neutral-300 + --color-icon-neutral-light: $--color-icon-neutral-light$; // --color-neutral-400 + --color-icon-neutral-neutral: $--color-icon-neutral-neutral$; // --color-neutral-300 + --color-icon-neutral-on-disabled: $--color-icon-neutral-on-disabled$; // --color-neutral-600 + --color-icon-neutral-on-icon: $--color-icon-neutral-on-icon$; // --color-neutral-1700 + --color-icon-neutral-pressed: $--color-icon-neutral-pressed$; // --color-neutral-300 + --color-icon-neutral-white: $--color-icon-neutral-white$; // --color-neutral-100 + --color-icon-primary-default: $--color-icon-primary-default$; // --color-olive-600 + --color-icon-primary-hover: $--color-icon-primary-hover$; // --color-olive-700 + --color-icon-primary-on_default: $--color-icon-primary-on_default$; // --color-olive-600 + --color-icon-primary-on_hover: $--color-icon-primary-on_hover$; // --color-olive-200 + --color-icon-primary-on_pressed: $--color-icon-primary-on_pressed$; // --color-neutral-300 + --color-icon-primary-pressed: $--color-icon-primary-pressed$; // --color-olive-900 + --color-icon-semantic-error: $--color-icon-semantic-error$; // --color-red-600 + --color-icon-semantic-neutral: $--color-icon-semantic-neutral$; // --color-neutral-800 + --color-icon-semantic-success: $--color-icon-semantic-success$; // --color-green-600 + --color-icon-semantic-warning: $--color-icon-semantic-warning$; // --color-yellow-600 + + // text + --color-text-branding-surface: $--color-text-branding-surface$; // --color-neutral-1800 + --color-text-neutral-dark: $--color-text-neutral-dark$; // --color-neutral-1700 + --color-text-neutral-default: $--color-text-neutral-default$; // --color-neutral-400 + --color-text-neutral-disabled: $--color-text-neutral-disabled$; // --color-neutral-1050 + --color-text-neutral-hover: $--color-text-neutral-hover$; // --color-neutral-300 + --color-text-neutral-light: $--color-text-neutral-light$; // --color-neutral-400 + --color-text-neutral-neutral: $--color-text-neutral-neutral$; // --color-neutral-300 + --color-text-neutral-on-disabled: $--color-text-neutral-on-disabled$; // --color-neutral-600 + --color-text-neutral-on-text: $--color-text-neutral-on-text$; // --color-neutral-1700 + --color-text-neutral-pressed: $--color-text-neutral-pressed$; // --color-neutral-300 + --color-text-neutral-white: $--color-text-neutral-white$; // --color-neutral-100 + --color-text-primary-default: $--color-text-primary-default$; // --color-olive-600 + --color-text-primary-hover: $--color-text-primary-hover$; // --color-olive-700 + --color-text-primary-on_default: $--color-text-primary-on_default$; // --color-olive-600 + --color-text-primary-on_hover: $--color-text-primary-on_hover$; // --color-olive-200 + --color-text-primary-on_pressed: $--color-text-primary-on_pressed$; // --color-neutral-300 + --color-text-primary-pressed: $--color-text-primary-pressed$; // --color-olive-900 + --color-text-semantic-error: $--color-text-semantic-error$; // --color-red-600 + --color-text-semantic-neutral: $--color-text-semantic-neutral$; // --color-neutral-800 + --color-text-semantic-success: $--color-text-semantic-success$; // --color-green-600 + --color-text-semantic-warning: $--color-text-semantic-warning$; // --color-yellow-600 +} diff --git a/packages/mercury/src/tokens/_generated/_color-mercury.scss b/packages/mercury/src/tokens/_generated/_color-mercury.scss new file mode 100644 index 000000000..3e6803695 --- /dev/null +++ b/packages/mercury/src/tokens/_generated/_color-mercury.scss @@ -0,0 +1,317 @@ +@mixin semantic-color-mercury-light() { + // accent + --color-accent-backdrop-default: $--color-accent-backdrop-default$; // --rgba(17, 21, 28, 0-8) + --color-accent-branding-surface: $--color-accent-branding-surface$; // --color-neutral-1800 + --color-accent-error-contrast: $--color-accent-error-contrast$; // --color-scarlet-200 + --color-accent-error-default: $--color-accent-error-default$; // --color-scarlet-500 + --color-accent-error-hover: $--color-accent-error-hover$; // --color-scarlet-800 + --color-accent-error-light: $--color-accent-error-light$; // --color-scarlet-300 + --color-accent-error-lighter: $--color-accent-error-lighter$; // --color-scarlet-200 + --color-accent-error-pressed: $--color-accent-error-pressed$; // --color-scarlet-900 + --color-accent-gradient-01-end: $--color-accent-gradient-01-end$; // --color-gradient-purple + --color-accent-gradient-01-start: $--color-accent-gradient-01-start$; // --color-gradient-sky + --color-accent-gradient-02-end: $--color-accent-gradient-02-end$; // --color-gradient-magenta + --color-accent-gradient-02-start: $--color-accent-gradient-02-start$; // --color-gradient-berry + --color-accent-item-active: $--color-accent-item-active$; // --color-azure-1000 + --color-accent-item-hover: $--color-accent-item-hover$; // --color-azure-300 + --color-accent-item-selected: $--color-accent-item-selected$; // --color-azure-1000 + --color-accent-neutral-black: $--color-accent-neutral-black$; // --color-primary-1300 + --color-accent-neutral-contrast: $--color-accent-neutral-contrast$; // --color-neutral-1550 + --color-accent-neutral-default: $--color-accent-neutral-default$; // --color-neutral-700 + --color-accent-neutral-disabled: $--color-accent-neutral-disabled$; // --color-neutral-400 + --color-accent-neutral-hover: $--color-accent-neutral-hover$; // --color-neutral-1550 + --color-accent-neutral-light: $--color-accent-neutral-light$; // --color-neutral-600 + --color-accent-neutral-neutral: $--color-accent-neutral-neutral$; // --color-neutral-900 + --color-accent-neutral-on-surface: $--color-accent-neutral-on-surface$; // --color-primary-1300 + --color-accent-neutral-pressed: $--color-accent-neutral-pressed$; // --color-neutral-200 + --color-accent-neutral-white: $--color-accent-neutral-white$; // --color-neutral-100 + --color-accent-primary-contrast: $--color-accent-primary-contrast$; // --color-primary-200 + --color-accent-primary-dark: $--color-accent-primary-dark$; // --color-azure-800 + --color-accent-primary-default: $--color-accent-primary-default$; // --color-azure-500 + --color-accent-primary-focused: $--color-accent-primary-focused$; // --color-azure-900 + --color-accent-primary-hover: $--color-accent-primary-hover$; // --color-azure-300 + --color-accent-primary-light: $--color-accent-primary-light$; // --color-azure-100 + --color-accent-primary-lighter: $--color-accent-primary-lighter$; // --color-azure-50 + --color-accent-primary-on-default: $--color-accent-primary-on-default$; // --color-azure-300 + --color-accent-primary-on-hover: $--color-accent-primary-on-hover$; // --color-azure-800 + --color-accent-primary-on-pressed: $--color-accent-primary-on-pressed$; // --color-neutral-300 + --color-accent-primary-pressed: $--color-accent-primary-pressed$; // --color-azure-1000 + --color-accent-semantic-error: $--color-accent-semantic-error$; // --color-scarlet-200 + --color-accent-semantic-info: $--color-accent-semantic-info$; // --color-azure-200 + --color-accent-semantic-neutral: $--color-accent-semantic-neutral$; // --color-accent-neutral-disabled + --color-accent-semantic-success: $--color-accent-semantic-success$; // --color-chateau-200 + --color-accent-semantic-warning: $--color-accent-semantic-warning$; // --color-ember-200 + --color-accent-shadow-shadow: $--color-accent-shadow-shadow$; // --rgba(7, 10, 18, 0-2) + --color-accent-success-contrast: $--color-accent-success-contrast$; // --color-chateau-200 + --color-accent-success-default: $--color-accent-success-default$; // --color-chateau-500 + --color-accent-success-hover: $--color-accent-success-hover$; // --color-chateau-800 + --color-accent-success-light: $--color-accent-success-light$; // --color-chateau-400 + --color-accent-success-lighter: $--color-accent-success-lighter$; // --color-chateau-200 + --color-accent-success-pressed: $--color-accent-success-pressed$; // --color-chateau-900 + --color-accent-surface-elevation-01: $--color-accent-surface-elevation-01$; // --color-lilac-200 + --color-accent-surface-elevation-02: $--color-accent-surface-elevation-02$; // --color-lilac-250 + --color-accent-surface-elevation-03: $--color-accent-surface-elevation-03$; // --color-lilac-400 + --color-accent-surface-elevation-answer: $--color-accent-surface-elevation-answer$; // --color-lilac-600 + --color-accent-surface-surface: $--color-accent-surface-surface$; // --color-lilac-50 + --color-accent-warning-contrast: $--color-accent-warning-contrast$; // --color-ember-200 + --color-accent-warning-default: $--color-accent-warning-default$; // --color-ember-400 + --color-accent-warning-hover: $--color-accent-warning-hover$; // --color-ember-500 + --color-accent-warning-light: $--color-accent-warning-light$; // --color-ember-300 + --color-accent-warning-lighter: $--color-accent-warning-lighter$; // --color-ember-200 + --color-accent-warning-pressed: $--color-accent-warning-pressed$; // --color-ember-800 + + // border + --color-border-branding-surface: $--color-border-branding-surface$; // --color-neutral-1400 + --color-border-error-dark: $--color-border-error-dark$; // --color-scarlet-200 + --color-border-error-default: $--color-border-error-default$; // --color-scarlet-500 + --color-border-error-hover: $--color-border-error-hover$; // --color-scarlet-800 + --color-border-error-light: $--color-border-error-light$; // --color-scarlet-300 + --color-border-error-lighter: $--color-border-error-lighter$; // --color-scarlet-200 + --color-border-error-pressed: $--color-border-error-pressed$; // --color-scarlet-900 + --color-border-item-active: $--color-border-item-active$; // --color-azure-800 + --color-border-item-hover: $--color-border-item-hover$; // --color-azure-400 + --color-border-item-selected: $--color-border-item-selected$; // --color-azure-800 + --color-border-neutral-black: $--color-border-neutral-black$; // --color-primary-1300 + --color-border-neutral-default: $--color-border-neutral-default$; // --color-neutral-700 + --color-border-neutral-disabled: $--color-border-neutral-disabled$; // --color-neutral-700 + --color-border-neutral-hover: $--color-border-neutral-hover$; // --color-neutral-1550 + --color-border-neutral-light: $--color-border-neutral-light$; // --color-neutral-600 + --color-border-neutral-neutral: $--color-border-neutral-neutral$; // --color-neutral-900 + --color-border-neutral-on-border: $--color-border-neutral-on-border$; // --color-primary-1300 + --color-border-neutral-pressed: $--color-border-neutral-pressed$; // --color-neutral-1500 + --color-border-neutral-white: $--color-border-neutral-white$; // --color-neutral-100 + --color-border-primary-dark: $--color-border-primary-dark$; // --color-azure-900 + --color-border-primary-default: $--color-border-primary-default$; // --color-azure-600 + --color-border-primary-focused: $--color-border-primary-focused$; // --color-azure-900 + --color-border-primary-hover: $--color-border-primary-hover$; // --color-azure-800 + --color-border-primary-light: $--color-border-primary-light$; // --color-azure-100 + --color-border-primary-lighter: $--color-border-primary-lighter$; // --color-azure-50 + --color-border-primary-on_default: $--color-border-primary-on_default$; // --color-azure-300 + --color-border-primary-on_hover: $--color-border-primary-on_hover$; // --color-azure-800 + --color-border-primary-on_pressed: $--color-border-primary-on_pressed$; // --color-neutral-300 + --color-border-primary-pressed: $--color-border-primary-pressed$; // --color-azure-700 + --color-border-success-dark: $--color-border-success-dark$; // --color-chateau-200 + --color-border-success-default: $--color-border-success-default$; // --color-chateau-500 + --color-border-success-hover: $--color-border-success-hover$; // --color-chateau-800 + --color-border-success-light: $--color-border-success-light$; // --color-chateau-400 + --color-border-success-lighter: $--color-border-success-lighter$; // --color-chateau-200 + --color-border-success-pressed: $--color-border-success-pressed$; // --color-chateau-900 + --color-border-surface-on-elevation-01: $--color-border-surface-on-elevation-01$; // --color-lilac-400 + --color-border-surface-on-elevation-02: $--color-border-surface-on-elevation-02$; // --color-lilac-500 + --color-border-surface-on-elevation-03: $--color-border-surface-on-elevation-03$; // --color-lilac-600 + --color-border-warning-dark: $--color-border-warning-dark$; // --color-ember-200 + --color-border-warning-default: $--color-border-warning-default$; // --color-ember-500 + --color-border-warning-hover: $--color-border-warning-hover$; // --color-ember-800 + --color-border-warning-light: $--color-border-warning-light$; // --color-ember-300 + --color-border-warning-lighter: $--color-border-warning-lighter$; // --color-ember-200 + --color-border-warning-pressed: $--color-border-warning-pressed$; // --color-ember-900 + + // component + --color-component-chat-01-end: $--color-component-chat-01-end$; // --color-gradient-magenta + --color-component-chat-01-middle: $--color-component-chat-01-middle$; // --color-gradient-purple + --color-component-chat-01-start: $--color-component-chat-01-start$; // --color-gradient-sky + + // icon + --color-icon-neutral-dark: $--color-icon-neutral-dark$; // --color-neutral-1700 + --color-icon-neutral-default: $--color-icon-neutral-default$; // --color-neutral-1400 + --color-icon-neutral-disabled: $--color-icon-neutral-disabled$; // --color-neutral-800 + --color-icon-neutral-hover: $--color-icon-neutral-hover$; // --color-neutral-1550 + --color-icon-neutral-light: $--color-icon-neutral-light$; // --color-neutral-600 + --color-icon-neutral-neutral: $--color-icon-neutral-neutral$; // --color-neutral-900 + --color-icon-neutral-on-disabled: $--color-icon-neutral-on-disabled$; // --color-neutral-1000 + --color-icon-neutral-on-icon: $--color-icon-neutral-on-icon$; // --color-neutral-100 + --color-icon-neutral-pressed: $--color-icon-neutral-pressed$; // --color-neutral-1450 + --color-icon-neutral-white: $--color-icon-neutral-white$; // --color-neutral-100 + --color-icon-primary-default: $--color-icon-primary-default$; // --color-azure-600 + --color-icon-primary-hover: $--color-icon-primary-hover$; // --color-azure-400 + --color-icon-primary-on_default: $--color-icon-primary-on_default$; // --color-azure-300 + --color-icon-primary-on_hover: $--color-icon-primary-on_hover$; // --color-azure-800 + --color-icon-primary-on_pressed: $--color-icon-primary-on_pressed$; // --color-neutral-300 + --color-icon-primary-pressed: $--color-icon-primary-pressed$; // --color-azure-750 + --color-icon-semantic-error: $--color-icon-semantic-error$; // --color-scarlet-900 + --color-icon-semantic-neutral: $--color-icon-semantic-neutral$; // --color-neutral-1400 + --color-icon-semantic-success: $--color-icon-semantic-success$; // --color-chateau-900 + --color-icon-semantic-warning: $--color-icon-semantic-warning$; // --color-ember-900 + + // text + --color-text-branding-surface: $--color-text-branding-surface$; // --color-neutral-100 + --color-text-neutral-dark: $--color-text-neutral-dark$; // --color-neutral-1700 + --color-text-neutral-default: $--color-text-neutral-default$; // --color-neutral-1400 + --color-text-neutral-disabled: $--color-text-neutral-disabled$; // --color-neutral-800 + --color-text-neutral-hover: $--color-text-neutral-hover$; // --color-neutral-1550 + --color-text-neutral-light: $--color-text-neutral-light$; // --color-neutral-600 + --color-text-neutral-neutral: $--color-text-neutral-neutral$; // --color-neutral-900 + --color-text-neutral-on-disabled: $--color-text-neutral-on-disabled$; // --color-neutral-1000 + --color-text-neutral-on-text: $--color-text-neutral-on-text$; // --color-neutral-200 + --color-text-neutral-pressed: $--color-text-neutral-pressed$; // --color-neutral-1550 + --color-text-neutral-white: $--color-text-neutral-white$; // --color-neutral-100 + --color-text-primary-default: $--color-text-primary-default$; // --color-azure-600 + --color-text-primary-hover: $--color-text-primary-hover$; // --color-azure-400 + --color-text-primary-on_default: $--color-text-primary-on_default$; // --color-azure-300 + --color-text-primary-on_hover: $--color-text-primary-on_hover$; // --color-azure-800 + --color-text-primary-on_pressed: $--color-text-primary-on_pressed$; // --color-neutral-300 + --color-text-primary-pressed: $--color-text-primary-pressed$; // --color-azure-750 + --color-text-semantic-error: $--color-text-semantic-error$; // --color-scarlet-900 + --color-text-semantic-neutral: $--color-text-semantic-neutral$; // --color-neutral-1400 + --color-text-semantic-success: $--color-text-semantic-success$; // --color-chateau-900 + --color-text-semantic-warning: $--color-text-semantic-warning$; // --color-ember-900 +} + +@mixin semantic-color-mercury-dark() { + // accent + --color-accent-backdrop-default: $--color-accent-backdrop-default$; // --color-opacity-70 + --color-accent-branding-surface: $--color-accent-branding-surface$; // --color-neutral-100 + --color-accent-error-contrast: $--color-accent-error-contrast$; // --color-red-1300 + --color-accent-error-default: $--color-accent-error-default$; // --color-red-600 + --color-accent-error-hover: $--color-accent-error-hover$; // --color-red-800 + --color-accent-error-light: $--color-accent-error-light$; // --color-red-500 + --color-accent-error-lighter: $--color-accent-error-lighter$; // --color-red-300 + --color-accent-error-pressed: $--color-accent-error-pressed$; // --color-red-1000 + --color-accent-gradient-01-end: $--color-accent-gradient-01-end$; // --color-gradient-purple + --color-accent-gradient-01-start: $--color-accent-gradient-01-start$; // --color-gradient-sky + --color-accent-gradient-02-end: $--color-accent-gradient-02-end$; // --color-gradient-magenta + --color-accent-gradient-02-start: $--color-accent-gradient-02-start$; // --color-gradient-berry + --color-accent-item-active: $--color-accent-item-active$; // --color-neutral-1550 + --color-accent-item-hover: $--color-accent-item-hover$; // --color-neutral-1450 + --color-accent-item-selected: $--color-accent-item-selected$; // --color-neutral-1550 + --color-accent-neutral-black: $--color-accent-neutral-black$; // --color-neutral-1700 + --color-accent-neutral-contrast: $--color-accent-neutral-contrast$; // --color-neutral-1550 + --color-accent-neutral-default: $--color-accent-neutral-default$; // --color-neutral-900 + --color-accent-neutral-disabled: $--color-accent-neutral-disabled$; // --color-neutral-1300 + --color-accent-neutral-hover: $--color-accent-neutral-hover$; // --color-neutral-300 + --color-accent-neutral-light: $--color-accent-neutral-light$; // --color-neutral-400 + --color-accent-neutral-neutral: $--color-accent-neutral-neutral$; // --color-neutral-600 + --color-accent-neutral-on-surface: $--color-accent-neutral-on-surface$; // --color-neutral-100 + --color-accent-neutral-pressed: $--color-accent-neutral-pressed$; // --color-neutral-600 + --color-accent-neutral-white: $--color-accent-neutral-white$; // --color-neutral-100 + --color-accent-primary-contrast: $--color-accent-primary-contrast$; // --color-primary-1300 + --color-accent-primary-dark: $--color-accent-primary-dark$; // --color-primary-1100 + --color-accent-primary-default: $--color-accent-primary-default$; // --color-primary-600 + --color-accent-primary-focused: $--color-accent-primary-focused$; // --color-neutral-000 + --color-accent-primary-hover: $--color-accent-primary-hover$; // --color-neutral-1450 + --color-accent-primary-light: $--color-accent-primary-light$; // --color-primary-500 + --color-accent-primary-lighter: $--color-accent-primary-lighter$; // --color-primary-300 + --color-accent-primary-on-default: $--color-accent-primary-on-default$; // --color-primary-600 + --color-accent-primary-on-hover: $--color-accent-primary-on-hover$; // --color-primary-400 + --color-accent-primary-on-pressed: $--color-accent-primary-on-pressed$; // --color-neutral-200 + --color-accent-primary-pressed: $--color-accent-primary-pressed$; // --color-primary-1000 + --color-accent-semantic-error: $--color-accent-semantic-error$; // --color-red-600 + --color-accent-semantic-info: $--color-accent-semantic-info$; // --color-primary-600 + --color-accent-semantic-neutral: $--color-accent-semantic-neutral$; // --color-neutral-800 + --color-accent-semantic-success: $--color-accent-semantic-success$; // --color-green-600 + --color-accent-semantic-warning: $--color-accent-semantic-warning$; // --color-yellow-600 + --color-accent-shadow-shadow: $--color-accent-shadow-shadow$; // --rgba(0, 0, 0, 0-2) + --color-accent-success-contrast: $--color-accent-success-contrast$; // --color-green-1300 + --color-accent-success-default: $--color-accent-success-default$; // --color-green-600 + --color-accent-success-hover: $--color-accent-success-hover$; // --color-green-800 + --color-accent-success-light: $--color-accent-success-light$; // --color-green-500 + --color-accent-success-lighter: $--color-accent-success-lighter$; // --color-green-300 + --color-accent-success-pressed: $--color-accent-success-pressed$; // --color-green-1000 + --color-accent-surface-elevation-01: $--color-accent-surface-elevation-01$; // --color-neutral-1600 + --color-accent-surface-elevation-02: $--color-accent-surface-elevation-02$; // --color-neutral-1500 + --color-accent-surface-elevation-03: $--color-accent-surface-elevation-03$; // --color-neutral-1400 + --color-accent-surface-elevation-answer: $--color-accent-surface-elevation-answer$; // --color-neutral-1450 + --color-accent-surface-surface: $--color-accent-surface-surface$; // --color-neutral-1700 + --color-accent-warning-contrast: $--color-accent-warning-contrast$; // --color-yellow-1300 + --color-accent-warning-default: $--color-accent-warning-default$; // --color-yellow-600 + --color-accent-warning-hover: $--color-accent-warning-hover$; // --color-yellow-900 + --color-accent-warning-light: $--color-accent-warning-light$; // --color-yellow-400 + --color-accent-warning-lighter: $--color-accent-warning-lighter$; // --color-yellow-300 + --color-accent-warning-pressed: $--color-accent-warning-pressed$; // --color-yellow-1000 + + // border + --color-border-branding-surface: $--color-border-branding-surface$; // --color-neutral-1700 + --color-border-error-dark: $--color-border-error-dark$; // --color-red-1300 + --color-border-error-default: $--color-border-error-default$; // --color-red-600 + --color-border-error-hover: $--color-border-error-hover$; // --color-red-700 + --color-border-error-light: $--color-border-error-light$; // --color-red-500 + --color-border-error-lighter: $--color-border-error-lighter$; // --color-red-300 + --color-border-error-pressed: $--color-border-error-pressed$; // --color-red-900 + --color-border-item-active: $--color-border-item-active$; // --color-primary-580 + --color-border-item-hover: $--color-border-item-hover$; // --color-neutral-1050 + --color-border-item-selected: $--color-border-item-selected$; // --color-primary-580 + --color-border-neutral-black: $--color-border-neutral-black$; // --color-neutral-1700 + --color-border-neutral-default: $--color-border-neutral-default$; // --color-neutral-900 + --color-border-neutral-disabled: $--color-border-neutral-disabled$; // --color-neutral-800 + --color-border-neutral-hover: $--color-border-neutral-hover$; // --color-neutral-300 + --color-border-neutral-light: $--color-border-neutral-light$; // --color-neutral-400 + --color-border-neutral-neutral: $--color-border-neutral-neutral$; // --color-neutral-600 + --color-border-neutral-on-border: $--color-border-neutral-on-border$; // --color-neutral-100 + --color-border-neutral-pressed: $--color-border-neutral-pressed$; // --color-neutral-400 + --color-border-neutral-white: $--color-border-neutral-white$; // --color-neutral-100 + --color-border-primary-dark: $--color-border-primary-dark$; // --color-primary-1300 + --color-border-primary-default: $--color-border-primary-default$; // --color-primary-600 + --color-border-primary-focused: $--color-border-primary-focused$; // --color-neutral-000 + --color-border-primary-hover: $--color-border-primary-hover$; // --color-primary-550 + --color-border-primary-light: $--color-border-primary-light$; // --color-primary-500 + --color-border-primary-lighter: $--color-border-primary-lighter$; // --color-primary-300 + --color-border-primary-on_default: $--color-border-primary-on_default$; // --color-primary-600 + --color-border-primary-on_hover: $--color-border-primary-on_hover$; // --color-primary-400 + --color-border-primary-on_pressed: $--color-border-primary-on_pressed$; // --color-neutral-400 + --color-border-primary-pressed: $--color-border-primary-pressed$; // --color-primary-580 + --color-border-success-dark: $--color-border-success-dark$; // --color-green-1300 + --color-border-success-default: $--color-border-success-default$; // --color-green-600 + --color-border-success-hover: $--color-border-success-hover$; // --color-green-800 + --color-border-success-light: $--color-border-success-light$; // --color-green-500 + --color-border-success-lighter: $--color-border-success-lighter$; // --color-green-300 + --color-border-success-pressed: $--color-border-success-pressed$; // --color-green-1000 + --color-border-surface-on-elevation-01: $--color-border-surface-on-elevation-01$; // --color-neutral-1300 + --color-border-surface-on-elevation-02: $--color-border-surface-on-elevation-02$; // --color-neutral-1100 + --color-border-surface-on-elevation-03: $--color-border-surface-on-elevation-03$; // --color-neutral-900 + --color-border-warning-dark: $--color-border-warning-dark$; // --color-yellow-1300 + --color-border-warning-default: $--color-border-warning-default$; // --color-yellow-500 + --color-border-warning-hover: $--color-border-warning-hover$; // --color-yellow-800 + --color-border-warning-light: $--color-border-warning-light$; // --color-yellow-400 + --color-border-warning-lighter: $--color-border-warning-lighter$; // --color-yellow-300 + --color-border-warning-pressed: $--color-border-warning-pressed$; // --color-yellow-900 + + // component + --color-component-chat-01-end: $--color-component-chat-01-end$; // --color-gradient-magenta + --color-component-chat-01-middle: $--color-component-chat-01-middle$; // --color-gradient-purple + --color-component-chat-01-start: $--color-component-chat-01-start$; // --color-gradient-sky + + // icon + --color-icon-neutral-dark: $--color-icon-neutral-dark$; // --color-neutral-1700 + --color-icon-neutral-default: $--color-icon-neutral-default$; // --color-neutral-200 + --color-icon-neutral-disabled: $--color-icon-neutral-disabled$; // --color-neutral-800 + --color-icon-neutral-hover: $--color-icon-neutral-hover$; // --color-neutral-300 + --color-icon-neutral-light: $--color-icon-neutral-light$; // --color-neutral-400 + --color-icon-neutral-neutral: $--color-icon-neutral-neutral$; // --color-neutral-400 + --color-icon-neutral-on-disabled: $--color-icon-neutral-on-disabled$; // --color-neutral-600 + --color-icon-neutral-on-icon: $--color-icon-neutral-on-icon$; // --color-neutral-1700 + --color-icon-neutral-pressed: $--color-icon-neutral-pressed$; // --color-neutral-400 + --color-icon-neutral-white: $--color-icon-neutral-white$; // --color-neutral-100 + --color-icon-primary-default: $--color-icon-primary-default$; // --color-primary-600 + --color-icon-primary-hover: $--color-icon-primary-hover$; // --color-primary-400 + --color-icon-primary-on_default: $--color-icon-primary-on_default$; // --color-primary-600 + --color-icon-primary-on_hover: $--color-icon-primary-on_hover$; // --color-primary-400 + --color-icon-primary-on_pressed: $--color-icon-primary-on_pressed$; // --color-neutral-200 + --color-icon-primary-pressed: $--color-icon-primary-pressed$; // --color-primary-800 + --color-icon-semantic-error: $--color-icon-semantic-error$; // --color-red-600 + --color-icon-semantic-neutral: $--color-icon-semantic-neutral$; // --color-neutral-800 + --color-icon-semantic-success: $--color-icon-semantic-success$; // --color-green-600 + --color-icon-semantic-warning: $--color-icon-semantic-warning$; // --color-yellow-600 + + // text + --color-text-branding-surface: $--color-text-branding-surface$; // --color-neutral-1800 + --color-text-neutral-dark: $--color-text-neutral-dark$; // --color-neutral-1700 + --color-text-neutral-default: $--color-text-neutral-default$; // --color-neutral-200 + --color-text-neutral-disabled: $--color-text-neutral-disabled$; // --color-neutral-800 + --color-text-neutral-hover: $--color-text-neutral-hover$; // --color-neutral-300 + --color-text-neutral-light: $--color-text-neutral-light$; // --color-neutral-400 + --color-text-neutral-neutral: $--color-text-neutral-neutral$; // --color-neutral-400 + --color-text-neutral-on-disabled: $--color-text-neutral-on-disabled$; // --color-neutral-600 + --color-text-neutral-on-text: $--color-text-neutral-on-text$; // --color-neutral-1700 + --color-text-neutral-pressed: $--color-text-neutral-pressed$; // --color-neutral-400 + --color-text-neutral-white: $--color-text-neutral-white$; // --color-neutral-100 + --color-text-primary-default: $--color-text-primary-default$; // --color-primary-600 + --color-text-primary-hover: $--color-text-primary-hover$; // --color-primary-400 + --color-text-primary-on_default: $--color-text-primary-on_default$; // --color-primary-600 + --color-text-primary-on_hover: $--color-text-primary-on_hover$; // --color-primary-400 + --color-text-primary-on_pressed: $--color-text-primary-on_pressed$; // --color-neutral-200 + --color-text-primary-pressed: $--color-text-primary-pressed$; // --color-primary-800 + --color-text-semantic-error: $--color-text-semantic-error$; // --color-red-600 + --color-text-semantic-neutral: $--color-text-semantic-neutral$; // --color-neutral-800 + --color-text-semantic-success: $--color-text-semantic-success$; // --color-green-600 + --color-text-semantic-warning: $--color-text-semantic-warning$; // --color-yellow-600 +} diff --git a/packages/mercury/src/tokens/_generated/_font-size.scss b/packages/mercury/src/tokens/_generated/_font-size.scss new file mode 100644 index 000000000..3d6132bf9 --- /dev/null +++ b/packages/mercury/src/tokens/_generated/_font-size.scss @@ -0,0 +1,28 @@ +@mixin font-size() { + // body + --font-size-body-l: $--font-size-body-l$; // --size-16 + --font-size-body-m: $--font-size-body-m$; // --size-14 + --font-size-body-s: $--font-size-body-s$; // --size-12 + --font-size-body-xl: $--font-size-body-xl$; // --size-18 + --font-size-body-xs: $--font-size-body-xs$; // --size-11 + + // caption + --font-size-caption-l: $--font-size-caption-l$; // --size-11 + --font-size-caption-m: $--font-size-caption-m$; // --size-10 + --font-size-caption-s: $--font-size-caption-s$; // --size-8 + + // header + --font-size-header-h1: $--font-size-header-h1$; // --size-40 + --font-size-header-h2: $--font-size-header-h2$; // --size-32 + --font-size-header-h3: $--font-size-header-h3$; // --size-28 + --font-size-header-h4: $--font-size-header-h4$; // --size-24 + --font-size-header-h5: $--font-size-header-h5$; // --size-20 + --font-size-header-h6: $--font-size-header-h6$; // --size-18 + + // subtitle + --font-size-subtitle-l: $--font-size-subtitle-l$; // --size-18 + --font-size-subtitle-m: $--font-size-subtitle-m$; // --size-16 + --font-size-subtitle-s: $--font-size-subtitle-s$; // --size-15 + --font-size-subtitle-xl: $--font-size-subtitle-xl$; // --size-20 + --font-size-subtitle-xs: $--font-size-subtitle-xs$; // --size-14 +} diff --git a/packages/mercury/src/tokens/_generated/_primitive-color-globant.scss b/packages/mercury/src/tokens/_generated/_primitive-color-globant.scss new file mode 100644 index 000000000..a96363054 --- /dev/null +++ b/packages/mercury/src/tokens/_generated/_primitive-color-globant.scss @@ -0,0 +1,122 @@ +@mixin primitive-color-globant() { + // avocado + --color-avocado-100: $--color-avocado-100$; // #f6f7ec + --color-avocado-200: $--color-avocado-200$; // #e7e9c8 + --color-avocado-300: $--color-avocado-300$; // #d8dfa3 + --color-avocado-400: $--color-avocado-400$; // #c7d67b + --color-avocado-500: $--color-avocado-500$; // #b4d050 + --color-avocado-600: $--color-avocado-600$; // #88af1d + --color-avocado-700: $--color-avocado-700$; // #749519 + --color-avocado-800: $--color-avocado-800$; // #617920 + --color-avocado-900: $--color-avocado-900$; // #53681d + --color-avocado-1000: $--color-avocado-1000$; // #455519 + --color-avocado-1100: $--color-avocado-1100$; // #333f13 + --color-avocado-1200: $--color-avocado-1200$; // #232a0e + --color-avocado-1300: $--color-avocado-1300$; // #131708 + + // extra + --color-extra-violet-600: $--color-extra-violet-600$; // #9a00fa + + // gradient + --color-gradient-gaserage: $--color-gradient-gaserage$; // #c0fb73 + --color-gradient-greenwood: $--color-gradient-greenwood$; // #d9e021 + --color-gradient-lemon: $--color-gradient-lemon$; // #8cc63f + --color-gradient-mint: $--color-gradient-mint$; // #38efa0 + + // green + --color-green-100: $--color-green-100$; // #eef5f4 + --color-green-200: $--color-green-200$; // #ddebe9 + --color-green-300: $--color-green-300$; // #cae0dd + --color-green-400: $--color-green-400$; // #b4d5d0 + --color-green-500: $--color-green-500$; // #9cc9c2 + --color-green-600: $--color-green-600$; // #3fa89b + --color-green-700: $--color-green-700$; // #389287 + --color-green-800: $--color-green-800$; // #318278 + --color-green-900: $--color-green-900$; // #286a62 + --color-green-1000: $--color-green-1000$; // #1c4b45 + --color-green-1300: $--color-green-1300$; // #112d29 + + // neutral + --color-neutral-100: $--color-neutral-100$; // #ffffff + --color-neutral-200: $--color-neutral-200$; // #fafafa + --color-neutral-300: $--color-neutral-300$; // #f5f5f5 + --color-neutral-350: $--color-neutral-350$; // #f0f0f0 + --color-neutral-400: $--color-neutral-400$; // #ededed + --color-neutral-500: $--color-neutral-500$; // #e5e5e5 + --color-neutral-600: $--color-neutral-600$; // #d6d6d6 + --color-neutral-700: $--color-neutral-700$; // #cccccc + --color-neutral-800: $--color-neutral-800$; // #bdbdbd + --color-neutral-900: $--color-neutral-900$; // #a9a9a9 + --color-neutral-1000: $--color-neutral-1000$; // #8c8c8c + --color-neutral-1050: $--color-neutral-1050$; // #6b6b6b + --color-neutral-1100: $--color-neutral-1100$; // #686868 + --color-neutral-1200: $--color-neutral-1200$; // #575757 + --color-neutral-1300: $--color-neutral-1300$; // #464646 + --color-neutral-1400: $--color-neutral-1400$; // #3b3b3b + --color-neutral-1450: $--color-neutral-1450$; // #373737 + --color-neutral-1500: $--color-neutral-1500$; // #303030 + --color-neutral-1550: $--color-neutral-1550$; // #262626 + --color-neutral-1600: $--color-neutral-1600$; // #212121 + --color-neutral-1700: $--color-neutral-1700$; // #171717 + --color-neutral-1800: $--color-neutral-1800$; // #000000 + + // olive + --color-olive-100: $--color-olive-100$; // #fcfcf2 + --color-olive-200: $--color-olive-200$; // #f2f3c9 + --color-olive-300: $--color-olive-300$; // #e8ed9f + --color-olive-400: $--color-olive-400$; // #dee873 + --color-olive-500: $--color-olive-500$; // #d2e546 + --color-olive-600: $--color-olive-600$; // #c3e01a + --color-olive-700: $--color-olive-700$; // #a8c118 + --color-olive-800: $--color-olive-800$; // #8ea216 + --color-olive-900: $--color-olive-900$; // #7c8e15 + --color-olive-1000: $--color-olive-1000$; // #647213 + --color-olive-1100: $--color-olive-1100$; // #4d580e + --color-olive-1200: $--color-olive-1200$; // #3a420b + --color-olive-1300: $--color-olive-1300$; // #262b08 + + // opacity + --color-opacity-70: $--color-opacity-70$; // #171717 + + // primary + --color-primary-100: $--color-primary-100$; // #f9fbf2 + --color-primary-200: $--color-primary-200$; // #f5f8e8 + --color-primary-300: $--color-primary-300$; // #eaf1ce + --color-primary-400: $--color-primary-400$; // #deeab0 + --color-primary-500: $--color-primary-500$; // #d2e38c + --color-primary-550: $--color-primary-550$; // #cfe184 + --color-primary-580: $--color-primary-580$; // #c6d572 + --color-primary-600: $--color-primary-600$; // #bfd732 + --color-primary-700: $--color-primary-700$; // #b4cc28 + --color-primary-800: $--color-primary-800$; // #a3b72b + --color-primary-900: $--color-primary-900$; // #8d9f25 + --color-primary-1000: $--color-primary-1000$; // #515c15 + --color-primary-1100: $--color-primary-1100$; // #2e340a + --color-primary-1200: $--color-primary-1200$; // #262b08 + + // red + --color-red-100: $--color-red-100$; // #fcf4f4 + --color-red-200: $--color-red-200$; // #f8dfe0 + --color-red-300: $--color-red-300$; // #f4cdcf + --color-red-400: $--color-red-400$; // #eda4a7 + --color-red-500: $--color-red-500$; // #e98b8f + --color-red-600: $--color-red-600$; // #e35861 + --color-red-700: $--color-red-700$; // #d54b54 + --color-red-800: $--color-red-800$; // #a63a41 + --color-red-900: $--color-red-900$; // #883035 + --color-red-1000: $--color-red-1000$; // #6d272b + --color-red-1300: $--color-red-1300$; // #2d1012 + + // yellow + --color-yellow-100: $--color-yellow-100$; // #fffbf6 + --color-yellow-200: $--color-yellow-200$; // #fef1e3 + --color-yellow-300: $--color-yellow-300$; // #fde8cf + --color-yellow-400: $--color-yellow-400$; // #fcdeb8 + --color-yellow-500: $--color-yellow-500$; // #fac980 + --color-yellow-600: $--color-yellow-600$; // #f9bd56 + --color-yellow-700: $--color-yellow-700$; // #ffc96b + --color-yellow-800: $--color-yellow-800$; // #ecaf44 + --color-yellow-900: $--color-yellow-900$; // #b97d13 + --color-yellow-1000: $--color-yellow-1000$; // #6f4b0b + --color-yellow-1300: $--color-yellow-1300$; // #382606 +} diff --git a/packages/mercury/src/tokens/_generated/_primitive-color-mercury.scss b/packages/mercury/src/tokens/_generated/_primitive-color-mercury.scss new file mode 100644 index 000000000..a3e8a8561 --- /dev/null +++ b/packages/mercury/src/tokens/_generated/_primitive-color-mercury.scss @@ -0,0 +1,152 @@ +@mixin primitive-color-mercury() { + // azure + --color-azure-50: $--color-azure-50$; // #eaf3fe + --color-azure-100: $--color-azure-100$; // #e1eefe + --color-azure-200: $--color-azure-200$; // #c6dffd + --color-azure-300: $--color-azure-300$; // #9cc8fc + --color-azure-400: $--color-azure-400$; // #3791fb + --color-azure-500: $--color-azure-500$; // #0a7cff + --color-azure-600: $--color-azure-600$; // #0072f8 + --color-azure-700: $--color-azure-700$; // #0049cd + --color-azure-750: $--color-azure-750$; // #1f52ae + --color-azure-800: $--color-azure-800$; // #0034b1 + --color-azure-900: $--color-azure-900$; // #002da8 + --color-azure-1000: $--color-azure-1000$; // #173d82 + + // chateau + --color-chateau-50: $--color-chateau-50$; // #e0f6e7 + --color-chateau-100: $--color-chateau-100$; // #b9eaca + --color-chateau-200: $--color-chateau-200$; // #92dead + --color-chateau-300: $--color-chateau-300$; // #72d495 + --color-chateau-400: $--color-chateau-400$; // #4fca7a + --color-chateau-500: $--color-chateau-500$; // #35b061 + --color-chateau-600: $--color-chateau-600$; // #2d9552 + --color-chateau-700: $--color-chateau-700$; // #247541 + --color-chateau-800: $--color-chateau-800$; // #1c5e34 + --color-chateau-900: $--color-chateau-900$; // #154627 + + // ember + --color-ember-50: $--color-ember-50$; // #fffbeb + --color-ember-100: $--color-ember-100$; // #fff9e0 + --color-ember-200: $--color-ember-200$; // #ffeda3 + --color-ember-300: $--color-ember-300$; // #ffe370 + --color-ember-400: $--color-ember-400$; // #ffdd52 + --color-ember-500: $--color-ember-500$; // #ffcd00 + --color-ember-600: $--color-ember-600$; // #cca400 + --color-ember-700: $--color-ember-700$; // #997b00 + --color-ember-800: $--color-ember-800$; // #665200 + --color-ember-900: $--color-ember-900$; // #3d3100 + + // gradient + --color-gradient-berry: $--color-gradient-berry$; // #0095ff + --color-gradient-magenta: $--color-gradient-magenta$; // #ff00ff + --color-gradient-purple: $--color-gradient-purple$; // #a300ff + --color-gradient-sky: $--color-gradient-sky$; // #00ccff + + // green + --color-green-100: $--color-green-100$; // #eef5f4 + --color-green-200: $--color-green-200$; // #ddebe9 + --color-green-300: $--color-green-300$; // #cae0dd + --color-green-400: $--color-green-400$; // #b4d5d0 + --color-green-500: $--color-green-500$; // #9cc9c2 + --color-green-600: $--color-green-600$; // #3fa89b + --color-green-700: $--color-green-700$; // #389287 + --color-green-800: $--color-green-800$; // #318278 + --color-green-900: $--color-green-900$; // #286a62 + --color-green-1000: $--color-green-1000$; // #1c4b45 + --color-green-1300: $--color-green-1300$; // #112d29 + + // lilac + --color-lilac-50: $--color-lilac-50$; // #f9fafa + --color-lilac-100: $--color-lilac-100$; // #f8f9fc + --color-lilac-200: $--color-lilac-200$; // #edf0f8 + --color-lilac-250: $--color-lilac-250$; // #e2e7f4 + --color-lilac-300: $--color-lilac-300$; // #dee1ed + --color-lilac-400: $--color-lilac-400$; // #d5daeb + --color-lilac-500: $--color-lilac-500$; // #c8d0e9 + --color-lilac-600: $--color-lilac-600$; // #c2cbe6 + --color-lilac-700: $--color-lilac-700$; // #bcc5e4 + --color-lilac-800: $--color-lilac-800$; // #b7c2e2 + --color-lilac-900: $--color-lilac-900$; // #9babd9 + + // neutral + --color-neutral-100: $--color-neutral-100$; // #fafbfd + --color-neutral-200: $--color-neutral-200$; // #f0f4fa + --color-neutral-300: $--color-neutral-300$; // #e1ecf9 + --color-neutral-400: $--color-neutral-400$; // #d2ddeb + --color-neutral-500: $--color-neutral-500$; // #c0ccd9 + --color-neutral-600: $--color-neutral-600$; // #aeb9c6 + --color-neutral-700: $--color-neutral-700$; // #9da9b6 + --color-neutral-800: $--color-neutral-800$; // #828b96 + --color-neutral-900: $--color-neutral-900$; // #56677a + --color-neutral-1000: $--color-neutral-1000$; // #4a5870 + --color-neutral-1050: $--color-neutral-1050$; // #405975 + --color-neutral-1100: $--color-neutral-1100$; // #485665 + --color-neutral-1200: $--color-neutral-1200$; // #394552 + --color-neutral-1300: $--color-neutral-1300$; // #333d47 + --color-neutral-1400: $--color-neutral-1400$; // #2d3a48 + --color-neutral-1450: $--color-neutral-1450$; // #243750 + --color-neutral-1500: $--color-neutral-1500$; // #242d3c + --color-neutral-1550: $--color-neutral-1550$; // #17273b + --color-neutral-1600: $--color-neutral-1600$; // #181f2a + --color-neutral-1700: $--color-neutral-1700$; // #11151c + --color-neutral-1800: $--color-neutral-1800$; // #000000 + --color-neutral-000: $--color-neutral-000$; // #ffffff + + // opacity + --color-opacity-70: $--color-opacity-70$; // rgba(17, 21, 28, 0.7) + + // primary + --color-primary-100: $--color-primary-100$; // #f4f8ff + --color-primary-200: $--color-primary-200$; // #ebf0ff + --color-primary-300: $--color-primary-300$; // #cee0ff + --color-primary-400: $--color-primary-400$; // #b0cfff + --color-primary-500: $--color-primary-500$; // #8cbcff + --color-primary-550: $--color-primary-550$; // #75aef0 + --color-primary-580: $--color-primary-580$; // #729fd5 + --color-primary-600: $--color-primary-600$; // #5ba7ff + --color-primary-700: $--color-primary-700$; // #5498e8 + --color-primary-800: $--color-primary-800$; // #437dc0 + --color-primary-900: $--color-primary-900$; // #335884 + --color-primary-1000: $--color-primary-1000$; // #294b72 + --color-primary-1100: $--color-primary-1100$; // #005ac1 + --color-primary-1300: $--color-primary-1300$; // #101e2d + + // red + --color-red-100: $--color-red-100$; // #fcf4f4 + --color-red-200: $--color-red-200$; // #f8dfe0 + --color-red-300: $--color-red-300$; // #f4cdcf + --color-red-400: $--color-red-400$; // #eda4a7 + --color-red-500: $--color-red-500$; // #e98b8f + --color-red-600: $--color-red-600$; // #e35861 + --color-red-700: $--color-red-700$; // #d54b54 + --color-red-800: $--color-red-800$; // #a63a41 + --color-red-900: $--color-red-900$; // #883035 + --color-red-1000: $--color-red-1000$; // #6d272b + --color-red-1300: $--color-red-1300$; // #2d1012 + + // scarlet + --color-scarlet-50: $--color-scarlet-50$; // #fee6e6 + --color-scarlet-100: $--color-scarlet-100$; // #fdcece + --color-scarlet-200: $--color-scarlet-200$; // #fcb5b5 + --color-scarlet-300: $--color-scarlet-300$; // #fb9d9d + --color-scarlet-400: $--color-scarlet-400$; // #f96c6c + --color-scarlet-500: $--color-scarlet-500$; // #c50707 + --color-scarlet-600: $--color-scarlet-600$; // #ac0606 + --color-scarlet-700: $--color-scarlet-700$; // #8a0505 + --color-scarlet-800: $--color-scarlet-800$; // #6c0404 + --color-scarlet-900: $--color-scarlet-900$; // #4f0303 + + // yellow + --color-yellow-100: $--color-yellow-100$; // #fffbf6 + --color-yellow-200: $--color-yellow-200$; // #fef1e3 + --color-yellow-300: $--color-yellow-300$; // #fde8cf + --color-yellow-400: $--color-yellow-400$; // #fcdeb8 + --color-yellow-500: $--color-yellow-500$; // #fac980 + --color-yellow-600: $--color-yellow-600$; // #f9bd56 + --color-yellow-700: $--color-yellow-700$; // #ffc96b + --color-yellow-800: $--color-yellow-800$; // #ecaf44 + --color-yellow-900: $--color-yellow-900$; // #b97d13 + --color-yellow-1000: $--color-yellow-1000$; // #6f4b0b + --color-yellow-1300: $--color-yellow-1300$; // #382606 +} diff --git a/packages/mercury/src/tokens/_generated/_primitive-font-family.scss b/packages/mercury/src/tokens/_generated/_primitive-font-family.scss new file mode 100644 index 000000000..ef30dee05 --- /dev/null +++ b/packages/mercury/src/tokens/_generated/_primitive-font-family.scss @@ -0,0 +1,5 @@ +@mixin font-family() { + --font-family-body: $--font-family-body$; // Inter + --font-family-code: $--font-family-code$; // DM Mono + --font-family-header: $--font-family-header$; // Inter +} diff --git a/packages/mercury/src/tokens/_generated/_primitive-font-style.scss b/packages/mercury/src/tokens/_generated/_primitive-font-style.scss new file mode 100644 index 000000000..8670a0b6a --- /dev/null +++ b/packages/mercury/src/tokens/_generated/_primitive-font-style.scss @@ -0,0 +1,6 @@ +@mixin font-style() { + --font-style-bold: $--font-style-bold$; // Bold + --font-style-italic: $--font-style-italic$; // Italic + --font-style-regular: $--font-style-regular$; // Regular + --font-style-semi-bold: $--font-style-semi-bold$; // Semi Bold +} diff --git a/packages/mercury/src/tokens/_generated/_primitive-size.scss b/packages/mercury/src/tokens/_generated/_primitive-size.scss new file mode 100644 index 000000000..ea8168425 --- /dev/null +++ b/packages/mercury/src/tokens/_generated/_primitive-size.scss @@ -0,0 +1,29 @@ +@mixin size() { + --size-0: $--size-0$; // 0px + --size-1: $--size-1$; // 1px + --size-2: $--size-2$; // 2px + --size-4: $--size-4$; // 4px + --size-6: $--size-6$; // 6px + --size-8: $--size-8$; // 8px + --size-10: $--size-10$; // 10px + --size-11: $--size-11$; // 11px + --size-12: $--size-12$; // 12px + --size-14: $--size-14$; // 14px + --size-15: $--size-15$; // 15px + --size-16: $--size-16$; // 16px + --size-18: $--size-18$; // 18px + --size-20: $--size-20$; // 20px + --size-22: $--size-22$; // 22px + --size-24: $--size-24$; // 24px + --size-26: $--size-26$; // 26px + --size-28: $--size-28$; // 28px + --size-32: $--size-32$; // 32px + --size-40: $--size-40$; // 40px + --size-48: $--size-48$; // 48px + --size-56: $--size-56$; // 56px + --size-64: $--size-64$; // 64px + --size-72: $--size-72$; // 72px + --size-80: $--size-80$; // 80px + --size--1: $--size--1$; // -1px + --size--2: $--size--2$; // -2px +} diff --git a/packages/mercury/src/tokens/_generated/mercury-generated-definition.ts b/packages/mercury/src/tokens/_generated/mercury-generated-definition.ts new file mode 100644 index 000000000..e5db3b7d0 --- /dev/null +++ b/packages/mercury/src/tokens/_generated/mercury-generated-definition.ts @@ -0,0 +1,1256 @@ +export type MercuryMercuryPrimitiveColorToken = + | "var(--color-azure-50)" + | "var(--color-azure-100)" + | "var(--color-azure-200)" + | "var(--color-azure-300)" + | "var(--color-azure-400)" + | "var(--color-azure-500)" + | "var(--color-azure-600)" + | "var(--color-azure-700)" + | "var(--color-azure-750)" + | "var(--color-azure-800)" + | "var(--color-azure-900)" + | "var(--color-azure-1000)" + | "var(--color-chateau-50)" + | "var(--color-chateau-100)" + | "var(--color-chateau-200)" + | "var(--color-chateau-300)" + | "var(--color-chateau-400)" + | "var(--color-chateau-500)" + | "var(--color-chateau-600)" + | "var(--color-chateau-700)" + | "var(--color-chateau-800)" + | "var(--color-chateau-900)" + | "var(--color-ember-50)" + | "var(--color-ember-100)" + | "var(--color-ember-200)" + | "var(--color-ember-300)" + | "var(--color-ember-400)" + | "var(--color-ember-500)" + | "var(--color-ember-600)" + | "var(--color-ember-700)" + | "var(--color-ember-800)" + | "var(--color-ember-900)" + | "var(--color-gradient-berry)" + | "var(--color-gradient-magenta)" + | "var(--color-gradient-purple)" + | "var(--color-gradient-sky)" + | "var(--color-green-100)" + | "var(--color-green-200)" + | "var(--color-green-300)" + | "var(--color-green-400)" + | "var(--color-green-500)" + | "var(--color-green-600)" + | "var(--color-green-700)" + | "var(--color-green-800)" + | "var(--color-green-900)" + | "var(--color-green-1000)" + | "var(--color-green-1300)" + | "var(--color-lilac-50)" + | "var(--color-lilac-100)" + | "var(--color-lilac-200)" + | "var(--color-lilac-250)" + | "var(--color-lilac-300)" + | "var(--color-lilac-400)" + | "var(--color-lilac-500)" + | "var(--color-lilac-600)" + | "var(--color-lilac-700)" + | "var(--color-lilac-800)" + | "var(--color-lilac-900)" + | "var(--color-neutral-100)" + | "var(--color-neutral-200)" + | "var(--color-neutral-300)" + | "var(--color-neutral-400)" + | "var(--color-neutral-500)" + | "var(--color-neutral-600)" + | "var(--color-neutral-700)" + | "var(--color-neutral-800)" + | "var(--color-neutral-900)" + | "var(--color-neutral-1000)" + | "var(--color-neutral-1050)" + | "var(--color-neutral-1100)" + | "var(--color-neutral-1200)" + | "var(--color-neutral-1300)" + | "var(--color-neutral-1400)" + | "var(--color-neutral-1450)" + | "var(--color-neutral-1500)" + | "var(--color-neutral-1550)" + | "var(--color-neutral-1600)" + | "var(--color-neutral-1700)" + | "var(--color-neutral-1800)" + | "var(--color-neutral-000)" + | "var(--color-opacity-70)" + | "var(--color-primary-100)" + | "var(--color-primary-200)" + | "var(--color-primary-300)" + | "var(--color-primary-400)" + | "var(--color-primary-500)" + | "var(--color-primary-550)" + | "var(--color-primary-580)" + | "var(--color-primary-600)" + | "var(--color-primary-700)" + | "var(--color-primary-800)" + | "var(--color-primary-900)" + | "var(--color-primary-1000)" + | "var(--color-primary-1100)" + | "var(--color-primary-1300)" + | "var(--color-red-100)" + | "var(--color-red-200)" + | "var(--color-red-300)" + | "var(--color-red-400)" + | "var(--color-red-500)" + | "var(--color-red-600)" + | "var(--color-red-700)" + | "var(--color-red-800)" + | "var(--color-red-900)" + | "var(--color-red-1000)" + | "var(--color-red-1300)" + | "var(--color-scarlet-50)" + | "var(--color-scarlet-100)" + | "var(--color-scarlet-200)" + | "var(--color-scarlet-300)" + | "var(--color-scarlet-400)" + | "var(--color-scarlet-500)" + | "var(--color-scarlet-600)" + | "var(--color-scarlet-700)" + | "var(--color-scarlet-800)" + | "var(--color-scarlet-900)" + | "var(--color-yellow-100)" + | "var(--color-yellow-200)" + | "var(--color-yellow-300)" + | "var(--color-yellow-400)" + | "var(--color-yellow-500)" + | "var(--color-yellow-600)" + | "var(--color-yellow-700)" + | "var(--color-yellow-800)" + | "var(--color-yellow-900)" + | "var(--color-yellow-1000)" + | "var(--color-yellow-1300)"; + + export type MercuryGlobantPrimitiveColorToken = + | "var(--color-avocado-100)" + | "var(--color-avocado-200)" + | "var(--color-avocado-300)" + | "var(--color-avocado-400)" + | "var(--color-avocado-500)" + | "var(--color-avocado-600)" + | "var(--color-avocado-700)" + | "var(--color-avocado-800)" + | "var(--color-avocado-900)" + | "var(--color-avocado-1000)" + | "var(--color-avocado-1100)" + | "var(--color-avocado-1200)" + | "var(--color-avocado-1300)" + | "var(--color-extra-violet-600)" + | "var(--color-gradient-gaserage)" + | "var(--color-gradient-greenwood)" + | "var(--color-gradient-lemon)" + | "var(--color-gradient-mint)" + | "var(--color-green-100)" + | "var(--color-green-200)" + | "var(--color-green-300)" + | "var(--color-green-400)" + | "var(--color-green-500)" + | "var(--color-green-600)" + | "var(--color-green-700)" + | "var(--color-green-800)" + | "var(--color-green-900)" + | "var(--color-green-1000)" + | "var(--color-green-1300)" + | "var(--color-neutral-100)" + | "var(--color-neutral-200)" + | "var(--color-neutral-300)" + | "var(--color-neutral-350)" + | "var(--color-neutral-400)" + | "var(--color-neutral-500)" + | "var(--color-neutral-600)" + | "var(--color-neutral-700)" + | "var(--color-neutral-800)" + | "var(--color-neutral-900)" + | "var(--color-neutral-1000)" + | "var(--color-neutral-1050)" + | "var(--color-neutral-1100)" + | "var(--color-neutral-1200)" + | "var(--color-neutral-1300)" + | "var(--color-neutral-1400)" + | "var(--color-neutral-1450)" + | "var(--color-neutral-1500)" + | "var(--color-neutral-1550)" + | "var(--color-neutral-1600)" + | "var(--color-neutral-1700)" + | "var(--color-neutral-1800)" + | "var(--color-olive-100)" + | "var(--color-olive-200)" + | "var(--color-olive-300)" + | "var(--color-olive-400)" + | "var(--color-olive-500)" + | "var(--color-olive-600)" + | "var(--color-olive-700)" + | "var(--color-olive-800)" + | "var(--color-olive-900)" + | "var(--color-olive-1000)" + | "var(--color-olive-1100)" + | "var(--color-olive-1200)" + | "var(--color-olive-1300)" + | "var(--color-opacity-70)" + | "var(--color-primary-100)" + | "var(--color-primary-200)" + | "var(--color-primary-300)" + | "var(--color-primary-400)" + | "var(--color-primary-500)" + | "var(--color-primary-550)" + | "var(--color-primary-580)" + | "var(--color-primary-600)" + | "var(--color-primary-700)" + | "var(--color-primary-800)" + | "var(--color-primary-900)" + | "var(--color-primary-1000)" + | "var(--color-primary-1100)" + | "var(--color-primary-1200)" + | "var(--color-red-100)" + | "var(--color-red-200)" + | "var(--color-red-300)" + | "var(--color-red-400)" + | "var(--color-red-500)" + | "var(--color-red-600)" + | "var(--color-red-700)" + | "var(--color-red-800)" + | "var(--color-red-900)" + | "var(--color-red-1000)" + | "var(--color-red-1300)" + | "var(--color-yellow-100)" + | "var(--color-yellow-200)" + | "var(--color-yellow-300)" + | "var(--color-yellow-400)" + | "var(--color-yellow-500)" + | "var(--color-yellow-600)" + | "var(--color-yellow-700)" + | "var(--color-yellow-800)" + | "var(--color-yellow-900)" + | "var(--color-yellow-1000)" + | "var(--color-yellow-1300)"; + +export type MercurySizeToken = + | "var(--size-0)" + | "var(--size-1)" + | "var(--size-2)" + | "var(--size-4)" + | "var(--size-6)" + | "var(--size-8)" + | "var(--size-10)" + | "var(--size-11)" + | "var(--size-12)" + | "var(--size-14)" + | "var(--size-15)" + | "var(--size-16)" + | "var(--size-18)" + | "var(--size-20)" + | "var(--size-22)" + | "var(--size-24)" + | "var(--size-26)" + | "var(--size-28)" + | "var(--size-32)" + | "var(--size-40)" + | "var(--size-48)" + | "var(--size-56)" + | "var(--size-64)" + | "var(--size-72)" + | "var(--size-80)" + | "var(--size--1)" + | "var(--size--2)"; + +export type MercuryTokensDefinition = { + "primitive"?: { + "color"?: { + "mercury"?: { + "azure"?: { + "color-azure-50"?: string, + "color-azure-100"?: string, + "color-azure-200"?: string, + "color-azure-300"?: string, + "color-azure-400"?: string, + "color-azure-500"?: string, + "color-azure-600"?: string, + "color-azure-700"?: string, + "color-azure-750"?: string, + "color-azure-800"?: string, + "color-azure-900"?: string, + "color-azure-1000"?: string + }, + "chateau"?: { + "color-chateau-50"?: string, + "color-chateau-100"?: string, + "color-chateau-200"?: string, + "color-chateau-300"?: string, + "color-chateau-400"?: string, + "color-chateau-500"?: string, + "color-chateau-600"?: string, + "color-chateau-700"?: string, + "color-chateau-800"?: string, + "color-chateau-900"?: string + }, + "ember"?: { + "color-ember-50"?: string, + "color-ember-100"?: string, + "color-ember-200"?: string, + "color-ember-300"?: string, + "color-ember-400"?: string, + "color-ember-500"?: string, + "color-ember-600"?: string, + "color-ember-700"?: string, + "color-ember-800"?: string, + "color-ember-900"?: string + }, + "gradient"?: { + "color-gradient-berry"?: string, + "color-gradient-magenta"?: string, + "color-gradient-purple"?: string, + "color-gradient-sky"?: string + }, + "green"?: { + "color-green-100"?: string, + "color-green-200"?: string, + "color-green-300"?: string, + "color-green-400"?: string, + "color-green-500"?: string, + "color-green-600"?: string, + "color-green-700"?: string, + "color-green-800"?: string, + "color-green-900"?: string, + "color-green-1000"?: string, + "color-green-1300"?: string + }, + "lilac"?: { + "color-lilac-50"?: string, + "color-lilac-100"?: string, + "color-lilac-200"?: string, + "color-lilac-250"?: string, + "color-lilac-300"?: string, + "color-lilac-400"?: string, + "color-lilac-500"?: string, + "color-lilac-600"?: string, + "color-lilac-700"?: string, + "color-lilac-800"?: string, + "color-lilac-900"?: string + }, + "neutral"?: { + "color-neutral-100"?: string, + "color-neutral-200"?: string, + "color-neutral-300"?: string, + "color-neutral-400"?: string, + "color-neutral-500"?: string, + "color-neutral-600"?: string, + "color-neutral-700"?: string, + "color-neutral-800"?: string, + "color-neutral-900"?: string, + "color-neutral-1000"?: string, + "color-neutral-1050"?: string, + "color-neutral-1100"?: string, + "color-neutral-1200"?: string, + "color-neutral-1300"?: string, + "color-neutral-1400"?: string, + "color-neutral-1450"?: string, + "color-neutral-1500"?: string, + "color-neutral-1550"?: string, + "color-neutral-1600"?: string, + "color-neutral-1700"?: string, + "color-neutral-1800"?: string, + "color-neutral-000"?: string + }, + "opacity"?: { + "color-opacity-70"?: string + }, + "primary"?: { + "color-primary-100"?: string, + "color-primary-200"?: string, + "color-primary-300"?: string, + "color-primary-400"?: string, + "color-primary-500"?: string, + "color-primary-550"?: string, + "color-primary-580"?: string, + "color-primary-600"?: string, + "color-primary-700"?: string, + "color-primary-800"?: string, + "color-primary-900"?: string, + "color-primary-1000"?: string, + "color-primary-1100"?: string, + "color-primary-1300"?: string + }, + "red"?: { + "color-red-100"?: string, + "color-red-200"?: string, + "color-red-300"?: string, + "color-red-400"?: string, + "color-red-500"?: string, + "color-red-600"?: string, + "color-red-700"?: string, + "color-red-800"?: string, + "color-red-900"?: string, + "color-red-1000"?: string, + "color-red-1300"?: string + }, + "scarlet"?: { + "color-scarlet-50"?: string, + "color-scarlet-100"?: string, + "color-scarlet-200"?: string, + "color-scarlet-300"?: string, + "color-scarlet-400"?: string, + "color-scarlet-500"?: string, + "color-scarlet-600"?: string, + "color-scarlet-700"?: string, + "color-scarlet-800"?: string, + "color-scarlet-900"?: string + }, + "yellow"?: { + "color-yellow-100"?: string, + "color-yellow-200"?: string, + "color-yellow-300"?: string, + "color-yellow-400"?: string, + "color-yellow-500"?: string, + "color-yellow-600"?: string, + "color-yellow-700"?: string, + "color-yellow-800"?: string, + "color-yellow-900"?: string, + "color-yellow-1000"?: string, + "color-yellow-1300"?: string + } + }, + "globant"?: { + "avocado"?: { + "color-avocado-100"?: string, + "color-avocado-200"?: string, + "color-avocado-300"?: string, + "color-avocado-400"?: string, + "color-avocado-500"?: string, + "color-avocado-600"?: string, + "color-avocado-700"?: string, + "color-avocado-800"?: string, + "color-avocado-900"?: string, + "color-avocado-1000"?: string, + "color-avocado-1100"?: string, + "color-avocado-1200"?: string, + "color-avocado-1300"?: string + }, + "extra"?: { + "color-extra-violet-600"?: string + }, + "gradient"?: { + "color-gradient-gaserage"?: string, + "color-gradient-greenwood"?: string, + "color-gradient-lemon"?: string, + "color-gradient-mint"?: string + }, + "green"?: { + "color-green-100"?: string, + "color-green-200"?: string, + "color-green-300"?: string, + "color-green-400"?: string, + "color-green-500"?: string, + "color-green-600"?: string, + "color-green-700"?: string, + "color-green-800"?: string, + "color-green-900"?: string, + "color-green-1000"?: string, + "color-green-1300"?: string + }, + "neutral"?: { + "color-neutral-100"?: string, + "color-neutral-200"?: string, + "color-neutral-300"?: string, + "color-neutral-350"?: string, + "color-neutral-400"?: string, + "color-neutral-500"?: string, + "color-neutral-600"?: string, + "color-neutral-700"?: string, + "color-neutral-800"?: string, + "color-neutral-900"?: string, + "color-neutral-1000"?: string, + "color-neutral-1050"?: string, + "color-neutral-1100"?: string, + "color-neutral-1200"?: string, + "color-neutral-1300"?: string, + "color-neutral-1400"?: string, + "color-neutral-1450"?: string, + "color-neutral-1500"?: string, + "color-neutral-1550"?: string, + "color-neutral-1600"?: string, + "color-neutral-1700"?: string, + "color-neutral-1800"?: string + }, + "olive"?: { + "color-olive-100"?: string, + "color-olive-200"?: string, + "color-olive-300"?: string, + "color-olive-400"?: string, + "color-olive-500"?: string, + "color-olive-600"?: string, + "color-olive-700"?: string, + "color-olive-800"?: string, + "color-olive-900"?: string, + "color-olive-1000"?: string, + "color-olive-1100"?: string, + "color-olive-1200"?: string, + "color-olive-1300"?: string + }, + "opacity"?: { + "color-opacity-70"?: string + }, + "primary"?: { + "color-primary-100"?: string, + "color-primary-200"?: string, + "color-primary-300"?: string, + "color-primary-400"?: string, + "color-primary-500"?: string, + "color-primary-550"?: string, + "color-primary-580"?: string, + "color-primary-600"?: string, + "color-primary-700"?: string, + "color-primary-800"?: string, + "color-primary-900"?: string, + "color-primary-1000"?: string, + "color-primary-1100"?: string, + "color-primary-1200"?: string + }, + "red"?: { + "color-red-100"?: string, + "color-red-200"?: string, + "color-red-300"?: string, + "color-red-400"?: string, + "color-red-500"?: string, + "color-red-600"?: string, + "color-red-700"?: string, + "color-red-800"?: string, + "color-red-900"?: string, + "color-red-1000"?: string, + "color-red-1300"?: string + }, + "yellow"?: { + "color-yellow-100"?: string, + "color-yellow-200"?: string, + "color-yellow-300"?: string, + "color-yellow-400"?: string, + "color-yellow-500"?: string, + "color-yellow-600"?: string, + "color-yellow-700"?: string, + "color-yellow-800"?: string, + "color-yellow-900"?: string, + "color-yellow-1000"?: string, + "color-yellow-1300"?: string + } + } + }, + "font-family"?: { + "font-family-body"?: string, + "font-family-code"?: string, + "font-family-header"?: string + }, + "font-style"?: { + "font-style-bold"?: string, + "font-style-italic"?: string, + "font-style-regular"?: string, + "font-style-semi-bold"?: string + }, + "size"?: { + "size-0"?: number, + "size-1"?: number, + "size-2"?: number, + "size-4"?: number, + "size-6"?: number, + "size-8"?: number, + "size-10"?: number, + "size-11"?: number, + "size-12"?: number, + "size-14"?: number, + "size-15"?: number, + "size-16"?: number, + "size-18"?: number, + "size-20"?: number, + "size-22"?: number, + "size-24"?: number, + "size-26"?: number, + "size-28"?: number, + "size-32"?: number, + "size-40"?: number, + "size-48"?: number, + "size-56"?: number, + "size-64"?: number, + "size-72"?: number, + "size-80"?: number, + "size--1"?: number, + "size--2"?: number + } + }, + "semantic"?: { + "color"?: { + "mercury"?: { + "light"?: { + "accent"?: { + "color-accent-backdrop-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-branding-surface"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-error-contrast"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-error-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-error-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-error-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-error-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-error-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-gradient-01-end"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-gradient-01-start"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-gradient-02-end"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-gradient-02-start"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-item-active"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-item-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-item-selected"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-black"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-contrast"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-disabled"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-on-surface"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-white"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-contrast"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-focused"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-on-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-on-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-on-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-semantic-error"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-semantic-info"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-semantic-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-semantic-success"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-semantic-warning"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-shadow-shadow"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-success-contrast"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-success-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-success-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-success-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-success-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-success-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-01"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-02"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-03"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-answer"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-surface-surface"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-warning-contrast"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-warning-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-warning-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-warning-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-warning-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-warning-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}) + }, + "border"?: { + "color-border-branding-surface"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-error-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-error-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-error-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-error-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-error-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-error-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-item-active"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-item-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-item-selected"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-black"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-disabled"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-on-border"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-white"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-focused"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-on_default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-on_hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-on_pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-success-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-success-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-success-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-success-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-success-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-success-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-surface-on-elevation-01"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-surface-on-elevation-02"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-surface-on-elevation-03"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-warning-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-warning-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-warning-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-warning-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-warning-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-warning-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}) + }, + "component"?: { + "color-component-chat-01-end"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-component-chat-01-middle"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-component-chat-01-start"?: MercuryMercuryPrimitiveColorToken | (string & {}) + }, + "icon"?: { + "color-icon-neutral-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-disabled"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-on-disabled"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-on-icon"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-white"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-primary-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-primary-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-primary-on_default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-primary-on_hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-primary-on_pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-primary-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-semantic-error"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-semantic-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-semantic-success"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-semantic-warning"?: MercuryMercuryPrimitiveColorToken | (string & {}) + }, + "text"?: { + "color-text-branding-surface"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-disabled"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-on-disabled"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-on-text"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-white"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-primary-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-primary-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-primary-on_default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-primary-on_hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-primary-on_pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-primary-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-semantic-error"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-semantic-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-semantic-success"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-semantic-warning"?: MercuryMercuryPrimitiveColorToken | (string & {}) + } + }, + "dark"?: { + "accent"?: { + "color-accent-backdrop-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-branding-surface"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-error-contrast"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-error-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-error-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-error-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-error-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-error-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-gradient-01-end"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-gradient-01-start"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-gradient-02-end"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-gradient-02-start"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-item-active"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-item-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-item-selected"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-black"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-contrast"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-disabled"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-on-surface"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-neutral-white"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-contrast"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-focused"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-on-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-on-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-on-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-primary-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-semantic-error"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-semantic-info"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-semantic-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-semantic-success"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-semantic-warning"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-shadow-shadow"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-success-contrast"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-success-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-success-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-success-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-success-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-success-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-01"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-02"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-03"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-answer"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-surface-surface"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-warning-contrast"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-warning-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-warning-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-warning-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-warning-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-accent-warning-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}) + }, + "border"?: { + "color-border-branding-surface"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-error-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-error-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-error-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-error-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-error-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-error-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-item-active"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-item-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-item-selected"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-black"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-disabled"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-on-border"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-neutral-white"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-focused"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-on_default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-on_hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-on_pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-primary-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-success-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-success-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-success-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-success-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-success-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-success-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-surface-on-elevation-01"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-surface-on-elevation-02"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-surface-on-elevation-03"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-warning-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-warning-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-warning-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-warning-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-warning-lighter"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-border-warning-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}) + }, + "component"?: { + "color-component-chat-01-end"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-component-chat-01-middle"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-component-chat-01-start"?: MercuryMercuryPrimitiveColorToken | (string & {}) + }, + "icon"?: { + "color-icon-neutral-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-disabled"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-on-disabled"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-on-icon"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-neutral-white"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-primary-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-primary-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-primary-on_default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-primary-on_hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-primary-on_pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-primary-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-semantic-error"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-semantic-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-semantic-success"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-icon-semantic-warning"?: MercuryMercuryPrimitiveColorToken | (string & {}) + }, + "text"?: { + "color-text-branding-surface"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-dark"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-disabled"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-light"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-on-disabled"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-on-text"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-neutral-white"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-primary-default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-primary-hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-primary-on_default"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-primary-on_hover"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-primary-on_pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-primary-pressed"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-semantic-error"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-semantic-neutral"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-semantic-success"?: MercuryMercuryPrimitiveColorToken | (string & {}), + "color-text-semantic-warning"?: MercuryMercuryPrimitiveColorToken | (string & {}) + } + } + }, + "globant"?: { + "light"?: { + "accent"?: { + "color-accent-backdrop-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-branding-surface"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-error-contrast"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-error-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-error-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-error-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-error-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-error-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-gradient-01-end"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-gradient-01-start"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-gradient-02-end"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-gradient-02-start"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-item-active"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-item-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-item-selected"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-black"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-contrast"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-disabled"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-on-surface"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-white"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-contrast"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-focused"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-on-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-on-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-on-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-semantic-error"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-semantic-info"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-semantic-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-semantic-success"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-semantic-warning"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-shadow-shadow"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-success-contrast"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-success-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-success-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-success-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-success-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-success-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-01"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-02"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-03"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-answer"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-surface-surface"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-warning-contrast"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-warning-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-warning-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-warning-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-warning-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-warning-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}) + }, + "border"?: { + "color-border-branding-surface"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-error-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-error-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-error-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-error-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-error-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-error-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-item-active"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-item-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-item-selected"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-black"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-disabled"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-on-border"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-white"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-focused"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-on_default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-on_hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-on_pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-success-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-success-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-success-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-success-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-success-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-success-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-surface-on-elevation-01"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-surface-on-elevation-02"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-surface-on-elevation-03"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-warning-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-warning-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-warning-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-warning-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-warning-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-warning-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}) + }, + "component"?: { + "color-component-chat-01-end"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-component-chat-01-middle"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-component-chat-01-start"?: MercuryGlobantPrimitiveColorToken | (string & {}) + }, + "icon"?: { + "color-icon-neutral-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-disabled"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-on-disabled"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-on-icon"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-white"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-primary-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-primary-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-primary-on_default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-primary-on_hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-primary-on_pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-primary-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-semantic-error"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-semantic-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-semantic-success"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-semantic-warning"?: MercuryGlobantPrimitiveColorToken | (string & {}) + }, + "text"?: { + "color-text-branding-surface"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-disabled"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-on-disabled"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-on-text"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-white"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-primary-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-primary-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-primary-on_default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-primary-on_hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-primary-on_pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-primary-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-semantic-error"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-semantic-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-semantic-success"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-semantic-warning"?: MercuryGlobantPrimitiveColorToken | (string & {}) + } + }, + "dark"?: { + "accent"?: { + "color-accent-backdrop-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-branding-surface"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-error-contrast"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-error-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-error-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-error-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-error-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-error-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-gradient-01-end"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-gradient-01-start"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-gradient-02-end"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-gradient-02-start"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-item-active"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-item-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-item-selected"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-black"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-contrast"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-disabled"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-on-surface"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-neutral-white"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-contrast"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-focused"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-on-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-on-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-on-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-primary-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-semantic-error"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-semantic-info"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-semantic-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-semantic-success"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-semantic-warning"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-shadow-shadow"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-success-contrast"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-success-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-success-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-success-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-success-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-success-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-01"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-02"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-03"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-surface-elevation-answer"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-surface-surface"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-warning-contrast"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-warning-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-warning-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-warning-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-warning-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-accent-warning-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}) + }, + "border"?: { + "color-border-branding-surface"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-error-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-error-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-error-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-error-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-error-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-error-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-item-active"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-item-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-item-selected"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-black"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-disabled"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-on-border"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-neutral-white"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-focused"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-on_default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-on_hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-on_pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-primary-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-success-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-success-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-success-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-success-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-success-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-success-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-surface-on-elevation-01"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-surface-on-elevation-02"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-surface-on-elevation-03"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-warning-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-warning-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-warning-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-warning-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-warning-lighter"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-border-warning-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}) + }, + "component"?: { + "color-component-chat-01-end"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-component-chat-01-middle"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-component-chat-01-start"?: MercuryGlobantPrimitiveColorToken | (string & {}) + }, + "icon"?: { + "color-icon-neutral-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-disabled"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-on-disabled"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-on-icon"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-neutral-white"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-primary-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-primary-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-primary-on_default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-primary-on_hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-primary-on_pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-primary-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-semantic-error"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-semantic-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-semantic-success"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-icon-semantic-warning"?: MercuryGlobantPrimitiveColorToken | (string & {}) + }, + "text"?: { + "color-text-branding-surface"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-dark"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-disabled"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-light"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-on-disabled"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-on-text"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-neutral-white"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-primary-default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-primary-hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-primary-on_default"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-primary-on_hover"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-primary-on_pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-primary-pressed"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-semantic-error"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-semantic-neutral"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-semantic-success"?: MercuryGlobantPrimitiveColorToken | (string & {}), + "color-text-semantic-warning"?: MercuryGlobantPrimitiveColorToken | (string & {}) + } + } + } + }, + "font-size"?: { + "body"?: { + "font-size-body-l"?: MercurySizeToken | (string & {}), + "font-size-body-m"?: MercurySizeToken | (string & {}), + "font-size-body-s"?: MercurySizeToken | (string & {}), + "font-size-body-xl"?: MercurySizeToken | (string & {}), + "font-size-body-xs"?: MercurySizeToken | (string & {}) + }, + "caption"?: { + "font-size-caption-l"?: MercurySizeToken | (string & {}), + "font-size-caption-m"?: MercurySizeToken | (string & {}), + "font-size-caption-s"?: MercurySizeToken | (string & {}) + }, + "header"?: { + "font-size-header-h1"?: MercurySizeToken | (string & {}), + "font-size-header-h2"?: MercurySizeToken | (string & {}), + "font-size-header-h3"?: MercurySizeToken | (string & {}), + "font-size-header-h4"?: MercurySizeToken | (string & {}), + "font-size-header-h5"?: MercurySizeToken | (string & {}), + "font-size-header-h6"?: MercurySizeToken | (string & {}) + }, + "subtitle"?: { + "font-size-subtitle-l"?: MercurySizeToken | (string & {}), + "font-size-subtitle-m"?: MercurySizeToken | (string & {}), + "font-size-subtitle-s"?: MercurySizeToken | (string & {}), + "font-size-subtitle-xl"?: MercurySizeToken | (string & {}), + "font-size-subtitle-xs"?: MercurySizeToken | (string & {}) + } + } + } +}; diff --git a/packages/mercury/src/tokens/_generated/mercury-generated-plain-tokens.ts b/packages/mercury/src/tokens/_generated/mercury-generated-plain-tokens.ts new file mode 100644 index 000000000..84cb0281a --- /dev/null +++ b/packages/mercury/src/tokens/_generated/mercury-generated-plain-tokens.ts @@ -0,0 +1,10 @@ +export const mercuryPlainTokens: { + [key in "general" | "globant" | "mercury"]: Record; +} & { + colorScheme: { + light: { [key in "globant" | "mercury"]: Record }; + dark: { [key in "globant" | "mercury"]: Record }; + }; +} = JSON.parse( + `{"general":{"--font-style-bold":700,"--font-style-italic":"Italic","--font-style-regular":400,"--font-style-semi-bold":600,"--font-family-body":"'Inter'","--font-family-code":"'DM Mono'","--font-family-header":"'Inter'","--size-0":"0px","--size-1":"1px","--size-2":"2px","--size-4":"4px","--size-6":"6px","--size-8":"8px","--size-10":"10px","--size-11":"11px","--size-12":"12px","--size-14":"14px","--size-15":"15px","--size-16":"16px","--size-18":"18px","--size-20":"20px","--size-22":"22px","--size-24":"24px","--size-26":"26px","--size-28":"28px","--size-32":"32px","--size-40":"40px","--size-48":"48px","--size-56":"56px","--size-64":"64px","--size-72":"72px","--size-80":"80px","--size--1":"-1px","--size--2":"-2px","--font-size-body-l":"var(--size-16)","--font-size-body-m":"var(--size-14)","--font-size-body-s":"var(--size-12)","--font-size-body-xl":"var(--size-18)","--font-size-body-xs":"var(--size-11)","--font-size-caption-l":"var(--size-11)","--font-size-caption-m":"var(--size-10)","--font-size-caption-s":"var(--size-8)","--font-size-header-h1":"var(--size-40)","--font-size-header-h2":"var(--size-32)","--font-size-header-h3":"var(--size-28)","--font-size-header-h4":"var(--size-24)","--font-size-header-h5":"var(--size-20)","--font-size-header-h6":"var(--size-18)","--font-size-subtitle-l":"var(--size-18)","--font-size-subtitle-m":"var(--size-16)","--font-size-subtitle-s":"var(--size-15)","--font-size-subtitle-xl":"var(--size-20)","--font-size-subtitle-xs":"var(--size-14)"},"globant":{"--color-avocado-100":"#f6f7ec","--color-avocado-200":"#e7e9c8","--color-avocado-300":"#d8dfa3","--color-avocado-400":"#c7d67b","--color-avocado-500":"#b4d050","--color-avocado-600":"#88af1d","--color-avocado-700":"#749519","--color-avocado-800":"#617920","--color-avocado-900":"#53681d","--color-avocado-1000":"#455519","--color-avocado-1100":"#333f13","--color-avocado-1200":"#232a0e","--color-avocado-1300":"#131708","--color-extra-violet-600":"#9a00fa","--color-gradient-gaserage":"#c0fb73","--color-gradient-greenwood":"#d9e021","--color-gradient-lemon":"#8cc63f","--color-gradient-mint":"#38efa0","--color-green-100":"#eef5f4","--color-green-200":"#ddebe9","--color-green-300":"#cae0dd","--color-green-400":"#b4d5d0","--color-green-500":"#9cc9c2","--color-green-600":"#3fa89b","--color-green-700":"#389287","--color-green-800":"#318278","--color-green-900":"#286a62","--color-green-1000":"#1c4b45","--color-green-1300":"#112d29","--color-neutral-100":"#ffffff","--color-neutral-200":"#fafafa","--color-neutral-300":"#f5f5f5","--color-neutral-350":"#f0f0f0","--color-neutral-400":"#ededed","--color-neutral-500":"#e5e5e5","--color-neutral-600":"#d6d6d6","--color-neutral-700":"#cccccc","--color-neutral-800":"#bdbdbd","--color-neutral-900":"#a9a9a9","--color-neutral-1000":"#8c8c8c","--color-neutral-1050":"#6b6b6b","--color-neutral-1100":"#686868","--color-neutral-1200":"#575757","--color-neutral-1300":"#464646","--color-neutral-1400":"#3b3b3b","--color-neutral-1450":"#373737","--color-neutral-1500":"#303030","--color-neutral-1550":"#262626","--color-neutral-1600":"#212121","--color-neutral-1700":"#171717","--color-neutral-1800":"#000000","--color-olive-100":"#fcfcf2","--color-olive-200":"#f2f3c9","--color-olive-300":"#e8ed9f","--color-olive-400":"#dee873","--color-olive-500":"#d2e546","--color-olive-600":"#c3e01a","--color-olive-700":"#a8c118","--color-olive-800":"#8ea216","--color-olive-900":"#7c8e15","--color-olive-1000":"#647213","--color-olive-1100":"#4d580e","--color-olive-1200":"#3a420b","--color-olive-1300":"#262b08","--color-opacity-70":"#171717","--color-primary-100":"#f9fbf2","--color-primary-200":"#f5f8e8","--color-primary-300":"#eaf1ce","--color-primary-400":"#deeab0","--color-primary-500":"#d2e38c","--color-primary-550":"#cfe184","--color-primary-580":"#c6d572","--color-primary-600":"#bfd732","--color-primary-700":"#b4cc28","--color-primary-800":"#a3b72b","--color-primary-900":"#8d9f25","--color-primary-1000":"#515c15","--color-primary-1100":"#2e340a","--color-primary-1200":"#262b08","--color-red-100":"#fcf4f4","--color-red-200":"#f8dfe0","--color-red-300":"#f4cdcf","--color-red-400":"#eda4a7","--color-red-500":"#e98b8f","--color-red-600":"#e35861","--color-red-700":"#d54b54","--color-red-800":"#a63a41","--color-red-900":"#883035","--color-red-1000":"#6d272b","--color-red-1300":"#2d1012","--color-yellow-100":"#fffbf6","--color-yellow-200":"#fef1e3","--color-yellow-300":"#fde8cf","--color-yellow-400":"#fcdeb8","--color-yellow-500":"#fac980","--color-yellow-600":"#f9bd56","--color-yellow-700":"#ffc96b","--color-yellow-800":"#ecaf44","--color-yellow-900":"#b97d13","--color-yellow-1000":"#6f4b0b","--color-yellow-1300":"#382606"},"mercury":{"--color-azure-50":"#eaf3fe","--color-azure-100":"#e1eefe","--color-azure-200":"#c6dffd","--color-azure-300":"#9cc8fc","--color-azure-400":"#3791fb","--color-azure-500":"#0a7cff","--color-azure-600":"#0072f8","--color-azure-700":"#0049cd","--color-azure-750":"#1f52ae","--color-azure-800":"#0034b1","--color-azure-900":"#002da8","--color-azure-1000":"#173d82","--color-chateau-50":"#e0f6e7","--color-chateau-100":"#b9eaca","--color-chateau-200":"#92dead","--color-chateau-300":"#72d495","--color-chateau-400":"#4fca7a","--color-chateau-500":"#35b061","--color-chateau-600":"#2d9552","--color-chateau-700":"#247541","--color-chateau-800":"#1c5e34","--color-chateau-900":"#154627","--color-ember-50":"#fffbeb","--color-ember-100":"#fff9e0","--color-ember-200":"#ffeda3","--color-ember-300":"#ffe370","--color-ember-400":"#ffdd52","--color-ember-500":"#ffcd00","--color-ember-600":"#cca400","--color-ember-700":"#997b00","--color-ember-800":"#665200","--color-ember-900":"#3d3100","--color-gradient-berry":"#0095ff","--color-gradient-magenta":"#ff00ff","--color-gradient-purple":"#a300ff","--color-gradient-sky":"#00ccff","--color-green-100":"#eef5f4","--color-green-200":"#ddebe9","--color-green-300":"#cae0dd","--color-green-400":"#b4d5d0","--color-green-500":"#9cc9c2","--color-green-600":"#3fa89b","--color-green-700":"#389287","--color-green-800":"#318278","--color-green-900":"#286a62","--color-green-1000":"#1c4b45","--color-green-1300":"#112d29","--color-lilac-50":"#f9fafa","--color-lilac-100":"#f8f9fc","--color-lilac-200":"#edf0f8","--color-lilac-250":"#e2e7f4","--color-lilac-300":"#dee1ed","--color-lilac-400":"#d5daeb","--color-lilac-500":"#c8d0e9","--color-lilac-600":"#c2cbe6","--color-lilac-700":"#bcc5e4","--color-lilac-800":"#b7c2e2","--color-lilac-900":"#9babd9","--color-neutral-100":"#fafbfd","--color-neutral-200":"#f0f4fa","--color-neutral-300":"#e1ecf9","--color-neutral-400":"#d2ddeb","--color-neutral-500":"#c0ccd9","--color-neutral-600":"#aeb9c6","--color-neutral-700":"#9da9b6","--color-neutral-800":"#828b96","--color-neutral-900":"#56677a","--color-neutral-1000":"#4a5870","--color-neutral-1050":"#405975","--color-neutral-1100":"#485665","--color-neutral-1200":"#394552","--color-neutral-1300":"#333d47","--color-neutral-1400":"#2d3a48","--color-neutral-1450":"#243750","--color-neutral-1500":"#242d3c","--color-neutral-1550":"#17273b","--color-neutral-1600":"#181f2a","--color-neutral-1700":"#11151c","--color-neutral-1800":"#000000","--color-neutral-000":"#ffffff","--color-opacity-70":"rgba(17, 21, 28, 0.7)","--color-primary-100":"#f4f8ff","--color-primary-200":"#ebf0ff","--color-primary-300":"#cee0ff","--color-primary-400":"#b0cfff","--color-primary-500":"#8cbcff","--color-primary-550":"#75aef0","--color-primary-580":"#729fd5","--color-primary-600":"#5ba7ff","--color-primary-700":"#5498e8","--color-primary-800":"#437dc0","--color-primary-900":"#335884","--color-primary-1000":"#294b72","--color-primary-1100":"#005ac1","--color-primary-1300":"#101e2d","--color-red-100":"#fcf4f4","--color-red-200":"#f8dfe0","--color-red-300":"#f4cdcf","--color-red-400":"#eda4a7","--color-red-500":"#e98b8f","--color-red-600":"#e35861","--color-red-700":"#d54b54","--color-red-800":"#a63a41","--color-red-900":"#883035","--color-red-1000":"#6d272b","--color-red-1300":"#2d1012","--color-scarlet-50":"#fee6e6","--color-scarlet-100":"#fdcece","--color-scarlet-200":"#fcb5b5","--color-scarlet-300":"#fb9d9d","--color-scarlet-400":"#f96c6c","--color-scarlet-500":"#c50707","--color-scarlet-600":"#ac0606","--color-scarlet-700":"#8a0505","--color-scarlet-800":"#6c0404","--color-scarlet-900":"#4f0303","--color-yellow-100":"#fffbf6","--color-yellow-200":"#fef1e3","--color-yellow-300":"#fde8cf","--color-yellow-400":"#fcdeb8","--color-yellow-500":"#fac980","--color-yellow-600":"#f9bd56","--color-yellow-700":"#ffc96b","--color-yellow-800":"#ecaf44","--color-yellow-900":"#b97d13","--color-yellow-1000":"#6f4b0b","--color-yellow-1300":"#382606"},"colorScheme":{"dark":{"globant":{"--color-accent-backdrop-default":"var(--rgba(23, 23, 23, 0-7))","--color-accent-branding-surface":"var(--color-neutral-100)","--color-accent-error-contrast":"var(--color-red-1300)","--color-accent-error-default":"var(--color-red-600)","--color-accent-error-hover":"var(--color-red-800)","--color-accent-error-light":"var(--color-red-500)","--color-accent-error-lighter":"var(--color-red-300)","--color-accent-error-pressed":"var(--color-red-1000)","--color-accent-gradient-01-end":"var(--color-gradient-lemon)","--color-accent-gradient-01-start":"var(--color-gradient-greenwood)","--color-accent-gradient-02-end":"var(--color-gradient-mint)","--color-accent-gradient-02-start":"var(--color-gradient-gaserage)","--color-accent-item-active":"var(--color-olive-1100)","--color-accent-item-hover":"var(--color-olive-1000)","--color-accent-item-selected":"var(--color-olive-1100)","--color-accent-neutral-black":"var(--color-neutral-1300)","--color-accent-neutral-contrast":"var(--color-neutral-1550)","--color-accent-neutral-default":"var(--color-neutral-900)","--color-accent-neutral-disabled":"var(--color-neutral-1300)","--color-accent-neutral-hover":"var(--color-neutral-300)","--color-accent-neutral-light":"var(--color-neutral-400)","--color-accent-neutral-neutral":"var(--color-neutral-600)","--color-accent-neutral-on-surface":"var(--color-neutral-100)","--color-accent-neutral-pressed":"var(--color-neutral-600)","--color-accent-neutral-white":"var(--color-neutral-100)","--color-accent-primary-contrast":"var(--color-olive-1300)","--color-accent-primary-dark":"var(--color-olive-1100)","--color-accent-primary-default":"var(--color-olive-600)","--color-accent-primary-focused":"var(--color-extra-violet-600)","--color-accent-primary-hover":"var(--color-olive-1000)","--color-accent-primary-light":"var(--color-olive-300)","--color-accent-primary-lighter":"var(--color-olive-200)","--color-accent-primary-on-default":"var(--color-olive-600)","--color-accent-primary-on-hover":"var(--color-olive-200)","--color-accent-primary-on-pressed":"var(--color-neutral-300)","--color-accent-primary-pressed":"var(--color-olive-1100)","--color-accent-semantic-error":"var(--color-red-600)","--color-accent-semantic-info":"var(--color-primary-600)","--color-accent-semantic-neutral":"var(--color-neutral-800)","--color-accent-semantic-success":"var(--color-green-600)","--color-accent-semantic-warning":"var(--color-yellow-600)","--color-accent-shadow-shadow":"var(--rgba(0, 0, 0, 0-2))","--color-accent-success-contrast":"var(--color-green-1300)","--color-accent-success-default":"var(--color-green-600)","--color-accent-success-hover":"var(--color-green-800)","--color-accent-success-light":"var(--color-green-500)","--color-accent-success-lighter":"var(--color-green-300)","--color-accent-success-pressed":"var(--color-green-1000)","--color-accent-surface-elevation-01":"var(--color-neutral-1600)","--color-accent-surface-elevation-02":"var(--color-neutral-1500)","--color-accent-surface-elevation-03":"var(--color-neutral-1300)","--color-accent-surface-elevation-answer":"var(--color-neutral-1450)","--color-accent-surface-surface":"var(--color-neutral-1700)","--color-accent-warning-contrast":"var(--color-yellow-1300)","--color-accent-warning-default":"var(--color-yellow-600)","--color-accent-warning-hover":"var(--color-yellow-900)","--color-accent-warning-light":"var(--color-yellow-400)","--color-accent-warning-lighter":"var(--color-yellow-300)","--color-accent-warning-pressed":"var(--color-yellow-1000)","--color-border-branding-surface":"var(--color-neutral-1700)","--color-border-error-dark":"var(--color-red-1300)","--color-border-error-default":"var(--color-red-600)","--color-border-error-hover":"var(--color-red-700)","--color-border-error-light":"var(--color-red-500)","--color-border-error-lighter":"var(--color-red-300)","--color-border-error-pressed":"var(--color-red-900)","--color-border-item-active":"var(--color-olive-900)","--color-border-item-hover":"var(--color-olive-700)","--color-border-item-selected":"var(--color-olive-900)","--color-border-neutral-black":"var(--color-neutral-1300)","--color-border-neutral-default":"var(--color-neutral-900)","--color-border-neutral-disabled":"var(--color-neutral-1050)","--color-border-neutral-hover":"var(--color-neutral-100)","--color-border-neutral-light":"var(--color-neutral-400)","--color-border-neutral-neutral":"var(--color-neutral-600)","--color-border-neutral-on-border":"var(--color-neutral-100)","--color-border-neutral-pressed":"var(--color-neutral-400)","--color-border-neutral-white":"var(--color-neutral-100)","--color-border-primary-dark":"var(--color-olive-1100)","--color-border-primary-default":"var(--color-olive-500)","--color-border-primary-focused":"var(--color-extra-violet-600)","--color-border-primary-hover":"var(--color-olive-700)","--color-border-primary-light":"var(--color-olive-300)","--color-border-primary-lighter":"var(--color-olive-200)","--color-border-primary-on_default":"var(--color-olive-600)","--color-border-primary-on_hover":"var(--color-olive-200)","--color-border-primary-on_pressed":"var(--color-neutral-300)","--color-border-primary-pressed":"var(--color-olive-900)","--color-border-success-dark":"var(--color-green-1300)","--color-border-success-default":"var(--color-green-600)","--color-border-success-hover":"var(--color-green-800)","--color-border-success-light":"var(--color-green-500)","--color-border-success-lighter":"var(--color-green-300)","--color-border-success-pressed":"var(--color-green-1000)","--color-border-surface-on-elevation-01":"var(--color-neutral-1300)","--color-border-surface-on-elevation-02":"var(--color-neutral-1100)","--color-border-surface-on-elevation-03":"var(--color-neutral-900)","--color-border-warning-dark":"var(--color-yellow-1300)","--color-border-warning-default":"var(--color-yellow-500)","--color-border-warning-hover":"var(--color-yellow-800)","--color-border-warning-light":"var(--color-yellow-400)","--color-border-warning-lighter":"var(--color-yellow-300)","--color-border-warning-pressed":"var(--color-yellow-900)","--color-component-chat-01-end":"var(--color-gradient-greenwood)","--color-component-chat-01-middle":"var(--color-gradient-mint)","--color-component-chat-01-start":"var(--color-gradient-gaserage)","--color-icon-neutral-dark":"var(--color-neutral-1700)","--color-icon-neutral-default":"var(--color-neutral-400)","--color-icon-neutral-disabled":"var(--color-neutral-1050)","--color-icon-neutral-hover":"var(--color-neutral-300)","--color-icon-neutral-light":"var(--color-neutral-400)","--color-icon-neutral-neutral":"var(--color-neutral-300)","--color-icon-neutral-on-disabled":"var(--color-neutral-600)","--color-icon-neutral-on-icon":"var(--color-neutral-1700)","--color-icon-neutral-pressed":"var(--color-neutral-300)","--color-icon-neutral-white":"var(--color-neutral-100)","--color-icon-primary-default":"var(--color-olive-600)","--color-icon-primary-hover":"var(--color-olive-700)","--color-icon-primary-on_default":"var(--color-olive-600)","--color-icon-primary-on_hover":"var(--color-olive-200)","--color-icon-primary-on_pressed":"var(--color-neutral-300)","--color-icon-primary-pressed":"var(--color-olive-900)","--color-icon-semantic-error":"var(--color-red-600)","--color-icon-semantic-neutral":"var(--color-neutral-800)","--color-icon-semantic-success":"var(--color-green-600)","--color-icon-semantic-warning":"var(--color-yellow-600)","--color-text-branding-surface":"var(--color-neutral-1800)","--color-text-neutral-dark":"var(--color-neutral-1700)","--color-text-neutral-default":"var(--color-neutral-400)","--color-text-neutral-disabled":"var(--color-neutral-1050)","--color-text-neutral-hover":"var(--color-neutral-300)","--color-text-neutral-light":"var(--color-neutral-400)","--color-text-neutral-neutral":"var(--color-neutral-300)","--color-text-neutral-on-disabled":"var(--color-neutral-600)","--color-text-neutral-on-text":"var(--color-neutral-1700)","--color-text-neutral-pressed":"var(--color-neutral-300)","--color-text-neutral-white":"var(--color-neutral-100)","--color-text-primary-default":"var(--color-olive-600)","--color-text-primary-hover":"var(--color-olive-700)","--color-text-primary-on_default":"var(--color-olive-600)","--color-text-primary-on_hover":"var(--color-olive-200)","--color-text-primary-on_pressed":"var(--color-neutral-300)","--color-text-primary-pressed":"var(--color-olive-900)","--color-text-semantic-error":"var(--color-red-600)","--color-text-semantic-neutral":"var(--color-neutral-800)","--color-text-semantic-success":"var(--color-green-600)","--color-text-semantic-warning":"var(--color-yellow-600)"},"mercury":{"--color-accent-backdrop-default":"var(--color-opacity-70)","--color-accent-branding-surface":"var(--color-neutral-100)","--color-accent-error-contrast":"var(--color-red-1300)","--color-accent-error-default":"var(--color-red-600)","--color-accent-error-hover":"var(--color-red-800)","--color-accent-error-light":"var(--color-red-500)","--color-accent-error-lighter":"var(--color-red-300)","--color-accent-error-pressed":"var(--color-red-1000)","--color-accent-gradient-01-end":"var(--color-gradient-purple)","--color-accent-gradient-01-start":"var(--color-gradient-sky)","--color-accent-gradient-02-end":"var(--color-gradient-magenta)","--color-accent-gradient-02-start":"var(--color-gradient-berry)","--color-accent-item-active":"var(--color-neutral-1550)","--color-accent-item-hover":"var(--color-neutral-1450)","--color-accent-item-selected":"var(--color-neutral-1550)","--color-accent-neutral-black":"var(--color-neutral-1700)","--color-accent-neutral-contrast":"var(--color-neutral-1550)","--color-accent-neutral-default":"var(--color-neutral-900)","--color-accent-neutral-disabled":"var(--color-neutral-1300)","--color-accent-neutral-hover":"var(--color-neutral-300)","--color-accent-neutral-light":"var(--color-neutral-400)","--color-accent-neutral-neutral":"var(--color-neutral-600)","--color-accent-neutral-on-surface":"var(--color-neutral-100)","--color-accent-neutral-pressed":"var(--color-neutral-600)","--color-accent-neutral-white":"var(--color-neutral-100)","--color-accent-primary-contrast":"var(--color-primary-1300)","--color-accent-primary-dark":"var(--color-primary-1100)","--color-accent-primary-default":"var(--color-primary-600)","--color-accent-primary-focused":"var(--color-neutral-000)","--color-accent-primary-hover":"var(--color-neutral-1450)","--color-accent-primary-light":"var(--color-primary-500)","--color-accent-primary-lighter":"var(--color-primary-300)","--color-accent-primary-on-default":"var(--color-primary-600)","--color-accent-primary-on-hover":"var(--color-primary-400)","--color-accent-primary-on-pressed":"var(--color-neutral-200)","--color-accent-primary-pressed":"var(--color-primary-1000)","--color-accent-semantic-error":"var(--color-red-600)","--color-accent-semantic-info":"var(--color-primary-600)","--color-accent-semantic-neutral":"var(--color-neutral-800)","--color-accent-semantic-success":"var(--color-green-600)","--color-accent-semantic-warning":"var(--color-yellow-600)","--color-accent-shadow-shadow":"var(--rgba(0, 0, 0, 0-2))","--color-accent-success-contrast":"var(--color-green-1300)","--color-accent-success-default":"var(--color-green-600)","--color-accent-success-hover":"var(--color-green-800)","--color-accent-success-light":"var(--color-green-500)","--color-accent-success-lighter":"var(--color-green-300)","--color-accent-success-pressed":"var(--color-green-1000)","--color-accent-surface-elevation-01":"var(--color-neutral-1600)","--color-accent-surface-elevation-02":"var(--color-neutral-1500)","--color-accent-surface-elevation-03":"var(--color-neutral-1400)","--color-accent-surface-elevation-answer":"var(--color-neutral-1450)","--color-accent-surface-surface":"var(--color-neutral-1700)","--color-accent-warning-contrast":"var(--color-yellow-1300)","--color-accent-warning-default":"var(--color-yellow-600)","--color-accent-warning-hover":"var(--color-yellow-900)","--color-accent-warning-light":"var(--color-yellow-400)","--color-accent-warning-lighter":"var(--color-yellow-300)","--color-accent-warning-pressed":"var(--color-yellow-1000)","--color-border-branding-surface":"var(--color-neutral-1700)","--color-border-error-dark":"var(--color-red-1300)","--color-border-error-default":"var(--color-red-600)","--color-border-error-hover":"var(--color-red-700)","--color-border-error-light":"var(--color-red-500)","--color-border-error-lighter":"var(--color-red-300)","--color-border-error-pressed":"var(--color-red-900)","--color-border-item-active":"var(--color-primary-580)","--color-border-item-hover":"var(--color-neutral-1050)","--color-border-item-selected":"var(--color-primary-580)","--color-border-neutral-black":"var(--color-neutral-1700)","--color-border-neutral-default":"var(--color-neutral-900)","--color-border-neutral-disabled":"var(--color-neutral-800)","--color-border-neutral-hover":"var(--color-neutral-300)","--color-border-neutral-light":"var(--color-neutral-400)","--color-border-neutral-neutral":"var(--color-neutral-600)","--color-border-neutral-on-border":"var(--color-neutral-100)","--color-border-neutral-pressed":"var(--color-neutral-400)","--color-border-neutral-white":"var(--color-neutral-100)","--color-border-primary-dark":"var(--color-primary-1300)","--color-border-primary-default":"var(--color-primary-600)","--color-border-primary-focused":"var(--color-neutral-000)","--color-border-primary-hover":"var(--color-primary-550)","--color-border-primary-light":"var(--color-primary-500)","--color-border-primary-lighter":"var(--color-primary-300)","--color-border-primary-on_default":"var(--color-primary-600)","--color-border-primary-on_hover":"var(--color-primary-400)","--color-border-primary-on_pressed":"var(--color-neutral-400)","--color-border-primary-pressed":"var(--color-primary-580)","--color-border-success-dark":"var(--color-green-1300)","--color-border-success-default":"var(--color-green-600)","--color-border-success-hover":"var(--color-green-800)","--color-border-success-light":"var(--color-green-500)","--color-border-success-lighter":"var(--color-green-300)","--color-border-success-pressed":"var(--color-green-1000)","--color-border-surface-on-elevation-01":"var(--color-neutral-1300)","--color-border-surface-on-elevation-02":"var(--color-neutral-1100)","--color-border-surface-on-elevation-03":"var(--color-neutral-900)","--color-border-warning-dark":"var(--color-yellow-1300)","--color-border-warning-default":"var(--color-yellow-500)","--color-border-warning-hover":"var(--color-yellow-800)","--color-border-warning-light":"var(--color-yellow-400)","--color-border-warning-lighter":"var(--color-yellow-300)","--color-border-warning-pressed":"var(--color-yellow-900)","--color-component-chat-01-end":"var(--color-gradient-magenta)","--color-component-chat-01-middle":"var(--color-gradient-purple)","--color-component-chat-01-start":"var(--color-gradient-sky)","--color-icon-neutral-dark":"var(--color-neutral-1700)","--color-icon-neutral-default":"var(--color-neutral-200)","--color-icon-neutral-disabled":"var(--color-neutral-800)","--color-icon-neutral-hover":"var(--color-neutral-300)","--color-icon-neutral-light":"var(--color-neutral-400)","--color-icon-neutral-neutral":"var(--color-neutral-400)","--color-icon-neutral-on-disabled":"var(--color-neutral-600)","--color-icon-neutral-on-icon":"var(--color-neutral-1700)","--color-icon-neutral-pressed":"var(--color-neutral-400)","--color-icon-neutral-white":"var(--color-neutral-100)","--color-icon-primary-default":"var(--color-primary-600)","--color-icon-primary-hover":"var(--color-primary-400)","--color-icon-primary-on_default":"var(--color-primary-600)","--color-icon-primary-on_hover":"var(--color-primary-400)","--color-icon-primary-on_pressed":"var(--color-neutral-200)","--color-icon-primary-pressed":"var(--color-primary-800)","--color-icon-semantic-error":"var(--color-red-600)","--color-icon-semantic-neutral":"var(--color-neutral-800)","--color-icon-semantic-success":"var(--color-green-600)","--color-icon-semantic-warning":"var(--color-yellow-600)","--color-text-branding-surface":"var(--color-neutral-1800)","--color-text-neutral-dark":"var(--color-neutral-1700)","--color-text-neutral-default":"var(--color-neutral-200)","--color-text-neutral-disabled":"var(--color-neutral-800)","--color-text-neutral-hover":"var(--color-neutral-300)","--color-text-neutral-light":"var(--color-neutral-400)","--color-text-neutral-neutral":"var(--color-neutral-400)","--color-text-neutral-on-disabled":"var(--color-neutral-600)","--color-text-neutral-on-text":"var(--color-neutral-1700)","--color-text-neutral-pressed":"var(--color-neutral-400)","--color-text-neutral-white":"var(--color-neutral-100)","--color-text-primary-default":"var(--color-primary-600)","--color-text-primary-hover":"var(--color-primary-400)","--color-text-primary-on_default":"var(--color-primary-600)","--color-text-primary-on_hover":"var(--color-primary-400)","--color-text-primary-on_pressed":"var(--color-neutral-200)","--color-text-primary-pressed":"var(--color-primary-800)","--color-text-semantic-error":"var(--color-red-600)","--color-text-semantic-neutral":"var(--color-neutral-800)","--color-text-semantic-success":"var(--color-green-600)","--color-text-semantic-warning":"var(--color-yellow-600)"}},"light":{"globant":{"--color-accent-backdrop-default":"var(--rgba(23, 23, 23, 0-8))","--color-accent-branding-surface":"var(--color-neutral-1800)","--color-accent-error-contrast":"var(--color-scarlet-200)","--color-accent-error-default":"var(--color-scarlet-500)","--color-accent-error-hover":"var(--color-scarlet-800)","--color-accent-error-light":"var(--color-scarlet-300)","--color-accent-error-lighter":"var(--color-scarlet-200)","--color-accent-error-pressed":"var(--color-scarlet-900)","--color-accent-gradient-01-end":"var(--color-gradient-lemon)","--color-accent-gradient-01-start":"var(--color-gradient-greenwood)","--color-accent-gradient-02-end":"var(--color-gradient-mint)","--color-accent-gradient-02-start":"var(--color-gradient-gaserage)","--color-accent-item-active":"var(--color-avocado-1000)","--color-accent-item-hover":"var(--color-avocado-300)","--color-accent-item-selected":"var(--color-avocado-1000)","--color-accent-neutral-black":"var(--color-neutral-1300)","--color-accent-neutral-contrast":"var(--color-neutral-1550)","--color-accent-neutral-default":"var(--color-neutral-900)","--color-accent-neutral-disabled":"var(--color-neutral-500)","--color-accent-neutral-hover":"var(--color-neutral-1550)","--color-accent-neutral-light":"var(--color-neutral-600)","--color-accent-neutral-neutral":"var(--color-neutral-900)","--color-accent-neutral-on-surface":"var(--color-neutral-1550)","--color-accent-neutral-pressed":"var(--color-neutral-200)","--color-accent-neutral-white":"var(--color-neutral-100)","--color-accent-primary-contrast":"var(--color-primary-300)","--color-accent-primary-dark":"var(--color-primary-1000)","--color-accent-primary-default":"var(--color-avocado-600)","--color-accent-primary-focused":"var(--color-avocado-1100)","--color-accent-primary-hover":"var(--color-avocado-300)","--color-accent-primary-light":"var(--color-avocado-300)","--color-accent-primary-lighter":"var(--color-avocado-200)","--color-accent-primary-on-default":"var(--color-avocado-300)","--color-accent-primary-on-hover":"var(--color-primary-1000)","--color-accent-primary-on-pressed":"var(--color-neutral-300)","--color-accent-primary-pressed":"var(--color-primary-1000)","--color-accent-semantic-error":"var(--color-scarlet-200)","--color-accent-semantic-info":"var(--color-azure-200)","--color-accent-semantic-neutral":"var(--color-accent-neutral-disabled)","--color-accent-semantic-success":"var(--color-chateau-200)","--color-accent-semantic-warning":"var(--color-ember-200)","--color-accent-shadow-shadow":"var(--rgba(11, 18, 7, 0-2))","--color-accent-success-contrast":"var(--color-chateau-200)","--color-accent-success-default":"var(--color-chateau-500)","--color-accent-success-hover":"var(--color-chateau-800)","--color-accent-success-light":"var(--color-chateau-400)","--color-accent-success-lighter":"var(--color-chateau-200)","--color-accent-success-pressed":"var(--color-chateau-900)","--color-accent-surface-elevation-01":"var(--color-neutral-200)","--color-accent-surface-elevation-02":"var(--color-neutral-350)","--color-accent-surface-elevation-03":"var(--color-neutral-500)","--color-accent-surface-elevation-answer":"var(--color-neutral-600)","--color-accent-surface-surface":"var(--color-neutral-100)","--color-accent-warning-contrast":"var(--color-ember-200)","--color-accent-warning-default":"var(--color-ember-400)","--color-accent-warning-hover":"var(--color-ember-500)","--color-accent-warning-light":"var(--color-ember-300)","--color-accent-warning-lighter":"var(--color-ember-200)","--color-accent-warning-pressed":"var(--color-ember-800)","--color-border-branding-surface":"var(--color-neutral-1400)","--color-border-error-dark":"var(--color-scarlet-200)","--color-border-error-default":"var(--color-scarlet-600)","--color-border-error-hover":"var(--color-scarlet-700)","--color-border-error-light":"var(--color-scarlet-300)","--color-border-error-lighter":"var(--color-scarlet-200)","--color-border-error-pressed":"var(--color-scarlet-900)","--color-border-item-active":"var(--color-avocado-900)","--color-border-item-hover":"var(--color-avocado-800)","--color-border-item-selected":"var(--color-avocado-900)","--color-border-neutral-black":"var(--color-neutral-1300)","--color-border-neutral-default":"var(--color-neutral-800)","--color-border-neutral-disabled":"var(--color-neutral-1000)","--color-border-neutral-hover":"var(--color-neutral-1550)","--color-border-neutral-light":"var(--color-neutral-600)","--color-border-neutral-neutral":"var(--color-neutral-900)","--color-border-neutral-on-border":"var(--color-neutral-1550)","--color-border-neutral-pressed":"var(--color-neutral-1500)","--color-border-neutral-white":"var(--color-neutral-100)","--color-border-primary-dark":"var(--color-avocado-1200)","--color-border-primary-default":"var(--color-avocado-500)","--color-border-primary-focused":"var(--color-avocado-1100)","--color-border-primary-hover":"var(--color-avocado-800)","--color-border-primary-light":"var(--color-avocado-300)","--color-border-primary-lighter":"var(--color-avocado-200)","--color-border-primary-on_default":"var(--color-avocado-300)","--color-border-primary-on_hover":"var(--color-primary-1000)","--color-border-primary-on_pressed":"var(--color-neutral-300)","--color-border-primary-pressed":"var(--color-avocado-900)","--color-border-success-dark":"var(--color-chateau-200)","--color-border-success-default":"var(--color-chateau-500)","--color-border-success-hover":"var(--color-chateau-800)","--color-border-success-light":"var(--color-chateau-400)","--color-border-success-lighter":"var(--color-chateau-200)","--color-border-success-pressed":"var(--color-chateau-900)","--color-border-surface-on-elevation-01":"var(--color-neutral-400)","--color-border-surface-on-elevation-02":"var(--color-neutral-500)","--color-border-surface-on-elevation-03":"var(--color-neutral-600)","--color-border-warning-dark":"var(--color-ember-200)","--color-border-warning-default":"var(--color-ember-500)","--color-border-warning-hover":"var(--color-ember-800)","--color-border-warning-light":"var(--color-ember-300)","--color-border-warning-lighter":"var(--color-ember-200)","--color-border-warning-pressed":"var(--color-ember-900)","--color-component-chat-01-end":"var(--#ff00ff)","--color-component-chat-01-middle":"var(--#a300ff)","--color-component-chat-01-start":"var(--#00ccff)","--color-icon-neutral-dark":"var(--color-neutral-1700)","--color-icon-neutral-default":"var(--color-neutral-1400)","--color-icon-neutral-disabled":"var(--color-neutral-1000)","--color-icon-neutral-hover":"var(--color-neutral-1550)","--color-icon-neutral-light":"var(--color-neutral-600)","--color-icon-neutral-neutral":"var(--color-neutral-900)","--color-icon-neutral-on-disabled":"var(--color-neutral-1100)","--color-icon-neutral-on-icon":"var(--color-neutral-200)","--color-icon-neutral-pressed":"var(--color-neutral-1450)","--color-icon-neutral-white":"var(--color-neutral-100)","--color-icon-primary-default":"var(--color-primary-800)","--color-icon-primary-hover":"var(--color-primary-900)","--color-icon-primary-on_default":"var(--color-avocado-300)","--color-icon-primary-on_hover":"var(--color-primary-1000)","--color-icon-primary-on_pressed":"var(--color-neutral-300)","--color-icon-primary-pressed":"var(--color-primary-1000)","--color-icon-semantic-error":"var(--color-scarlet-900)","--color-icon-semantic-neutral":"var(--color-neutral-1400)","--color-icon-semantic-success":"var(--color-chateau-900)","--color-icon-semantic-warning":"var(--color-ember-900)","--color-text-branding-surface":"var(--color-neutral-100)","--color-text-neutral-dark":"var(--color-neutral-1700)","--color-text-neutral-default":"var(--color-neutral-1400)","--color-text-neutral-disabled":"var(--color-neutral-1000)","--color-text-neutral-hover":"var(--color-neutral-1550)","--color-text-neutral-light":"var(--color-neutral-600)","--color-text-neutral-neutral":"var(--color-neutral-900)","--color-text-neutral-on-disabled":"var(--color-neutral-1100)","--color-text-neutral-on-text":"var(--color-neutral-200)","--color-text-neutral-pressed":"var(--color-neutral-1450)","--color-text-neutral-white":"var(--color-neutral-100)","--color-text-primary-default":"var(--color-avocado-600)","--color-text-primary-hover":"var(--color-primary-900)","--color-text-primary-on_default":"var(--color-avocado-300)","--color-text-primary-on_hover":"var(--color-primary-1000)","--color-text-primary-on_pressed":"var(--color-neutral-300)","--color-text-primary-pressed":"var(--color-primary-1000)","--color-text-semantic-error":"var(--color-scarlet-900)","--color-text-semantic-neutral":"var(--color-neutral-1400)","--color-text-semantic-success":"var(--color-chateau-900)","--color-text-semantic-warning":"var(--color-ember-900)"},"mercury":{"--color-accent-backdrop-default":"var(--rgba(17, 21, 28, 0-8))","--color-accent-branding-surface":"var(--color-neutral-1800)","--color-accent-error-contrast":"var(--color-scarlet-200)","--color-accent-error-default":"var(--color-scarlet-500)","--color-accent-error-hover":"var(--color-scarlet-800)","--color-accent-error-light":"var(--color-scarlet-300)","--color-accent-error-lighter":"var(--color-scarlet-200)","--color-accent-error-pressed":"var(--color-scarlet-900)","--color-accent-gradient-01-end":"var(--color-gradient-purple)","--color-accent-gradient-01-start":"var(--color-gradient-sky)","--color-accent-gradient-02-end":"var(--color-gradient-magenta)","--color-accent-gradient-02-start":"var(--color-gradient-berry)","--color-accent-item-active":"var(--color-azure-1000)","--color-accent-item-hover":"var(--color-azure-300)","--color-accent-item-selected":"var(--color-azure-1000)","--color-accent-neutral-black":"var(--color-primary-1300)","--color-accent-neutral-contrast":"var(--color-neutral-1550)","--color-accent-neutral-default":"var(--color-neutral-700)","--color-accent-neutral-disabled":"var(--color-neutral-400)","--color-accent-neutral-hover":"var(--color-neutral-1550)","--color-accent-neutral-light":"var(--color-neutral-600)","--color-accent-neutral-neutral":"var(--color-neutral-900)","--color-accent-neutral-on-surface":"var(--color-primary-1300)","--color-accent-neutral-pressed":"var(--color-neutral-200)","--color-accent-neutral-white":"var(--color-neutral-100)","--color-accent-primary-contrast":"var(--color-primary-200)","--color-accent-primary-dark":"var(--color-azure-800)","--color-accent-primary-default":"var(--color-azure-500)","--color-accent-primary-focused":"var(--color-azure-900)","--color-accent-primary-hover":"var(--color-azure-300)","--color-accent-primary-light":"var(--color-azure-100)","--color-accent-primary-lighter":"var(--color-azure-50)","--color-accent-primary-on-default":"var(--color-azure-300)","--color-accent-primary-on-hover":"var(--color-azure-800)","--color-accent-primary-on-pressed":"var(--color-neutral-300)","--color-accent-primary-pressed":"var(--color-azure-1000)","--color-accent-semantic-error":"var(--color-scarlet-200)","--color-accent-semantic-info":"var(--color-azure-200)","--color-accent-semantic-neutral":"var(--color-accent-neutral-disabled)","--color-accent-semantic-success":"var(--color-chateau-200)","--color-accent-semantic-warning":"var(--color-ember-200)","--color-accent-shadow-shadow":"var(--rgba(7, 10, 18, 0-2))","--color-accent-success-contrast":"var(--color-chateau-200)","--color-accent-success-default":"var(--color-chateau-500)","--color-accent-success-hover":"var(--color-chateau-800)","--color-accent-success-light":"var(--color-chateau-400)","--color-accent-success-lighter":"var(--color-chateau-200)","--color-accent-success-pressed":"var(--color-chateau-900)","--color-accent-surface-elevation-01":"var(--color-lilac-200)","--color-accent-surface-elevation-02":"var(--color-lilac-250)","--color-accent-surface-elevation-03":"var(--color-lilac-400)","--color-accent-surface-elevation-answer":"var(--color-lilac-600)","--color-accent-surface-surface":"var(--color-lilac-50)","--color-accent-warning-contrast":"var(--color-ember-200)","--color-accent-warning-default":"var(--color-ember-400)","--color-accent-warning-hover":"var(--color-ember-500)","--color-accent-warning-light":"var(--color-ember-300)","--color-accent-warning-lighter":"var(--color-ember-200)","--color-accent-warning-pressed":"var(--color-ember-800)","--color-border-branding-surface":"var(--color-neutral-1400)","--color-border-error-dark":"var(--color-scarlet-200)","--color-border-error-default":"var(--color-scarlet-500)","--color-border-error-hover":"var(--color-scarlet-800)","--color-border-error-light":"var(--color-scarlet-300)","--color-border-error-lighter":"var(--color-scarlet-200)","--color-border-error-pressed":"var(--color-scarlet-900)","--color-border-item-active":"var(--color-azure-800)","--color-border-item-hover":"var(--color-azure-400)","--color-border-item-selected":"var(--color-azure-800)","--color-border-neutral-black":"var(--color-primary-1300)","--color-border-neutral-default":"var(--color-neutral-700)","--color-border-neutral-disabled":"var(--color-neutral-700)","--color-border-neutral-hover":"var(--color-neutral-1550)","--color-border-neutral-light":"var(--color-neutral-600)","--color-border-neutral-neutral":"var(--color-neutral-900)","--color-border-neutral-on-border":"var(--color-primary-1300)","--color-border-neutral-pressed":"var(--color-neutral-1500)","--color-border-neutral-white":"var(--color-neutral-100)","--color-border-primary-dark":"var(--color-azure-900)","--color-border-primary-default":"var(--color-azure-600)","--color-border-primary-focused":"var(--color-azure-900)","--color-border-primary-hover":"var(--color-azure-800)","--color-border-primary-light":"var(--color-azure-100)","--color-border-primary-lighter":"var(--color-azure-50)","--color-border-primary-on_default":"var(--color-azure-300)","--color-border-primary-on_hover":"var(--color-azure-800)","--color-border-primary-on_pressed":"var(--color-neutral-300)","--color-border-primary-pressed":"var(--color-azure-700)","--color-border-success-dark":"var(--color-chateau-200)","--color-border-success-default":"var(--color-chateau-500)","--color-border-success-hover":"var(--color-chateau-800)","--color-border-success-light":"var(--color-chateau-400)","--color-border-success-lighter":"var(--color-chateau-200)","--color-border-success-pressed":"var(--color-chateau-900)","--color-border-surface-on-elevation-01":"var(--color-lilac-400)","--color-border-surface-on-elevation-02":"var(--color-lilac-500)","--color-border-surface-on-elevation-03":"var(--color-lilac-600)","--color-border-warning-dark":"var(--color-ember-200)","--color-border-warning-default":"var(--color-ember-500)","--color-border-warning-hover":"var(--color-ember-800)","--color-border-warning-light":"var(--color-ember-300)","--color-border-warning-lighter":"var(--color-ember-200)","--color-border-warning-pressed":"var(--color-ember-900)","--color-component-chat-01-end":"var(--color-gradient-magenta)","--color-component-chat-01-middle":"var(--color-gradient-purple)","--color-component-chat-01-start":"var(--color-gradient-sky)","--color-icon-neutral-dark":"var(--color-neutral-1700)","--color-icon-neutral-default":"var(--color-neutral-1400)","--color-icon-neutral-disabled":"var(--color-neutral-800)","--color-icon-neutral-hover":"var(--color-neutral-1550)","--color-icon-neutral-light":"var(--color-neutral-600)","--color-icon-neutral-neutral":"var(--color-neutral-900)","--color-icon-neutral-on-disabled":"var(--color-neutral-1000)","--color-icon-neutral-on-icon":"var(--color-neutral-100)","--color-icon-neutral-pressed":"var(--color-neutral-1450)","--color-icon-neutral-white":"var(--color-neutral-100)","--color-icon-primary-default":"var(--color-azure-600)","--color-icon-primary-hover":"var(--color-azure-400)","--color-icon-primary-on_default":"var(--color-azure-300)","--color-icon-primary-on_hover":"var(--color-azure-800)","--color-icon-primary-on_pressed":"var(--color-neutral-300)","--color-icon-primary-pressed":"var(--color-azure-750)","--color-icon-semantic-error":"var(--color-scarlet-900)","--color-icon-semantic-neutral":"var(--color-neutral-1400)","--color-icon-semantic-success":"var(--color-chateau-900)","--color-icon-semantic-warning":"var(--color-ember-900)","--color-text-branding-surface":"var(--color-neutral-100)","--color-text-neutral-dark":"var(--color-neutral-1700)","--color-text-neutral-default":"var(--color-neutral-1400)","--color-text-neutral-disabled":"var(--color-neutral-800)","--color-text-neutral-hover":"var(--color-neutral-1550)","--color-text-neutral-light":"var(--color-neutral-600)","--color-text-neutral-neutral":"var(--color-neutral-900)","--color-text-neutral-on-disabled":"var(--color-neutral-1000)","--color-text-neutral-on-text":"var(--color-neutral-200)","--color-text-neutral-pressed":"var(--color-neutral-1550)","--color-text-neutral-white":"var(--color-neutral-100)","--color-text-primary-default":"var(--color-azure-600)","--color-text-primary-hover":"var(--color-azure-400)","--color-text-primary-on_default":"var(--color-azure-300)","--color-text-primary-on_hover":"var(--color-azure-800)","--color-text-primary-on_pressed":"var(--color-neutral-300)","--color-text-primary-pressed":"var(--color-azure-750)","--color-text-semantic-error":"var(--color-scarlet-900)","--color-text-semantic-neutral":"var(--color-neutral-1400)","--color-text-semantic-success":"var(--color-chateau-900)","--color-text-semantic-warning":"var(--color-ember-900)"}}}}` +); diff --git a/packages/mercury/src/tokens/_generated/mercury-generated-tokens.ts b/packages/mercury/src/tokens/_generated/mercury-generated-tokens.ts new file mode 100644 index 000000000..1a4c86731 --- /dev/null +++ b/packages/mercury/src/tokens/_generated/mercury-generated-tokens.ts @@ -0,0 +1,1000 @@ +// mercuryTokens is generated for packages/showcase tokens page. +const mercuryTokens = { + primitive: { + color: { + mercury: { + azure: { + "--color-azure-50": "#eaf3fe", + "--color-azure-100": "#e1eefe", + "--color-azure-200": "#c6dffd", + "--color-azure-300": "#9cc8fc", + "--color-azure-400": "#3791fb", + "--color-azure-500": "#0a7cff", + "--color-azure-600": "#0072f8", + "--color-azure-700": "#0049cd", + "--color-azure-750": "#1f52ae", + "--color-azure-800": "#0034b1", + "--color-azure-900": "#002da8", + "--color-azure-1000": "#173d82" + }, + chateau: { + "--color-chateau-50": "#e0f6e7", + "--color-chateau-100": "#b9eaca", + "--color-chateau-200": "#92dead", + "--color-chateau-300": "#72d495", + "--color-chateau-400": "#4fca7a", + "--color-chateau-500": "#35b061", + "--color-chateau-600": "#2d9552", + "--color-chateau-700": "#247541", + "--color-chateau-800": "#1c5e34", + "--color-chateau-900": "#154627" + }, + ember: { + "--color-ember-50": "#fffbeb", + "--color-ember-100": "#fff9e0", + "--color-ember-200": "#ffeda3", + "--color-ember-300": "#ffe370", + "--color-ember-400": "#ffdd52", + "--color-ember-500": "#ffcd00", + "--color-ember-600": "#cca400", + "--color-ember-700": "#997b00", + "--color-ember-800": "#665200", + "--color-ember-900": "#3d3100" + }, + gradient: { + "--color-gradient-berry": "#0095ff", + "--color-gradient-magenta": "#ff00ff", + "--color-gradient-purple": "#a300ff", + "--color-gradient-sky": "#00ccff" + }, + green: { + "--color-green-100": "#eef5f4", + "--color-green-200": "#ddebe9", + "--color-green-300": "#cae0dd", + "--color-green-400": "#b4d5d0", + "--color-green-500": "#9cc9c2", + "--color-green-600": "#3fa89b", + "--color-green-700": "#389287", + "--color-green-800": "#318278", + "--color-green-900": "#286a62", + "--color-green-1000": "#1c4b45", + "--color-green-1300": "#112d29" + }, + lilac: { + "--color-lilac-50": "#f9fafa", + "--color-lilac-100": "#f8f9fc", + "--color-lilac-200": "#edf0f8", + "--color-lilac-250": "#e2e7f4", + "--color-lilac-300": "#dee1ed", + "--color-lilac-400": "#d5daeb", + "--color-lilac-500": "#c8d0e9", + "--color-lilac-600": "#c2cbe6", + "--color-lilac-700": "#bcc5e4", + "--color-lilac-800": "#b7c2e2", + "--color-lilac-900": "#9babd9" + }, + neutral: { + "--color-neutral-100": "#fafbfd", + "--color-neutral-200": "#f0f4fa", + "--color-neutral-300": "#e1ecf9", + "--color-neutral-400": "#d2ddeb", + "--color-neutral-500": "#c0ccd9", + "--color-neutral-600": "#aeb9c6", + "--color-neutral-700": "#9da9b6", + "--color-neutral-800": "#828b96", + "--color-neutral-900": "#56677a", + "--color-neutral-1000": "#4a5870", + "--color-neutral-1050": "#405975", + "--color-neutral-1100": "#485665", + "--color-neutral-1200": "#394552", + "--color-neutral-1300": "#333d47", + "--color-neutral-1400": "#2d3a48", + "--color-neutral-1450": "#243750", + "--color-neutral-1500": "#242d3c", + "--color-neutral-1550": "#17273b", + "--color-neutral-1600": "#181f2a", + "--color-neutral-1700": "#11151c", + "--color-neutral-1800": "#000000", + "--color-neutral-000": "#ffffff" + }, + opacity: { + "--color-opacity-70": "rgba(17, 21, 28, 0.7)" + }, + primary: { + "--color-primary-100": "#f4f8ff", + "--color-primary-200": "#ebf0ff", + "--color-primary-300": "#cee0ff", + "--color-primary-400": "#b0cfff", + "--color-primary-500": "#8cbcff", + "--color-primary-550": "#75aef0", + "--color-primary-580": "#729fd5", + "--color-primary-600": "#5ba7ff", + "--color-primary-700": "#5498e8", + "--color-primary-800": "#437dc0", + "--color-primary-900": "#335884", + "--color-primary-1000": "#294b72", + "--color-primary-1100": "#005ac1", + "--color-primary-1300": "#101e2d" + }, + red: { + "--color-red-100": "#fcf4f4", + "--color-red-200": "#f8dfe0", + "--color-red-300": "#f4cdcf", + "--color-red-400": "#eda4a7", + "--color-red-500": "#e98b8f", + "--color-red-600": "#e35861", + "--color-red-700": "#d54b54", + "--color-red-800": "#a63a41", + "--color-red-900": "#883035", + "--color-red-1000": "#6d272b", + "--color-red-1300": "#2d1012" + }, + scarlet: { + "--color-scarlet-50": "#fee6e6", + "--color-scarlet-100": "#fdcece", + "--color-scarlet-200": "#fcb5b5", + "--color-scarlet-300": "#fb9d9d", + "--color-scarlet-400": "#f96c6c", + "--color-scarlet-500": "#c50707", + "--color-scarlet-600": "#ac0606", + "--color-scarlet-700": "#8a0505", + "--color-scarlet-800": "#6c0404", + "--color-scarlet-900": "#4f0303" + }, + yellow: { + "--color-yellow-100": "#fffbf6", + "--color-yellow-200": "#fef1e3", + "--color-yellow-300": "#fde8cf", + "--color-yellow-400": "#fcdeb8", + "--color-yellow-500": "#fac980", + "--color-yellow-600": "#f9bd56", + "--color-yellow-700": "#ffc96b", + "--color-yellow-800": "#ecaf44", + "--color-yellow-900": "#b97d13", + "--color-yellow-1000": "#6f4b0b", + "--color-yellow-1300": "#382606" + } + }, + globant: { + avocado: { + "--color-avocado-100": "#f6f7ec", + "--color-avocado-200": "#e7e9c8", + "--color-avocado-300": "#d8dfa3", + "--color-avocado-400": "#c7d67b", + "--color-avocado-500": "#b4d050", + "--color-avocado-600": "#88af1d", + "--color-avocado-700": "#749519", + "--color-avocado-800": "#617920", + "--color-avocado-900": "#53681d", + "--color-avocado-1000": "#455519", + "--color-avocado-1100": "#333f13", + "--color-avocado-1200": "#232a0e", + "--color-avocado-1300": "#131708" + }, + extra: { + "--color-extra-violet-600": "#9a00fa" + }, + gradient: { + "--color-gradient-gaserage": "#c0fb73", + "--color-gradient-greenwood": "#d9e021", + "--color-gradient-lemon": "#8cc63f", + "--color-gradient-mint": "#38efa0" + }, + green: { + "--color-green-100": "#eef5f4", + "--color-green-200": "#ddebe9", + "--color-green-300": "#cae0dd", + "--color-green-400": "#b4d5d0", + "--color-green-500": "#9cc9c2", + "--color-green-600": "#3fa89b", + "--color-green-700": "#389287", + "--color-green-800": "#318278", + "--color-green-900": "#286a62", + "--color-green-1000": "#1c4b45", + "--color-green-1300": "#112d29" + }, + neutral: { + "--color-neutral-100": "#ffffff", + "--color-neutral-200": "#fafafa", + "--color-neutral-300": "#f5f5f5", + "--color-neutral-350": "#f0f0f0", + "--color-neutral-400": "#ededed", + "--color-neutral-500": "#e5e5e5", + "--color-neutral-600": "#d6d6d6", + "--color-neutral-700": "#cccccc", + "--color-neutral-800": "#bdbdbd", + "--color-neutral-900": "#a9a9a9", + "--color-neutral-1000": "#8c8c8c", + "--color-neutral-1050": "#6b6b6b", + "--color-neutral-1100": "#686868", + "--color-neutral-1200": "#575757", + "--color-neutral-1300": "#464646", + "--color-neutral-1400": "#3b3b3b", + "--color-neutral-1450": "#373737", + "--color-neutral-1500": "#303030", + "--color-neutral-1550": "#262626", + "--color-neutral-1600": "#212121", + "--color-neutral-1700": "#171717", + "--color-neutral-1800": "#000000" + }, + olive: { + "--color-olive-100": "#fcfcf2", + "--color-olive-200": "#f2f3c9", + "--color-olive-300": "#e8ed9f", + "--color-olive-400": "#dee873", + "--color-olive-500": "#d2e546", + "--color-olive-600": "#c3e01a", + "--color-olive-700": "#a8c118", + "--color-olive-800": "#8ea216", + "--color-olive-900": "#7c8e15", + "--color-olive-1000": "#647213", + "--color-olive-1100": "#4d580e", + "--color-olive-1200": "#3a420b", + "--color-olive-1300": "#262b08" + }, + opacity: { + "--color-opacity-70": "#171717" + }, + primary: { + "--color-primary-100": "#f9fbf2", + "--color-primary-200": "#f5f8e8", + "--color-primary-300": "#eaf1ce", + "--color-primary-400": "#deeab0", + "--color-primary-500": "#d2e38c", + "--color-primary-550": "#cfe184", + "--color-primary-580": "#c6d572", + "--color-primary-600": "#bfd732", + "--color-primary-700": "#b4cc28", + "--color-primary-800": "#a3b72b", + "--color-primary-900": "#8d9f25", + "--color-primary-1000": "#515c15", + "--color-primary-1100": "#2e340a", + "--color-primary-1200": "#262b08" + }, + red: { + "--color-red-100": "#fcf4f4", + "--color-red-200": "#f8dfe0", + "--color-red-300": "#f4cdcf", + "--color-red-400": "#eda4a7", + "--color-red-500": "#e98b8f", + "--color-red-600": "#e35861", + "--color-red-700": "#d54b54", + "--color-red-800": "#a63a41", + "--color-red-900": "#883035", + "--color-red-1000": "#6d272b", + "--color-red-1300": "#2d1012" + }, + yellow: { + "--color-yellow-100": "#fffbf6", + "--color-yellow-200": "#fef1e3", + "--color-yellow-300": "#fde8cf", + "--color-yellow-400": "#fcdeb8", + "--color-yellow-500": "#fac980", + "--color-yellow-600": "#f9bd56", + "--color-yellow-700": "#ffc96b", + "--color-yellow-800": "#ecaf44", + "--color-yellow-900": "#b97d13", + "--color-yellow-1000": "#6f4b0b", + "--color-yellow-1300": "#382606" + } + } + }, + "font-family": { + "--font-family-body": "Inter", + "--font-family-code": "DM Mono", + "--font-family-header": "Inter" + }, + "font-style": { + "--font-style-bold": "Bold", + "--font-style-italic": "Italic", + "--font-style-regular": "Regular", + "--font-style-semi-bold": "Semi Bold" + }, + size: { + "--size-0": "0px", + "--size-1": "1px", + "--size-2": "2px", + "--size-4": "4px", + "--size-6": "6px", + "--size-8": "8px", + "--size-10": "10px", + "--size-11": "11px", + "--size-12": "12px", + "--size-14": "14px", + "--size-15": "15px", + "--size-16": "16px", + "--size-18": "18px", + "--size-20": "20px", + "--size-22": "22px", + "--size-24": "24px", + "--size-26": "26px", + "--size-28": "28px", + "--size-32": "32px", + "--size-40": "40px", + "--size-48": "48px", + "--size-56": "56px", + "--size-64": "64px", + "--size-72": "72px", + "--size-80": "80px", + "--size--1": "-1px", + "--size--2": "-2px" + } + }, + semantic: { + color: { + mercury: { + light: { + accent: { + "--color-accent-backdrop-default": "--rgba(17, 21, 28, 0-8)", + "--color-accent-branding-surface": "--color-neutral-1800", + "--color-accent-error-contrast": "--color-scarlet-200", + "--color-accent-error-default": "--color-scarlet-500", + "--color-accent-error-hover": "--color-scarlet-800", + "--color-accent-error-light": "--color-scarlet-300", + "--color-accent-error-lighter": "--color-scarlet-200", + "--color-accent-error-pressed": "--color-scarlet-900", + "--color-accent-gradient-01-end": "--color-gradient-purple", + "--color-accent-gradient-01-start": "--color-gradient-sky", + "--color-accent-gradient-02-end": "--color-gradient-magenta", + "--color-accent-gradient-02-start": "--color-gradient-berry", + "--color-accent-item-active": "--color-azure-1000", + "--color-accent-item-hover": "--color-azure-300", + "--color-accent-item-selected": "--color-azure-1000", + "--color-accent-neutral-black": "--color-primary-1300", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-neutral-default": "--color-neutral-700", + "--color-accent-neutral-disabled": "--color-neutral-400", + "--color-accent-neutral-hover": "--color-neutral-1550", + "--color-accent-neutral-light": "--color-neutral-600", + "--color-accent-neutral-neutral": "--color-neutral-900", + "--color-accent-neutral-on-surface": "--color-primary-1300", + "--color-accent-neutral-pressed": "--color-neutral-200", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-primary-contrast": "--color-primary-200", + "--color-accent-primary-dark": "--color-azure-800", + "--color-accent-primary-default": "--color-azure-500", + "--color-accent-primary-focused": "--color-azure-900", + "--color-accent-primary-hover": "--color-azure-300", + "--color-accent-primary-light": "--color-azure-100", + "--color-accent-primary-lighter": "--color-azure-50", + "--color-accent-primary-on-default": "--color-azure-300", + "--color-accent-primary-on-hover": "--color-azure-800", + "--color-accent-primary-on-pressed": "--color-neutral-300", + "--color-accent-primary-pressed": "--color-azure-1000", + "--color-accent-semantic-error": "--color-scarlet-200", + "--color-accent-semantic-info": "--color-azure-200", + "--color-accent-semantic-neutral": + "--color-accent-neutral-disabled", + "--color-accent-semantic-success": "--color-chateau-200", + "--color-accent-semantic-warning": "--color-ember-200", + "--color-accent-shadow-shadow": "--rgba(7, 10, 18, 0-2)", + "--color-accent-success-contrast": "--color-chateau-200", + "--color-accent-success-default": "--color-chateau-500", + "--color-accent-success-hover": "--color-chateau-800", + "--color-accent-success-light": "--color-chateau-400", + "--color-accent-success-lighter": "--color-chateau-200", + "--color-accent-success-pressed": "--color-chateau-900", + "--color-accent-surface-elevation-01": "--color-lilac-200", + "--color-accent-surface-elevation-02": "--color-lilac-250", + "--color-accent-surface-elevation-03": "--color-lilac-400", + "--color-accent-surface-elevation-answer": "--color-lilac-600", + "--color-accent-surface-surface": "--color-lilac-50", + "--color-accent-warning-contrast": "--color-ember-200", + "--color-accent-warning-default": "--color-ember-400", + "--color-accent-warning-hover": "--color-ember-500", + "--color-accent-warning-light": "--color-ember-300", + "--color-accent-warning-lighter": "--color-ember-200", + "--color-accent-warning-pressed": "--color-ember-800" + }, + border: { + "--color-border-branding-surface": "--color-neutral-1400", + "--color-border-error-dark": "--color-scarlet-200", + "--color-border-error-default": "--color-scarlet-500", + "--color-border-error-hover": "--color-scarlet-800", + "--color-border-error-light": "--color-scarlet-300", + "--color-border-error-lighter": "--color-scarlet-200", + "--color-border-error-pressed": "--color-scarlet-900", + "--color-border-item-active": "--color-azure-800", + "--color-border-item-hover": "--color-azure-400", + "--color-border-item-selected": "--color-azure-800", + "--color-border-neutral-black": "--color-primary-1300", + "--color-border-neutral-default": "--color-neutral-700", + "--color-border-neutral-disabled": "--color-neutral-700", + "--color-border-neutral-hover": "--color-neutral-1550", + "--color-border-neutral-light": "--color-neutral-600", + "--color-border-neutral-neutral": "--color-neutral-900", + "--color-border-neutral-on-border": "--color-primary-1300", + "--color-border-neutral-pressed": "--color-neutral-1500", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-primary-dark": "--color-azure-900", + "--color-border-primary-default": "--color-azure-600", + "--color-border-primary-focused": "--color-azure-900", + "--color-border-primary-hover": "--color-azure-800", + "--color-border-primary-light": "--color-azure-100", + "--color-border-primary-lighter": "--color-azure-50", + "--color-border-primary-on_default": "--color-azure-300", + "--color-border-primary-on_hover": "--color-azure-800", + "--color-border-primary-on_pressed": "--color-neutral-300", + "--color-border-primary-pressed": "--color-azure-700", + "--color-border-success-dark": "--color-chateau-200", + "--color-border-success-default": "--color-chateau-500", + "--color-border-success-hover": "--color-chateau-800", + "--color-border-success-light": "--color-chateau-400", + "--color-border-success-lighter": "--color-chateau-200", + "--color-border-success-pressed": "--color-chateau-900", + "--color-border-surface-on-elevation-01": "--color-lilac-400", + "--color-border-surface-on-elevation-02": "--color-lilac-500", + "--color-border-surface-on-elevation-03": "--color-lilac-600", + "--color-border-warning-dark": "--color-ember-200", + "--color-border-warning-default": "--color-ember-500", + "--color-border-warning-hover": "--color-ember-800", + "--color-border-warning-light": "--color-ember-300", + "--color-border-warning-lighter": "--color-ember-200", + "--color-border-warning-pressed": "--color-ember-900" + }, + component: { + "--color-component-chat-01-end": "--color-gradient-magenta", + "--color-component-chat-01-middle": "--color-gradient-purple", + "--color-component-chat-01-start": "--color-gradient-sky" + }, + icon: { + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-neutral-default": "--color-neutral-1400", + "--color-icon-neutral-disabled": "--color-neutral-800", + "--color-icon-neutral-hover": "--color-neutral-1550", + "--color-icon-neutral-light": "--color-neutral-600", + "--color-icon-neutral-neutral": "--color-neutral-900", + "--color-icon-neutral-on-disabled": "--color-neutral-1000", + "--color-icon-neutral-on-icon": "--color-neutral-100", + "--color-icon-neutral-pressed": "--color-neutral-1450", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-primary-default": "--color-azure-600", + "--color-icon-primary-hover": "--color-azure-400", + "--color-icon-primary-on_default": "--color-azure-300", + "--color-icon-primary-on_hover": "--color-azure-800", + "--color-icon-primary-on_pressed": "--color-neutral-300", + "--color-icon-primary-pressed": "--color-azure-750", + "--color-icon-semantic-error": "--color-scarlet-900", + "--color-icon-semantic-neutral": "--color-neutral-1400", + "--color-icon-semantic-success": "--color-chateau-900", + "--color-icon-semantic-warning": "--color-ember-900" + }, + text: { + "--color-text-branding-surface": "--color-neutral-100", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-neutral-default": "--color-neutral-1400", + "--color-text-neutral-disabled": "--color-neutral-800", + "--color-text-neutral-hover": "--color-neutral-1550", + "--color-text-neutral-light": "--color-neutral-600", + "--color-text-neutral-neutral": "--color-neutral-900", + "--color-text-neutral-on-disabled": "--color-neutral-1000", + "--color-text-neutral-on-text": "--color-neutral-200", + "--color-text-neutral-pressed": "--color-neutral-1550", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-primary-default": "--color-azure-600", + "--color-text-primary-hover": "--color-azure-400", + "--color-text-primary-on_default": "--color-azure-300", + "--color-text-primary-on_hover": "--color-azure-800", + "--color-text-primary-on_pressed": "--color-neutral-300", + "--color-text-primary-pressed": "--color-azure-750", + "--color-text-semantic-error": "--color-scarlet-900", + "--color-text-semantic-neutral": "--color-neutral-1400", + "--color-text-semantic-success": "--color-chateau-900", + "--color-text-semantic-warning": "--color-ember-900" + } + }, + dark: { + accent: { + "--color-accent-backdrop-default": "--color-opacity-70", + "--color-accent-branding-surface": "--color-neutral-100", + "--color-accent-error-contrast": "--color-red-1300", + "--color-accent-error-default": "--color-red-600", + "--color-accent-error-hover": "--color-red-800", + "--color-accent-error-light": "--color-red-500", + "--color-accent-error-lighter": "--color-red-300", + "--color-accent-error-pressed": "--color-red-1000", + "--color-accent-gradient-01-end": "--color-gradient-purple", + "--color-accent-gradient-01-start": "--color-gradient-sky", + "--color-accent-gradient-02-end": "--color-gradient-magenta", + "--color-accent-gradient-02-start": "--color-gradient-berry", + "--color-accent-item-active": "--color-neutral-1550", + "--color-accent-item-hover": "--color-neutral-1450", + "--color-accent-item-selected": "--color-neutral-1550", + "--color-accent-neutral-black": "--color-neutral-1700", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-neutral-default": "--color-neutral-900", + "--color-accent-neutral-disabled": "--color-neutral-1300", + "--color-accent-neutral-hover": "--color-neutral-300", + "--color-accent-neutral-light": "--color-neutral-400", + "--color-accent-neutral-neutral": "--color-neutral-600", + "--color-accent-neutral-on-surface": "--color-neutral-100", + "--color-accent-neutral-pressed": "--color-neutral-600", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-primary-contrast": "--color-primary-1300", + "--color-accent-primary-dark": "--color-primary-1100", + "--color-accent-primary-default": "--color-primary-600", + "--color-accent-primary-focused": "--color-neutral-000", + "--color-accent-primary-hover": "--color-neutral-1450", + "--color-accent-primary-light": "--color-primary-500", + "--color-accent-primary-lighter": "--color-primary-300", + "--color-accent-primary-on-default": "--color-primary-600", + "--color-accent-primary-on-hover": "--color-primary-400", + "--color-accent-primary-on-pressed": "--color-neutral-200", + "--color-accent-primary-pressed": "--color-primary-1000", + "--color-accent-semantic-error": "--color-red-600", + "--color-accent-semantic-info": "--color-primary-600", + "--color-accent-semantic-neutral": "--color-neutral-800", + "--color-accent-semantic-success": "--color-green-600", + "--color-accent-semantic-warning": "--color-yellow-600", + "--color-accent-shadow-shadow": "--rgba(0, 0, 0, 0-2)", + "--color-accent-success-contrast": "--color-green-1300", + "--color-accent-success-default": "--color-green-600", + "--color-accent-success-hover": "--color-green-800", + "--color-accent-success-light": "--color-green-500", + "--color-accent-success-lighter": "--color-green-300", + "--color-accent-success-pressed": "--color-green-1000", + "--color-accent-surface-elevation-01": "--color-neutral-1600", + "--color-accent-surface-elevation-02": "--color-neutral-1500", + "--color-accent-surface-elevation-03": "--color-neutral-1400", + "--color-accent-surface-elevation-answer": "--color-neutral-1450", + "--color-accent-surface-surface": "--color-neutral-1700", + "--color-accent-warning-contrast": "--color-yellow-1300", + "--color-accent-warning-default": "--color-yellow-600", + "--color-accent-warning-hover": "--color-yellow-900", + "--color-accent-warning-light": "--color-yellow-400", + "--color-accent-warning-lighter": "--color-yellow-300", + "--color-accent-warning-pressed": "--color-yellow-1000" + }, + border: { + "--color-border-branding-surface": "--color-neutral-1700", + "--color-border-error-dark": "--color-red-1300", + "--color-border-error-default": "--color-red-600", + "--color-border-error-hover": "--color-red-700", + "--color-border-error-light": "--color-red-500", + "--color-border-error-lighter": "--color-red-300", + "--color-border-error-pressed": "--color-red-900", + "--color-border-item-active": "--color-primary-580", + "--color-border-item-hover": "--color-neutral-1050", + "--color-border-item-selected": "--color-primary-580", + "--color-border-neutral-black": "--color-neutral-1700", + "--color-border-neutral-default": "--color-neutral-900", + "--color-border-neutral-disabled": "--color-neutral-800", + "--color-border-neutral-hover": "--color-neutral-300", + "--color-border-neutral-light": "--color-neutral-400", + "--color-border-neutral-neutral": "--color-neutral-600", + "--color-border-neutral-on-border": "--color-neutral-100", + "--color-border-neutral-pressed": "--color-neutral-400", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-primary-dark": "--color-primary-1300", + "--color-border-primary-default": "--color-primary-600", + "--color-border-primary-focused": "--color-neutral-000", + "--color-border-primary-hover": "--color-primary-550", + "--color-border-primary-light": "--color-primary-500", + "--color-border-primary-lighter": "--color-primary-300", + "--color-border-primary-on_default": "--color-primary-600", + "--color-border-primary-on_hover": "--color-primary-400", + "--color-border-primary-on_pressed": "--color-neutral-400", + "--color-border-primary-pressed": "--color-primary-580", + "--color-border-success-dark": "--color-green-1300", + "--color-border-success-default": "--color-green-600", + "--color-border-success-hover": "--color-green-800", + "--color-border-success-light": "--color-green-500", + "--color-border-success-lighter": "--color-green-300", + "--color-border-success-pressed": "--color-green-1000", + "--color-border-surface-on-elevation-01": "--color-neutral-1300", + "--color-border-surface-on-elevation-02": "--color-neutral-1100", + "--color-border-surface-on-elevation-03": "--color-neutral-900", + "--color-border-warning-dark": "--color-yellow-1300", + "--color-border-warning-default": "--color-yellow-500", + "--color-border-warning-hover": "--color-yellow-800", + "--color-border-warning-light": "--color-yellow-400", + "--color-border-warning-lighter": "--color-yellow-300", + "--color-border-warning-pressed": "--color-yellow-900" + }, + component: { + "--color-component-chat-01-end": "--color-gradient-magenta", + "--color-component-chat-01-middle": "--color-gradient-purple", + "--color-component-chat-01-start": "--color-gradient-sky" + }, + icon: { + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-neutral-default": "--color-neutral-200", + "--color-icon-neutral-disabled": "--color-neutral-800", + "--color-icon-neutral-hover": "--color-neutral-300", + "--color-icon-neutral-light": "--color-neutral-400", + "--color-icon-neutral-neutral": "--color-neutral-400", + "--color-icon-neutral-on-disabled": "--color-neutral-600", + "--color-icon-neutral-on-icon": "--color-neutral-1700", + "--color-icon-neutral-pressed": "--color-neutral-400", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-primary-default": "--color-primary-600", + "--color-icon-primary-hover": "--color-primary-400", + "--color-icon-primary-on_default": "--color-primary-600", + "--color-icon-primary-on_hover": "--color-primary-400", + "--color-icon-primary-on_pressed": "--color-neutral-200", + "--color-icon-primary-pressed": "--color-primary-800", + "--color-icon-semantic-error": "--color-red-600", + "--color-icon-semantic-neutral": "--color-neutral-800", + "--color-icon-semantic-success": "--color-green-600", + "--color-icon-semantic-warning": "--color-yellow-600" + }, + text: { + "--color-text-branding-surface": "--color-neutral-1800", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-neutral-default": "--color-neutral-200", + "--color-text-neutral-disabled": "--color-neutral-800", + "--color-text-neutral-hover": "--color-neutral-300", + "--color-text-neutral-light": "--color-neutral-400", + "--color-text-neutral-neutral": "--color-neutral-400", + "--color-text-neutral-on-disabled": "--color-neutral-600", + "--color-text-neutral-on-text": "--color-neutral-1700", + "--color-text-neutral-pressed": "--color-neutral-400", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-primary-default": "--color-primary-600", + "--color-text-primary-hover": "--color-primary-400", + "--color-text-primary-on_default": "--color-primary-600", + "--color-text-primary-on_hover": "--color-primary-400", + "--color-text-primary-on_pressed": "--color-neutral-200", + "--color-text-primary-pressed": "--color-primary-800", + "--color-text-semantic-error": "--color-red-600", + "--color-text-semantic-neutral": "--color-neutral-800", + "--color-text-semantic-success": "--color-green-600", + "--color-text-semantic-warning": "--color-yellow-600" + } + } + }, + globant: { + light: { + accent: { + "--color-accent-backdrop-default": "--rgba(23, 23, 23, 0-8)", + "--color-accent-branding-surface": "--color-neutral-1800", + "--color-accent-error-contrast": "--color-scarlet-200", + "--color-accent-error-default": "--color-scarlet-500", + "--color-accent-error-hover": "--color-scarlet-800", + "--color-accent-error-light": "--color-scarlet-300", + "--color-accent-error-lighter": "--color-scarlet-200", + "--color-accent-error-pressed": "--color-scarlet-900", + "--color-accent-gradient-01-end": "--color-gradient-lemon", + "--color-accent-gradient-01-start": "--color-gradient-greenwood", + "--color-accent-gradient-02-end": "--color-gradient-mint", + "--color-accent-gradient-02-start": "--color-gradient-gaserage", + "--color-accent-item-active": "--color-avocado-1000", + "--color-accent-item-hover": "--color-avocado-300", + "--color-accent-item-selected": "--color-avocado-1000", + "--color-accent-neutral-black": "--color-neutral-1300", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-neutral-default": "--color-neutral-900", + "--color-accent-neutral-disabled": "--color-neutral-500", + "--color-accent-neutral-hover": "--color-neutral-1550", + "--color-accent-neutral-light": "--color-neutral-600", + "--color-accent-neutral-neutral": "--color-neutral-900", + "--color-accent-neutral-on-surface": "--color-neutral-1550", + "--color-accent-neutral-pressed": "--color-neutral-200", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-primary-contrast": "--color-primary-300", + "--color-accent-primary-dark": "--color-primary-1000", + "--color-accent-primary-default": "--color-avocado-600", + "--color-accent-primary-focused": "--color-avocado-1100", + "--color-accent-primary-hover": "--color-avocado-300", + "--color-accent-primary-light": "--color-avocado-300", + "--color-accent-primary-lighter": "--color-avocado-200", + "--color-accent-primary-on-default": "--color-avocado-300", + "--color-accent-primary-on-hover": "--color-primary-1000", + "--color-accent-primary-on-pressed": "--color-neutral-300", + "--color-accent-primary-pressed": "--color-primary-1000", + "--color-accent-semantic-error": "--color-scarlet-200", + "--color-accent-semantic-info": "--color-azure-200", + "--color-accent-semantic-neutral": + "--color-accent-neutral-disabled", + "--color-accent-semantic-success": "--color-chateau-200", + "--color-accent-semantic-warning": "--color-ember-200", + "--color-accent-shadow-shadow": "--rgba(11, 18, 7, 0-2)", + "--color-accent-success-contrast": "--color-chateau-200", + "--color-accent-success-default": "--color-chateau-500", + "--color-accent-success-hover": "--color-chateau-800", + "--color-accent-success-light": "--color-chateau-400", + "--color-accent-success-lighter": "--color-chateau-200", + "--color-accent-success-pressed": "--color-chateau-900", + "--color-accent-surface-elevation-01": "--color-neutral-200", + "--color-accent-surface-elevation-02": "--color-neutral-350", + "--color-accent-surface-elevation-03": "--color-neutral-500", + "--color-accent-surface-elevation-answer": "--color-neutral-600", + "--color-accent-surface-surface": "--color-neutral-100", + "--color-accent-warning-contrast": "--color-ember-200", + "--color-accent-warning-default": "--color-ember-400", + "--color-accent-warning-hover": "--color-ember-500", + "--color-accent-warning-light": "--color-ember-300", + "--color-accent-warning-lighter": "--color-ember-200", + "--color-accent-warning-pressed": "--color-ember-800" + }, + border: { + "--color-border-branding-surface": "--color-neutral-1400", + "--color-border-error-dark": "--color-scarlet-200", + "--color-border-error-default": "--color-scarlet-600", + "--color-border-error-hover": "--color-scarlet-700", + "--color-border-error-light": "--color-scarlet-300", + "--color-border-error-lighter": "--color-scarlet-200", + "--color-border-error-pressed": "--color-scarlet-900", + "--color-border-item-active": "--color-avocado-900", + "--color-border-item-hover": "--color-avocado-800", + "--color-border-item-selected": "--color-avocado-900", + "--color-border-neutral-black": "--color-neutral-1300", + "--color-border-neutral-default": "--color-neutral-800", + "--color-border-neutral-disabled": "--color-neutral-1000", + "--color-border-neutral-hover": "--color-neutral-1550", + "--color-border-neutral-light": "--color-neutral-600", + "--color-border-neutral-neutral": "--color-neutral-900", + "--color-border-neutral-on-border": "--color-neutral-1550", + "--color-border-neutral-pressed": "--color-neutral-1500", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-primary-dark": "--color-avocado-1200", + "--color-border-primary-default": "--color-avocado-500", + "--color-border-primary-focused": "--color-avocado-1100", + "--color-border-primary-hover": "--color-avocado-800", + "--color-border-primary-light": "--color-avocado-300", + "--color-border-primary-lighter": "--color-avocado-200", + "--color-border-primary-on_default": "--color-avocado-300", + "--color-border-primary-on_hover": "--color-primary-1000", + "--color-border-primary-on_pressed": "--color-neutral-300", + "--color-border-primary-pressed": "--color-avocado-900", + "--color-border-success-dark": "--color-chateau-200", + "--color-border-success-default": "--color-chateau-500", + "--color-border-success-hover": "--color-chateau-800", + "--color-border-success-light": "--color-chateau-400", + "--color-border-success-lighter": "--color-chateau-200", + "--color-border-success-pressed": "--color-chateau-900", + "--color-border-surface-on-elevation-01": "--color-neutral-400", + "--color-border-surface-on-elevation-02": "--color-neutral-500", + "--color-border-surface-on-elevation-03": "--color-neutral-600", + "--color-border-warning-dark": "--color-ember-200", + "--color-border-warning-default": "--color-ember-500", + "--color-border-warning-hover": "--color-ember-800", + "--color-border-warning-light": "--color-ember-300", + "--color-border-warning-lighter": "--color-ember-200", + "--color-border-warning-pressed": "--color-ember-900" + }, + component: { + "--color-component-chat-01-end": "--#ff00ff", + "--color-component-chat-01-middle": "--#a300ff", + "--color-component-chat-01-start": "--#00ccff" + }, + icon: { + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-neutral-default": "--color-neutral-1400", + "--color-icon-neutral-disabled": "--color-neutral-1000", + "--color-icon-neutral-hover": "--color-neutral-1550", + "--color-icon-neutral-light": "--color-neutral-600", + "--color-icon-neutral-neutral": "--color-neutral-900", + "--color-icon-neutral-on-disabled": "--color-neutral-1100", + "--color-icon-neutral-on-icon": "--color-neutral-200", + "--color-icon-neutral-pressed": "--color-neutral-1450", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-primary-default": "--color-primary-800", + "--color-icon-primary-hover": "--color-primary-900", + "--color-icon-primary-on_default": "--color-avocado-300", + "--color-icon-primary-on_hover": "--color-primary-1000", + "--color-icon-primary-on_pressed": "--color-neutral-300", + "--color-icon-primary-pressed": "--color-primary-1000", + "--color-icon-semantic-error": "--color-scarlet-900", + "--color-icon-semantic-neutral": "--color-neutral-1400", + "--color-icon-semantic-success": "--color-chateau-900", + "--color-icon-semantic-warning": "--color-ember-900" + }, + text: { + "--color-text-branding-surface": "--color-neutral-100", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-neutral-default": "--color-neutral-1400", + "--color-text-neutral-disabled": "--color-neutral-1000", + "--color-text-neutral-hover": "--color-neutral-1550", + "--color-text-neutral-light": "--color-neutral-600", + "--color-text-neutral-neutral": "--color-neutral-900", + "--color-text-neutral-on-disabled": "--color-neutral-1100", + "--color-text-neutral-on-text": "--color-neutral-200", + "--color-text-neutral-pressed": "--color-neutral-1450", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-primary-default": "--color-avocado-600", + "--color-text-primary-hover": "--color-primary-900", + "--color-text-primary-on_default": "--color-avocado-300", + "--color-text-primary-on_hover": "--color-primary-1000", + "--color-text-primary-on_pressed": "--color-neutral-300", + "--color-text-primary-pressed": "--color-primary-1000", + "--color-text-semantic-error": "--color-scarlet-900", + "--color-text-semantic-neutral": "--color-neutral-1400", + "--color-text-semantic-success": "--color-chateau-900", + "--color-text-semantic-warning": "--color-ember-900" + } + }, + dark: { + accent: { + "--color-accent-backdrop-default": "--rgba(23, 23, 23, 0-7)", + "--color-accent-branding-surface": "--color-neutral-100", + "--color-accent-error-contrast": "--color-red-1300", + "--color-accent-error-default": "--color-red-600", + "--color-accent-error-hover": "--color-red-800", + "--color-accent-error-light": "--color-red-500", + "--color-accent-error-lighter": "--color-red-300", + "--color-accent-error-pressed": "--color-red-1000", + "--color-accent-gradient-01-end": "--color-gradient-lemon", + "--color-accent-gradient-01-start": "--color-gradient-greenwood", + "--color-accent-gradient-02-end": "--color-gradient-mint", + "--color-accent-gradient-02-start": "--color-gradient-gaserage", + "--color-accent-item-active": "--color-olive-1100", + "--color-accent-item-hover": "--color-olive-1000", + "--color-accent-item-selected": "--color-olive-1100", + "--color-accent-neutral-black": "--color-neutral-1300", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-neutral-default": "--color-neutral-900", + "--color-accent-neutral-disabled": "--color-neutral-1300", + "--color-accent-neutral-hover": "--color-neutral-300", + "--color-accent-neutral-light": "--color-neutral-400", + "--color-accent-neutral-neutral": "--color-neutral-600", + "--color-accent-neutral-on-surface": "--color-neutral-100", + "--color-accent-neutral-pressed": "--color-neutral-600", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-primary-contrast": "--color-olive-1300", + "--color-accent-primary-dark": "--color-olive-1100", + "--color-accent-primary-default": "--color-olive-600", + "--color-accent-primary-focused": "--color-extra-violet-600", + "--color-accent-primary-hover": "--color-olive-1000", + "--color-accent-primary-light": "--color-olive-300", + "--color-accent-primary-lighter": "--color-olive-200", + "--color-accent-primary-on-default": "--color-olive-600", + "--color-accent-primary-on-hover": "--color-olive-200", + "--color-accent-primary-on-pressed": "--color-neutral-300", + "--color-accent-primary-pressed": "--color-olive-1100", + "--color-accent-semantic-error": "--color-red-600", + "--color-accent-semantic-info": "--color-primary-600", + "--color-accent-semantic-neutral": "--color-neutral-800", + "--color-accent-semantic-success": "--color-green-600", + "--color-accent-semantic-warning": "--color-yellow-600", + "--color-accent-shadow-shadow": "--rgba(0, 0, 0, 0-2)", + "--color-accent-success-contrast": "--color-green-1300", + "--color-accent-success-default": "--color-green-600", + "--color-accent-success-hover": "--color-green-800", + "--color-accent-success-light": "--color-green-500", + "--color-accent-success-lighter": "--color-green-300", + "--color-accent-success-pressed": "--color-green-1000", + "--color-accent-surface-elevation-01": "--color-neutral-1600", + "--color-accent-surface-elevation-02": "--color-neutral-1500", + "--color-accent-surface-elevation-03": "--color-neutral-1300", + "--color-accent-surface-elevation-answer": "--color-neutral-1450", + "--color-accent-surface-surface": "--color-neutral-1700", + "--color-accent-warning-contrast": "--color-yellow-1300", + "--color-accent-warning-default": "--color-yellow-600", + "--color-accent-warning-hover": "--color-yellow-900", + "--color-accent-warning-light": "--color-yellow-400", + "--color-accent-warning-lighter": "--color-yellow-300", + "--color-accent-warning-pressed": "--color-yellow-1000" + }, + border: { + "--color-border-branding-surface": "--color-neutral-1700", + "--color-border-error-dark": "--color-red-1300", + "--color-border-error-default": "--color-red-600", + "--color-border-error-hover": "--color-red-700", + "--color-border-error-light": "--color-red-500", + "--color-border-error-lighter": "--color-red-300", + "--color-border-error-pressed": "--color-red-900", + "--color-border-item-active": "--color-olive-900", + "--color-border-item-hover": "--color-olive-700", + "--color-border-item-selected": "--color-olive-900", + "--color-border-neutral-black": "--color-neutral-1300", + "--color-border-neutral-default": "--color-neutral-900", + "--color-border-neutral-disabled": "--color-neutral-1050", + "--color-border-neutral-hover": "--color-neutral-100", + "--color-border-neutral-light": "--color-neutral-400", + "--color-border-neutral-neutral": "--color-neutral-600", + "--color-border-neutral-on-border": "--color-neutral-100", + "--color-border-neutral-pressed": "--color-neutral-400", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-primary-dark": "--color-olive-1100", + "--color-border-primary-default": "--color-olive-500", + "--color-border-primary-focused": "--color-extra-violet-600", + "--color-border-primary-hover": "--color-olive-700", + "--color-border-primary-light": "--color-olive-300", + "--color-border-primary-lighter": "--color-olive-200", + "--color-border-primary-on_default": "--color-olive-600", + "--color-border-primary-on_hover": "--color-olive-200", + "--color-border-primary-on_pressed": "--color-neutral-300", + "--color-border-primary-pressed": "--color-olive-900", + "--color-border-success-dark": "--color-green-1300", + "--color-border-success-default": "--color-green-600", + "--color-border-success-hover": "--color-green-800", + "--color-border-success-light": "--color-green-500", + "--color-border-success-lighter": "--color-green-300", + "--color-border-success-pressed": "--color-green-1000", + "--color-border-surface-on-elevation-01": "--color-neutral-1300", + "--color-border-surface-on-elevation-02": "--color-neutral-1100", + "--color-border-surface-on-elevation-03": "--color-neutral-900", + "--color-border-warning-dark": "--color-yellow-1300", + "--color-border-warning-default": "--color-yellow-500", + "--color-border-warning-hover": "--color-yellow-800", + "--color-border-warning-light": "--color-yellow-400", + "--color-border-warning-lighter": "--color-yellow-300", + "--color-border-warning-pressed": "--color-yellow-900" + }, + component: { + "--color-component-chat-01-end": "--color-gradient-greenwood", + "--color-component-chat-01-middle": "--color-gradient-mint", + "--color-component-chat-01-start": "--color-gradient-gaserage" + }, + icon: { + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-neutral-default": "--color-neutral-400", + "--color-icon-neutral-disabled": "--color-neutral-1050", + "--color-icon-neutral-hover": "--color-neutral-300", + "--color-icon-neutral-light": "--color-neutral-400", + "--color-icon-neutral-neutral": "--color-neutral-300", + "--color-icon-neutral-on-disabled": "--color-neutral-600", + "--color-icon-neutral-on-icon": "--color-neutral-1700", + "--color-icon-neutral-pressed": "--color-neutral-300", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-primary-default": "--color-olive-600", + "--color-icon-primary-hover": "--color-olive-700", + "--color-icon-primary-on_default": "--color-olive-600", + "--color-icon-primary-on_hover": "--color-olive-200", + "--color-icon-primary-on_pressed": "--color-neutral-300", + "--color-icon-primary-pressed": "--color-olive-900", + "--color-icon-semantic-error": "--color-red-600", + "--color-icon-semantic-neutral": "--color-neutral-800", + "--color-icon-semantic-success": "--color-green-600", + "--color-icon-semantic-warning": "--color-yellow-600" + }, + text: { + "--color-text-branding-surface": "--color-neutral-1800", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-neutral-default": "--color-neutral-400", + "--color-text-neutral-disabled": "--color-neutral-1050", + "--color-text-neutral-hover": "--color-neutral-300", + "--color-text-neutral-light": "--color-neutral-400", + "--color-text-neutral-neutral": "--color-neutral-300", + "--color-text-neutral-on-disabled": "--color-neutral-600", + "--color-text-neutral-on-text": "--color-neutral-1700", + "--color-text-neutral-pressed": "--color-neutral-300", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-primary-default": "--color-olive-600", + "--color-text-primary-hover": "--color-olive-700", + "--color-text-primary-on_default": "--color-olive-600", + "--color-text-primary-on_hover": "--color-olive-200", + "--color-text-primary-on_pressed": "--color-neutral-300", + "--color-text-primary-pressed": "--color-olive-900", + "--color-text-semantic-error": "--color-red-600", + "--color-text-semantic-neutral": "--color-neutral-800", + "--color-text-semantic-success": "--color-green-600", + "--color-text-semantic-warning": "--color-yellow-600" + } + } + } + }, + "font-size": { + body: { + "--font-size-body-l": "--size-16", + "--font-size-body-m": "--size-14", + "--font-size-body-s": "--size-12", + "--font-size-body-xl": "--size-18", + "--font-size-body-xs": "--size-11" + }, + caption: { + "--font-size-caption-l": "--size-11", + "--font-size-caption-m": "--size-10", + "--font-size-caption-s": "--size-8" + }, + header: { + "--font-size-header-h1": "--size-40", + "--font-size-header-h2": "--size-32", + "--font-size-header-h3": "--size-28", + "--font-size-header-h4": "--size-24", + "--font-size-header-h5": "--size-20", + "--font-size-header-h6": "--size-18" + }, + subtitle: { + "--font-size-subtitle-l": "--size-18", + "--font-size-subtitle-m": "--size-16", + "--font-size-subtitle-s": "--size-15", + "--font-size-subtitle-xl": "--size-20", + "--font-size-subtitle-xs": "--size-14" + } + } + } +} as const; + +export default mercuryTokens; diff --git a/packages/mercury/src/tokens/_gradients.scss b/packages/mercury/src/tokens/_gradients.scss new file mode 100644 index 000000000..6d3e8560d --- /dev/null +++ b/packages/mercury/src/tokens/_gradients.scss @@ -0,0 +1,86 @@ +@mixin foundation-colors--gradients() { + // gradients + --color-gradient-angle: 225deg; + --color-gradient-opacity-low: 0.7; + --color-gradient-opacity-medium: 0.9; + --color-gradient-opacity-high: 1; + + // gradient 01 + --color-gradient-01: linear-gradient( + var(--color-gradient-angle), + rgba(0, 204, 255, var(--color-gradient-opacity-medium)) 0%, + rgba(163, 0, 255, var(--color-gradient-opacity-medium)) 100% + ); + // gradient 02 + --color-gradient-02: linear-gradient( + var(--color-gradient-angle), + rgba(57, 255, 20, var(--color-gradient-opacity-high)) 0%, + rgba(255, 0, 114, var(--color-gradient-opacity-high)) 100% + ); + // gradient 03 + --color-gradient-03: linear-gradient( + var(--color-gradient-angle), + rgba(0, 245, 255, var(--color-gradient-opacity-low)) 0%, + rgba(255, 234, 0, var(--color-gradient-opacity-high)) 100% + ); + // gradient 04 + --color-gradient-04: linear-gradient( + var(--color-gradient-angle), + rgba(16, 196, 195, var(--color-gradient-opacity-high)) 0%, + rgba(236, 30, 91, var(--color-gradient-opacity-high)) 100% + ); + // gradient 05 + --color-gradient-05: linear-gradient( + var(--color-gradient-angle), + rgba(255, 0, 162, var(--color-gradient-opacity-high)) 0%, + rgba(139, 0, 255, var(--color-gradient-opacity-high)) 100% + ); + // gradient 06 + --color-gradient-06: linear-gradient( + var(--color-gradient-angle), + rgba(204, 255, 0, var(--color-gradient-opacity-medium)) 0%, + rgba(0, 255, 204, var(--color-gradient-opacity-medium)) 100% + ); + // gradient 07 + --color-gradient-07: linear-gradient( + var(--color-gradient-angle), + rgba(91, 118, 255, var(--color-gradient-opacity-medium)) 0%, + rgba(0, 255, 203, var(--color-gradient-opacity-medium)) 100% + ); + // gradient 08 + --color-gradient-08: linear-gradient( + var(--color-gradient-angle), + rgba(255, 0, 255, var(--color-gradient-opacity-high)) 0%, + rgba(0, 149, 255, var(--color-gradient-opacity-high)) 100% + ); + // gradient 09 + --color-gradient-09: linear-gradient( + var(--color-gradient-angle), + rgba(255, 69, 0, var(--color-gradient-opacity-medium)) 0%, + rgba(142, 84, 200, var(--color-gradient-opacity-medium)) 100% + ); + // gradient 10 + --color-gradient-10: linear-gradient( + var(--color-gradient-angle), + rgba(255, 0, 127, var(--color-gradient-opacity-low)) 0%, + rgba(0, 255, 0, var(--color-gradient-opacity-low)) 100% + ); + // gradient 11 + --color-gradient-11: linear-gradient( + var(--color-gradient-angle), + rgba(255, 199, 0, var(--color-gradient-opacity-high)) 0%, + rgba(138, 43, 226, var(--color-gradient-opacity-high)) 100% + ); + // gradient 12 + --color-gradient-12: linear-gradient( + var(--color-gradient-angle), + rgba(255, 0, 51, var(--color-gradient-opacity-medium)) 0%, + rgba(255, 204, 0, var(--color-gradient-opacity-medium)) 100% + ); + // gradient 13 + --color-gradient-13: linear-gradient( + var(--color-gradient-angle), + rgba(0, 255, 60, var(--color-gradient-opacity-high)) 0%, + rgba(255, 102, 0, var(--color-gradient-opacity-high)) 100% + ); +} diff --git a/packages/mercury/src/tokens/_item.scss b/packages/mercury/src/tokens/_item.scss new file mode 100644 index 000000000..169746a1e --- /dev/null +++ b/packages/mercury/src/tokens/_item.scss @@ -0,0 +1,107 @@ +@mixin semantic-item() { + // - - - - - - - - - - - - - - - - - - - - + // Items + // - - - - - - - - - - - - - - - - - - - - + + // Colors + --item-bg-color: var(--item-bg-color-enabled); + --item-border-color: var(--item-border-color-enabled); + --item-color: var(--item-color-enabled); + + // enabled + --item-bg-color-enabled: transparent; + --item-border-color-enabled: transparent; + --item-color-enabled: var(--color-text-neutral-default); + + // hover + --item-bg-color-hover: var(--color-accent-item-hover); + --item-border-color-hover: transparent; + --item-color-hover: var(--color-text-primary-on-hover); + + // selected + --item-bg-color-selected: var(--color-accent-item-selected); + --item-border-color-selected: transparent; + --item-color-selected: var(--color-text-neutral-white); + + // selected + hover + --item-bg-color-selected-hover: var(--item-bg-color-selected); + --item-border-color-selected-hover: transparent; + --item-color-selected-hover: var(--item-color-selected); + + // disabled + --item-bg-color-disabled: transparent; + --item-border-color-disabled: transparent; + --item-color-disabled: var(--color-text-neutral-disabled); + + // Border + --item-border-width: var(--size-1); + --item-border-style: solid; + --item-border-radius: var(--size-4); + + // Layout + --item-padding-block: var(--size-4); + --item-padding-inline: var(--size-8); + + --item-gap-regular: var(--size-8); + + // - - - - - - - - - - - - - - - - - - - - + // Items Container + // - - - - - - - - - - - - - - - - - - - - + + // Border + --items-container-border-radius: var(--size-4); + --items-container-border-style: solid; + --items-container-border-width: var(--size-1); + + // Colors + --items-container-bg-color: var(--color-accent-surface-elevation-01); + --items-container-border-color: var(--color-border-surface-on-elevation-01); + + // Layout + --items-container-padding-block: var(--size-8); + --items-container-padding-inline: var(--size-8); + --items-container-gap: var( + --size-0 + ); // TODO: Check with designer if there should be gap. + --items-container-gap-small: var( + --size-0 + ); // TODO: Check with designer if there should be gap. + --items-container-max-block-size: 300px; + + // - - - - - - - - - - - - - - - - - - - - + // Grid Cell + // - - - - - - - - - - - - - - - - - - - - + + --grid-cell-border-color: var(--color-border-surface-on-elevation-01); + --grid-cell-border: var(--size-1) solid var(--grid-cell-border-color); + --grid-cell-box-shadow-inline-block: 0 0 0 1px var(--grid-cell-border-color); + --grid-cell-padding-block: var(--size-8); + --grid-cell-padding-inline: var(--size-12); + + // - - - - - - - - - - - - - - - - - - - - + // Tab Caption (Button) + // - - - - - - - - - - - - - - - - - - - - + + // Colors + --tab-caption-color: var(--tab-caption-color-enabled); + --tab-caption-bg-color: var(--tab-caption-bg-color-enabled); + --tab-caption-border-color: transparent; + + // enabled + --tab-caption-color-enabled: var(--color-text-neutral-default); + --tab-caption-bg-color-enabled: transparent; + --tab-caption-border-color--enabled: transparent; + + // selected + --tab-caption-border-color-selected-inline: var( + --color-accent-primary-default + ); + --tab-caption-border-color-selected-stack: var( + --color-accent-primary-default + ); + --tab-caption-color-selected: var(--color-text-neutral-default); + + // Layout + --tab-caption-padding-block: var(--size-8); + --tab-caption-padding-inline: var(--size-12); +} diff --git a/packages/mercury/src/tokens/_timing.scss b/packages/mercury/src/tokens/_timing.scss new file mode 100644 index 000000000..1f8f963b7 --- /dev/null +++ b/packages/mercury/src/tokens/_timing.scss @@ -0,0 +1,6 @@ +@mixin timing() { + --timing-super-fast: 100ms; + --timing-fast: 200ms; + --timing-regular: 500ms; + --timing-slow: 1000ms; +} diff --git a/packages/mercury/src/tokens/figma-tokens-source.json b/packages/mercury/src/tokens/figma-tokens-source.json new file mode 100644 index 000000000..5ebc8f8ea --- /dev/null +++ b/packages/mercury/src/tokens/figma-tokens-source.json @@ -0,0 +1,5938 @@ +[ + { + "_primitive": { + "modes": { + "Default": { + "color": { + "globant": { + "primary": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f9fbf2" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f5f8e8" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#eaf1ce" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#deeab0" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#d2e38c" + }, + "550": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#cfe184" + }, + "580": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#c6d572" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#bfd732" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#b4cc28" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#a3b72b" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#8d9f25" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#515c15" + }, + "1100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#2e340a" + }, + "1200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#262b08" + } + }, + "neutral": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ffffff" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fafafa" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f5f5f5" + }, + "350": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f0f0f0" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ededed" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e5e5e5" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#d6d6d6" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#cccccc" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#bdbdbd" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#a9a9a9" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#8c8c8c" + }, + "1050": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#6b6b6b" + }, + "1100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#686868" + }, + "1200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#575757" + }, + "1300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#464646" + }, + "1400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#3b3b3b" + }, + "1450": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#373737" + }, + "1500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#303030" + }, + "1550": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#262626" + }, + "1600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#212121" + }, + "1700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#171717" + }, + "1800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#000000" + } + }, + "red": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fcf4f4" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f8dfe0" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f4cdcf" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#eda4a7" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e98b8f" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e35861" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#d54b54" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#a63a41" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#883035" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#6d272b" + }, + "1300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#2d1012" + } + }, + "green": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#eef5f4" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ddebe9" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#cae0dd" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#b4d5d0" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#9cc9c2" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#3fa89b" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#389287" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#318278" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#286a62" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#1c4b45" + }, + "1300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#112d29" + } + }, + "yellow": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fffbf6" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fef1e3" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fde8cf" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fcdeb8" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fac980" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f9bd56" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ffc96b" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ecaf44" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#b97d13" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#6f4b0b" + }, + "1300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#382606" + } + }, + "gradient": { + "gaserage": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#c0fb73" + }, + "mint": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#38efa0" + }, + "greenwood": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#d9e021" + }, + "lemon": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#8cc63f" + } + }, + "opacity": { + "70": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#171717" + } + }, + "olive": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fcfcf2" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f2f3c9" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e8ed9f" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#dee873" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#d2e546" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#c3e01a" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#a8c118" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#8ea216" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#7c8e15" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#647213" + }, + "1100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#4d580e" + }, + "1200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#3a420b" + }, + "1300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#262b08" + } + }, + "avocado": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f6f7ec" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e7e9c8" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#d8dfa3" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#c7d67b" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#b4d050" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#88af1d" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#749519" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#617920" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#53681d" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#455519" + }, + "1100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#333f13" + }, + "1200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#232a0e" + }, + "1300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#131708" + } + }, + "extra": { + "violet-600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#9a00fa" + } + } + }, + "mercury": { + "primary": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f4f8ff" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ebf0ff" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#cee0ff" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#b0cfff" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#8cbcff" + }, + "550": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#75aef0" + }, + "580": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#729fd5" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#5ba7ff" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#5498e8" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#437dc0" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#335884" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#294b72" + }, + "1100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#005ac1" + }, + "1300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#101e2d" + } + }, + "neutral": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fafbfd" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f0f4fa" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e1ecf9" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#d2ddeb" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#c0ccd9" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#aeb9c6" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#9da9b6" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#828b96" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#56677a" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#4a5870" + }, + "1050": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#405975" + }, + "1100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#485665" + }, + "1200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#394552" + }, + "1300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#333d47" + }, + "1400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#2d3a48" + }, + "1450": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#243750" + }, + "1500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#242d3c" + }, + "1550": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#17273b" + }, + "1600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#181f2a" + }, + "1700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#11151c" + }, + "1800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#000000" + }, + "000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ffffff" + } + }, + "lilac": { + "50": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f9fafa" + }, + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f8f9fc" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#edf0f8" + }, + "250": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e2e7f4" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#dee1ed" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#d5daeb" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#c8d0e9" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#c2cbe6" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#bcc5e4" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#b7c2e2" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#9babd9" + } + }, + "azure": { + "50": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#eaf3fe" + }, + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e1eefe" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#c6dffd" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#9cc8fc" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#3791fb" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#0a7cff" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#0072f8" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#0049cd" + }, + "750": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#1f52ae" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#0034b1" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#002da8" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#173d82" + } + }, + "chateau": { + "50": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e0f6e7" + }, + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#b9eaca" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#92dead" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#72d495" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#4fca7a" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#35b061" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#2d9552" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#247541" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#1c5e34" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#154627" + } + }, + "scarlet": { + "50": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fee6e6" + }, + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fdcece" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fcb5b5" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fb9d9d" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f96c6c" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#c50707" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ac0606" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#8a0505" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#6c0404" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#4f0303" + } + }, + "ember": { + "50": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fffbeb" + }, + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fff9e0" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ffeda3" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ffe370" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ffdd52" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ffcd00" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#cca400" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#997b00" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#665200" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#3d3100" + } + }, + "red": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fcf4f4" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f8dfe0" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f4cdcf" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#eda4a7" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e98b8f" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#e35861" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#d54b54" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#a63a41" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#883035" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#6d272b" + }, + "1300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#2d1012" + } + }, + "green": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#eef5f4" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ddebe9" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#cae0dd" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#b4d5d0" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#9cc9c2" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#3fa89b" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#389287" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#318278" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#286a62" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#1c4b45" + }, + "1300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#112d29" + } + }, + "yellow": { + "100": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fffbf6" + }, + "200": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fef1e3" + }, + "300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fde8cf" + }, + "400": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fcdeb8" + }, + "500": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#fac980" + }, + "600": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#f9bd56" + }, + "700": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ffc96b" + }, + "800": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ecaf44" + }, + "900": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#b97d13" + }, + "1000": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#6f4b0b" + }, + "1300": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#382606" + } + }, + "gradient": { + "sky": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#00ccff" + }, + "purple": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#a300ff" + }, + "magenta": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ff00ff" + }, + "berry": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#0095ff" + } + }, + "opacity": { + "70": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "rgba(17, 21, 28, 0.7)" + } + } + } + }, + "font-style": { + "regular": { + "$scopes": ["ALL_SCOPES"], + "$type": "string", + "$value": "Regular" + }, + "semi-bold": { + "$scopes": ["ALL_SCOPES"], + "$type": "string", + "$value": "Semi Bold" + }, + "bold": { + "$scopes": ["ALL_SCOPES"], + "$type": "string", + "$value": "Bold" + }, + "italic": { + "$scopes": ["ALL_SCOPES"], + "$type": "string", + "$value": "Italic" + } + }, + "font-family": { + "header": { + "$scopes": ["ALL_SCOPES"], + "$type": "string", + "$value": "Inter" + }, + "body": { + "$scopes": ["ALL_SCOPES"], + "$type": "string", + "$value": "Inter" + }, + "code": { + "$scopes": ["ALL_SCOPES"], + "$type": "string", + "$value": "DM Mono" + } + }, + "size": { + "0": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 0 + }, + "1": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 1 + }, + "2": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 2 + }, + "4": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 4 + }, + "6": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 6 + }, + "8": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 8 + }, + "10": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 10 + }, + "11": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 11 + }, + "12": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 12 + }, + "14": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 14 + }, + "15": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 15 + }, + "16": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 16 + }, + "18": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 18 + }, + "20": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 20 + }, + "22": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 22 + }, + "24": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 24 + }, + "26": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 26 + }, + "28": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 28 + }, + "32": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 32 + }, + "40": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 40 + }, + "48": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 48 + }, + "56": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 56 + }, + "64": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 64 + }, + "72": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 72 + }, + "80": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": 80 + }, + "-2": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": -2 + }, + "-1": { + "$scopes": ["ALL_SCOPES"], + "$type": "float", + "$value": -1 + } + }, + "line-height": { + "tight": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 1.2000000476837158 + }, + "regular": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 1.2999999523162842 + }, + "relaxed": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 1.399999976158142 + }, + "spacious": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 1.5 + }, + "loose": { + "$scopes": ["LINE_HEIGHT"], + "$type": "float", + "$value": 1.600000023841858 + } + } + } + } + } + }, + { + "color": { + "modes": { + "Mercury Dark": { + "color": { + "accent": { + "primary": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.300}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.500}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.600}" + }, + "on-default": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.600}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1450}" + }, + "on-hover": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.400}" + }, + "focused": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.000}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.1000}" + }, + "on-pressed": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.200}" + }, + "dark": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.1100}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.1300}" + } + }, + "neutral": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.900}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.300}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.600}" + }, + "disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1300}" + }, + "on-surface": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.100}" + }, + "white": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.100}" + }, + "light": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.400}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.600}" + }, + "black": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1700}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1550}" + } + }, + "error": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.300}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.500}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.600}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.800}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.1000}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.1300}" + } + }, + "success": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.300}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.500}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.600}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.800}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.1000}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.1300}" + } + }, + "warning": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.300}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.400}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$description": "--color-semantic__warning", + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.600}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.900}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.1000}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.1300}" + } + }, + "backdrop": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.opacity.70}" + } + }, + "item": { + "active": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1550}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1450}" + }, + "selected": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1550}" + } + }, + "surface": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1700}" + }, + "elevation-01": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1600}" + }, + "elevation-02": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1500}" + }, + "elevation-03": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1400}" + }, + "elevation-answer": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1450}" + } + }, + "semantic": { + "info": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.600}" + }, + "success": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.600}" + }, + "warning": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.600}" + }, + "error": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.600}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.800}" + } + }, + "branding": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + } + }, + "gradient": { + "01-start": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.sky}" + }, + "01-end": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.purple}" + }, + "02-start": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.berry}" + }, + "02-end": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.magenta}" + } + }, + "shadow": { + "shadow": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$value": "rgba(0, 0, 0, 0.2)" + } + } + }, + "border": { + "primary": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.300}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.500}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.600}" + }, + "on_default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.600}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.550}" + }, + "on_hover": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.400}" + }, + "focused": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.000}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.580}" + }, + "on_pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.400}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.1300}" + } + }, + "neutral": { + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.900}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.300}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.400}" + }, + "disabled": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.800}" + }, + "on-border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.100}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.400}" + }, + "white": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.100}" + }, + "neutral": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.600}" + }, + "black": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1700}" + } + }, + "error": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.300}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.500}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.600}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.700}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.900}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.1300}" + } + }, + "success": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.300}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.500}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.600}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.800}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.1000}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.1300}" + } + }, + "warning": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.300}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.400}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.500}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.800}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.900}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.1300}" + } + }, + "item": { + "active": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.580}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1050}" + }, + "selected": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.580}" + } + }, + "surface": { + "on-elevation-01": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1300}" + }, + "on-elevation-02": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1100}" + }, + "on-elevation-03": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.900}" + } + }, + "branding": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1700}" + } + } + }, + "text": { + "primary": { + "default": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.600}" + }, + "on_default": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.600}" + }, + "hover": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.400}" + }, + "on_hover": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.400}" + }, + "pressed": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.800}" + }, + "on_pressed": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.200}" + } + }, + "neutral": { + "default": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.200}" + }, + "hover": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.300}" + }, + "pressed": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.400}" + }, + "disabled": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.800}" + }, + "on-disabled": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.600}" + }, + "on-text": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1700}" + }, + "light": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.400}" + }, + "white": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.100}" + }, + "neutral": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.400}" + }, + "dark": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1700}" + } + }, + "semantic": { + "success": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.600}" + }, + "warning": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.600}" + }, + "error": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.600}" + }, + "neutral": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.800}" + } + }, + "branding": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1800}" + } + } + }, + "icon": { + "primary": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.600}" + }, + "on_default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.600}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.400}" + }, + "on_hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.400}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.800}" + }, + "on_pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.200}" + } + }, + "neutral": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.200}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.300}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.400}" + }, + "disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.800}" + }, + "on-disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.600}" + }, + "on-icon": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1700}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.400}" + }, + "white": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.100}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.400}" + }, + "dark": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1700}" + } + }, + "semantic": { + "success": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.600}" + }, + "warning": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.600}" + }, + "error": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.600}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.800}" + } + } + }, + "component": { + "chat": { + "01-start": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.sky}" + }, + "01-middle": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.purple}" + }, + "01-end": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.magenta}" + } + } + } + } + }, + "Mercury Light": { + "color": { + "accent": { + "primary": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.50}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.100}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.500}" + }, + "on-default": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.300}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.300}" + }, + "on-hover": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.800}" + }, + "focused": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.900}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.1000}" + }, + "on-pressed": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.300}" + }, + "dark": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.800}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.200}" + } + }, + "neutral": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.700}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1550}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.200}" + }, + "disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.400}" + }, + "on-surface": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.1300}" + }, + "white": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.100}" + }, + "light": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.600}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.900}" + }, + "black": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.1300}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1550}" + } + }, + "error": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.200}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.300}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.500}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.800}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.900}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.200}" + } + }, + "success": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.200}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.400}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.500}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.800}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.900}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.200}" + } + }, + "warning": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.200}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.300}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$description": "--color-semantic__warning", + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.400}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.500}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.800}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.200}" + } + }, + "backdrop": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$value": "rgba(17, 21, 28, 0.8)" + } + }, + "item": { + "active": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.1000}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.300}" + }, + "selected": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.1000}" + } + }, + "surface": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.lilac.50}" + }, + "elevation-01": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.lilac.200}" + }, + "elevation-02": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.lilac.250}" + }, + "elevation-03": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.lilac.400}" + }, + "elevation-answer": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.lilac.600}" + } + }, + "semantic": { + "info": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.200}" + }, + "success": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.200}" + }, + "warning": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.200}" + }, + "error": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.200}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "color", + "$value": "{color.accent.neutral.disabled}" + } + }, + "branding": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1800}" + } + }, + "gradient": { + "01-start": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.sky}" + }, + "01-end": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.purple}" + }, + "02-start": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.berry}" + }, + "02-end": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.magenta}" + } + }, + "shadow": { + "shadow": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$value": "rgba(7, 10, 18, 0.2)" + } + } + }, + "border": { + "primary": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.50}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.100}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.600}" + }, + "on_default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.300}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.800}" + }, + "on_hover": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.800}" + }, + "focused": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.900}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.700}" + }, + "on_pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.300}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.900}" + } + }, + "neutral": { + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.700}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1550}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1500}" + }, + "disabled": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.700}" + }, + "on-border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.1300}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.600}" + }, + "white": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.100}" + }, + "neutral": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.900}" + }, + "black": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.1300}" + } + }, + "error": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.200}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.300}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.500}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.800}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.900}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.200}" + } + }, + "success": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.200}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.400}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.500}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.800}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.900}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.200}" + } + }, + "warning": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.200}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.300}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.500}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.800}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.900}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.200}" + } + }, + "item": { + "active": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.800}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.400}" + }, + "selected": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.800}" + } + }, + "surface": { + "on-elevation-01": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.lilac.400}" + }, + "on-elevation-02": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.lilac.500}" + }, + "on-elevation-03": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.lilac.600}" + } + }, + "branding": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1400}" + } + } + }, + "text": { + "primary": { + "default": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.600}" + }, + "on_default": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.300}" + }, + "hover": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.400}" + }, + "on_hover": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.800}" + }, + "pressed": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.750}" + }, + "on_pressed": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.300}" + } + }, + "neutral": { + "default": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1400}" + }, + "hover": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1550}" + }, + "pressed": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1550}" + }, + "disabled": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.800}" + }, + "on-disabled": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1000}" + }, + "on-text": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.200}" + }, + "light": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.600}" + }, + "white": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.100}" + }, + "neutral": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.900}" + }, + "dark": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1700}" + } + }, + "semantic": { + "success": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.900}" + }, + "warning": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.900}" + }, + "error": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.900}" + }, + "neutral": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1400}" + } + }, + "branding": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + } + } + }, + "icon": { + "primary": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.600}" + }, + "on_default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.300}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.400}" + }, + "on_hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.800}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.750}" + }, + "on_pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.300}" + } + }, + "neutral": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1400}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1550}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1450}" + }, + "disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.800}" + }, + "on-disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1000}" + }, + "on-icon": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.100}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.600}" + }, + "white": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.100}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.900}" + }, + "dark": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1700}" + } + }, + "semantic": { + "success": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.900}" + }, + "warning": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.900}" + }, + "error": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.900}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.neutral.1400}" + } + } + }, + "component": { + "chat": { + "01-start": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.sky}" + }, + "01-middle": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.purple}" + }, + "01-end": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.gradient.magenta}" + } + } + } + } + }, + "Globant Dark": { + "color": { + "accent": { + "primary": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.200}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.300}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.600}" + }, + "on-default": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.600}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.1000}" + }, + "on-hover": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.200}" + }, + "focused": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.extra.violet-600}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.1100}" + }, + "on-pressed": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + }, + "dark": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.1100}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.1300}" + } + }, + "neutral": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.900}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.600}" + }, + "disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1300}" + }, + "on-surface": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + }, + "white": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + }, + "light": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.400}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.600}" + }, + "black": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1300}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1550}" + } + }, + "error": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.300}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.500}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.600}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.800}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.1000}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.1300}" + } + }, + "success": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.300}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.500}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.600}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.800}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.1000}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.1300}" + } + }, + "warning": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.300}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.400}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$description": "--color-semantic__warning", + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.600}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.900}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.1000}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.1300}" + } + }, + "backdrop": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$value": "rgba(23, 23, 23, 0.7)" + } + }, + "item": { + "active": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.1100}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.1000}" + }, + "selected": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.1100}" + } + }, + "surface": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1700}" + }, + "elevation-01": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1600}" + }, + "elevation-02": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1500}" + }, + "elevation-03": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1300}" + }, + "elevation-answer": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1450}" + } + }, + "semantic": { + "info": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.primary.600}" + }, + "success": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.600}" + }, + "warning": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.600}" + }, + "error": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.600}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.800}" + } + }, + "branding": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + } + }, + "gradient": { + "01-start": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.gradient.greenwood}" + }, + "01-end": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.gradient.lemon}" + }, + "02-start": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.gradient.gaserage}" + }, + "02-end": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.gradient.mint}" + } + }, + "shadow": { + "shadow": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$value": "rgba(0, 0, 0, 0.2)" + } + } + }, + "border": { + "primary": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.200}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.300}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.500}" + }, + "on_default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.600}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.700}" + }, + "on_hover": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.200}" + }, + "focused": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$value": "{color.globant.extra.violet-600}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.900}" + }, + "on_pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.1100}" + } + }, + "neutral": { + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.900}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.400}" + }, + "disabled": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1050}" + }, + "on-border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.400}" + }, + "white": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + }, + "neutral": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.600}" + }, + "black": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1300}" + } + }, + "error": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.300}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.500}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.600}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.700}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.900}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.1300}" + } + }, + "success": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.300}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.500}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.600}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.800}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.1000}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.1300}" + } + }, + "warning": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.300}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.400}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.500}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.800}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.900}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.1300}" + } + }, + "item": { + "active": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.900}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.700}" + }, + "selected": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.900}" + } + }, + "surface": { + "on-elevation-01": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1300}" + }, + "on-elevation-02": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1100}" + }, + "on-elevation-03": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.900}" + } + }, + "branding": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1700}" + } + } + }, + "text": { + "primary": { + "default": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.600}" + }, + "on_default": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.600}" + }, + "hover": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.700}" + }, + "on_hover": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.200}" + }, + "pressed": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.900}" + }, + "on_pressed": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + } + }, + "neutral": { + "default": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.400}" + }, + "hover": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + }, + "pressed": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + }, + "disabled": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1050}" + }, + "on-disabled": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.600}" + }, + "on-text": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1700}" + }, + "light": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.400}" + }, + "white": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + }, + "neutral": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + }, + "dark": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1700}" + } + }, + "semantic": { + "success": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.600}" + }, + "warning": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.600}" + }, + "error": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.600}" + }, + "neutral": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.800}" + } + }, + "branding": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1800}" + } + } + }, + "icon": { + "primary": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.600}" + }, + "on_default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.600}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.700}" + }, + "on_hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.200}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.olive.900}" + }, + "on_pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + } + }, + "neutral": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.400}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + }, + "disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1050}" + }, + "on-disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.600}" + }, + "on-icon": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1700}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.400}" + }, + "white": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + }, + "dark": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1700}" + } + }, + "semantic": { + "success": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.green.600}" + }, + "warning": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.yellow.600}" + }, + "error": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.red.600}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.800}" + } + } + }, + "component": { + "chat": { + "01-start": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.gradient.gaserage}" + }, + "01-middle": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.gradient.mint}" + }, + "01-end": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.gradient.greenwood}" + } + } + } + } + }, + "Globant Light": { + "color": { + "accent": { + "primary": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.200}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.300}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.600}" + }, + "on-default": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.300}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.300}" + }, + "on-hover": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.primary.1000}" + }, + "focused": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.1100}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.primary.1000}" + }, + "on-pressed": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + }, + "dark": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.primary.1000}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.primary.300}" + } + }, + "neutral": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.900}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1550}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.200}" + }, + "disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.500}" + }, + "on-surface": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1550}" + }, + "white": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + }, + "light": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.600}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.900}" + }, + "black": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1300}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1550}" + } + }, + "error": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.200}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.300}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.500}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.800}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.900}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.200}" + } + }, + "success": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.200}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.400}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.500}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.800}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.900}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.200}" + } + }, + "warning": { + "lighter": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.200}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.300}" + }, + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$description": "--color-semantic__warning", + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.400}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.500}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.800}" + }, + "contrast": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.200}" + } + }, + "backdrop": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$value": "rgba(23, 23, 23, 0.8)" + } + }, + "item": { + "active": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.1000}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.300}" + }, + "selected": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.1000}" + } + }, + "surface": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + }, + "elevation-01": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.200}" + }, + "elevation-02": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.350}" + }, + "elevation-03": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.500}" + }, + "elevation-answer": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.600}" + } + }, + "semantic": { + "info": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.azure.200}" + }, + "success": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.200}" + }, + "warning": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.200}" + }, + "error": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.200}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "color", + "$value": "{color.accent.neutral.disabled}" + } + }, + "branding": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1800}" + } + }, + "gradient": { + "01-start": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.gradient.greenwood}" + }, + "01-end": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.gradient.lemon}" + }, + "02-start": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.gradient.gaserage}" + }, + "02-end": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.gradient.mint}" + } + }, + "shadow": { + "shadow": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$value": "rgba(11, 18, 7, 0.2)" + } + } + }, + "border": { + "primary": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.200}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.300}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.500}" + }, + "on_default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.300}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.800}" + }, + "on_hover": { + "$scopes": ["ALL_FILLS"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.primary.1000}" + }, + "focused": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.1100}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.900}" + }, + "on_pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.1200}" + } + }, + "neutral": { + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.800}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1550}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1500}" + }, + "disabled": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1000}" + }, + "on-border": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1550}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.600}" + }, + "white": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + }, + "neutral": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.900}" + }, + "black": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1300}" + } + }, + "error": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.200}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.300}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.600}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.700}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.900}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.200}" + } + }, + "success": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.200}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.400}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.500}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.800}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.900}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.200}" + } + }, + "warning": { + "lighter": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.200}" + }, + "light": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.300}" + }, + "default": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.500}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.800}" + }, + "pressed": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.900}" + }, + "dark": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.200}" + } + }, + "item": { + "active": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.900}" + }, + "hover": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.800}" + }, + "selected": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.900}" + } + }, + "surface": { + "on-elevation-01": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.400}" + }, + "on-elevation-02": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.500}" + }, + "on-elevation-03": { + "$scopes": ["STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.600}" + } + }, + "branding": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1400}" + } + } + }, + "text": { + "primary": { + "default": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.600}" + }, + "on_default": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.300}" + }, + "hover": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.primary.900}" + }, + "on_hover": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.primary.1000}" + }, + "pressed": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.primary.1000}" + }, + "on_pressed": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + } + }, + "neutral": { + "default": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1400}" + }, + "hover": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1550}" + }, + "pressed": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1450}" + }, + "disabled": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1000}" + }, + "on-disabled": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1100}" + }, + "on-text": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.200}" + }, + "light": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.600}" + }, + "white": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + }, + "neutral": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.900}" + }, + "dark": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1700}" + } + }, + "semantic": { + "success": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.900}" + }, + "warning": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.900}" + }, + "error": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.900}" + }, + "neutral": { + "$scopes": ["TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1400}" + } + }, + "branding": { + "surface": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "TEXT_FILL"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + } + } + }, + "icon": { + "primary": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.primary.800}" + }, + "on_default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.avocado.300}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.primary.900}" + }, + "on_hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.primary.1000}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.primary.1000}" + }, + "on_pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.300}" + } + }, + "neutral": { + "default": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1400}" + }, + "hover": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1550}" + }, + "pressed": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1450}" + }, + "disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1000}" + }, + "on-disabled": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1100}" + }, + "on-icon": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.200}" + }, + "light": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.600}" + }, + "white": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.100}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.900}" + }, + "dark": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1700}" + } + }, + "semantic": { + "success": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.chateau.900}" + }, + "warning": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.ember.900}" + }, + "error": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.mercury.scarlet.900}" + }, + "neutral": { + "$scopes": ["FRAME_FILL", "SHAPE_FILL", "STROKE_COLOR"], + "$type": "color", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{color.globant.neutral.1400}" + } + } + }, + "component": { + "chat": { + "01-start": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#00ccff" + }, + "01-middle": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#a300ff" + }, + "01-end": { + "$scopes": ["ALL_SCOPES"], + "$type": "color", + "$value": "#ff00ff" + } + } + } + } + } + } + } + }, + { + "font-size": { + "modes": { + "Default": { + "font-size": { + "header": { + "h1": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.40}" + }, + "h2": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.32}" + }, + "h3": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.28}" + }, + "h4": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.24}" + }, + "h5": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.20}" + }, + "h6": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.18}" + } + }, + "subtitle": { + "xl": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.20}" + }, + "l": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.18}" + }, + "m": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.16}" + }, + "s": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.15}" + }, + "xs": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.14}" + } + }, + "body": { + "xl": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.18}" + }, + "l": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.16}" + }, + "m": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.14}" + }, + "s": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.12}" + }, + "xs": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.11}" + } + }, + "caption": { + "l": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.11}" + }, + "m": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.10}" + }, + "s": { + "$scopes": ["FONT_SIZE"], + "$type": "float", + "$libraryName": "", + "$collectionName": "_primitive", + "$value": "{size.8}" + } + } + } + } + } + } + } +] diff --git a/packages/mercury/showcase/assets/styles/icons.css b/packages/mercury/src/tokens/generator/index.ts similarity index 100% rename from packages/mercury/showcase/assets/styles/icons.css rename to packages/mercury/src/tokens/generator/index.ts diff --git a/packages/mercury/src/tokens/generator/internal/constants.ts b/packages/mercury/src/tokens/generator/internal/constants.ts new file mode 100644 index 000000000..07f6953f2 --- /dev/null +++ b/packages/mercury/src/tokens/generator/internal/constants.ts @@ -0,0 +1,2 @@ +export const TOKEN_PREFIX = "--"; +export const TOKEN_PREFIX_IN_JSON = `"${TOKEN_PREFIX}`; diff --git a/packages/mercury/src/tokens/generator/internal/get-all-mercury-tokens.ts b/packages/mercury/src/tokens/generator/internal/get-all-mercury-tokens.ts new file mode 100644 index 000000000..bdc77e23a --- /dev/null +++ b/packages/mercury/src/tokens/generator/internal/get-all-mercury-tokens.ts @@ -0,0 +1,103 @@ +import { FigmaTokens } from "../typings/figma-file-types"; +import { MercuryGenericTokensDefinition } from "../typings/output-file-types"; +import { + getMercuryTokensByCategoryUsingFigmaFile, + getMercuryTokensUsingFigmaFile +} from "./get-mercury-tokens-using-figma-file"; + +export const getAllMercuryTokens = ( + figmaTokens: FigmaTokens +): MercuryGenericTokensDefinition => { + const PRIMITIVE_ROOT = figmaTokens[0]._primitive; + const SEMANTIC_COLOR_ROOT = figmaTokens[1].color; + const SEMATIC_FONT_SIZE_ROOT = figmaTokens[2]["font-size"]; + + // Primitive Figma Tokens + const primitiveColorsMercury = PRIMITIVE_ROOT.modes.Default.color.mercury; + const primitiveColorsGlobant = PRIMITIVE_ROOT.modes.Default.color.globant; + const primitiveFontStyles = PRIMITIVE_ROOT.modes.Default["font-style"]; + const primitiveFontFamilies = PRIMITIVE_ROOT.modes.Default["font-family"]; + const primitiveSizes = PRIMITIVE_ROOT.modes.Default.size; + + // Semantic Figma Tokens + const semanticColorsMercuryDark = + SEMANTIC_COLOR_ROOT.modes["Mercury Dark"].color; + const semanticColorsMercuryLight = + SEMANTIC_COLOR_ROOT.modes["Mercury Light"].color; + const semanticColorsGlobantDark = + SEMANTIC_COLOR_ROOT.modes["Globant Dark"].color; + const semanticColorsGlobantLight = + SEMANTIC_COLOR_ROOT.modes["Globant Light"].color; + + const semanticFontSize = SEMATIC_FONT_SIZE_ROOT.modes.Default["font-size"]; + + const tokensResult: MercuryGenericTokensDefinition = { + primitive: { + color: { + mercury: getMercuryTokensByCategoryUsingFigmaFile( + "_primitive", + "color", + primitiveColorsMercury, + "type-variant" + ), + globant: getMercuryTokensByCategoryUsingFigmaFile( + "_primitive", + "color", + primitiveColorsGlobant, + "type-variant" + ) + }, + "font-family": getMercuryTokensUsingFigmaFile( + "_primitive", + "font-family", + primitiveFontFamilies + ), + "font-style": getMercuryTokensUsingFigmaFile( + "_primitive", + "font-style", + primitiveFontStyles + ), + size: getMercuryTokensUsingFigmaFile("_primitive", "size", primitiveSizes) + }, + semantic: { + color: { + mercury: { + light: getMercuryTokensByCategoryUsingFigmaFile( + "semantic", + "color", + semanticColorsMercuryLight, + "type-variant-state" + ), + dark: getMercuryTokensByCategoryUsingFigmaFile( + "semantic", + "color", + semanticColorsMercuryDark, + "type-variant-state" + ) + }, + globant: { + light: getMercuryTokensByCategoryUsingFigmaFile( + "semantic", + "color", + semanticColorsGlobantLight, + "type-variant-state" + ), + dark: getMercuryTokensByCategoryUsingFigmaFile( + "semantic", + "color", + semanticColorsGlobantDark, + "type-variant-state" + ) + } + }, + "font-size": getMercuryTokensByCategoryUsingFigmaFile( + "semantic", + "font-size", + semanticFontSize, + "type-variant" + ) + } + }; + + return tokensResult; +}; diff --git a/packages/mercury/src/tokens/generator/internal/get-and-set-token-placeholder-values.ts b/packages/mercury/src/tokens/generator/internal/get-and-set-token-placeholder-values.ts new file mode 100644 index 000000000..11c0f6cfa --- /dev/null +++ b/packages/mercury/src/tokens/generator/internal/get-and-set-token-placeholder-values.ts @@ -0,0 +1,179 @@ +import type { MercuryTokensDefinition } from "../../_generated/mercury-generated-definition"; +import { mercuryPlainTokens } from "../../_generated/mercury-generated-plain-tokens.js"; +import type { FigmaTheme, FigmaTokensType } from "../typings/figma-file-types"; +import type { + MercuryTokenPlaceholdersToValueDictionary, + MercuryTokenPlaceholdersToValueMap +} from "../typings/output-file-types"; +import { TOKEN_PREFIX } from "./constants.js"; +import { getTokenRealValue } from "./get-token-real-value.js"; + +const TOKEN_PLACEHOLDER_IDENTIFIER = "$"; +const PLACEHOLDER_TOKEN_REGEX = /(\$[^$]+\$)/g; +const SEPARATE_CSS_BY_COLOR_SCHEME_REGEX = + /:root(?:\.(dark|light))?\s*{([^}]+)}/g; + +const mergeConfigTokensAndAddPrefix = ( + tokensByCategory: Record> | undefined +): Record => { + if (tokensByCategory === undefined) { + return {}; + } + + const mergedTokensWithPrefixMap = new Map(); + + Object.values(tokensByCategory).forEach(tokens => + Object.keys(tokens).forEach(tokenName => + mergedTokensWithPrefixMap.set( + `${TOKEN_PREFIX}${tokenName}`, + tokens[tokenName] + ) + ) + ); + + return Object.fromEntries(mergedTokensWithPrefixMap); +}; + +const tokensPlaceholder = { + // Tokens that not depends of the theme (some primitives and some semantic) + general: new Map(), + + // Globant primitive tokens + globant: new Map(), + + // Mercury primitive tokens + mercury: new Map(), + + colorScheme: { + // Semantic tokens for light themes + light: { + globant: new Map(), + mercury: new Map() + }, + // Semantic tokens for dark themes + dark: { + globant: new Map(), + mercury: new Map() + } + } +} as const satisfies MercuryTokenPlaceholdersToValueMap; + +export const setTokenPlaceholderValue = ({ + colorScheme, + tokenName, + tokenValue, + tokensType, + figmaTheme +}: { + colorScheme?: "light" | "dark"; + tokenName: string; + tokenValue: string; + tokensType: FigmaTokensType; + figmaTheme?: FigmaTheme; +}) => { + // If the colorScheme is specified, the figmaTheme is to but we check it just in case + if (colorScheme !== undefined && figmaTheme !== undefined) { + tokensPlaceholder.colorScheme[colorScheme][figmaTheme].set( + tokenName, + getTokenRealValue(tokenValue, tokensType) + ); + } else { + tokensPlaceholder[figmaTheme ?? "general"].set( + tokenName, + getTokenRealValue(tokenValue, tokensType) + ); + } +}; + +export const getAllTokenProcessedTokens = + (): MercuryTokenPlaceholdersToValueDictionary => ({ + general: Object.fromEntries(tokensPlaceholder.general), + globant: Object.fromEntries(tokensPlaceholder.globant), + mercury: Object.fromEntries(tokensPlaceholder.mercury), + colorScheme: { + dark: { + globant: Object.fromEntries(tokensPlaceholder.colorScheme.dark.globant), + mercury: Object.fromEntries(tokensPlaceholder.colorScheme.dark.mercury) + }, + light: { + globant: Object.fromEntries( + tokensPlaceholder.colorScheme.light.globant + ), + mercury: Object.fromEntries(tokensPlaceholder.colorScheme.light.mercury) + } + } + }); + +export const getAllTokensFromMercuryConfigFile = ({ + primitive, + semantic +}: MercuryTokensDefinition): MercuryTokenPlaceholdersToValueDictionary => ({ + general: Object.assign( + {}, + mergeConfigTokensAndAddPrefix(semantic?.["font-size"]), + mergeConfigTokensAndAddPrefix({ + "font-family": primitive?.["font-family"] ?? {}, + "font-style": primitive?.["font-style"] ?? {}, + size: primitive?.size ?? {} + }) + ), + globant: mergeConfigTokensAndAddPrefix(primitive?.color?.globant), + mercury: mergeConfigTokensAndAddPrefix(primitive?.color?.mercury), + colorScheme: { + dark: { + globant: mergeConfigTokensAndAddPrefix(semantic?.color?.globant?.dark), + mercury: mergeConfigTokensAndAddPrefix(semantic?.color?.mercury?.dark) + }, + light: { + globant: mergeConfigTokensAndAddPrefix(semantic?.color?.globant?.light), + mercury: mergeConfigTokensAndAddPrefix(semantic?.color?.mercury?.light) + } + } +}); + +export const getTokenPlaceholderValue = (tokenName: string) => + TOKEN_PLACEHOLDER_IDENTIFIER + tokenName + TOKEN_PLACEHOLDER_IDENTIFIER; + +export const getTokenNameFromPlaceholder = (placeholder: string) => + placeholder.trim().replaceAll("$", ""); + +export const replaceTokenPlaceholders = ( + css: string, + figmaTheme: FigmaTheme, + tokensOverride?: MercuryTokenPlaceholdersToValueDictionary +) => + // First, separate the css by color scheme (:root.dark, :root.light or :root) + css.replaceAll( + SEPARATE_CSS_BY_COLOR_SCHEME_REGEX, + (cssByColorScheme, darkOrLight: "dark" | "light" | undefined) => { + return cssByColorScheme.replace(PLACEHOLDER_TOKEN_REGEX, match => { + const tokenName = getTokenNameFromPlaceholder(match); + + let tokenValue: string | number | undefined; + // If the tokensOverride is not defined, just use the actual tokens of Mercury + const tokensOverrideDefined = tokensOverride ?? mercuryPlainTokens; + + // If we are in a root selector with color scheme, find the tokens for + // color scheme and theme + if (darkOrLight !== undefined) { + tokenValue = + // Try to find if it exists a token override first + tokensOverrideDefined.colorScheme[darkOrLight][figmaTheme][ + tokenName + ] ?? + mercuryPlainTokens.colorScheme[darkOrLight][figmaTheme][tokenName]; + } + + return ( + tokenValue ?? + tokensOverrideDefined[figmaTheme][tokenName] ?? // Try to find if it exists a token override first + mercuryPlainTokens[figmaTheme][tokenName] ?? + tokensOverrideDefined.general[tokenName] ?? // Try to find if it exists a token override first + mercuryPlainTokens.general[tokenName] ?? + // We default to the match to debug in case where the $tokenName$ + // does not have a mapping + match + ).toString(); + }); + } + ); diff --git a/packages/mercury/src/tokens/generator/internal/get-mercury-tokens-using-figma-file.ts b/packages/mercury/src/tokens/generator/internal/get-mercury-tokens-using-figma-file.ts new file mode 100644 index 000000000..b681db0e2 --- /dev/null +++ b/packages/mercury/src/tokens/generator/internal/get-mercury-tokens-using-figma-file.ts @@ -0,0 +1,148 @@ +import { + FigmaCategoryType, + FigmaCategoryWithTypeAndVariant, + FigmaCategoryWithTypeAndVariantAndState, + FigmaCategoryWithTypeOnly, + FigmaTokensGroupType +} from "../typings/figma-file-types"; +import { + MercuryTokens, + MercuryTokensByCategory +} from "../typings/output-file-types"; +import { replaceSpaceWithDash } from "./replace-space-with-dash"; + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const sortObject = >(object: T) => + Object.fromEntries(Object.entries(object).sort()); + +/** + * Transforms a Figma-style variable (e.g., "size.40") + * into a CSS variable name (e.g., "--size-40"). + * + * @param figmaVariableFormat - The variable name in Figma format. + * @returns The corresponding CSS variable name as a string. + */ +const toCssVariableName = (figmaVariableFormat: string): string => { + const parts = figmaVariableFormat + .replace(/[{}]/g, "") // remove braces + .split(".") // split by dot + .filter(part => part !== "mercury" && part !== "globant"); // remove unwanted + return `--${parts.join("-")}`; +}; + +/** + * Processes a tokens category and prepares it as a string formatted to be saved as a stylesheet file. + * + * @param tokens - The tokens category object containing the tokens data. + * @param type - The type of the category that dictates how the tokens should be processed. + * + * @returns - A string representing the processed tokens, formatted for use in a stylesheet. + */ +export const getMercuryTokensByCategoryUsingFigmaFile = < + T extends Exclude +>( + tokensGroupType: FigmaTokensGroupType, + categoryPrefix: string, + categoryTokens: + | FigmaCategoryWithTypeOnly + | FigmaCategoryWithTypeAndVariant + | FigmaCategoryWithTypeAndVariantAndState, + categoryType: T +): MercuryTokensByCategory => { + if (categoryType === "type-variant") { + const result: MercuryTokensByCategory = {}; + const categoryTypes = sortObject( + categoryTokens + ) as FigmaCategoryWithTypeAndVariant; + + for (const categoryType in categoryTypes) { + // Ensure the category type exists + result[categoryType] ??= {}; + + const categoryVariants = sortObject(categoryTypes[categoryType]); + + // Variant + for (const variant in categoryVariants) { + const cssVariableName = `--${categoryPrefix}-${replaceSpaceWithDash(categoryType)}-${replaceSpaceWithDash(variant)}`; + + const figmaRawValue = categoryVariants[variant].$value; + const value = + tokensGroupType === "_primitive" + ? figmaRawValue + : toCssVariableName(figmaRawValue); + + result[categoryType][cssVariableName] = value; + } + } + + return result; + } + + const result: MercuryTokensByCategory = {}; + const categoryTypes = sortObject( + categoryTokens + ) as FigmaCategoryWithTypeAndVariantAndState; + + for (const categoryType in categoryTypes) { + // Ensure the category type exists + result[categoryType] ??= {}; + + const categoryVariants = sortObject(categoryTypes[categoryType]); + + // Variant + for (const variant in categoryVariants) { + const states = sortObject(categoryTypes[categoryType][variant]); + + // State + for (const state in states) { + const cssVariableName = `--${categoryPrefix}-${replaceSpaceWithDash(categoryType)}-${replaceSpaceWithDash(variant)}-${replaceSpaceWithDash(state)}`; + + const figmaRawValue = states[state].$value; + const value = + tokensGroupType === "_primitive" + ? figmaRawValue + : toCssVariableName(figmaRawValue); + + result[categoryType][cssVariableName] = value; + } + } + } + + return result; +}; + +/** + * Processes a tokens category and prepares it as a string formatted to be saved as a stylesheet file. + * + * @param tokens - The tokens category object containing the tokens data. + * @param type - The type of the category that dictates how the tokens should be processed. + * + * @returns - A string representing the processed tokens, formatted for use in a stylesheet. + */ +export const getMercuryTokensUsingFigmaFile = ( + tokensGroupType: FigmaTokensGroupType, + categoryPrefix: string, + categoryTokens: + | FigmaCategoryWithTypeOnly + | FigmaCategoryWithTypeAndVariant + | FigmaCategoryWithTypeAndVariantAndState +): MercuryTokens => { + const categoryTypes = sortObject(categoryTokens) as FigmaCategoryWithTypeOnly; + const result: MercuryTokens = {}; + + for (const categoryType in categoryTypes) { + const cssVariableName = `--${categoryPrefix}-${replaceSpaceWithDash(categoryType)}`; + + // Type + const figmaRawValue = categoryTypes[categoryType].$value; + + const value = + tokensGroupType === "_primitive" + ? figmaRawValue + : toCssVariableName(figmaRawValue); + + result[cssVariableName] = typeof value === "number" ? `${value}px` : value; + } + + return result; +}; diff --git a/packages/mercury/src/tokens/generator/internal/get-mixin-content-using-mercury-tokens.ts b/packages/mercury/src/tokens/generator/internal/get-mixin-content-using-mercury-tokens.ts new file mode 100644 index 000000000..777822ef9 --- /dev/null +++ b/packages/mercury/src/tokens/generator/internal/get-mixin-content-using-mercury-tokens.ts @@ -0,0 +1,93 @@ +import type { FigmaTheme, FigmaTokensType } from "../typings/figma-file-types"; + +import { + MercuryTokens, + MercuryTokensByCategory, + MercuryTokensByColorScheme +} from "../typings/output-file-types"; +import { + getTokenPlaceholderValue, + setTokenPlaceholderValue +} from "./get-and-set-token-placeholder-values"; + +const getTokens = ( + tokens: MercuryTokens, + tokensType: FigmaTokensType, + figmaTheme?: FigmaTheme, + colorScheme?: "light" | "dark" +): string => + Object.keys(tokens) + .map(tokenName => { + const placeholder = getTokenPlaceholderValue(tokenName); + + // Side effect to set the mapping between the placeholder and the + // actual value + setTokenPlaceholderValue({ + tokenName, + tokensType, + tokenValue: tokens[tokenName], + figmaTheme, + colorScheme + }); + + // tokenValueForDebugging stores the raw token value, + // to make it easy to identify and compare during debugging. + const tokenValueForDebugging = tokens[tokenName]; + + return `${tokenName}: ${placeholder}; // ${tokenValueForDebugging}`; + }) + .join("\n "); + +const getTokensByCategory = ( + tokensByCategory: MercuryTokensByCategory, + tokensType: FigmaTokensType, + figmaTheme?: FigmaTheme, + colorScheme?: "light" | "dark" +): string => { + const categories = Object.keys(tokensByCategory); + + return categories + .map(categoryName => { + const tokensInCategory: MercuryTokens = tokensByCategory[categoryName]; + + return `// ${categoryName}\n ${getTokens(tokensInCategory, tokensType, figmaTheme, colorScheme)}` as const; + }) + .join("\n\n "); +}; + +export const getMixinForMercuryTokensByColorScheme = ( + tokensType: FigmaTokensType, + tokens: MercuryTokensByColorScheme, + figmaTheme: FigmaTheme, + mixinName: string | null +): string => { + // TODO: Create a function to process dark or light. + const lightOutput = `@mixin ${mixinName}-${figmaTheme}-light() { + ${getTokensByCategory(tokens.light, tokensType, figmaTheme, "light")} +}`; + + const darkOutput = `@mixin ${mixinName}-${figmaTheme}-dark() { + ${getTokensByCategory(tokens.dark, tokensType, figmaTheme, "dark")} +}`; + + return `${lightOutput}\n\n${darkOutput}\n`; +}; + +export const getMixinForMercuryTokens = ( + tokensType: FigmaTokensType, + tokens: MercuryTokens, + mixinName: string +): string => + `@mixin ${mixinName}() { + ${getTokens(tokens, tokensType)} +}\n`; + +export const getMixinForMercuryTokensByCategory = ( + tokensType: FigmaTokensType, + tokens: MercuryTokensByCategory, + mixinName: string, + figmaTheme?: FigmaTheme +): string => + `@mixin ${mixinName}() { + ${getTokensByCategory(tokens, tokensType, figmaTheme)} +}\n`; diff --git a/packages/mercury/src/tokens/generator/internal/get-token-real-value.ts b/packages/mercury/src/tokens/generator/internal/get-token-real-value.ts new file mode 100644 index 000000000..5f5714ef5 --- /dev/null +++ b/packages/mercury/src/tokens/generator/internal/get-token-real-value.ts @@ -0,0 +1,44 @@ +import type { FigmaTokensType } from "../typings/figma-file-types"; + +const FONT_WEIGHT_MAP = { + thin: 100, + "extra-light": 200, + light: 300, + regular: 400, + medium: 500, + "semi-bold": 600, + bold: 700, + "extra-bold": 800, + black: 900 +} as const; + +const mapFontWeightKeywordToNumeric = (fontWeightKeyword: string) => { + const fontWeightKeywordSanitized = fontWeightKeyword + .toLowerCase() + .replace(/\s+/g, "-"); + + // If it doesn't map to any value is probably not a font-weight, like Italic. + return ( + FONT_WEIGHT_MAP[ + fontWeightKeywordSanitized as keyof typeof FONT_WEIGHT_MAP + ] || fontWeightKeyword + ); +}; + +export const getTokenRealValue = ( + tokenValue: string, + tokensType: FigmaTokensType +) => { + if (tokensType === "primitive-font-style") { + return mapFontWeightKeywordToNumeric(tokenValue); + } + + if (tokensType === "primitive-font-family") { + return `"${tokenValue}"`; + } + + return tokensType === "primitive-color" || + (tokensType !== "semantic-font-size" && tokensType !== "semantic-color") + ? tokenValue + : `var(${tokenValue})`; +}; diff --git a/packages/mercury/src/tokens/generator/internal/mercury-tokens-to-javascript-object-file.ts b/packages/mercury/src/tokens/generator/internal/mercury-tokens-to-javascript-object-file.ts new file mode 100644 index 000000000..f75ebb706 --- /dev/null +++ b/packages/mercury/src/tokens/generator/internal/mercury-tokens-to-javascript-object-file.ts @@ -0,0 +1,27 @@ +import prettier from "prettier"; +import { MercuryGenericTokensDefinition } from "../typings/output-file-types"; + +/** + * Converts a processed tokens result object into a JS module string. + * + * The output string includes a constant assignment with Object.freeze + * applied to each object, and a default export statement. + * + * @param {MercuryGenericTokensDefinition} tokensResult - The processed tokens from Figma. + * @returns {string} The JS file content as a string, ready to be written to disk. + */ +export const mercuryTokensToJavaScriptFile = async ( + tokensResult: MercuryGenericTokensDefinition +): Promise => { + let tokensResultAsString = + `// mercuryTokens is generated for packages/showcase tokens page. + const mercuryTokens = ` + JSON.stringify(tokensResult, null, 2); + + tokensResultAsString += `as const;\n\nexport default mercuryTokens;`; + return await prettier.format(tokensResultAsString, { + parser: "typescript", + singleQuote: false, + semi: true, + trailingComma: "none" + }); +}; diff --git a/packages/mercury/src/tokens/generator/internal/mercury-tokens-to-type-definition-file.ts b/packages/mercury/src/tokens/generator/internal/mercury-tokens-to-type-definition-file.ts new file mode 100644 index 000000000..4153092e9 --- /dev/null +++ b/packages/mercury/src/tokens/generator/internal/mercury-tokens-to-type-definition-file.ts @@ -0,0 +1,123 @@ +import type { FigmaTheme } from "../typings/figma-file-types"; +import type { + MercuryGenericTokensDefinition, + MercuryTokens +} from "../typings/output-file-types"; +import { TOKEN_PREFIX_IN_JSON } from "./constants"; + +const PRIMITIVE_COLOR_TOKEN_TYPE_FOR_MERCURY = + "MercuryMercuryPrimitiveColorToken"; +const PRIMITIVE_COLOR_TOKEN_TYPE_FOR_GLOBANT = + "MercuryGlobantPrimitiveColorToken"; +const SIZE_TOKEN_TYPE = "MercurySizeToken"; + +const prettyPrintTokens = ( + tokensArray: string[], + typeName: string +) => `export type ${typeName} = + | ${tokensArray.map(tokenName => `"var(${tokenName})"`).join("\n | ")};`; + +const setTypeToString = (tokens: MercuryTokens) => + Object.keys(tokens).forEach(tokenKey => { + tokens[tokenKey] = "string"; + }); + +const setTypeToNumber = (tokens: MercuryTokens) => + Object.keys(tokens).forEach(tokenKey => { + tokens[tokenKey] = "number"; + }); + +const setTypeToPrimitiveColorToken = ( + tokens: MercuryTokens, + figmaTheme: FigmaTheme +) => + Object.keys(tokens).forEach(tokenKey => { + tokens[tokenKey] = + `${figmaTheme === "globant" ? PRIMITIVE_COLOR_TOKEN_TYPE_FOR_GLOBANT : PRIMITIVE_COLOR_TOKEN_TYPE_FOR_MERCURY} | (string & {})`; + }); + +const setTypeToSizeToken = (tokens: MercuryTokens) => + Object.keys(tokens).forEach(tokenKey => { + tokens[tokenKey] = `${SIZE_TOKEN_TYPE} | (string & {})`; + }); + +const removeDoubleQuotesInJsonValueAndMarkOptionalAllMembers = (json: string) => + json.replaceAll(/(:\s*)"([^"]*)"/g, "$1$2").replaceAll('":', '"?:'); + +/** + * + */ +export const mercuryTokensToTypeDefinitionFile = ( + tokensDefinition: MercuryGenericTokensDefinition +) => { + // Get Primitive Color and Size tokens to create a custom type for them + const mercuryPrimitiveColorTokens = Object.values( + tokensDefinition.primitive.color.mercury + ) + .map(tokensByCategory => Object.keys(tokensByCategory)) + .flat(); + const globantPrimitiveColorTokens = Object.values( + tokensDefinition.primitive.color.globant + ) + .map(tokensByCategory => Object.keys(tokensByCategory)) + .flat(); + const sizeTokens = Object.keys(tokensDefinition.primitive.size); + + // Remove the "--" in all tokens + const tokensDefinitionWithoutDoubleDash: MercuryGenericTokensDefinition = + JSON.parse( + JSON.stringify(tokensDefinition).replaceAll(TOKEN_PREFIX_IN_JSON, '"') + ); + + // Type definition for the previous token types + const mercuryPrimitiveColorToken = prettyPrintTokens( + mercuryPrimitiveColorTokens, + PRIMITIVE_COLOR_TOKEN_TYPE_FOR_MERCURY + ); + // The globant theme can have different semantic tokens than the Mercury theme + const globantPrimitiveColorToken = prettyPrintTokens( + globantPrimitiveColorTokens, + PRIMITIVE_COLOR_TOKEN_TYPE_FOR_GLOBANT + ); + const mercurySizeToken = prettyPrintTokens(sizeTokens, SIZE_TOKEN_TYPE); + + // Use the mercuryTokens object to establish the scheme for the type + // definition file, by changing the values with the expected type + Object.values( + tokensDefinitionWithoutDoubleDash.primitive.color.globant + ).forEach(setTypeToString); + Object.values( + tokensDefinitionWithoutDoubleDash.primitive.color.mercury + ).forEach(setTypeToString); + + setTypeToString(tokensDefinitionWithoutDoubleDash.primitive["font-family"]); + setTypeToString(tokensDefinitionWithoutDoubleDash.primitive["font-style"]); + setTypeToNumber(tokensDefinitionWithoutDoubleDash.primitive.size); + + Object.values( + tokensDefinitionWithoutDoubleDash.semantic.color.globant.dark + ).forEach(tokens => setTypeToPrimitiveColorToken(tokens, "globant")); + Object.values( + tokensDefinitionWithoutDoubleDash.semantic.color.globant.light + ).forEach(tokens => setTypeToPrimitiveColorToken(tokens, "globant")); + Object.values( + tokensDefinitionWithoutDoubleDash.semantic.color.mercury.dark + ).forEach(tokens => setTypeToPrimitiveColorToken(tokens, "mercury")); + Object.values( + tokensDefinitionWithoutDoubleDash.semantic.color.mercury.light + ).forEach(tokens => setTypeToPrimitiveColorToken(tokens, "mercury")); + + Object.values( + tokensDefinitionWithoutDoubleDash.semantic["font-size"] + ).forEach(setTypeToSizeToken); + + // Type definition file + return `${mercuryPrimitiveColorToken} + + ${globantPrimitiveColorToken} + +${mercurySizeToken} + +export type MercuryTokensDefinition = ${removeDoubleQuotesInJsonValueAndMarkOptionalAllMembers(JSON.stringify(tokensDefinitionWithoutDoubleDash, undefined, 2))}; +`; +}; diff --git a/packages/mercury/src/tokens/generator/internal/replace-space-with-dash.ts b/packages/mercury/src/tokens/generator/internal/replace-space-with-dash.ts new file mode 100644 index 000000000..fe3a37c4f --- /dev/null +++ b/packages/mercury/src/tokens/generator/internal/replace-space-with-dash.ts @@ -0,0 +1,9 @@ +/** + * Replaces all whitespace characters in a string with dashes. + * Used to prevent errors with properties names that have a space + * (event tough they shouldn't have sapces). + * @param {string} tokenPart - The input string to transform. + * @returns {string} The transformed string with dashes instead of spaces. + */ +export const replaceSpaceWithDash = (tokenPart: string): string => + tokenPart.replace(/\s/g, "-"); diff --git a/packages/mercury/src/tokens/generator/main.ts b/packages/mercury/src/tokens/generator/main.ts new file mode 100644 index 000000000..d72fe3307 --- /dev/null +++ b/packages/mercury/src/tokens/generator/main.ts @@ -0,0 +1,277 @@ +import { readFile } from "fs/promises"; +import path from "path"; + +import { getAllMercuryTokens } from "./internal/get-all-mercury-tokens"; +import { getAllTokenProcessedTokens } from "./internal/get-and-set-token-placeholder-values"; +import { + getMixinForMercuryTokens, + getMixinForMercuryTokensByCategory, + getMixinForMercuryTokensByColorScheme +} from "./internal/get-mixin-content-using-mercury-tokens"; +import { mercuryTokensToJavaScriptFile } from "./internal/mercury-tokens-to-javascript-object-file"; +import { mercuryTokensToTypeDefinitionFile } from "./internal/mercury-tokens-to-type-definition-file"; +import type { FigmaConfig, FigmaTokens } from "./typings/figma-file-types"; +import type { + MercuryGenericTokensDefinition, + MercuryTokensByColorScheme +} from "./typings/output-file-types"; +import { + deleteDirectoryRecursively, + writeDirectory, + writeFile +} from "./utilities"; + +const config: FigmaConfig = { + figmaJsonSourceFilePath: "./src/tokens/figma-tokens-source.json", + tokensOutputDirPath: "./src/tokens/_generated/", + enableMercury: true, + enableGlobant: true, + enableLight: true, + enableDark: true +}; + +// Paths +const __cwd = process.cwd(); // current working directory +const figmaTokensFilePath = await readFile( + path.join(__cwd, config.figmaJsonSourceFilePath), + "utf8" +); + +const MIXIN_NAMES = { + FONT_FAMILY: "font-family", + FONT_SIZE: "font-size", + FONT_STYLE: "font-style", + SIZE: "size" +} as const; + +const TOKENS_GENERATED_DIRECTORY = path.join(__cwd, config.tokensOutputDirPath); +const PRIMITIVE_PREFIX = "primitive-"; + +const PATHS = { + FONT_STYLE: path.join( + TOKENS_GENERATED_DIRECTORY, + `_${PRIMITIVE_PREFIX}${MIXIN_NAMES.FONT_STYLE}.scss` + ), + + FONT_FAMILY: path.join( + TOKENS_GENERATED_DIRECTORY, + `_${PRIMITIVE_PREFIX}${MIXIN_NAMES.FONT_FAMILY}.scss` + ), + + PRIMITIVE_COLORS_MERCURY: path.join( + TOKENS_GENERATED_DIRECTORY, + `_${PRIMITIVE_PREFIX}color-mercury.scss` + ), + + PRIMITIVE_COLORS_GLOBANT: path.join( + TOKENS_GENERATED_DIRECTORY, + `_${PRIMITIVE_PREFIX}color-globant.scss` + ), + + TOKENS_DEFINITION_FILE: path.join( + TOKENS_GENERATED_DIRECTORY, + `mercury-generated-definition.ts` + ), + + TOKENS_VALUE_FILE: path.join( + TOKENS_GENERATED_DIRECTORY, + `mercury-generated-tokens.ts` + ), + + TOKENS_PLAIN_VALUE_FILE: path.join( + TOKENS_GENERATED_DIRECTORY, + `mercury-generated-plain-tokens.ts` + ), + + SEMANTIC_COLORS_MERCURY: path.join( + TOKENS_GENERATED_DIRECTORY, + `_color-mercury.scss` + ), + + SEMANTIC_COLORS_GLOBANT: path.join( + TOKENS_GENERATED_DIRECTORY, + `_color-globant.scss` + ), + + SEMANTIC_FONT_SIZES: path.join( + TOKENS_GENERATED_DIRECTORY, + `_${MIXIN_NAMES.FONT_SIZE}.scss` + ), + + SHOWCASE_GENERATED_TOKENS: path.join( + __cwd, + "../showcase/src/app/core-concepts/tokens/mercury-tokens.ts" + ), + + SIZE: path.join( + TOKENS_GENERATED_DIRECTORY, + `_${PRIMITIVE_PREFIX}${MIXIN_NAMES.SIZE}.scss` + ) +}; + +const figmaTokensJsonData: FigmaTokens = JSON.parse(figmaTokensFilePath); + +const mercuryTokens: MercuryGenericTokensDefinition = + getAllMercuryTokens(figmaTokensJsonData); +// - - - - - - - - - - - - - - - - - - - - - - +// 2. Process primitive tokens categories +// - - - - - - - - - - - - - - - - - - - - - - + +// - - - - - - - - - - - - - - - - - - - - - - +// 3. Process semantic tokens categories +// - - - - - - - - - - - - - - - - - - - - - - + +// console.log( +// util.inspect(semanticColorsGlobantLight, { depth: null, colors: true }) +// ); + +// - - - - - - - - - - - - - - - - - - - - - - +// 4. Prepare tokens directory +// - - - - - - - - - - - - - - - - - - - - - - + +// Clear tokens directory before write scss files +await deleteDirectoryRecursively(TOKENS_GENERATED_DIRECTORY); +await writeDirectory(TOKENS_GENERATED_DIRECTORY); + +// - - - - - - - - - - - - - - - - - - - - - - +// 5. Write primitive .scss files on disk +// - - - - - - - - - - - - - - - - - - - - - - + +// primitive color for Mercury theme +const primitiveColorTokensMercuryScss = + await getMixinForMercuryTokensByCategory( + "primitive-color", + mercuryTokens.primitive.color.mercury, + "primitive-color-mercury", + "mercury" + ); +await writeFile( + PATHS.PRIMITIVE_COLORS_MERCURY, + primitiveColorTokensMercuryScss +); + +// primitive color for Globant theme +const primitiveColorTokensGlobantScss = + await getMixinForMercuryTokensByCategory( + "primitive-color", + mercuryTokens.primitive.color.globant, + "primitive-color-globant", + "globant" + ); +await writeFile( + PATHS.PRIMITIVE_COLORS_GLOBANT, + primitiveColorTokensGlobantScss +); + +// primitive font style +const primitiveFontStyleTokens = mercuryTokens.primitive["font-style"]; +const primitiveFontStyleTokensScss = await getMixinForMercuryTokens( + "primitive-font-style", + primitiveFontStyleTokens, + MIXIN_NAMES.FONT_STYLE +); +await writeFile(PATHS.FONT_STYLE, primitiveFontStyleTokensScss); + +// primitive font family +const primitiveFontFamilyTokens = mercuryTokens.primitive["font-family"]; +const primitiveFontFamilyTokensScss = await getMixinForMercuryTokens( + "primitive-font-family", + primitiveFontFamilyTokens, + MIXIN_NAMES.FONT_FAMILY +); +await writeFile(PATHS.FONT_FAMILY, primitiveFontFamilyTokensScss); + +// primitive size +const primitiveSizeTokens = mercuryTokens.primitive.size; +const primitiveSizeTokensScss = await getMixinForMercuryTokens( + "primitive-size", + primitiveSizeTokens, + MIXIN_NAMES.SIZE +); +await writeFile(PATHS.SIZE, primitiveSizeTokensScss); + +// - - - - - - - - - - - - - - - - - - - - - - +// 6. Write semantic .scss files on disk +// - - - - - - - - - - - - - - - - - - - - - - + +// semantic color for Mercury light and dark modes +const semanticColorTokensMercuryLight = + mercuryTokens.semantic.color.mercury.light; +const semanticColorTokensMercuryDark = + mercuryTokens.semantic.color.mercury.dark; +const semanticColorTokensMercuryMerged: MercuryTokensByColorScheme = { + light: { ...semanticColorTokensMercuryLight }, + dark: { ...semanticColorTokensMercuryDark } +}; + +const semanticColorTokensMercuryScss = + await getMixinForMercuryTokensByColorScheme( + "semantic-color", + semanticColorTokensMercuryMerged, + "mercury", + "semantic-color" + ); +await writeFile(PATHS.SEMANTIC_COLORS_MERCURY, semanticColorTokensMercuryScss); + +// semantic color for Globant light and dark modes +const semanticColorTokensGlobantLight = + mercuryTokens.semantic.color.globant.light; +const semanticColorTokensGlobantDark = + mercuryTokens.semantic.color.globant.dark; +const semanticColorTokensGlobantMerged: MercuryTokensByColorScheme = { + light: { ...semanticColorTokensGlobantLight }, + dark: { ...semanticColorTokensGlobantDark } +}; + +const semanticColorTokensGlobantScss = + await getMixinForMercuryTokensByColorScheme( + "semantic-color", + semanticColorTokensGlobantMerged, + "globant", + "semantic-color" + ); +await writeFile(PATHS.SEMANTIC_COLORS_GLOBANT, semanticColorTokensGlobantScss); + +// semantic font-size. +const semanticFontSizeTokens = await getMixinForMercuryTokensByCategory( + "semantic-font-size", + mercuryTokens.semantic["font-size"], + MIXIN_NAMES.FONT_SIZE +); +await writeFile(PATHS.SEMANTIC_FONT_SIZES, semanticFontSizeTokens); + +// - - - - - - - - - - - - - - - - - - - - +// Write mercury-tokens.ts +// - - - - - - - - - - - - - - - - - - - - + +// mercuryTokens is generated for packages/showcase tokens page. + +const mercuryTokensInJavaScriptFormat = + await mercuryTokensToJavaScriptFile(mercuryTokens); +await writeFile( + PATHS.SHOWCASE_GENERATED_TOKENS, + mercuryTokensInJavaScriptFormat +); +await writeFile(PATHS.TOKENS_VALUE_FILE, mercuryTokensInJavaScriptFormat); + +const mercuryTokensInTypeDefinitionFormat = + mercuryTokensToTypeDefinitionFile(mercuryTokens); +await writeFile( + PATHS.TOKENS_DEFINITION_FILE, + mercuryTokensInTypeDefinitionFormat +); + +await writeFile( + PATHS.TOKENS_PLAIN_VALUE_FILE, + `export const mercuryPlainTokens: { + [key in "general" | "globant" | "mercury"]: Record; +} & { + colorScheme: { + light: { [key in "globant" | "mercury"]: Record }; + dark: { [key in "globant" | "mercury"]: Record }; + }; +} = JSON.parse( + \`${JSON.stringify(getAllTokenProcessedTokens()).replaceAll('\\"', "'")}\` +); +` +); diff --git a/packages/mercury/src/tokens/generator/readme.md b/packages/mercury/src/tokens/generator/readme.md new file mode 100644 index 000000000..408f55eb5 --- /dev/null +++ b/packages/mercury/src/tokens/generator/readme.md @@ -0,0 +1,59 @@ +# Figma tokens model + +The following are the possible models/structure for primitve and semantic tokens, as they are defined in the Figma tokens exported json. This overview helps with the definition of the interfaces and types (types.ts) + +ie.: The primitive "color" definition, is a "Category" with a set of "Types", +where each "Type" has a "Variant”. + +The primitive "size" definition, is a "Category" with a set of "Types". + +## Primitive + +`color` + +``` +- Category: "color" + - Type: (primary, neutral, etc...) + - Variant: (100, 200, etc...) +``` + +`font-style` + +``` +- Category: "font-weight" + - Type: (Regular, Semi Bold, etc...) +``` + +`font-family` + +``` +- Category: "font-family" + - Type: (header, body, etc...) +``` + +`size` + +``` +- Category: "size" + - Type: (0, 4, 8, etc...) +``` + +## Semantic + +`color` + +``` +- Category: "color" + - Type: (accent, border, etc...) + - Variant: (primary, neutral, etc...) + - State: (lighter, light, etc...) +``` + +`font-size` + +``` +- Category: "font-size" + - Type: (header, subtitle...) + - Variant: (h1, h2, h3...) +``` + diff --git a/packages/mercury/src/tokens/generator/typings/figma-file-types.ts b/packages/mercury/src/tokens/generator/typings/figma-file-types.ts new file mode 100644 index 000000000..312ecd73d --- /dev/null +++ b/packages/mercury/src/tokens/generator/typings/figma-file-types.ts @@ -0,0 +1,99 @@ +export type FigmaTokens = [ + FigmaTokensPrimitive, + FigmaTokensSemanticColor, + FigmaTokensSemanticFontSize +]; + +export interface FigmaTokensPrimitive { + _primitive: { + modes: { + Default: { + color: { + globant: FigmaCategoryWithTypeOnly; + mercury: FigmaCategoryWithTypeOnly; + }; + "font-weight": FigmaCategoryWithTypeOnly; + "font-family": FigmaCategoryWithTypeOnly; + size: FigmaCategoryWithTypeOnly; + }; + }; + }; +} + +export interface FigmaTokensSemanticColor { + color: { + modes: { + [key in FigmaColorModeType]: { + color: FigmaCategoryWithTypeAndVariantAndState; + }; + }; + }; +} + +export interface FigmaTokensSemanticFontSize { + "font-size": { + modes: { + Default: { + "font-size": FigmaCategoryWithTypeAndVariant; + }; + }; + }; +} + +// Category (read tokens/generator/readme.md) +export type FigmaCategoryWithTypeOnly = { [key: string]: FigmaTypeOnly }; +export type FigmaCategoryWithTypeAndVariant = { + [key: string]: FigmaTypeWithVariant; +}; +export type FigmaCategoryWithTypeAndVariantAndState = { + [key: string]: FigmaTypeWithVariantAndState; +}; + +// Type +export type FigmaTypeOnly = FigmaTokenData; +export type FigmaTypeWithVariant = { [key: string]: FigmaTokenData }; +export type FigmaTypeWithVariantAndState = { + [key: string]: FigmaTypeWithVariant; +}; + +// Variant +export type FigmaVariantOnly = FigmaTokenData; +export type FigmaVariantWithState = { [key: string]: FigmaState }; + +// State +export type FigmaState = FigmaTokenData; + +// General +export type FigmaTokenData = { $type: FigmaTokenTypeFigma; $value: string }; + +export type FigmaColorModeType = + | "Mercury Light" + | "Mercury Dark" + | "Globant Light" + | "Globant Dark"; + +export type FigmaTheme = "mercury" | "globant"; + +export type FigmaTokensType = + | "primitive-color" + | "primitive-font-style" + | "primitive-font-family" + | "primitive-size" + | "semantic-color" + | "semantic-font-size"; +export type FigmaTokenTypeFigma = "float" | "color" | "string"; +export type FigmaTokensGroupType = "_primitive" | "semantic"; + +export type FigmaCategoryType = + | "type-only" + | "type-variant" + | "type-variant-state"; + +export interface FigmaConfig { + figmaJsonSourceFilePath: string; + tokensOutputDirPath: string; + enableMercury: boolean; + enableGlobant: boolean; + enableLight: boolean; + enableDark: boolean; +} diff --git a/packages/mercury/src/tokens/generator/typings/output-file-types.ts b/packages/mercury/src/tokens/generator/typings/output-file-types.ts new file mode 100644 index 000000000..f1f8e7788 --- /dev/null +++ b/packages/mercury/src/tokens/generator/typings/output-file-types.ts @@ -0,0 +1,50 @@ +import type { FigmaTheme } from "./figma-file-types"; + +// MercuryGenericTokensDefinition is the interface for the object that will be used to write all the tokens on disk. +export type MercuryGenericTokensDefinition = { + primitive: { + color: { + mercury: MercuryTokensByCategory; + globant: MercuryTokensByCategory; + }; + "font-style": MercuryTokens; + "font-family": MercuryTokens; + size: MercuryTokens; + }; + semantic: { + color: { + mercury: MercuryTokensByColorScheme; + globant: MercuryTokensByColorScheme; + }; + "font-size": MercuryTokensByCategory; + }; +}; + +export type MercuryTokensByCategory = Record; + +export type MercuryTokens = Record; + +export type MercuryTokenValue = string; + +export type MercuryTokensByColorScheme = { + light: MercuryTokensByCategory; + dark: MercuryTokensByCategory; +}; + +export type MercuryTokenPlaceholdersToValueDictionary = { + [key in FigmaTheme | "general"]: Record; +} & { + colorScheme: { + light: { [key in FigmaTheme]: Record }; + dark: { [key in FigmaTheme]: Record }; + }; +}; + +export type MercuryTokenPlaceholdersToValueMap = { + [key in FigmaTheme | "general"]: Map; +} & { + colorScheme: { + light: { [key in FigmaTheme]: Map }; + dark: { [key in FigmaTheme]: Map }; + }; +}; diff --git a/packages/mercury/src/tokens/generator/utilities.ts b/packages/mercury/src/tokens/generator/utilities.ts new file mode 100644 index 000000000..4d7f0c3e3 --- /dev/null +++ b/packages/mercury/src/tokens/generator/utilities.ts @@ -0,0 +1,82 @@ +import { promises as fs } from "fs"; + +// - - - - - - - - - - - - - - - - - - - - +// Functions about writting files on disk +// - - - - - - - - - - - - - - - - - - - - + +/** + * Recursively deletes a directory and all its contents. + * + * @param {string} dirPath - The path of the directory to delete. + * @returns {Promise} - Resolves to true if the directory and its contents are deleted successfully, otherwise false. + */ +export const deleteDirectoryRecursively = async ( + dirPath: string +): Promise => { + try { + await fs.rm(dirPath, { recursive: true }); + + // logger.info(`Success deleting the output directory: ${dirPath}`); + return true; + } catch (error: any) { + if (error.code === "ENOENT") { + console.log( + `Directory ${dirPath} could not be deleted since it was not found.` + ); + return true; + } + + if (error instanceof Error) { + console.error(`Error deleting directory ${dirPath}: ${error.message}`); + } else { + console.error(`Unknown error deleting directory ${dirPath}`); + } + return false; + } +}; + +/** + * Asynchronously creates a directory on the filesystem. + * + * @param {string} dirPath - The path of the directory to create. + * @returns {Promise} - Resolves to true if the directory is created successfully, otherwise false. + */ +export const writeDirectory = async (dirPath: string): Promise => { + try { + await fs.mkdir(dirPath, { recursive: true }); // Create directory, including parent directories if needed + // logger.info(`Directory created successfully: ${dirPath}`); // TODO: uncomment this line to log the path. + return true; // Successfully created + } catch (error: unknown) { + if (error instanceof Error) { + console.error(`Error creating directory ${dirPath}: ${error.message}`); + } else { + console.error(`Unknown error creating directory ${dirPath}`); + } + return false; // Creation failed + } +}; + +/** + * Asynchronously writes a file to the filesystem. + * Used primarily to write the svg sprites on disk. + * + * @param {string} filePath - The full path of the file to write. + * @param {string} content - The content to write to the file.messages. + * @returns {Promise} - Resolves to true if the file is written successfully, otherwise false. + */ +export const writeFile = async ( + filePath: string, + content: string +): Promise => { + try { + await fs.writeFile(filePath, content, "utf8"); // Write the file with UTF-8 encoding + return true; // Successfully written + } catch (error: unknown) { + if (error instanceof Error) { + console.error(`Error writing file ${filePath}: ${error.message}`); + } else { + console.error(`Unknown error writing file ${filePath}`); + } + return false; // Writing failed + } +}; diff --git a/packages/mercury/src/tokens/primitive/_border.scss b/packages/mercury/src/tokens/primitive/_border.scss deleted file mode 100644 index 3b4211ada..000000000 --- a/packages/mercury/src/tokens/primitive/_border.scss +++ /dev/null @@ -1,14 +0,0 @@ -@mixin border() { - // border widths - --mer-border__width--sm: 1px; - --mer-border__width--md: 2px; - --mer-border__width--lg: 4px; - - //border radius - --mer-border__radius--2xs: 1px; - --mer-border__radius--xs: 2px; - --mer-border__radius--sm: 4px; - --mer-border__radius--md: 8px; - --mer-border__radius--lg: 12px; - --mer-border__radius--xl: 30px; -} diff --git a/packages/mercury/src/tokens/primitive/_color.scss b/packages/mercury/src/tokens/primitive/_color.scss deleted file mode 100644 index f5b67bd56..000000000 --- a/packages/mercury/src/tokens/primitive/_color.scss +++ /dev/null @@ -1,307 +0,0 @@ -@mixin foundation-colors--light($globant-colors: false) { - @if $globant-colors { - // Globant Colors - - // TODO: update with Globant colors when available - // primary - --mer-color__primary--200: #005ac1; - --mer-color__primary--300: #5498e8; - --mer-color__primary--400: #437dc0; - --mer-color__primary--600: #335884; - - // neutral - --mer-color__neutral-gray--100: #4a5870; - --mer-color__neutral-gray--200: #49566d; - --mer-color__neutral-gray--300: #56677a; - --mer-color__neutral-gray--400: #56677a; - --mer-color__neutral-gray--450: #56677a; - --mer-color__neutral-gray--500: #828b96; - --mer-color__neutral-gray--550: #9da9b6; - --mer-color__neutral-gray--600: #aeb9c6; - --mer-color__neutral-gray--650: #c6d1dd; - --mer-color__neutral-gray--700: #e1ecf9; - --mer-color__neutral-gray--800: #fafbfd; - --mer-color__neutral-gray--900: #f0f4fa; - --mer-color__neutral-gray--1000: #ffffff; - - // tinted - --mer-color__tinted-yellow--5: #faf9f6; - --mer-color__tinted-yellow--60: #fafbfd; - --mer-color__tinted-red--5: #faf5f7; - --mer-color__tinted-red--60: #fbb2b7; - --mer-color__tinted-green--5: #f2f7f8; - --mer-color__tinted-green--60: #94cac4; - --mer-color__tinted-primary--5: #f3f6fd; - --mer-color__tinted-primary--8: #eff5fd; - --mer-color__tinted-primary--10: #ecf3fd; - --mer-color__tinted-primary--20: #deebfe; - --mer-color__tinted-primary--30: #cfe3fe; - --mer-color__tinted-primary--50: #b1d2fe; - - // message - --mer-color__message-green--100: #208e80; - --mer-color__message-green--200: #208e80; - --mer-color__message-yellow--100: #dfa135; - --mer-color__message-yellow--200: #dfa135; - --mer-color__message-red--100: #6d272b; - --mer-color__message-red--200: #883035; - --mer-color__message-red--300: #a63a41; - --mer-color__message-red--400: #d54b54; - --mer-color__message-red--500: #e35861; - --mer-color__message-red--600: #e98b8f; - --mer-color__message-red--700: #eda4a7; - --mer-color__message-red--800: #f4cdcf; - --mer-color__message-red--900: #f8dfe0; - --mer-color__message-red--1000: #fcf4f4; - - // WA: This are temporary tokens for chat - --mer-color__chat-message--user: #deeab0; - --mer-color__chat-message--error: #f4cdcf; - --mer-color__chat-message--warning: #fffbf6; - --mer-color__chat-message--success: #cae0dd; - // awaiting response dots - --mer-color__chat-awaiting-dot-1: #ecd604; - --mer-color__chat-awaiting-dot-2: #bfd732; - --mer-color__chat-awaiting-dot-3: #65f4c7; - // gradient avatar cirlce - --mer-color__chat-avatar-circle-from: #ecd604; - --mer-color__chat-avatar-circle-to: #65f4c7; - } @else { - // Mercury Colors - - // primary - --mer-color__primary--200: #005ac1; - --mer-color__primary--300: #5498e8; - --mer-color__primary--400: #437dc0; - --mer-color__primary--600: #335884; - - // neutral - --mer-color__neutral-gray--100: #4a5870; - --mer-color__neutral-gray--200: #49566d; - --mer-color__neutral-gray--300: #56677a; - --mer-color__neutral-gray--400: #56677a; - --mer-color__neutral-gray--450: #56677a; - --mer-color__neutral-gray--500: #828b96; - --mer-color__neutral-gray--550: #9da9b6; - --mer-color__neutral-gray--600: #aeb9c6; - --mer-color__neutral-gray--650: #c6d1dd; - --mer-color__neutral-gray--700: #e1ecf9; - --mer-color__neutral-gray--800: #fafbfd; - --mer-color__neutral-gray--900: #f0f4fa; - --mer-color__neutral-gray--1000: #ffffff; - - // tinted - --mer-color__tinted-yellow--5: #faf9f6; - --mer-color__tinted-yellow--60: #fafbfd; - --mer-color__tinted-red--5: #faf5f7; - --mer-color__tinted-red--60: #fbb2b7; - --mer-color__tinted-green--5: #f2f7f8; - --mer-color__tinted-green--60: #94cac4; - --mer-color__tinted-primary--5: #f3f6fd; - --mer-color__tinted-primary--8: #eff5fd; - --mer-color__tinted-primary--10: #ecf3fd; - --mer-color__tinted-primary--20: #deebfe; - --mer-color__tinted-primary--30: #cfe3fe; - --mer-color__tinted-primary--50: #b1d2fe; - - // message - --mer-color__message-green--100: #208e80; - --mer-color__message-green--200: #208e80; - --mer-color__message-yellow--100: #dfa135; - --mer-color__message-yellow--200: #dfa135; - --mer-color__message-red--100: #6d272b; - --mer-color__message-red--200: #883035; - --mer-color__message-red--300: #a63a41; - --mer-color__message-red--400: #d54b54; - --mer-color__message-red--500: #e35861; - --mer-color__message-red--600: #e98b8f; - --mer-color__message-red--700: #eda4a7; - --mer-color__message-red--800: #f4cdcf; - --mer-color__message-red--900: #f8dfe0; - --mer-color__message-red--1000: #fcf4f4; - - // WA: This are temporary tokens for chat - --mer-color__chat-message--user: #b0cfff; - --mer-color__chat-message--error: #f4cdcf; - --mer-color__chat-message--warning: #fffbf6; - --mer-color__chat-message--success: #cae0dd; - // awaiting response dots - --mer-color__chat-awaiting-dot-1: #5ba7ff; - --mer-color__chat-awaiting-dot-2: #00ccff; - --mer-color__chat-awaiting-dot-3: #cf7aff; - // gradient avatar cirlce - --mer-color__chat-avatar-circle-from: #00ccff; - --mer-color__chat-avatar-circle-to: #cf7aff; - - // green (TODO: Update with light values. The following are dark values) - --color-green-100: #eef5f4; - --color-green-200: #ddebe9; - --color-green-300: #cae0dd; - --color-green-400: #b4d5d0; - --color-green-500: #9cc9c2; - --color-green-600: #3fa89b; - --color-green-700: #389287; - --color-green-800: #318278; - --color-green-900: #286a62; - --color-green-1000: #1c4b45; - } -} - -@mixin foundation-colors--dark($globant-colors: false) { - @if $globant-colors { - // Globant Colors - - // primary - --mer-color__primary--200: #bfd732; - --mer-color__primary--300: #b4cc28; - --mer-color__primary--400: #96aa22; - --mer-color__primary--600: #697718; - - // neutral - --mer-color__neutral-gray--100: #ededed; - --mer-color__neutral-gray--200: #dfdfdf; - --mer-color__neutral-gray--300: #cdcdcd; - --mer-color__neutral-gray--400: #a9a9a9; - --mer-color__neutral-gray--450: #8c8c8c; - --mer-color__neutral-gray--500: #686868; - --mer-color__neutral-gray--550: #575757; - --mer-color__neutral-gray--600: #464646; - --mer-color__neutral-gray--650: #3b3b3b; - --mer-color__neutral-gray--700: #303030; - --mer-color__neutral-gray--800: #212121; - --mer-color__neutral-gray--900: #171717; - --mer-color__neutral-gray--1000: #000000; - - // tinted - //TODO: update 'tinted-blue' with tinted-primary' in globant and mercury. - --mer-color__tinted-yellow--5: #282a2d; - --mer-color__tinted-yellow--60: #ad8a53; - --mer-color__tinted-red--5: #29252f; - --mer-color__tinted-red--60: #aa5962; - --mer-color__tinted-green--5: #1c2830; - --mer-color__tinted-green--60: #317571; - --mer-color__tinted-primary--5: #202118; - --mer-color__tinted-primary--8: #242619; - --mer-color__tinted-primary--10: #282a1a; - --mer-color__tinted-primary--20: #383d1c; - --mer-color__tinted-primary--30: #49501f; - --mer-color__tinted-primary--50: #6a7624; - - // message - --mer-color__message-green--100: #b1e1b6; - --mer-color__message-green--200: #9ccba1; - --mer-color__message-yellow--100: #dfa135; - --mer-color__message-yellow--200: #dfa135; - --mer-color__message-red--100: #fcf4f4; - --mer-color__message-red--200: #f8dfe0; - --mer-color__message-red--300: #f4cdcf; - --mer-color__message-red--400: #eda4a7; - --mer-color__message-red--500: #e98b8f; - --mer-color__message-red--600: #e35861; - --mer-color__message-red--700: #d54b54; - --mer-color__message-red--800: #a63a41; - --mer-color__message-red--900: #883035; - --mer-color__message-red--1000: #6d272b; - - // WA: This are temporary tokens for chat - --mer-color__chat-message--user: #2e340a; - --mer-color__chat-message--error: #2d1012; - --mer-color__chat-message--warning: #382606; - --mer-color__chat-message--success: #112d29; - // awaiting response dots - --mer-color__chat-awaiting-dot-1: #ecd604; - --mer-color__chat-awaiting-dot-2: #bfd732; - --mer-color__chat-awaiting-dot-3: #65f4c7; - // gradient avatar cirlce - --mer-color__chat-avatar-circle-from: #ecd604; - --mer-color__chat-avatar-circle-to: #65f4c7; - - --color-green-100: #eef5f4; - --color-green-200: #ddebe9; - --color-green-300: #cae0dd; - --color-green-400: #b4d5d0; - --color-green-500: #9cc9c2; - --color-green-600: #3fa89b; - --color-green-700: #389287; - --color-green-800: #318278; - --color-green-900: #286a62; - --color-green-1000: #1c4b45; - } @else { - // Mercury Colors - - // primary - --mer-color__primary--200: #5ba7ff; - --mer-color__primary--300: #5498e8; - --mer-color__primary--400: #437dc0; - --mer-color__primary--600: #335884; - - // neutral - --mer-color__neutral-gray--100: #e1ecf9; - --mer-color__neutral-gray--200: #d2ddeb; - --mer-color__neutral-gray--300: #c0ccd9; - --mer-color__neutral-gray--400: #9da9b6; - --mer-color__neutral-gray--450: #828b96; - --mer-color__neutral-gray--500: #56677a; - --mer-color__neutral-gray--550: #485665; - --mer-color__neutral-gray--600: #394552; - --mer-color__neutral-gray--650: #2d3a48; - --mer-color__neutral-gray--700: #242d3c; - --mer-color__neutral-gray--800: #181f2a; - --mer-color__neutral-gray--900: #11151c; - --mer-color__neutral-gray--1000: #1f2225; - - // tinted - --mer-color__tinted-yellow--5: #282a2d; - --mer-color__tinted-yellow--60: #ad8a53; - --mer-color__tinted-red--5: #29252f; - --mer-color__tinted-red--60: #aa5962; - --mer-color__tinted-green--5: #1c2830; - --mer-color__tinted-green--60: #317571; - --mer-color__tinted-primary--5: #1d2838; - --mer-color__tinted-primary--8: #1f2c3f; - --mer-color__tinted-primary--10: #1f2e43; - --mer-color__tinted-primary--20: #293d5c; - --mer-color__tinted-primary--30: #2e4e72; - --mer-color__tinted-primary--50: #3c689c; - - // message - --mer-color__message-green--100: #3fa89b; - --mer-color__message-green--200: #3fa89b; - --mer-color__message-yellow--100: #f9bd56; - --mer-color__message-yellow--200: #f9bd56; - --mer-color__message-red--100: #fcf4f4; - --mer-color__message-red--200: #f8dfe0; - --mer-color__message-red--300: #f4cdcf; - --mer-color__message-red--400: #eda4a7; - --mer-color__message-red--500: #e98b8f; - --mer-color__message-red--600: #e35861; - --mer-color__message-red--700: #d54b54; - --mer-color__message-red--800: #a63a41; - --mer-color__message-red--900: #883035; - --mer-color__message-red--1000: #6d272b; - - // WA: This are temporary tokens for chat - --mer-color__chat-message--user: #22334a; - --mer-color__chat-message--error: #2d1012; - --mer-color__chat-message--warning: #382606; - --mer-color__chat-message--success: #112d29; - // awaiting response dots - --mer-color__chat-awaiting-dot-1: #5ba7ff; - --mer-color__chat-awaiting-dot-2: #00ccff; - --mer-color__chat-awaiting-dot-3: #cf7aff; - // gradient avatar cirlce - --mer-color__chat-avatar-circle-from: #00ccff; - --mer-color__chat-avatar-circle-to: #cf7aff; - - --color-green-100: #eef5f4; - --color-green-200: #ddebe9; - --color-green-300: #cae0dd; - --color-green-400: #b4d5d0; - --color-green-500: #9cc9c2; - --color-green-600: #3fa89b; - --color-green-700: #389287; - --color-green-800: #318278; - --color-green-900: #286a62; - --color-green-1000: #1c4b45; - } -} diff --git a/packages/mercury/src/tokens/primitive/_font.scss b/packages/mercury/src/tokens/primitive/_font.scss deleted file mode 100644 index 350a49aa0..000000000 --- a/packages/mercury/src/tokens/primitive/_font.scss +++ /dev/null @@ -1,73 +0,0 @@ -@mixin font() { - // font-families - --font-family-header: Inter, Helvetica, Arial, sans-serif; - --font-family-body: Inter, Helvetica, Arial, sans-serif; - --font-family-code: monospace; - - // font-sizes: headers - --font-size-header-h1: 40px; - --font-size-header-h2: 32px; - --font-size-header-h3: 28px; - --font-size-header-h4: 24px; - --font-size-header-h5: 20px; - --font-size-header-h6: 18px; - - // font-sizes: subtitle - --font-size-subtitle-l: 20px; - --font-size-subtitle-m: 18px; - --font-size-subtitle-s: 16px; - --font-size-subtitle-xs: 14px; - - // font-sizes: body - --font-size-body-xl: 18px; - --font-size-body-l: 16px; - --font-size-body-m: 14px; - --font-size-body-s: 12px; - --font-size-body-xs: 11px; - - // font-sizes: tiny - --font-size-tiny-l: 12px; - --font-size-tiny-m: 11px; - --font-size-tiny-s: 10px; - --font-size-tiny-xs: 8px; - - // font-weights - --font-weight-bold: 700; - --font-weight-semi-bold: 600; - --font-weight-regular: 400; - - // line-heights - --line-height-tight: 1.2; - --line-height-regular: 1.3; - - // letter spacings (to be done) - - // - - - - - - - - // !Deprecated - // - - - - - - - - - --mer-font-family--title: Inter, Helvetica, Arial, sans-serif; /* @deprecated */ - --mer-font-family--body: Inter, Helvetica, Arial, sans-serif; /* @deprecated */ - --mer-font-family--code: monospace; /* @deprecated */ - - --mer-font__weight--extra-bold: 800; /* @deprecated */ - --mer-font__weight--bold: 700; /* @deprecated */ - --mer-font__weight--semi-bold: 600; /* @deprecated */ - --mer-font__weight--medium: 500; /* @deprecated */ - --mer-font__weight--regular: 400; /* @deprecated */ - --mer-font__weight--light: 300; /* @deprecated */ - - --mer-font__size--4xs: 11px; /* @deprecated */ - --mer-font__size--3xs: 12px; /* @deprecated */ - --mer-font__size--2xs: 13px; /* @deprecated */ - --mer-font__size--xs: 14px; /* @deprecated */ - --mer-font__size--sm: 16px; /* @deprecated */ - --mer-font__size--md: 20px; /* @deprecated */ - --mer-font__size--lg: 24px; /* @deprecated */ - --mer-font__size--xl: 36px; /* @deprecated */ - --mer-font__size--2xl: 40px; /* @deprecated */ - - --mer-line-height--tight: 1.3; /* @deprecated */ - --mer-line-height--regular: 1.4; /* @deprecated */ - --mer-line-height--spaced: 1.5; /* @deprecated */ -} diff --git a/packages/mercury/src/tokens/primitive/_gradients.scss b/packages/mercury/src/tokens/primitive/_gradients.scss deleted file mode 100644 index 96cd658b0..000000000 --- a/packages/mercury/src/tokens/primitive/_gradients.scss +++ /dev/null @@ -1,86 +0,0 @@ -@mixin foundation-colors--gradients() { - // gradients - --mer-color__gradient-angle: 225deg; - --mer-color__gradient-opacity--low: 0.7; - --mer-color__gradient-opacity--medium: 0.9; - --mer-color__gradient-opacity--high: 1; - - // gradient 01 - --mer-color__gradient--01: linear-gradient( - var(--mer-color__gradient-angle), - rgba(0, 204, 255, var(--mer-color__gradient-opacity--medium)) 0%, - rgba(163, 0, 255, var(--mer-color__gradient-opacity--medium)) 100% - ); - // gradient 02 - --mer-color__gradient--02: linear-gradient( - var(--mer-color__gradient-angle), - rgba(57, 255, 20, var(--mer-color__gradient-opacity--high)) 0%, - rgba(255, 0, 114, var(--mer-color__gradient-opacity--high)) 100% - ); - // gradient 03 - --mer-color__gradient--03: linear-gradient( - var(--mer-color__gradient-angle), - rgba(0, 245, 255, var(--mer-color__gradient-opacity--low)) 0%, - rgba(255, 234, 0, var(--mer-color__gradient-opacity--high)) 100% - ); - // gradient 04 - --mer-color__gradient--04: linear-gradient( - var(--mer-color__gradient-angle), - rgba(16, 196, 195, var(--mer-color__gradient-opacity--high)) 0%, - rgba(236, 30, 91, var(--mer-color__gradient-opacity--high)) 100% - ); - // gradient 05 - --mer-color__gradient--05: linear-gradient( - var(--mer-color__gradient-angle), - rgba(255, 0, 162, var(--mer-color__gradient-opacity--high)) 0%, - rgba(139, 0, 255, var(--mer-color__gradient-opacity--high)) 100% - ); - // gradient 06 - --mer-color__gradient--06: linear-gradient( - var(--mer-color__gradient-angle), - rgba(204, 255, 0, var(--mer-color__gradient-opacity--medium)) 0%, - rgba(0, 255, 204, var(--mer-color__gradient-opacity--medium)) 100% - ); - // gradient 07 - --mer-color__gradient--07: linear-gradient( - var(--mer-color__gradient-angle), - rgba(91, 118, 255, var(--mer-color__gradient-opacity--medium)) 0%, - rgba(0, 255, 203, var(--mer-color__gradient-opacity--medium)) 100% - ); - // gradient 08 - --mer-color__gradient--08: linear-gradient( - var(--mer-color__gradient-angle), - rgba(255, 0, 255, var(--mer-color__gradient-opacity--high)) 0%, - rgba(0, 149, 255, var(--mer-color__gradient-opacity--high)) 100% - ); - // gradient 09 - --mer-color__gradient--09: linear-gradient( - var(--mer-color__gradient-angle), - rgba(255, 69, 0, var(--mer-color__gradient-opacity--medium)) 0%, - rgba(142, 84, 200, var(--mer-color__gradient-opacity--medium)) 100% - ); - // gradient 10 - --mer-color__gradient--10: linear-gradient( - var(--mer-color__gradient-angle), - rgba(255, 0, 127, var(--mer-color__gradient-opacity--low)) 0%, - rgba(0, 255, 0, var(--mer-color__gradient-opacity--low)) 100% - ); - // gradient 11 - --mer-color__gradient--11: linear-gradient( - var(--mer-color__gradient-angle), - rgba(255, 199, 0, var(--mer-color__gradient-opacity--high)) 0%, - rgba(138, 43, 226, var(--mer-color__gradient-opacity--high)) 100% - ); - // gradient 12 - --mer-color__gradient--12: linear-gradient( - var(--mer-color__gradient-angle), - rgba(255, 0, 51, var(--mer-color__gradient-opacity--medium)) 0%, - rgba(255, 204, 0, var(--mer-color__gradient-opacity--medium)) 100% - ); - // gradient 13 - --mer-color__gradient--13: linear-gradient( - var(--mer-color__gradient-angle), - rgba(0, 255, 60, var(--mer-color__gradient-opacity--high)) 0%, - rgba(255, 102, 0, var(--mer-color__gradient-opacity--high)) 100% - ); -} diff --git a/packages/mercury/src/tokens/primitive/_spacing.scss b/packages/mercury/src/tokens/primitive/_spacing.scss deleted file mode 100644 index 113309651..000000000 --- a/packages/mercury/src/tokens/primitive/_spacing.scss +++ /dev/null @@ -1,12 +0,0 @@ -@mixin spacing() { - --mer-spacing--3xs: 2px; - --mer-spacing--2xs: 4px; - --mer-spacing--xs: 8px; - --mer-spacing--sm: 12px; - --mer-spacing--md: 16px; - --mer-spacing--lg: 24px; - --mer-spacing--xl: 32px; - --mer-spacing--2xl: 40px; - --mer-spacing--3xl: 48px; - --mer-spacing--4xl: 64px; -} diff --git a/packages/mercury/src/tokens/primitive/_timing.scss b/packages/mercury/src/tokens/primitive/_timing.scss deleted file mode 100644 index 5941cad15..000000000 --- a/packages/mercury/src/tokens/primitive/_timing.scss +++ /dev/null @@ -1,6 +0,0 @@ -@mixin timing() { - --mer-timing--super-fast: 100ms; - --mer-timing--fast: 200ms; - --mer-timing--regular: 500ms; - --mer-timing--slow: 1000ms; -} diff --git a/packages/mercury/src/tokens/semantic/_accent.scss b/packages/mercury/src/tokens/semantic/_accent.scss deleted file mode 100644 index 3496ea63f..000000000 --- a/packages/mercury/src/tokens/semantic/_accent.scss +++ /dev/null @@ -1,17 +0,0 @@ -@mixin semantic-accent() { - --mer-accent__primary: var(--mer-color__primary--200); - --mer-accent__primary--hover: var(--mer-color__primary--400); - --mer-accent__primary--active: var(--mer-color__primary--600); - --mer-accent__primary--disabled: var(--mer-color__neutral-gray--500); - --mer-accent__primary--destructive: var(--mer-color__message-red--600); - --mer-accent__primary--destructive-hover: var(--mer-color__message-red--800); - --mer-accent__primary--destructive-active: var( - --mer-color__message-red--1000 - ); - - --accent-success-lighter: var(--color-green-300); - --accent-success-light: var(--color-green-500); - --accent-success-enabled: var(--color-green-600); - --accent-success-hover: var(--color-green-800); - --accent-success-active: var(--color-green-1000); -} diff --git a/packages/mercury/src/tokens/semantic/_border.scss b/packages/mercury/src/tokens/semantic/_border.scss deleted file mode 100644 index 6df4159d7..000000000 --- a/packages/mercury/src/tokens/semantic/_border.scss +++ /dev/null @@ -1,24 +0,0 @@ -@mixin semantic-border() { - --mer-border-color__primary: var(--mer-accent__primary); - --mer-border-color__primary--hover: var(--mer-accent__primary--hover); - --mer-border-color__primary--active: var(--mer-accent__primary--active); - --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled); - --mer-border-color__primary--focused: var(--mer-color__neutral-gray--200); - --mer-border-color__dim: var(--mer-color__neutral-gray--550); - --mer-border-color__error: var(--mer-color__message-red--600); - --mer-border-color__error--hover: var( - --mer-accent__primary--destructive-hover - ); - --mer-border-color__error--active: var( - --mer-accent__primary--destructive-active - ); - --mer-border-color__warning: var(--mer-color__message-yellow--100); - --mer-border-color__success: var(--mer-color__message-green--100); - --mer-border-color__neutral: var(--mer-color__neutral-gray--400); - --mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100); - --mer-border-color__neutral--active: var(--mer-color__neutral-gray--200); - --mer-border-color__on-surface: var(--mer-color__neutral-gray--650); - --mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--600); - --mer-border-color__on-elevation--02: var(--mer-color__neutral-gray--550); - --mer-border-color__on-elevation--03: var(--mer-color__neutral-gray--500); -} diff --git a/packages/mercury/src/tokens/semantic/_control.scss b/packages/mercury/src/tokens/semantic/_control.scss deleted file mode 100644 index 38eb2ee30..000000000 --- a/packages/mercury/src/tokens/semantic/_control.scss +++ /dev/null @@ -1,108 +0,0 @@ -@mixin semantic-control() { - // --------------------------------------------------------------- - // Inline Controls should have the same height to look good inline - // --------------------------------------------------------------- - - --control__block-size: 32px; // Used for calculations - - // - - - - - - - Colors - - - - - - - - - --control__bg-color: var(--control__bg-color--enabled); - --control__border-color: var(--control__border-color--enabled); - --control__color: var(--control__color--enabled); - - // enabled - --control__bg-color--enabled: transparent; - --control__border-color--enabled: var(--mer-color__neutral-gray--500); - --control__color--enabled: var(--mer-text__neutral); - - // hover - --control__border-color--hover: var(--mer-border-color__neutral--hover); - - // disabled - --control__background-color--disabled: var(--mer-accent__primary--disabled); - --control__border-color--disabled: var(--control__background-color--disabled); - --control__color--disabled: var(--mer-text__on-disabled); - - // error - --control__border-color--error: var(--mer-border-color__error); - - // - - - - - - - Border - - - - - - - - - --control__border-width: var(--mer-border__width--sm); - --control__border-style: solid; - --control__border-radius: var(--mer-border__radius--sm); - - // - - - - - - - Font Face - - - - - - - - - // - - - - - - - Padding - - - - - - - - - // A calc is required to force the control block-size be 32px. Using padding tokens from the - // DS results in higer block-size. - --control__padding-block: calc( - ( - var(--control__block-size) - 2 * var(--control__border-width) - - var(--font-size-body-m) * var(--line-height-tight) - ) / 2 - ); - --control__padding-inline: var(--mer-spacing--xs); - - // - - - - - - - Gap - - - - - - - - - --control__icon-gap: var(--mer-spacing--xs); - - // - - - - - - - Placeholder - - - - - - - - - --control-placeholder__color: var(--mer-color__neutral-gray--400); - --control-placeholder__color--disabled: var( - --mer-form-input__color--disabled - ); - --control-placeholder__font-style: italic; - - // ------------------------------------------------------------- - // Tiny controls (ie.: checkbox, radio-button) - // ------------------------------------------------------------- - - // border colors are the same from "--control__***" tokens - - --control-tiny__size: var(--mer-spacing--md); - --control-tiny__border-width: 1.2px; - --control-tiny__border-style: solid; - --control-tiny__border-radius-sm: 1px; - --control-tiny__border-radius-rounded: 50%; - --control-tiny-option__color: var(--control__border-color); - - // ------------------------------------------------------------- - // Controls Label - // ------------------------------------------------------------- - - // fixed values - --label__border-width: 1.2px; - --label__border-style: solid; - --label__border-radius: var(--mer-border__radius--2xs); - --label__gap--inline: var(--mer-spacing--xs); - --label__gap--block: var(--mer-spacing--xs); - - // depend on state - --label__color: var(--label__color--enabled); - - // enabled - --label__color--enabled: var(--mer-text__neutral); - - // hover - --label__color--hover: var(--mer-text__highlighted); - - // disabled - --label__color--disabled: var(--mer-text__primary--disabled); - - // error - --label__color--error: var(--mer-text__neutral); - - // ------------------------------------------------------------- - // Controls Container - // ------------------------------------------------------------- - - --controls__container-row-gap: var(--mer-spacing--md); - --controls__group-gap--block: var(--mer-spacing--sm); - --controls__group-gap--inline: var(--mer-spacing--md); -} diff --git a/packages/mercury/src/tokens/semantic/_field.scss b/packages/mercury/src/tokens/semantic/_field.scss deleted file mode 100644 index 1d4261d1d..000000000 --- a/packages/mercury/src/tokens/semantic/_field.scss +++ /dev/null @@ -1,10 +0,0 @@ -@mixin semantic-field() { - // field group - --field-group__row-gap: var(--mer-spacing--md); - --field-group__column-gap: var(--mer-spacing--lg); - - // field - --field__row-gap: var(--mer-spacing--xs); - --field__column-gap: var(--mer-spacing--md); - --field-inline-label__margin-block-start: 6px; // 6px is the proper value, but it does not exists on the mercury ds. -} diff --git a/packages/mercury/src/tokens/semantic/_general.scss b/packages/mercury/src/tokens/semantic/_general.scss deleted file mode 100644 index dd8619f2c..000000000 --- a/packages/mercury/src/tokens/semantic/_general.scss +++ /dev/null @@ -1,87 +0,0 @@ -@mixin semantic-general() { - // ---------------------- - // Body - // ---------------------- - --mer-body__bg-color: var(--mer-surface); - --mer-body__color: var(--mer-text__on-surface); - --mer-body__margin-block: var(--mer-spacing--sm); - - // ---------------------- - // System - // ---------------------- - // System tokens are the most basic kind, used when there is not a more specific categorization. - --mer-system__border-width: var(--mer-border__width--sm); - --mer-system__border-style: solid; - --mer-system__border-color: var(--mer-color__neutral-gray--500); - - // ---------------------- - // Scrollbar - // ---------------------- - // scrollbar - --scrollbar__size: var(--mer-spacing--2xs); - // scrollbar-track - --scrollbar-track__bg-color: transparent; - - --scrollbar-track__border-radius: var(--mer-spacing--xs); - // scrollbar-thumb - --scrollbar-thumb__bg-color: var(--mer-color__neutral-gray--550); - --scrollbar-thumb__border-radius: var(--mer-spacing--xs); - // scrollbar-thumb - --scrollbar-corner__bg: transparent; - - // ---------------------- - // Icon Size - // ---------------------- - // box (shell) - --mer-icon__box--sm: var(--mer-spacing--sm); - --mer-icon__box--md: 14px; // no spacing token exists for 14px. - // icon (background-size) - --mer-icon__size--sm: 100%; - --mer-icon__size--md: 100%; - - // ------------------------------------------------------------ - // Form Input (form-input-*** background-position-x RTL support) - // ------------------------------------------------------------ - --mer-form-input__padding-inline: var(--mer-spacing--xs); - --mer-form-input__bg-position--x-value: var(--mer-form-input__padding-inline); - --mer-form-input__bg-position--x: var(--mer-form-input__bg-position--x-value); - // The following css variables are at the time of writing, global, because some components, besides - // the ch-checkbox, implement their own checkboxes. For example, the tabular-grid cell parts "selector-label" - // and "selector". - --mer-form-input__border-color: var(--mer-color__neutral-gray--500); - --mer-form-input__border-style: solid; - --mer-form-input__border-width: var(--mer-border__width--sm); - --mer-form-input__border: var(--mer-form-input__border-width) - var(--mer-form-input__border-style) var(--mer-form-input__border-color); - --mer-form-input__border-radius: var(--mer-border__radius--sm); - // the input checkbox checked styles, or radio button inner circle - --mer-form-input-check__border-width: var(--mer-border__radius--xs); - --mer-form-input-check__border-color: var( - --mer-border-color__neutral--active - ); - --mer-form-input-check__border-color--disabled: var( - --mer-accent__primary--disabled - ); - --mer-checkbox__option-checked-image: url("data:image/svg+xml, "); - - // ---------------------- - // Window - // ---------------------- - // TODO: This styles should better be applied on the ch-window. - --window__border: var(--mer-border__width--sm) solid - var(--mer-surface__elevation--01); - --window__border-radius: var(--mer-border__radius--sm); - --window__padding: var(--mer-spacing--xs); - --window__bg-color: var(--mer-surface__elevation--01); - --window__gap: var(--mer-spacing--xs); - --window__box-shadow: var(--mer-box-shadow--01); - - // ---------------------- - // Focus - // ---------------------- - --focus__outline-width: var(--mer-border__width--sm); - --focus__outline-style: solid; - --focus__outline-color: var(--mer-border-color__primary--focused); - --focus__outline-offset: calc(var(--mer-system__border-width) * -1); - --borders-un-border-color__focused: var(--focus__outline-color); -} diff --git a/packages/mercury/src/tokens/semantic/_heading.scss b/packages/mercury/src/tokens/semantic/_heading.scss deleted file mode 100644 index c27c88de6..000000000 --- a/packages/mercury/src/tokens/semantic/_heading.scss +++ /dev/null @@ -1,4 +0,0 @@ -@mixin semantic-heading() { - --mer-heading__gray--light: var(--mer-color__neutral-gray--200); - --mer-header__background-color: var(--mer-color__neutral-gray--700); -} diff --git a/packages/mercury/src/tokens/semantic/_icon.scss b/packages/mercury/src/tokens/semantic/_icon.scss deleted file mode 100644 index 3b766a908..000000000 --- a/packages/mercury/src/tokens/semantic/_icon.scss +++ /dev/null @@ -1,19 +0,0 @@ -@mixin semantic-icon() { - --mer-icon__on-surface: var(--mer-color__neutral-gray--200); - --mer-icon__on-primary: var(--mer-color__neutral-gray--900); - --mer-icon__on-primary--hover: var(--mer-color__neutral-gray--300); - --mer-icon__on-primary--active: var(--mer-color__neutral-gray--100); - --mer-icon__on-disabled: var(--mer-color__neutral-gray--450); - --mer-icon__on-message: var(--mer-color__neutral-gray--700); - --mer-icon__on-elevation: var(--mer-color__neutral-gray--100); - --mer-icon__primary: var(--mer-accent__primary); - --mer-icon__primary--hover: var(--mer-accent__primary--hover); - --mer-icon__primary--active: var(--mer-accent__primary--active); - --mer-icon__primary--disabled: var(--mer-accent__primary--disabled); - --mer-icon__error: var(--mer-color__message-red--600); - --mer-icon__warning: var(--mer-color__message-yellow--100); - --mer-icon__success: var(--mer-color__message-green--100); - --mer-icon__neutral: var(--mer-color__neutral-gray--300); - --mer-icon__highlighted: var(--mer-color__neutral-gray--100); - --mer-icon__bright: var(--mer-color__neutral-gray--300); -} diff --git a/packages/mercury/src/tokens/semantic/_item.scss b/packages/mercury/src/tokens/semantic/_item.scss deleted file mode 100644 index 151b22f46..000000000 --- a/packages/mercury/src/tokens/semantic/_item.scss +++ /dev/null @@ -1,158 +0,0 @@ -@mixin semantic-item() { - // - - - - - - - - - - - - - - - - - - - - - // Items - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - Colors - - - - - - - - - --item__bg-color: var(--item__bg-color--enabled); - --item__border-color: var(--item__border-color--enabled); - --item__color: var(--item__color--enabled); - - // enabled - --item__bg-color--enabled: transparent; - --item__border-color--enabled: transparent; - --item__color--enabled: var(--mer-text__on-elevation); - - // hover - --item__bg-color--hover: var(--mer-color__tinted-primary--5); - --item__border-color--hover: transparent; - --item__color--hover: var(--mer-color__neutral-gray--100); - - // selected - --item__bg-color--selected: var(--mer-color__tinted-primary--10); - --item__border-color--selected: var(--mer-color__tinted-primary--30); - --item__color--selected: var(--mer-color__neutral-gray--100); - - // selected + hover - --item__bg-color--selected-hover: var(--mer-color__tinted-primary--10); - --item__border-color--selected-hover: var(--mer-color__tinted-primary--20); - --item__color--selected-hover: var(--mer-color__neutral-gray--100); - - // disabled - --item__bg-color--disabled: transparent; - --item__border-color--disabled: transparent; - --item__color--disabled: var(--mer-text__primary--disabled); - - // - - - - - - - Border - - - - - - - - - --item__border-width: var(--mer-border__width--sm); - --item__border-style: solid; - - // - - - - - - - Border Radius - - - - - - - - - --item__border-radius: var(--mer-border__radius--sm); - - // - - - - - - - Padding - - - - - - - - - --item__padding-block: var(--mer-spacing--2xs); - --item__padding-inline: var(--mer-spacing--xs); - - // - - - - - - - Height - - - - - - - - - --item__height--regular: var(--mer-spacing--xl); // ie.: Combo box - --item__height--large: 36px; // ie.: Grid - - // - - - - - - - Item Gap - - - - - - - - // For example, the gap between the icon and the caption - --item__gap--regular: var(--mer-spacing--xs); - - // - - - - - - - Line Height - - - - - - - - - // - - - - - - - - - - - - - - - - - - - - - // Items Container - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - Border - - - - - - - - - --items-container__border-width: var(--mer-border__width--sm); - --items-container__border-style: solid; - - // - - - - - - - Colors - - - - - - - - - --items-container__bg-color: var(--mer-surface__elevation--01); - --items-container__border-color: var(--mer-border-color__on-surface); - - // - - - - - - - Padding - - - - - - - - - --items-container__padding-block: var(--mer-spacing--xs); - --items-container__padding-inline: var(--mer-spacing--xs); - - // - - - - - - - Type Dropdown - - - - - - - - - --items-container__border-radius: var(--mer-border__radius--sm); - --items-container__box-shadow: var(--mer-box-shadow--01); - - // - - - - - - - Gap - - - - - - - - - --items-container__gap: var(--mer-spacing--2xs); - --items-container__gap--small: var(--mer-spacing--2xs); - - // - - - - - - - Height - - - - - - - - - --items-container__max-block-size: 300px; - - // - - - - - - - Separator - - - - - - - - // The separator is an element that separates - // two groups inside the container. - - --items-container-separator__block-size: var(--mer-border__width--sm); - --items-container-separator__inline-size: 100%; - --items-container-separator__bg-color: var(--items-container__border-color); - - // - - - - - - - - - - - - - - - - - - - - - // Grid Cell - // - - - - - - - - - - - - - - - - - - - - - - --grid-cell__border-color: var(--mer-border-color__on-elevation--01); - --grid-cell__border: var(--mer-border__width--sm) solid - var(--grid-cell__border-color); - --grid-cell__box-shadow-inline-block: 0 0 0 1px var(--grid-cell__border-color); - --grid-cell__padding-block: var(--mer-spacing--xs); - --grid-cell__padding-inline: var(--mer-spacing--sm); - // - - - - - - - - - - - - - - - - - - - - - // Tab Caption (Button) - // - - - - - - - - - - - - - - - - - - - - - - // - - - - - - - Color Generic - - - - - - - - --tab-caption__bg-color: var(--tab-caption__bg-color--enabled); - --tab-caption__color: var(--tab-caption__color--enabled); - --tab-caption__border-color: transparent; - - // - - - - - - - Border - - - - - - - - --tab-caption__border-style: solid; - --tab-caption__border-width: var(--mer-border__width--sm); - - // - - - - - - - Colors - - - - - - - - // enabled - --tab-caption__bg-color--enabled: transparent; - --tab-caption__border-color--enabled: transparent; - --tab-caption__color--enabled: var(--mer-text__neutral); - - // hover - --tab-caption__bg-color--hover: var(--mer-color__tinted-primary--10); - - // selected - --tab-caption__bg-color--selected-inline: transparent; - --tab-caption__bg-color--selected-stack: var(--mer-color__tinted-primary--10); - --tab-caption__border-color--selected-inline: var(--mer-accent__primary); - --tab-caption__border-color--selected-stack: var( - --mer-color__tinted-primary--20 - ); - --tab-caption__color--selected: var(--mer-text__highlighted); - - // disabled - --tab-caption__bg-color--disabled: transparent; - --tab-caption__border-color--disabled: var( - --mer-border-color__on-elevation--01 - ); - --tab-caption__color--disabled: var(--mer-text__primary--disabled); - - // - - - - - - - Padding - - - - - - - - --tab-caption__padding-block: var(--mer-spacing--xs); - - --tab-caption__padding-inline: var(--mer-spacing--sm); - - // - - - - - - - Gap - - - - - - - - --tab-caption__gap: var(--mer-spacing--xs); // 6px does not exist on the ds. -} diff --git a/packages/mercury/src/tokens/semantic/_surface.scss b/packages/mercury/src/tokens/semantic/_surface.scss deleted file mode 100644 index f9de39bd2..000000000 --- a/packages/mercury/src/tokens/semantic/_surface.scss +++ /dev/null @@ -1,13 +0,0 @@ -@mixin semantic-surface() { - --mer-surface: var(--mer-color__neutral-gray--900); - --mer-color__surface: var( - --mer-surface - ); // '--mer-color__surface' TO be removed later (deprecated) - - --mer-surface__elevation--01: var(--mer-color__neutral-gray--800); - --mer-surface__elevation--02: var(--mer-color__neutral-gray--700); - --mer-surface__elevation--03: var(--mer-color__neutral-gray--650); - - // box shadow - --mer-box-shadow--01: 0px 4px 20px 0px #00000040; -} diff --git a/packages/mercury/src/tokens/semantic/_text.scss b/packages/mercury/src/tokens/semantic/_text.scss deleted file mode 100644 index ee5544bff..000000000 --- a/packages/mercury/src/tokens/semantic/_text.scss +++ /dev/null @@ -1,21 +0,0 @@ -@mixin semantic-text() { - --mer-text__on-surface: var(--mer-color__neutral-gray--200); - --mer-text__on-primary: var(--mer-color__neutral-gray--900); - --mer-text__on-primary--active: var(--mer-color__neutral-gray--100); - --mer-text__on-disabled: var(--mer-color__neutral-gray--450); - --mer-text__on-message: var(--mer-color__neutral-gray--700); - --mer-text__on-elevation: var(--mer-color__neutral-gray--300); - --mer-text__primary: var(--mer-accent__primary); - --mer-text__primary--hover: var(--mer-accent__primary--hover); - --mer-text__primary--active: var(--mer-accent__primary--active); - --mer-text__primary--disabled: var(--mer-accent__primary--disabled); - --mer-text__neutral: var(--mer-color__neutral-gray--300); - --mer-text__highlighted: var(--mer-color__neutral-gray--100); - --mer-text__success: var(--mer-color__message-green--100); - --mer-text__error: var(--mer-color__message-red--600); - --mer-text__warning: var(--mer-color__message-yellow--100); - --mer-text__complementary: var(--mer-color__neutral-gray--450); - --mer-text__bright: var( - --mer-color__neutral-gray--100 - ); // "--mer-text__bright" does not exists anymore in figma, but the colors are being updated. Ask the designer. -} diff --git a/packages/mercury/src/tokens/tests/generated-tokens.spec.ts b/packages/mercury/src/tokens/tests/generated-tokens.spec.ts new file mode 100644 index 000000000..f85dac66c --- /dev/null +++ b/packages/mercury/src/tokens/tests/generated-tokens.spec.ts @@ -0,0 +1,175 @@ +import { describe, expect, test } from "vitest"; +import mercuryTokens from "../_generated/mercury-generated-tokens"; +import { MERCURY_EXPECTED_TOKENS } from "./mercury-expected-tokens-values"; + +describe("[mercury-generated-tokens file]", () => { + test('should only contain the "primitive" and "semantic" entries', () => + expect(Object.keys(mercuryTokens)).toEqual(["primitive", "semantic"])); + + describe("[primitive]", () => { + test('should only contain the "color", "font-family", "font-style" and "size" entries', () => + expect(Object.keys(mercuryTokens.primitive)).toEqual([ + "color", + "font-family", + "font-style", + "size" + ])); + + describe("[color]", () => { + test('should contain the "mercury" and "globant" entries', () => + expect(Object.keys(mercuryTokens.primitive.color)).toEqual([ + "mercury", + "globant" + ])); + + describe("[mercury]", () => { + const mercuryPrimitiveColors = mercuryTokens.primitive.color.mercury; + const mercuryPrimitiveColorCategories = Object.keys( + mercuryPrimitiveColors + ); + + test('should contain the "azure", "chateau", "ember", "gradient", "green", "lilac", "neutral", "opacity", "primary", "red", "scarlet", "violet" and "yellow" categories', () => + expect(mercuryPrimitiveColorCategories).toEqual( + MERCURY_EXPECTED_TOKENS.MERCURY_PRIMITIVE_COLOR_CATEGORIES + )); + + mercuryPrimitiveColorCategories.forEach(categoryType => + test(`the "${categoryType}" category should implement the correct tokens and their values`, () => + expect(mercuryPrimitiveColors[categoryType]).toEqual( + MERCURY_EXPECTED_TOKENS.MERCURY_PRIMITIVE_COLORS[categoryType] + )) + ); + }); + + describe("[globant]", () => { + const globantPrimitiveColors = mercuryTokens.primitive.color.globant; + const globantPrimitiveColorCategories = Object.keys( + globantPrimitiveColors + ); + + test('should contain the "azure", "chateau", "ember", "gradient", "green", "lilac", "neutral", "opacity", "primary", "red", "scarlet", and "yellow" categories', () => + expect(globantPrimitiveColorCategories).toEqual( + MERCURY_EXPECTED_TOKENS.GLOBANT_PRIMITIVE_COLOR_CATEGORIES + )); + + globantPrimitiveColorCategories.forEach(categoryType => + test(`the "${categoryType}" category should implement the correct tokens and their values`, () => + expect(globantPrimitiveColors[categoryType]).toEqual( + MERCURY_EXPECTED_TOKENS.GLOBANT_PRIMITIVE_COLORS[categoryType] + )) + ); + }); + }); + + describe("[font-family]", () => + test("should match the tokens and their values", () => + expect(mercuryTokens.primitive["font-family"]).toEqual( + MERCURY_EXPECTED_TOKENS.PRIMITIVE_FONT_FAMILY + ))); + + describe("[font-style]", () => + test("should match the tokens and their values", () => + expect(mercuryTokens.primitive["font-style"]).toEqual( + MERCURY_EXPECTED_TOKENS.PRIMITIVE_FONT_STYLE + ))); + + describe("[size]", () => + test("should match the tokens and their values", () => + expect(mercuryTokens.primitive.size).toEqual( + MERCURY_EXPECTED_TOKENS.PRIMITIVE_SIZE + ))); + }); + + describe('["semantic"]', () => { + test('should only contain the "color" and "font-size" entries', () => + expect(Object.keys(mercuryTokens.semantic)).toEqual([ + "color", + "font-size" + ])); + + describe("[color]", () => { + test('should contain the "mercury" and "globant" entries', () => + expect(Object.keys(mercuryTokens.semantic.color)).toEqual([ + "mercury", + "globant" + ])); + + describe("[mercury]", () => { + const mercurySemanticColors = mercuryTokens.semantic.color.mercury; + const mercurySemanticColorScheme = Object.keys(mercurySemanticColors); + + test('should contain the "light" and "dark" color schemes', () => + expect(mercurySemanticColorScheme).toEqual(["light", "dark"])); + + mercurySemanticColorScheme.forEach(colorScheme => { + describe(`[${colorScheme}]`, () => { + const colorSchemeCategories = mercurySemanticColors[colorScheme]; + + test("should contain the same categories, independently of the color scheme or the theme (mercury/globant)", () => + expect(Object.keys(colorSchemeCategories)).toEqual( + MERCURY_EXPECTED_TOKENS.SEMANTIC_CATEGORIES + )); + + Object.keys(colorSchemeCategories).forEach(categoryType => + test(`the "${categoryType}" category should implement the correct tokens and their values`, () => + expect(colorSchemeCategories[categoryType]).toEqual( + colorScheme === "light" + ? MERCURY_EXPECTED_TOKENS.MERCURY_SEMANTIC_COLORS_LIGHT[ + categoryType + ] + : MERCURY_EXPECTED_TOKENS.MERCURY_SEMANTIC_COLORS_DARK[ + categoryType + ] + )) + ); + }); + }); + }); + + describe("[globant]", () => { + const globantSemanticColors = mercuryTokens.semantic.color.globant; + const globantSemanticColorScheme = Object.keys(globantSemanticColors); + + test('should contain the "light" and "dark" color schemes', () => + expect(globantSemanticColorScheme).toEqual(["light", "dark"])); + + globantSemanticColorScheme.forEach(colorScheme => { + describe(`[${colorScheme}]`, () => { + const colorSchemeCategories = globantSemanticColors[colorScheme]; + + test("should contain the same categories, independently of the color scheme or the theme (mercury/globant)", () => + expect(Object.keys(colorSchemeCategories)).toEqual( + MERCURY_EXPECTED_TOKENS.SEMANTIC_CATEGORIES + )); + + Object.keys(colorSchemeCategories).forEach(categoryType => + test(`the "${categoryType}" category should implement the correct tokens and their values`, () => + expect(colorSchemeCategories[categoryType]).toEqual( + colorScheme === "light" + ? MERCURY_EXPECTED_TOKENS.GLOBANT_SEMANTIC_COLORS_LIGHT[ + categoryType + ] + : MERCURY_EXPECTED_TOKENS.GLOBANT_SEMANTIC_COLORS_DARK[ + categoryType + ] + )) + ); + }); + }); + }); + }); + + describe("[font-size]", () => { + test('should only contain the "body", "caption", "header", and "subtitle" categories', () => + expect(Object.keys(mercuryTokens.semantic["font-size"])).toEqual( + MERCURY_EXPECTED_TOKENS.SEMANTIC_FONT_SIZE_CATEGORIES + )); + Object.keys(mercuryTokens.semantic["font-size"]).forEach(categoryType => + test(`the "${categoryType}" category should implement the correct tokens and their values`, () => + expect(mercuryTokens.semantic["font-size"][categoryType]).toEqual( + MERCURY_EXPECTED_TOKENS.SEMANTIC_FONT_SIZE[categoryType] + )) + ); + }); + }); +}); diff --git a/packages/mercury/src/tokens/tests/mercury-expected-tokens-values.ts b/packages/mercury/src/tokens/tests/mercury-expected-tokens-values.ts new file mode 100644 index 000000000..604e6e7ec --- /dev/null +++ b/packages/mercury/src/tokens/tests/mercury-expected-tokens-values.ts @@ -0,0 +1,998 @@ +export const MERCURY_EXPECTED_TOKENS = { + // - - - - - - - - - - - - - - - - - - - - + // Primitive tokens + // - - - - - - - - - - - - - - - - - - - - + MERCURY_PRIMITIVE_COLOR_CATEGORIES: [ + "azure", + "chateau", + "ember", + "gradient", + "green", + "lilac", + "neutral", + "opacity", + "primary", + "red", + "scarlet", + "yellow" + ], + + MERCURY_PRIMITIVE_COLORS: { + azure: { + "--color-azure-50": "#eaf3fe", + "--color-azure-100": "#e1eefe", + "--color-azure-200": "#c6dffd", + "--color-azure-300": "#9cc8fc", + "--color-azure-400": "#3791fb", + "--color-azure-500": "#0a7cff", + "--color-azure-600": "#0072f8", + "--color-azure-700": "#0049cd", + "--color-azure-750": "#1f52ae", + "--color-azure-800": "#0034b1", + "--color-azure-900": "#002da8", + "--color-azure-1000": "#173d82" + }, + chateau: { + "--color-chateau-50": "#e0f6e7", + "--color-chateau-100": "#b9eaca", + "--color-chateau-200": "#92dead", + "--color-chateau-300": "#72d495", + "--color-chateau-400": "#4fca7a", + "--color-chateau-500": "#35b061", + "--color-chateau-600": "#2d9552", + "--color-chateau-700": "#247541", + "--color-chateau-800": "#1c5e34", + "--color-chateau-900": "#154627" + }, + ember: { + "--color-ember-50": "#fffbeb", + "--color-ember-100": "#fff9e0", + "--color-ember-200": "#ffeda3", + "--color-ember-300": "#ffe370", + "--color-ember-400": "#ffdd52", + "--color-ember-500": "#ffcd00", + "--color-ember-600": "#cca400", + "--color-ember-700": "#997b00", + "--color-ember-800": "#665200", + "--color-ember-900": "#3d3100" + }, + gradient: { + "--color-gradient-berry": "#0095ff", + "--color-gradient-cyan": "#00f5ff", + "--color-gradient-magenta": "#ff00ff", + "--color-gradient-purple": "#a300ff", + "--color-gradient-sky": "#00ccff", + "--color-gradient-yellow": "#ffea00" + }, + green: { + "--color-green-100": "#eef5f4", + "--color-green-200": "#ddebe9", + "--color-green-300": "#cae0dd", + "--color-green-400": "#b4d5d0", + "--color-green-500": "#9cc9c2", + "--color-green-600": "#3fa89b", + "--color-green-700": "#389287", + "--color-green-800": "#318278", + "--color-green-900": "#286a62", + "--color-green-1000": "#1c4b45", + "--color-green-1300": "#112d29" + }, + lilac: { + "--color-lilac-50": "#f9fafa", + "--color-lilac-100": "#f8f9fc", + "--color-lilac-200": "#edf0f8", + "--color-lilac-250": "#e2e7f4", + "--color-lilac-300": "#dee1ed", + "--color-lilac-400": "#d5daeb", + "--color-lilac-500": "#c8d0e9", + "--color-lilac-600": "#c2cbe6", + "--color-lilac-700": "#bcc5e4", + "--color-lilac-800": "#b7c2e2", + "--color-lilac-900": "#9babd9" + }, + neutral: { + "--color-neutral-100": "#fafbfd", + "--color-neutral-200": "#f0f4fa", + "--color-neutral-300": "#e1ecf9", + "--color-neutral-400": "#d2ddeb", + "--color-neutral-500": "#c0ccd9", + "--color-neutral-600": "#aeb9c6", + "--color-neutral-700": "#9da9b6", + "--color-neutral-800": "#828b96", + "--color-neutral-900": "#56677a", + "--color-neutral-1000": "#4a5870", + "--color-neutral-1050": "#405975", + "--color-neutral-1100": "#485665", + "--color-neutral-1200": "#394552", + "--color-neutral-1300": "#333d47", + "--color-neutral-1400": "#2d3a48", + "--color-neutral-1450": "#243750", + "--color-neutral-1500": "#242d3c", + "--color-neutral-1550": "#17273b", + "--color-neutral-1600": "#181f2a", + "--color-neutral-1700": "#11151c", + "--color-neutral-1800": "#000000", + "--color-neutral-000": "#ffffff" + }, + opacity: { + "--color-opacity-70": "rgba(17, 21, 28, 0.7)" + }, + primary: { + "--color-primary-100": "#f4f8ff", + "--color-primary-200": "#ebf0ff", + "--color-primary-300": "#cee0ff", + "--color-primary-400": "#b0cfff", + "--color-primary-500": "#8cbcff", + "--color-primary-550": "#75aef0", + "--color-primary-580": "#729fd5", + "--color-primary-600": "#5ba7ff", + "--color-primary-700": "#5498e8", + "--color-primary-800": "#437dc0", + "--color-primary-900": "#335884", + "--color-primary-1000": "#294b72", + "--color-primary-1100": "#005ac1", + "--color-primary-1300": "#101e2d" + }, + red: { + "--color-red-100": "#fcf4f4", + "--color-red-200": "#f8dfe0", + "--color-red-300": "#f4cdcf", + "--color-red-400": "#eda4a7", + "--color-red-500": "#e98b8f", + "--color-red-600": "#e35861", + "--color-red-700": "#d54b54", + "--color-red-800": "#a63a41", + "--color-red-900": "#883035", + "--color-red-1000": "#6d272b", + "--color-red-1300": "#2d1012" + }, + scarlet: { + "--color-scarlet-50": "#fee6e6", + "--color-scarlet-100": "#fdcece", + "--color-scarlet-200": "#fcb5b5", + "--color-scarlet-300": "#fb9d9d", + "--color-scarlet-400": "#f96c6c", + "--color-scarlet-500": "#c50707", + "--color-scarlet-600": "#ac0606", + "--color-scarlet-700": "#8a0505", + "--color-scarlet-800": "#6c0404", + "--color-scarlet-900": "#4f0303" + }, + violet: { + "--color-violet-600": "#9a00fa" + }, + yellow: { + "--color-yellow-100": "#fffbf6", + "--color-yellow-200": "#fef1e3", + "--color-yellow-300": "#fde8cf", + "--color-yellow-400": "#fcdeb8", + "--color-yellow-500": "#fac980", + "--color-yellow-600": "#f9bd56", + "--color-yellow-700": "#ffc96b", + "--color-yellow-800": "#ecaf44", + "--color-yellow-900": "#b97d13", + "--color-yellow-1000": "#6f4b0b", + "--color-yellow-1300": "#382606" + } + }, + + GLOBANT_PRIMITIVE_COLOR_CATEGORIES: [ + "avocado", + "extra", + "gradient", + "green", + "neutral", + "olive", + "opacity", + "primary", + "red", + "yellow" + ], + + GLOBANT_PRIMITIVE_COLORS: { + avocado: { + "--color-avocado-100": "#f6f7ec", + "--color-avocado-200": "#e7e9c8", + "--color-avocado-300": "#d8dfa3", + "--color-avocado-400": "#c7d67b", + "--color-avocado-500": "#b4d050", + "--color-avocado-600": "#88af1d", + "--color-avocado-700": "#749519", + "--color-avocado-800": "#617920", + "--color-avocado-900": "#53681d", + "--color-avocado-1000": "#455519", + "--color-avocado-1100": "#333f13", + "--color-avocado-1200": "#232a0e", + "--color-avocado-1300": "#131708" + }, + extra: { + "--color-extra-violet-600": "#9a00fa" + }, + gradient: { + "--color-gradient-aqua": "#15c9c3", + "--color-gradient-gaserage": "#c0fb73", + "--color-gradient-greenwood": "#d9e021", + "--color-gradient-lemon": "#8cc63f", + "--color-gradient-mint": "#38efa0", + "--color-gradient-spearmint": "#79f6c0" + }, + green: { + "--color-green-100": "#eef5f4", + "--color-green-200": "#ddebe9", + "--color-green-300": "#cae0dd", + "--color-green-400": "#b4d5d0", + "--color-green-500": "#9cc9c2", + "--color-green-600": "#3fa89b", + "--color-green-700": "#389287", + "--color-green-800": "#318278", + "--color-green-900": "#286a62", + "--color-green-1000": "#1c4b45", + "--color-green-1300": "#112d29" + }, + neutral: { + "--color-neutral-100": "#ffffff", + "--color-neutral-200": "#fafafa", + "--color-neutral-300": "#f5f5f5", + "--color-neutral-350": "#f0f0f0", + "--color-neutral-400": "#ededed", + "--color-neutral-500": "#e5e5e5", + "--color-neutral-600": "#d6d6d6", + "--color-neutral-700": "#cccccc", + "--color-neutral-800": "#bdbdbd", + "--color-neutral-900": "#a9a9a9", + "--color-neutral-1000": "#8c8c8c", + "--color-neutral-1050": "#6b6b6b", + "--color-neutral-1100": "#686868", + "--color-neutral-1200": "#575757", + "--color-neutral-1300": "#464646", + "--color-neutral-1400": "#3b3b3b", + "--color-neutral-1450": "#373737", + "--color-neutral-1500": "#303030", + "--color-neutral-1550": "#262626", + "--color-neutral-1600": "#212121", + "--color-neutral-1700": "#171717", + "--color-neutral-1800": "#000000" + }, + olive: { + "--color-olive-100": "#fcfcf2", + "--color-olive-200": "#f2f3c9", + "--color-olive-300": "#e8ed9f", + "--color-olive-400": "#dee873", + "--color-olive-500": "#d2e546", + "--color-olive-600": "#c3e01a", + "--color-olive-700": "#a8c118", + "--color-olive-800": "#8ea216", + "--color-olive-900": "#7c8e15", + "--color-olive-1000": "#647213", + "--color-olive-1100": "#4d580e", + "--color-olive-1200": "#3a420b", + "--color-olive-1300": "#262b08" + }, + opacity: { + "--color-opacity-70": "rgba(23, 23, 23, 0.7)" + }, + primary: { + "--color-primary-100": "#f9fbf2", + "--color-primary-200": "#f5f8e8", + "--color-primary-300": "#eaf1ce", + "--color-primary-400": "#deeab0", + "--color-primary-500": "#d2e38c", + "--color-primary-550": "#cfe184", + "--color-primary-580": "#c6d572", + "--color-primary-600": "#bfd732", + "--color-primary-700": "#b4cc28", + "--color-primary-800": "#a3b72b", + "--color-primary-900": "#8d9f25", + "--color-primary-1000": "#515c15", + "--color-primary-1100": "#2e340a", + "--color-primary-1200": "#262b08" + }, + red: { + "--color-red-100": "#fcf4f4", + "--color-red-200": "#f8dfe0", + "--color-red-300": "#f4cdcf", + "--color-red-400": "#eda4a7", + "--color-red-500": "#e98b8f", + "--color-red-600": "#e35861", + "--color-red-700": "#d54b54", + "--color-red-800": "#a63a41", + "--color-red-900": "#883035", + "--color-red-1000": "#6d272b", + "--color-red-1300": "#2d1012" + }, + yellow: { + "--color-yellow-100": "#fffbf6", + "--color-yellow-200": "#fef1e3", + "--color-yellow-300": "#fde8cf", + "--color-yellow-400": "#fcdeb8", + "--color-yellow-500": "#fac980", + "--color-yellow-600": "#f9bd56", + "--color-yellow-700": "#ffc96b", + "--color-yellow-800": "#ecaf44", + "--color-yellow-900": "#b97d13", + "--color-yellow-1000": "#6f4b0b", + "--color-yellow-1300": "#382606" + } + }, + + PRIMITIVE_FONT_FAMILY: { + "--font-family-body": "Inter", + "--font-family-code": "DM Mono", + "--font-family-header": "Inter" + }, + + PRIMITIVE_FONT_STYLE: { + "--font-style-bold": "Bold", + "--font-style-italic": "Italic", + "--font-style-regular": "Regular", + "--font-style-semi-bold": "Semi Bold" + }, + + PRIMITIVE_SIZE: { + "--size-0": "0px", + "--size-1": "1px", + "--size-2": "2px", + "--size-4": "4px", + "--size-6": "6px", + "--size-8": "8px", + "--size-10": "10px", + "--size-11": "11px", + "--size-12": "12px", + "--size-14": "14px", + "--size-15": "15px", + "--size-16": "16px", + "--size-18": "18px", + "--size-20": "20px", + "--size-22": "22px", + "--size-24": "24px", + "--size-26": "26px", + "--size-28": "28px", + "--size-32": "32px", + "--size-40": "40px", + "--size-48": "48px", + "--size-56": "56px", + "--size-64": "64px", + "--size-72": "72px", + "--size-80": "80px", + "--size--1": "-1px", + "--size--2": "-2px" + }, + + // - - - - - - - - - - - - - - - - - - - - + // Semantic tokens + // - - - - - - - - - - - - - - - - - - - - + SEMANTIC_CATEGORIES: ["accent", "border", "icon", "text"], + + // Mercury light + MERCURY_SEMANTIC_COLORS_LIGHT: { + accent: { + "--color-accent-backdrop-default": "--rgba(17, 21, 28, 0-8)", + "--color-accent-branding-surface": "--color-neutral-1800", + "--color-accent-error-contrast": "--color-scarlet-200", + "--color-accent-error-default": "--color-scarlet-500", + "--color-accent-error-hover": "--color-scarlet-800", + "--color-accent-error-light": "--color-scarlet-300", + "--color-accent-error-lighter": "--color-scarlet-200", + "--color-accent-error-pressed": "--color-scarlet-900", + "--color-accent-item-hover": "--color-azure-300", + "--color-accent-item-selected": "--color-azure-1000", + "--color-accent-neutral-black": "--color-primary-1300", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-neutral-default": "--color-neutral-700", + "--color-accent-neutral-disabled": "--color-neutral-400", + "--color-accent-neutral-hover": "--color-neutral-1550", + "--color-accent-neutral-light": "--color-neutral-600", + "--color-accent-neutral-neutral": "--color-neutral-900", + "--color-accent-neutral-on-surface": "--color-primary-1300", + "--color-accent-neutral-pressed": "--color-neutral-200", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-primary-contrast": "--color-primary-200", + "--color-accent-primary-dark": "--color-azure-800", + "--color-accent-primary-default": "--color-azure-500", + "--color-accent-primary-focused": "--color-azure-900", + "--color-accent-primary-hover": "--color-azure-300", + "--color-accent-primary-light": "--color-azure-100", + "--color-accent-primary-lighter": "--color-azure-50", + "--color-accent-primary-on-default": "--color-azure-300", + "--color-accent-primary-on-hover": "--color-azure-800", + "--color-accent-primary-on-pressed": "--color-neutral-300", + "--color-accent-primary-pressed": "--color-azure-1000", + "--color-accent-semantic-error": "--color-scarlet-200", + "--color-accent-semantic-info": "--color-azure-200", + "--color-accent-semantic-neutral": "--color-accent-neutral-disabled", + "--color-accent-semantic-success": "--color-chateau-200", + "--color-accent-semantic-warning": "--color-ember-200", + "--color-accent-shadow-shadow": "--rgba(7, 10, 18, 0-2)", + "--color-accent-success-contrast": "--color-chateau-200", + "--color-accent-success-default": "--color-chateau-500", + "--color-accent-success-hover": "--color-chateau-800", + "--color-accent-success-light": "--color-chateau-400", + "--color-accent-success-lighter": "--color-chateau-200", + "--color-accent-success-pressed": "--color-chateau-900", + "--color-accent-surface-elevation-01": "--color-lilac-200", + "--color-accent-surface-elevation-02": "--color-lilac-250", + "--color-accent-surface-elevation-03": "--color-lilac-400", + "--color-accent-surface-elevation-answer": "--color-lilac-600", + "--color-accent-surface-surface": "--color-lilac-50", + "--color-accent-warning-contrast": "--color-ember-200", + "--color-accent-warning-default": "--color-ember-400", + "--color-accent-warning-hover": "--color-ember-500", + "--color-accent-warning-light": "--color-ember-300", + "--color-accent-warning-lighter": "--color-ember-200", + "--color-accent-warning-pressed": "--color-ember-800" + }, + border: { + "--color-border-branding-surface": "--color-neutral-1400", + "--color-border-error-dark": "--color-scarlet-200", + "--color-border-error-default": "--color-scarlet-500", + "--color-border-error-hover": "--color-scarlet-800", + "--color-border-error-light": "--color-scarlet-300", + "--color-border-error-lighter": "--color-scarlet-200", + "--color-border-error-pressed": "--color-scarlet-900", + "--color-border-item-hover": "--color-azure-400", + "--color-border-item-selected": "--color-azure-800", + "--color-border-neutral-black": "--color-primary-1300", + "--color-border-neutral-default": "--color-neutral-700", + "--color-border-neutral-disabled": "--color-neutral-700", + "--color-border-neutral-hover": "--color-neutral-1550", + "--color-border-neutral-light": "--color-neutral-600", + "--color-border-neutral-neutral": "--color-neutral-900", + "--color-border-neutral-on-border": "--color-primary-1300", + "--color-border-neutral-pressed": "--color-neutral-1500", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-primary-dark": "--color-azure-900", + "--color-border-primary-default": "--color-azure-600", + "--color-border-primary-focused": "--color-azure-900", + "--color-border-primary-hover": "--color-azure-800", + "--color-border-primary-light": "--color-azure-100", + "--color-border-primary-lighter": "--color-azure-50", + "--color-border-primary-on_default": "--color-azure-300", + "--color-border-primary-on_hover": "--color-azure-800", + "--color-border-primary-on_pressed": "--color-neutral-300", + "--color-border-primary-pressed": "--color-azure-700", + "--color-border-success-dark": "--color-chateau-200", + "--color-border-success-default": "--color-chateau-500", + "--color-border-success-hover": "--color-chateau-800", + "--color-border-success-light": "--color-chateau-400", + "--color-border-success-lighter": "--color-chateau-200", + "--color-border-success-pressed": "--color-chateau-900", + "--color-border-surface-on-elevation-01": "--color-lilac-400", + "--color-border-surface-on-elevation-02": "--color-lilac-500", + "--color-border-surface-on-elevation-03": "--color-lilac-600", + "--color-border-warning-dark": "--color-ember-200", + "--color-border-warning-default": "--color-ember-500", + "--color-border-warning-hover": "--color-ember-800", + "--color-border-warning-light": "--color-ember-300", + "--color-border-warning-lighter": "--color-ember-200", + "--color-border-warning-pressed": "--color-ember-900" + }, + icon: { + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-neutral-default": "--color-neutral-1400", + "--color-icon-neutral-disabled": "--color-neutral-800", + "--color-icon-neutral-hover": "--color-neutral-1550", + "--color-icon-neutral-light": "--color-neutral-600", + "--color-icon-neutral-neutral": "--color-neutral-900", + "--color-icon-neutral-on-disabled": "--color-neutral-1000", + "--color-icon-neutral-on-icon": "--color-neutral-100", + "--color-icon-neutral-pressed": "--color-neutral-1450", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-primary-default": "--color-azure-600", + "--color-icon-primary-hover": "--color-azure-400", + "--color-icon-primary-on_default": "--color-azure-300", + "--color-icon-primary-on_hover": "--color-azure-800", + "--color-icon-primary-on_pressed": "--color-neutral-300", + "--color-icon-primary-pressed": "--color-azure-750", + "--color-icon-semantic-error": "--color-scarlet-900", + "--color-icon-semantic-neutral": "--color-neutral-1400", + "--color-icon-semantic-success": "--color-chateau-900", + "--color-icon-semantic-warning": "--color-ember-900" + }, + text: { + "--color-text-branding-surface": "--color-neutral-100", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-neutral-default": "--color-neutral-1400", + "--color-text-neutral-disabled": "--color-neutral-800", + "--color-text-neutral-hover": "--color-neutral-1550", + "--color-text-neutral-light": "--color-neutral-600", + "--color-text-neutral-neutral": "--color-neutral-900", + "--color-text-neutral-on-disabled": "--color-neutral-1000", + "--color-text-neutral-on-text": "--color-neutral-200", + "--color-text-neutral-pressed": "--color-neutral-1550", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-primary-default": "--color-azure-600", + "--color-text-primary-hover": "--color-azure-400", + "--color-text-primary-on_default": "--color-azure-300", + "--color-text-primary-on_hover": "--color-azure-800", + "--color-text-primary-on_pressed": "--color-neutral-300", + "--color-text-primary-pressed": "--color-azure-750", + "--color-text-semantic-error": "--color-scarlet-900", + "--color-text-semantic-neutral": "--color-neutral-1400", + "--color-text-semantic-success": "--color-chateau-900", + "--color-text-semantic-warning": "--color-ember-900" + } + }, + + // Mercury dark + MERCURY_SEMANTIC_COLORS_DARK: { + accent: { + "--color-accent-backdrop-default": "--color-opacity-70", + "--color-accent-branding-surface": "--color-neutral-100", + "--color-accent-error-contrast": "--color-red-1300", + "--color-accent-error-default": "--color-red-600", + "--color-accent-error-hover": "--color-red-800", + "--color-accent-error-light": "--color-red-500", + "--color-accent-error-lighter": "--color-red-300", + "--color-accent-error-pressed": "--color-red-1000", + "--color-accent-item-hover": "--color-neutral-1450", + "--color-accent-item-selected": "--color-neutral-1550", + "--color-accent-neutral-black": "--color-neutral-1700", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-neutral-default": "--color-neutral-900", + "--color-accent-neutral-disabled": "--color-neutral-1300", + "--color-accent-neutral-hover": "--color-neutral-300", + "--color-accent-neutral-light": "--color-neutral-400", + "--color-accent-neutral-neutral": "--color-neutral-600", + "--color-accent-neutral-on-surface": "--color-neutral-100", + "--color-accent-neutral-pressed": "--color-neutral-600", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-primary-contrast": "--color-primary-1300", + "--color-accent-primary-dark": "--color-primary-1100", + "--color-accent-primary-default": "--color-primary-600", + "--color-accent-primary-focused": "--color-neutral-000", + "--color-accent-primary-hover": "--color-neutral-1450", + "--color-accent-primary-light": "--color-primary-500", + "--color-accent-primary-lighter": "--color-primary-300", + "--color-accent-primary-on-default": "--color-primary-600", + "--color-accent-primary-on-hover": "--color-primary-400", + "--color-accent-primary-on-pressed": "--color-neutral-200", + "--color-accent-primary-pressed": "--color-primary-1000", + "--color-accent-semantic-error": "--color-red-600", + "--color-accent-semantic-info": "--color-primary-600", + "--color-accent-semantic-neutral": "--color-neutral-800", + "--color-accent-semantic-success": "--color-green-600", + "--color-accent-semantic-warning": "--color-yellow-600", + "--color-accent-shadow-shadow": "--rgba(0, 0, 0, 0-2)", + "--color-accent-success-contrast": "--color-green-1300", + "--color-accent-success-default": "--color-green-600", + "--color-accent-success-hover": "--color-green-800", + "--color-accent-success-light": "--color-green-500", + "--color-accent-success-lighter": "--color-green-300", + "--color-accent-success-pressed": "--color-green-1000", + "--color-accent-surface-elevation-01": "--color-neutral-1600", + "--color-accent-surface-elevation-02": "--color-neutral-1500", + "--color-accent-surface-elevation-03": "--color-neutral-1400", + "--color-accent-surface-elevation-answer": "--color-neutral-1450", + "--color-accent-surface-surface": "--color-neutral-1700", + "--color-accent-warning-contrast": "--color-yellow-1300", + "--color-accent-warning-default": "--color-yellow-600", + "--color-accent-warning-hover": "--color-yellow-900", + "--color-accent-warning-light": "--color-yellow-400", + "--color-accent-warning-lighter": "--color-yellow-300", + "--color-accent-warning-pressed": "--color-yellow-1000" + }, + border: { + "--color-border-branding-surface": "--color-neutral-1700", + "--color-border-error-dark": "--color-red-1300", + "--color-border-error-default": "--color-red-600", + "--color-border-error-hover": "--color-red-700", + "--color-border-error-light": "--color-red-500", + "--color-border-error-lighter": "--color-red-300", + "--color-border-error-pressed": "--color-red-900", + "--color-border-item-hover": "--color-neutral-1050", + "--color-border-item-selected": "--color-primary-580", + "--color-border-neutral-black": "--color-neutral-1700", + "--color-border-neutral-default": "--color-neutral-900", + "--color-border-neutral-disabled": "--color-neutral-800", + "--color-border-neutral-hover": "--color-neutral-300", + "--color-border-neutral-light": "--color-neutral-400", + "--color-border-neutral-neutral": "--color-neutral-600", + "--color-border-neutral-on-border": "--color-neutral-100", + "--color-border-neutral-pressed": "--color-neutral-400", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-primary-dark": "--color-primary-1300", + "--color-border-primary-default": "--color-primary-600", + "--color-border-primary-focused": "--color-neutral-000", + "--color-border-primary-hover": "--color-primary-550", + "--color-border-primary-light": "--color-primary-500", + "--color-border-primary-lighter": "--color-primary-300", + "--color-border-primary-on_default": "--color-primary-600", + "--color-border-primary-on_hover": "--color-primary-400", + "--color-border-primary-on_pressed": "--color-neutral-400", + "--color-border-primary-pressed": "--color-primary-580", + "--color-border-success-dark": "--color-green-1300", + "--color-border-success-default": "--color-green-600", + "--color-border-success-hover": "--color-green-800", + "--color-border-success-light": "--color-green-500", + "--color-border-success-lighter": "--color-green-300", + "--color-border-success-pressed": "--color-green-1000", + "--color-border-surface-on-elevation-01": "--color-neutral-1300", + "--color-border-surface-on-elevation-02": "--color-neutral-1100", + "--color-border-surface-on-elevation-03": "--color-neutral-900", + "--color-border-warning-dark": "--color-yellow-1300", + "--color-border-warning-default": "--color-yellow-500", + "--color-border-warning-hover": "--color-yellow-800", + "--color-border-warning-light": "--color-yellow-400", + "--color-border-warning-lighter": "--color-yellow-300", + "--color-border-warning-pressed": "--color-yellow-900" + }, + icon: { + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-neutral-default": "--color-neutral-200", + "--color-icon-neutral-disabled": "--color-neutral-800", + "--color-icon-neutral-hover": "--color-neutral-300", + "--color-icon-neutral-light": "--color-neutral-400", + "--color-icon-neutral-neutral": "--color-neutral-400", + "--color-icon-neutral-on-disabled": "--color-neutral-600", + "--color-icon-neutral-on-icon": "--color-neutral-1700", + "--color-icon-neutral-pressed": "--color-neutral-400", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-primary-default": "--color-primary-600", + "--color-icon-primary-hover": "--color-primary-400", + "--color-icon-primary-on_default": "--color-primary-600", + "--color-icon-primary-on_hover": "--color-primary-400", + "--color-icon-primary-on_pressed": "--color-neutral-200", + "--color-icon-primary-pressed": "--color-primary-800", + "--color-icon-semantic-error": "--color-red-600", + "--color-icon-semantic-neutral": "--color-neutral-800", + "--color-icon-semantic-success": "--color-green-600", + "--color-icon-semantic-warning": "--color-yellow-600" + }, + text: { + "--color-text-branding-surface": "--color-neutral-1800", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-neutral-default": "--color-neutral-200", + "--color-text-neutral-disabled": "--color-neutral-800", + "--color-text-neutral-hover": "--color-neutral-300", + "--color-text-neutral-light": "--color-neutral-400", + "--color-text-neutral-neutral": "--color-neutral-400", + "--color-text-neutral-on-disabled": "--color-neutral-600", + "--color-text-neutral-on-text": "--color-neutral-1700", + "--color-text-neutral-pressed": "--color-neutral-400", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-primary-default": "--color-primary-600", + "--color-text-primary-hover": "--color-primary-400", + "--color-text-primary-on_default": "--color-primary-600", + "--color-text-primary-on_hover": "--color-primary-400", + "--color-text-primary-on_pressed": "--color-neutral-200", + "--color-text-primary-pressed": "--color-primary-800", + "--color-text-semantic-error": "--color-red-600", + "--color-text-semantic-neutral": "--color-neutral-800", + "--color-text-semantic-success": "--color-green-600", + "--color-text-semantic-warning": "--color-yellow-600" + } + }, + + // Globant light + GLOBANT_SEMANTIC_COLORS_LIGHT: { + accent: { + "--color-accent-backdrop-default": "--rgba(23, 23, 23, 0-8)", + "--color-accent-branding-surface": "--color-neutral-1800", + "--color-accent-error-contrast": "--color-scarlet-200", + "--color-accent-error-default": "--color-scarlet-500", + "--color-accent-error-hover": "--color-scarlet-800", + "--color-accent-error-light": "--color-scarlet-300", + "--color-accent-error-lighter": "--color-scarlet-200", + "--color-accent-error-pressed": "--color-scarlet-900", + "--color-accent-item-hover": "--color-avocado-300", + "--color-accent-item-selected": "--color-avocado-1000", + "--color-accent-neutral-black": "--color-neutral-1300", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-neutral-default": "--color-neutral-900", + "--color-accent-neutral-disabled": "--color-neutral-500", + "--color-accent-neutral-hover": "--color-neutral-1550", + "--color-accent-neutral-light": "--color-neutral-600", + "--color-accent-neutral-neutral": "--color-neutral-900", + "--color-accent-neutral-on-surface": "--color-neutral-1550", + "--color-accent-neutral-pressed": "--color-neutral-200", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-primary-contrast": "--color-primary-300", + "--color-accent-primary-dark": "--color-primary-1000", + "--color-accent-primary-default": "--color-avocado-600", + "--color-accent-primary-focused": "--color-avocado-1100", + "--color-accent-primary-hover": "--color-avocado-300", + "--color-accent-primary-light": "--color-avocado-300", + "--color-accent-primary-lighter": "--color-avocado-200", + "--color-accent-primary-on-default": "--color-avocado-300", + "--color-accent-primary-on-hover": "--color-primary-1000", + "--color-accent-primary-on-pressed": "--color-neutral-300", + "--color-accent-primary-pressed": "--color-primary-1000", + "--color-accent-semantic-error": "--color-scarlet-200", + "--color-accent-semantic-info": "--color-azure-200", + "--color-accent-semantic-neutral": "--color-accent-neutral-disabled", + "--color-accent-semantic-success": "--color-chateau-200", + "--color-accent-semantic-warning": "--color-ember-200", + "--color-accent-shadow-shadow": "--rgba(11, 18, 7, 0-2)", + "--color-accent-success-contrast": "--color-chateau-200", + "--color-accent-success-default": "--color-chateau-500", + "--color-accent-success-hover": "--color-chateau-800", + "--color-accent-success-light": "--color-chateau-400", + "--color-accent-success-lighter": "--color-chateau-200", + "--color-accent-success-pressed": "--color-chateau-900", + "--color-accent-surface-elevation-01": "--color-neutral-200", + "--color-accent-surface-elevation-02": "--color-neutral-350", + "--color-accent-surface-elevation-03": "--color-neutral-500", + "--color-accent-surface-elevation-answer": "--color-neutral-600", + "--color-accent-surface-surface": "--color-neutral-100", + "--color-accent-warning-contrast": "--color-ember-200", + "--color-accent-warning-default": "--color-ember-400", + "--color-accent-warning-hover": "--color-ember-500", + "--color-accent-warning-light": "--color-ember-300", + "--color-accent-warning-lighter": "--color-ember-200", + "--color-accent-warning-pressed": "--color-ember-800" + }, + border: { + "--color-border-branding-surface": "--color-neutral-1400", + "--color-border-error-dark": "--color-scarlet-200", + "--color-border-error-default": "--color-scarlet-600", + "--color-border-error-hover": "--color-scarlet-700", + "--color-border-error-light": "--color-scarlet-300", + "--color-border-error-lighter": "--color-scarlet-200", + "--color-border-error-pressed": "--color-scarlet-900", + "--color-border-item-hover": "--color-avocado-800", + "--color-border-item-selected": "--color-avocado-900", + "--color-border-neutral-black": "--color-neutral-1300", + "--color-border-neutral-default": "--color-neutral-800", + "--color-border-neutral-disabled": "--color-neutral-1000", + "--color-border-neutral-hover": "--color-neutral-1550", + "--color-border-neutral-light": "--color-neutral-600", + "--color-border-neutral-neutral": "--color-neutral-900", + "--color-border-neutral-on-border": "--color-neutral-1550", + "--color-border-neutral-pressed": "--color-neutral-1500", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-primary-dark": "--color-avocado-1200", + "--color-border-primary-default": "--color-avocado-500", + "--color-border-primary-focused": "--color-avocado-1100", + "--color-border-primary-hover": "--color-avocado-800", + "--color-border-primary-light": "--color-avocado-300", + "--color-border-primary-lighter": "--color-avocado-200", + "--color-border-primary-on_default": "--color-avocado-300", + "--color-border-primary-on_hover": "--color-primary-1000", + "--color-border-primary-on_pressed": "--color-neutral-300", + "--color-border-primary-pressed": "--color-avocado-900", + "--color-border-success-dark": "--color-chateau-200", + "--color-border-success-default": "--color-chateau-500", + "--color-border-success-hover": "--color-chateau-800", + "--color-border-success-light": "--color-chateau-400", + "--color-border-success-lighter": "--color-chateau-200", + "--color-border-success-pressed": "--color-chateau-900", + "--color-border-surface-on-elevation-01": "--color-neutral-400", + "--color-border-surface-on-elevation-02": "--color-neutral-500", + "--color-border-surface-on-elevation-03": "--color-neutral-600", + "--color-border-warning-dark": "--color-ember-200", + "--color-border-warning-default": "--color-ember-500", + "--color-border-warning-hover": "--color-ember-800", + "--color-border-warning-light": "--color-ember-300", + "--color-border-warning-lighter": "--color-ember-200", + "--color-border-warning-pressed": "--color-ember-900" + }, + icon: { + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-neutral-default": "--color-neutral-1400", + "--color-icon-neutral-disabled": "--color-neutral-1000", + "--color-icon-neutral-hover": "--color-neutral-1550", + "--color-icon-neutral-light": "--color-neutral-600", + "--color-icon-neutral-neutral": "--color-neutral-900", + "--color-icon-neutral-on-disabled": "--color-neutral-1100", + "--color-icon-neutral-on-icon": "--color-neutral-200", + "--color-icon-neutral-pressed": "--color-neutral-1450", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-primary-default": "--color-primary-800", + "--color-icon-primary-hover": "--color-primary-900", + "--color-icon-primary-on_default": "--color-avocado-300", + "--color-icon-primary-on_hover": "--color-primary-1000", + "--color-icon-primary-on_pressed": "--color-neutral-300", + "--color-icon-primary-pressed": "--color-primary-1000", + "--color-icon-semantic-error": "--color-scarlet-900", + "--color-icon-semantic-neutral": "--color-neutral-1400", + "--color-icon-semantic-success": "--color-chateau-900", + "--color-icon-semantic-warning": "--color-ember-900" + }, + text: { + "--color-text-branding-surface": "--color-neutral-100", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-neutral-default": "--color-neutral-1400", + "--color-text-neutral-disabled": "--color-neutral-1000", + "--color-text-neutral-hover": "--color-neutral-1550", + "--color-text-neutral-light": "--color-neutral-600", + "--color-text-neutral-neutral": "--color-neutral-900", + "--color-text-neutral-on-disabled": "--color-neutral-1100", + "--color-text-neutral-on-text": "--color-neutral-200", + "--color-text-neutral-pressed": "--color-neutral-1450", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-primary-default": "--color-avocado-600", + "--color-text-primary-hover": "--color-primary-900", + "--color-text-primary-on_default": "--color-avocado-300", + "--color-text-primary-on_hover": "--color-primary-1000", + "--color-text-primary-on_pressed": "--color-neutral-300", + "--color-text-primary-pressed": "--color-primary-1000", + "--color-text-semantic-error": "--color-scarlet-900", + "--color-text-semantic-neutral": "--color-neutral-1400", + "--color-text-semantic-success": "--color-chateau-900", + "--color-text-semantic-warning": "--color-ember-900" + } + }, + + // Globant dark + GLOBANT_SEMANTIC_COLORS_DARK: { + accent: { + "--color-accent-backdrop-default": "--rgba(23, 23, 23, 0-7)", + "--color-accent-branding-surface": "--color-neutral-100", + "--color-accent-error-contrast": "--color-red-1300", + "--color-accent-error-default": "--color-red-600", + "--color-accent-error-hover": "--color-red-800", + "--color-accent-error-light": "--color-red-500", + "--color-accent-error-lighter": "--color-red-300", + "--color-accent-error-pressed": "--color-red-1000", + "--color-accent-item-hover": "--color-olive-1000", + "--color-accent-item-selected": "--color-olive-1100", + "--color-accent-neutral-black": "--color-neutral-1300", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-neutral-default": "--color-neutral-900", + "--color-accent-neutral-disabled": "--color-neutral-1300", + "--color-accent-neutral-hover": "--color-neutral-300", + "--color-accent-neutral-light": "--color-neutral-400", + "--color-accent-neutral-neutral": "--color-neutral-600", + "--color-accent-neutral-on-surface": "--color-neutral-100", + "--color-accent-neutral-pressed": "--color-neutral-600", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-primary-contrast": "--color-olive-1300", + "--color-accent-primary-dark": "--color-olive-1100", + "--color-accent-primary-default": "--color-olive-600", + "--color-accent-primary-focused": "--color-extra-violet-600", + "--color-accent-primary-hover": "--color-olive-1000", + "--color-accent-primary-light": "--color-olive-300", + "--color-accent-primary-lighter": "--color-olive-200", + "--color-accent-primary-on-default": "--color-olive-600", + "--color-accent-primary-on-hover": "--color-olive-200", + "--color-accent-primary-on-pressed": "--color-neutral-300", + "--color-accent-primary-pressed": "--color-olive-1100", + "--color-accent-semantic-error": "--color-red-600", + "--color-accent-semantic-info": "--color-primary-600", + "--color-accent-semantic-neutral": "--color-neutral-800", + "--color-accent-semantic-success": "--color-green-600", + "--color-accent-semantic-warning": "--color-yellow-600", + "--color-accent-shadow-shadow": "--rgba(0, 0, 0, 0-2)", + "--color-accent-success-contrast": "--color-green-1300", + "--color-accent-success-default": "--color-green-600", + "--color-accent-success-hover": "--color-green-800", + "--color-accent-success-light": "--color-green-500", + "--color-accent-success-lighter": "--color-green-300", + "--color-accent-success-pressed": "--color-green-1000", + "--color-accent-surface-elevation-01": "--color-neutral-1600", + "--color-accent-surface-elevation-02": "--color-neutral-1500", + "--color-accent-surface-elevation-03": "--color-neutral-1300", + "--color-accent-surface-elevation-answer": "--color-neutral-1450", + "--color-accent-surface-surface": "--color-neutral-1700", + "--color-accent-warning-contrast": "--color-yellow-1300", + "--color-accent-warning-default": "--color-yellow-600", + "--color-accent-warning-hover": "--color-yellow-900", + "--color-accent-warning-light": "--color-yellow-400", + "--color-accent-warning-lighter": "--color-yellow-300", + "--color-accent-warning-pressed": "--color-yellow-1000" + }, + border: { + "--color-border-branding-surface": "--color-neutral-1700", + "--color-border-error-dark": "--color-red-1300", + "--color-border-error-default": "--color-red-600", + "--color-border-error-hover": "--color-red-700", + "--color-border-error-light": "--color-red-500", + "--color-border-error-lighter": "--color-red-300", + "--color-border-error-pressed": "--color-red-900", + "--color-border-item-hover": "--color-olive-700", + "--color-border-item-selected": "--color-olive-900", + "--color-border-neutral-black": "--color-neutral-1300", + "--color-border-neutral-default": "--color-neutral-900", + "--color-border-neutral-disabled": "--color-neutral-1050", + "--color-border-neutral-hover": "--color-neutral-100", + "--color-border-neutral-light": "--color-neutral-400", + "--color-border-neutral-neutral": "--color-neutral-600", + "--color-border-neutral-on-border": "--color-neutral-100", + "--color-border-neutral-pressed": "--color-neutral-400", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-primary-dark": "--color-olive-1100", + "--color-border-primary-default": "--color-olive-500", + "--color-border-primary-focused": "--#931be0", + "--color-border-primary-hover": "--color-olive-700", + "--color-border-primary-light": "--color-olive-300", + "--color-border-primary-lighter": "--color-olive-200", + "--color-border-primary-on_default": "--color-olive-600", + "--color-border-primary-on_hover": "--color-olive-200", + "--color-border-primary-on_pressed": "--color-neutral-300", + "--color-border-primary-pressed": "--color-olive-900", + "--color-border-success-dark": "--color-green-1300", + "--color-border-success-default": "--color-green-600", + "--color-border-success-hover": "--color-green-800", + "--color-border-success-light": "--color-green-500", + "--color-border-success-lighter": "--color-green-300", + "--color-border-success-pressed": "--color-green-1000", + "--color-border-surface-on-elevation-01": "--color-neutral-1300", + "--color-border-surface-on-elevation-02": "--color-neutral-1100", + "--color-border-surface-on-elevation-03": "--color-neutral-900", + "--color-border-warning-dark": "--color-yellow-1300", + "--color-border-warning-default": "--color-yellow-500", + "--color-border-warning-hover": "--color-yellow-800", + "--color-border-warning-light": "--color-yellow-400", + "--color-border-warning-lighter": "--color-yellow-300", + "--color-border-warning-pressed": "--color-yellow-900" + }, + icon: { + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-neutral-default": "--color-neutral-400", + "--color-icon-neutral-disabled": "--color-neutral-1050", + "--color-icon-neutral-hover": "--color-neutral-300", + "--color-icon-neutral-light": "--color-neutral-400", + "--color-icon-neutral-neutral": "--color-neutral-300", + "--color-icon-neutral-on-disabled": "--color-neutral-600", + "--color-icon-neutral-on-icon": "--color-neutral-1700", + "--color-icon-neutral-pressed": "--color-neutral-300", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-primary-default": "--color-olive-600", + "--color-icon-primary-hover": "--color-olive-700", + "--color-icon-primary-on_default": "--color-olive-600", + "--color-icon-primary-on_hover": "--color-olive-200", + "--color-icon-primary-on_pressed": "--color-neutral-300", + "--color-icon-primary-pressed": "--color-olive-900", + "--color-icon-semantic-error": "--color-red-600", + "--color-icon-semantic-neutral": "--color-neutral-800", + "--color-icon-semantic-success": "--color-green-600", + "--color-icon-semantic-warning": "--color-yellow-600" + }, + text: { + "--color-text-branding-surface": "--color-neutral-1800", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-neutral-default": "--color-neutral-400", + "--color-text-neutral-disabled": "--color-neutral-1050", + "--color-text-neutral-hover": "--color-neutral-300", + "--color-text-neutral-light": "--color-neutral-400", + "--color-text-neutral-neutral": "--color-neutral-300", + "--color-text-neutral-on-disabled": "--color-neutral-600", + "--color-text-neutral-on-text": "--color-neutral-1700", + "--color-text-neutral-pressed": "--color-neutral-300", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-primary-default": "--color-olive-600", + "--color-text-primary-hover": "--color-olive-700", + "--color-text-primary-on_default": "--color-olive-600", + "--color-text-primary-on_hover": "--color-olive-200", + "--color-text-primary-on_pressed": "--color-neutral-300", + "--color-text-primary-pressed": "--color-olive-900", + "--color-text-semantic-error": "--color-red-600", + "--color-text-semantic-neutral": "--color-neutral-800", + "--color-text-semantic-success": "--color-green-600", + "--color-text-semantic-warning": "--color-yellow-600" + } + }, + + SEMANTIC_FONT_SIZE_CATEGORIES: ["body", "caption", "header", "subtitle"], + + SEMANTIC_FONT_SIZE: { + body: { + "--font-size-body-l": "--size-16", + "--font-size-body-m": "--size-14", + "--font-size-body-s": "--size-12", + "--font-size-body-xl": "--size-18", + "--font-size-body-xs": "--size-11" + }, + caption: { + "--font-size-caption-l": "--size-12", + "--font-size-caption-m": "--size-11", + "--font-size-caption-s": "--size-10", + "--font-size-caption-xs": "--size-8" + }, + header: { + "--font-size-header-h1": "--size-40", + "--font-size-header-h2": "--size-32", + "--font-size-header-h3": "--size-28", + "--font-size-header-h4": "--size-24", + "--font-size-header-h5": "--size-20", + "--font-size-header-h6": "--size-18" + }, + subtitle: { + "--font-size-subtitle-l": "--size-20", + "--font-size-subtitle-m": "--size-18", + "--font-size-subtitle-s": "--size-16", + "--font-size-subtitle-xl": "--size-24", + "--font-size-subtitle-xs": "--size-15" + } + } +}; diff --git a/packages/mercury/src/types.ts b/packages/mercury/src/types.ts index 8a3e23f5a..512e2699c 100644 --- a/packages/mercury/src/types.ts +++ b/packages/mercury/src/types.ts @@ -52,6 +52,7 @@ export type MercuryBundleUtil = | "utils/elevation" | "utils/form" | "utils/layout" + | "utils/link" | "utils/spacing" | "utils/typography" // TODO: Use "utils/scrollbar" when the ch-theme supports aliases diff --git a/packages/mercury/vitest.workspace.ts b/packages/mercury/vitest.workspace.ts index da377ea6e..57a3b6aaf 100644 --- a/packages/mercury/vitest.workspace.ts +++ b/packages/mercury/vitest.workspace.ts @@ -4,7 +4,7 @@ export default defineWorkspace([ { // Tests that don't run on the Browser test: { - include: ["src/tests/**/*.{test,spec}.ts"], + include: ["**/*.{test,spec}.ts"], name: "unit", environment: "node" } diff --git a/packages/showcase/public/images/mercury-header-illustration.svg b/packages/showcase/public/images/mercury-header-illustration.svg new file mode 100644 index 000000000..57be9046d --- /dev/null +++ b/packages/showcase/public/images/mercury-header-illustration.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/showcase/src/app/app.scss b/packages/showcase/src/app/app.scss index 9aee61f63..3cfd1e492 100644 --- a/packages/showcase/src/app/app.scss +++ b/packages/showcase/src/app/app.scss @@ -1,10 +1,9 @@ :host { - --app-padding: 8px; - --app-header-block-size: 60px; - --app-grid-space: 6px; - --app-grid-border-radius: 4px; - --app-grid-border: 1px solid - var(--mer-border-color__on-elevation--01, var(--border-color__mild)); + --app-padding: var(--size-8); + --app-header-block-size: 60px; // no 60px size token on Mercury + --app-grid-space: var(--size-6); + --app-grid-border-radius: var(--size-4); + --app-grid-border: var(--size-1) solid var(--color-border-surface-on-elevation-01); display: grid; grid-template-rows: max-content 1fr; @@ -18,27 +17,28 @@ justify-content: space-between; position: sticky; inset-block-start: 0; - padding-inline: 12px; + padding-inline: var(--size-12); min-block-size: var(--app-header-block-size); - border-block-end-width: 1px; + border-block-end-width: var(--size-1); border-block-end-style: solid; - border-color: var(--mer-border-color__on-elevation--01); + border-color: var(--color-border-surface-on-elevation-01); z-index: 9; // For the tabular-grid cases &__logo { display: flex; - gap: 12px; + gap: var(--size-12); align-items: center; // TODO: It should be #fff in light mode - color: var(--mer-text__bright); + color: var(--color-accent-primary-focused); &::before { + $squaredLogoSize: var(--size-40); content: ""; display: block; -webkit-mask: no-repeat center / 100% url("/assets/icons/mercury.svg"); - inline-size: 40px; - block-size: 40px; + inline-size: $squaredLogoSize; + block-size: $squaredLogoSize; background-color: currentColor; } @@ -48,10 +48,10 @@ } &__version { - padding-inline: 8px; - padding-block: 4px; - border-radius: 16px; - margin-inline-start: 8px; + padding-inline: var(--size-8); + padding-block: var(--size-4); + border-radius: var(--size-16); + margin-inline-start: var(--size-8); } &__filters { @@ -61,16 +61,16 @@ } &__separator { - margin-inline: 0px 8px; - inline-size: 1px; - block-size: 30px; + margin-inline: 0 var(--size-8); + inline-size: var(--size-1); + block-size: 30px; // no 30px size token on Mercury align-self: center; - background-color: var(--mer-border-color__on-elevation--02); + background-color: var(--color-border-surface-on-elevation-02); } &__config { display: flex; - gap: 16px; + gap: var(--size-16); margin-inline-start: auto; } } @@ -85,9 +85,9 @@ aside { display: grid; position: sticky; inset-block-start: var(--app-header-block-size); - border-inline-end-width: 1px; + border-inline-end-width: var(--size-1); border-inline-end-style: solid; - border-color: var(--mer-border-color__on-elevation--01); + border-color: var(--color-border-surface-on-elevation-01); max-block-size: calc(100dvh - var(--app-header-block-size)); inline-size: var(--app-sidebar-size); } @@ -103,15 +103,15 @@ main { } &:not(:has(home)) { - padding-block: 40px; + padding-block: var(--size-40); } } // WA to improve visuals .navigation-list { - padding: 4px; + padding: var(--size-4); &::part(item__action) { - padding-block: 6px; + padding-block: var(--size-6); } } diff --git a/packages/showcase/src/app/components/accordion/accordion.component.html b/packages/showcase/src/app/components/accordion/accordion.component.html index 9162e4e90..bc457b96f 100644 --- a/packages/showcase/src/app/components/accordion/accordion.component.html +++ b/packages/showcase/src/app/components/accordion/accordion.component.html @@ -5,10 +5,10 @@

{{ metadata.title }}

{{ metadata.description }}

- Note about gap: By default, accordions do not have any gap between - panels (accordion items). If you want to add a gap, you can apply a custom gap - to the ch-accordion-render element. In a future Mercury release, - generic gap classes will be available, allowing you to apply them as needed. + Note about gap: By default, accordions do not have any gap between panels + (accordion items). If you want to add a gap, you can apply a custom gap to the + ch-accordion-render element. In a future Mercury release, generic gap + classes will be available, allowing you to apply them as needed.
@@ -28,131 +28,42 @@

A filled accrodion features a solid background color, making it stand out - visually. It’s ideal for emphasizing important sections or ensuring the - accordion content is clearly distinguished from the background. + visually. It’s ideal for emphasizing important sections or ensuring the accordion + content is clearly distinguished from the background.

- +
- + - - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - - -
-

- 2. Accordion Filled Header -

- -

- A filled header accordion applies a solid background to the header while - keeping the content transparent. It highlights section titles without adding - visual weight to the content. -

- - - - - - - -
-
- - - - - +
- +
- +
- +
@@ -165,65 +76,44 @@

- An outlined accordion features a border without a solid background, giving - it a more subtle look compared to the filled version. It's perfect for when - a less intrusive, cleaner appearance is preferred while still providing - clear separation from the background. + An outlined accordion features a border without a solid background, giving it a + more subtle look compared to the filled version. It's perfect for when a less + intrusive, cleaner appearance is preferred while still providing clear separation + from the background.

- - + +
- + - +
- +
- +
- +
@@ -246,8 +136,8 @@

- Use the header slot to customize the panel header with your - own content. + Use the header slot to customize the panel header with your own + content.

@@ -257,20 +147,15 @@

  • The header slot replaces the default caption. If you want a caption that - matches the default styling, you need to add it within the slot and - apply the .subtitle-semi-bold-xs class to the slot - container. This ensures the caption uses the same font style as the - accordion header. + matches the default styling, you need to add it within the slot and apply the + .subtitle-semi-bold-xs class to the slot container. This ensures + the caption uses the same font style as the accordion header.
  • +
  • You have full control over the alignment of the slotted header content.
  • - You have full control over the alignment of the slotted header content. -
  • -
  • - While this example uses a "filled" accordion, the header slot works with - any accordion style. + While this example uses a "filled" accordion, the header slot works with any + accordion style.
- -

diff --git a/packages/showcase/src/app/components/button/button.component.html b/packages/showcase/src/app/components/button/button.component.html index 6041ce248..d6501fe79 100644 --- a/packages/showcase/src/app/components/button/button.component.html +++ b/packages/showcase/src/app/components/button/button.component.html @@ -108,11 +108,6 @@

[headingLevel]="3" /> - - [headingLevel]="3" /> - - {{ metadata.title }}

{{ metadata.description }}

- +

User messages appear at the end of the reading direction and have a solid background color, making them easy to distinguish from assistant messages, which @@ -13,7 +13,7 @@

{{ metadata.title }}


- +

Assistant messages are aligned to the start, have no background, and show the assistant’s name and time. A three-dot animation appears when a reply is on the @@ -22,7 +22,7 @@

{{ metadata.title }}


- +

An assistant response once ready, with a copy button to quickly copy the text for sharing or reuse elsewhere. @@ -30,7 +30,7 @@

{{ metadata.title }}


- +

Assistant messages can indicate different states: success (green), warning (orange), and error (red), helping users quickly understand the type or importance @@ -39,7 +39,7 @@

{{ metadata.title }}


- +

To create code blocks, you’ll use three backticks (```) or three tildes (~~~) on the lines before the code block. @@ -47,7 +47,7 @@

{{ metadata.title }}


- +

When heading elements (<h1>, <h2>, <h3>, etc.) appear within a chat component, their font sizes @@ -59,7 +59,7 @@

{{ metadata.title }}


- +

You can upload files as well. While uploading, each audio, video, image, or other file displays a loader and is disabled until the upload finishes. @@ -67,7 +67,7 @@

{{ metadata.title }}


- +

Once uploaded, the loader disappears and the files become playable or viewable, so you can immediately see or play the audio, video, or images you sent. @@ -75,7 +75,7 @@

{{ metadata.title }}


- +

Speak instead of typing: the chat captures and shows the conversation in real time. Make sure your microphone is on! Add a button for users to activate Live @@ -85,7 +85,7 @@

{{ metadata.title }}


- +

Enable Live Audio by setting liveMode to true and rendering a live-audio-container slot. Custom buttons aren’t needed, @@ -94,7 +94,7 @@

{{ metadata.title }}


- +

The input field’s maximum number of lines is configurable, allowing it to expand up to a defined limit for improved usability and layout control. Type into the @@ -103,7 +103,7 @@

{{ metadata.title }}


- +

You can customize the avatar's name, image, border colors, and the animated dots shown while the assistant is waiting. The avatar name is part of the message @@ -115,7 +115,10 @@

{{ metadata.title }}


- +

The following example shows how customizing assistants can help users more easily identify who is responding in a conversation with multiple assistants. diff --git a/packages/showcase/src/app/components/chat/chat.component.ts b/packages/showcase/src/app/components/chat/chat.component.ts index 126e97f6b..53e042db7 100644 --- a/packages/showcase/src/app/components/chat/chat.component.ts +++ b/packages/showcase/src/app/components/chat/chat.component.ts @@ -11,12 +11,6 @@ import { CSS_CLASSES } from "@genexus/design-system-common/constants/html.js"; import { createRenders } from "../../../common/create-signals-from-code-snippets"; import { PageFiltersService } from "../../../services/page-filters.service"; import { CodeSnippetComponent } from "../../../user-controls/code-snippet/code-snippet.component"; - -// Production import -// import { chatMetadata } from "@genexus/design-system-common/components/chat/metadata.js"; - -// Development import - @Component({ selector: "components-chat", templateUrl: "./chat.component.html", diff --git a/packages/showcase/src/app/components/combo-box/combo-box.component.html b/packages/showcase/src/app/components/combo-box/combo-box.component.html index ed779d5b1..957ed4b88 100644 --- a/packages/showcase/src/app/components/combo-box/combo-box.component.html +++ b/packages/showcase/src/app/components/combo-box/combo-box.component.html @@ -8,14 +8,14 @@

{{ metadata.title }}

- To display a combo box with a label, you will have to do the same as working - with native HTML, adding a for attribute for the label with the - value of the control's id. + To display a combo box with a label, you will have to do the same as working with + native HTML, adding a for attribute for the label with the value of + the control's id.

- In addition, a div wrapper must be used around those elements to properly - style them. These styles are documented on the + In addition, a div wrapper must be used around those elements to properly style + them. These styles are documented on the label and form sections, correspondingly. diff --git a/packages/showcase/src/app/components/drop-down/drop-down.component.scss b/packages/showcase/src/app/components/drop-down/drop-down.component.scss index b0e40d67e..3d8dc56dc 100644 --- a/packages/showcase/src/app/components/drop-down/drop-down.component.scss +++ b/packages/showcase/src/app/components/drop-down/drop-down.component.scss @@ -1,10 +1,10 @@ // Custom content example 1 .dummy-menu-button { - padding: var(--mer-spacing--3xs) var(--mer-spacing--2xs); + padding: var(--size-1) var(--size-4); } .paragraph-slot { - border: 1px solid var(--mer-border-color__primary); - padding: var(--mer-spacing--2xs) var(--mer-spacing--xs); + border: 1px solid var(--color-border-primary-default); + padding: var(--size-4) var(--size-8); } // Custom content example 2 @@ -12,22 +12,22 @@ display: flex; align-items: center; justify-content: space-between; - padding-inline-start: var(--mer-spacing--xs); + padding-inline-start: var(--size-8); } .custom-content-2-footer-slot { - padding-block-start: var(--mer-spacing--xs); + padding-block-start: var(--size-8); display: flex; align-items: center; justify-content: space-between; - border-block-start: var(--mer-border__width--sm) solid - var(--mer-border-color__on-elevation--01); + border-block-start: var(--size-1) solid + var(--color-border-surface-on-elevation-01); line-height: 1; - gap: var(--mer-spacing--2xl); + gap: var(--size-40); } .toggle-theme-container { display: flex; align-items: center; - gap: var(--mer-spacing--xs); + gap: var(--size-8); } // Elevation examples diff --git a/packages/showcase/src/app/components/list-box/list-box.component.scss b/packages/showcase/src/app/components/list-box/list-box.component.scss deleted file mode 100644 index bca218a38..000000000 --- a/packages/showcase/src/app/components/list-box/list-box.component.scss +++ /dev/null @@ -1,12 +0,0 @@ -.list-box { - block-size: 170px; -} -.list-box.with-separator { - block-size: 305px; -} -.list-box.with-group { - block-size: 205px; -} -.list-box.with-group-and-separator { - block-size: 210px; -} diff --git a/packages/showcase/src/app/components/list-box/list-box.component.ts b/packages/showcase/src/app/components/list-box/list-box.component.ts index 3caa90dbb..230c1c6b7 100644 --- a/packages/showcase/src/app/components/list-box/list-box.component.ts +++ b/packages/showcase/src/app/components/list-box/list-box.component.ts @@ -20,8 +20,7 @@ import { CodeSnippetComponent } from "../../../user-controls/code-snippet/code-s changeDetection: ChangeDetectionStrategy.OnPush, imports: [CodeSnippetComponent], host: { class: "main-content", ngSkipHydration: "true" }, - schemas: [CUSTOM_ELEMENTS_SCHEMA], - styleUrls: ["./list-box.component.scss"] + schemas: [CUSTOM_ELEMENTS_SCHEMA] }) export class ListBoxComponent { router = inject(Router); diff --git a/packages/showcase/src/app/components/tooltip/tooltip.component.html b/packages/showcase/src/app/components/tooltip/tooltip.component.html index eee6bab6d..2d81031cd 100644 --- a/packages/showcase/src/app/components/tooltip/tooltip.component.html +++ b/packages/showcase/src/app/components/tooltip/tooltip.component.html @@ -6,11 +6,11 @@

{{ metadata.title }}

⚠️   Accessibility best practices:

- If the information is important enough for a tooltip, isn't it important - enough to always be visible? Instead of using tooltips and hiding important - information, consider writing clear, succinct, always visible descriptions. If - you have space, don't use tooltips or toggletips. Just provide clear labels - and sufficient body text. + If the information is important enough for a tooltip, isn't it important enough to + always be visible? Instead of using tooltips and hiding important information, + consider writing clear, succinct, always visible descriptions. If you have space, + don't use tooltips or toggletips. Just provide clear labels and sufficient body + text.
diff --git a/packages/showcase/src/app/components/tooltip/tooltip.component.scss b/packages/showcase/src/app/components/tooltip/tooltip.component.scss new file mode 100644 index 000000000..476db4ef1 --- /dev/null +++ b/packages/showcase/src/app/components/tooltip/tooltip.component.scss @@ -0,0 +1,5 @@ +.tooltip-for-showcase-container { + padding: 64px; + text-align: center; + border: 1px dashed var(--color-border-neutral-default); +} diff --git a/packages/showcase/src/app/components/widget/widget.component.html b/packages/showcase/src/app/components/widget/widget.component.html deleted file mode 100644 index 0d40bad85..000000000 --- a/packages/showcase/src/app/components/widget/widget.component.html +++ /dev/null @@ -1,12 +0,0 @@ - - -
-

Widget

-
- -

- This page is under construction and will be available soon. You can see the - old version here. -

diff --git a/packages/showcase/src/app/components/widget/widget.component.ts b/packages/showcase/src/app/components/widget/widget.component.ts deleted file mode 100644 index 1dfa8ff87..000000000 --- a/packages/showcase/src/app/components/widget/widget.component.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { ChangeDetectionStrategy, Component } from "@angular/core"; -import { RuntimeBundlesComponent } from "../../../user-controls/runtime-bundles/runtime-bundles.component"; - -@Component({ - selector: "components-widget", - templateUrl: "./widget.component.html", - changeDetection: ChangeDetectionStrategy.OnPush, - imports: [RuntimeBundlesComponent, RuntimeBundlesComponent], - host: { class: "main-content" } -}) -export class WidgetComponent {} diff --git a/packages/showcase/src/app/core-concepts/dark-mode/dark-mode.html b/packages/showcase/src/app/core-concepts/dark-mode/dark-mode.html new file mode 100644 index 000000000..e69de29bb diff --git a/packages/showcase/src/app/core-concepts/dark-mode/dark-mode.ng.ts b/packages/showcase/src/app/core-concepts/dark-mode/dark-mode.ng.ts new file mode 100644 index 000000000..11a510802 --- /dev/null +++ b/packages/showcase/src/app/core-concepts/dark-mode/dark-mode.ng.ts @@ -0,0 +1,15 @@ +import { + ChangeDetectionStrategy, + Component, + CUSTOM_ELEMENTS_SCHEMA +} from "@angular/core"; + +@Component({ + selector: "core-concepts-dark-mode", + templateUrl: "./dark-mode.html", + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: "main-content" }, + schemas: [CUSTOM_ELEMENTS_SCHEMA], + styleUrls: ["./dark-mode.scss"] +}) +export class DarkModeComponent {} diff --git a/packages/showcase/src/app/core-concepts/dark-mode/dark-mode.scss b/packages/showcase/src/app/core-concepts/dark-mode/dark-mode.scss new file mode 100644 index 000000000..e69de29bb diff --git a/packages/showcase/src/app/core-concepts/icons/icons.scss b/packages/showcase/src/app/core-concepts/icons/icons.scss index b65732221..54009f8ec 100644 --- a/packages/showcase/src/app/core-concepts/icons/icons.scss +++ b/packages/showcase/src/app/core-concepts/icons/icons.scss @@ -1,6 +1,6 @@ core-concepts-icons { h3 { - margin-block: 64px 16px; + margin-block: var(--size-64) var(--size-16); } h2 { @@ -11,13 +11,13 @@ core-concepts-icons { display: grid; grid-template-columns: max-content max-content; align-items: center; - gap: 8px; + gap: var(--size-8); &::before { content: ""; display: block; - inline-size: 32px; - block-size: 32px; + inline-size: var(--size-32); + block-size: var(--size-32); background: no-repeat center / 100% var(--icon-path); } } @@ -25,7 +25,7 @@ core-concepts-icons { .icons-code-block-selected { position: fixed; - inset-block-start: 56px; + inset-block-start: var(--size-56); inset-inline-start: 276px; } @@ -36,7 +36,7 @@ core-concepts-icons { .section-icons { display: flex; flex-wrap: wrap; - column-gap: 8px; + column-gap: var(--size-8); h3, &__description { @@ -50,12 +50,12 @@ core-concepts-icons { &__group { display: grid; grid-auto-rows: max-content; - gap: 8px; - inline-size: calc(25% - 6px); - padding: 16px; - margin-block-end: 16px; - border: 1px dashed var(--mer-border-color__on-surface); - border-radius: 4px; + gap: var(--size-8); + inline-size: calc(25% - var(--size-6)); + padding: var(--size-16); + margin-block-end: var(--size-16); + border: var(--size-1) dashed var(--color-border-surface-on-elevation-01); + border-radius: var(--size-4); content-visibility: auto; contain-intrinsic-size: auto 216px; @@ -63,7 +63,7 @@ core-concepts-icons { &:hover:not(&--selected) { background-color: color-mix( in srgb, - var(--mer-accent__primary--hover) 15%, + var(--color-accent-primary-hover) 15%, transparent ); } @@ -71,13 +71,13 @@ core-concepts-icons { &--selected { background-color: color-mix( in srgb, - var(--mer-accent__primary--hover) 25%, + var(--color-accent-primary-hover) 25%, transparent ); } &:focus-visible { - border-color: var(--mer-border-color__primary--focused); + border-color: var(--color-border-primary-focused); } } } diff --git a/packages/showcase/src/app/core-concepts/spacing/spacing.component.scss b/packages/showcase/src/app/core-concepts/spacing/spacing.component.scss index 9df2cef1a..dca5638cd 100644 --- a/packages/showcase/src/app/core-concepts/spacing/spacing.component.scss +++ b/packages/showcase/src/app/core-concepts/spacing/spacing.component.scss @@ -1,3 +1,3 @@ .green-text { - color: var(--mer-color__message-green--100); + color: var(--color-text-semantic-success); } diff --git a/packages/showcase/src/app/core-concepts/tokens/mercury-tokens.ts b/packages/showcase/src/app/core-concepts/tokens/mercury-tokens.ts new file mode 100644 index 000000000..1a4c86731 --- /dev/null +++ b/packages/showcase/src/app/core-concepts/tokens/mercury-tokens.ts @@ -0,0 +1,1000 @@ +// mercuryTokens is generated for packages/showcase tokens page. +const mercuryTokens = { + primitive: { + color: { + mercury: { + azure: { + "--color-azure-50": "#eaf3fe", + "--color-azure-100": "#e1eefe", + "--color-azure-200": "#c6dffd", + "--color-azure-300": "#9cc8fc", + "--color-azure-400": "#3791fb", + "--color-azure-500": "#0a7cff", + "--color-azure-600": "#0072f8", + "--color-azure-700": "#0049cd", + "--color-azure-750": "#1f52ae", + "--color-azure-800": "#0034b1", + "--color-azure-900": "#002da8", + "--color-azure-1000": "#173d82" + }, + chateau: { + "--color-chateau-50": "#e0f6e7", + "--color-chateau-100": "#b9eaca", + "--color-chateau-200": "#92dead", + "--color-chateau-300": "#72d495", + "--color-chateau-400": "#4fca7a", + "--color-chateau-500": "#35b061", + "--color-chateau-600": "#2d9552", + "--color-chateau-700": "#247541", + "--color-chateau-800": "#1c5e34", + "--color-chateau-900": "#154627" + }, + ember: { + "--color-ember-50": "#fffbeb", + "--color-ember-100": "#fff9e0", + "--color-ember-200": "#ffeda3", + "--color-ember-300": "#ffe370", + "--color-ember-400": "#ffdd52", + "--color-ember-500": "#ffcd00", + "--color-ember-600": "#cca400", + "--color-ember-700": "#997b00", + "--color-ember-800": "#665200", + "--color-ember-900": "#3d3100" + }, + gradient: { + "--color-gradient-berry": "#0095ff", + "--color-gradient-magenta": "#ff00ff", + "--color-gradient-purple": "#a300ff", + "--color-gradient-sky": "#00ccff" + }, + green: { + "--color-green-100": "#eef5f4", + "--color-green-200": "#ddebe9", + "--color-green-300": "#cae0dd", + "--color-green-400": "#b4d5d0", + "--color-green-500": "#9cc9c2", + "--color-green-600": "#3fa89b", + "--color-green-700": "#389287", + "--color-green-800": "#318278", + "--color-green-900": "#286a62", + "--color-green-1000": "#1c4b45", + "--color-green-1300": "#112d29" + }, + lilac: { + "--color-lilac-50": "#f9fafa", + "--color-lilac-100": "#f8f9fc", + "--color-lilac-200": "#edf0f8", + "--color-lilac-250": "#e2e7f4", + "--color-lilac-300": "#dee1ed", + "--color-lilac-400": "#d5daeb", + "--color-lilac-500": "#c8d0e9", + "--color-lilac-600": "#c2cbe6", + "--color-lilac-700": "#bcc5e4", + "--color-lilac-800": "#b7c2e2", + "--color-lilac-900": "#9babd9" + }, + neutral: { + "--color-neutral-100": "#fafbfd", + "--color-neutral-200": "#f0f4fa", + "--color-neutral-300": "#e1ecf9", + "--color-neutral-400": "#d2ddeb", + "--color-neutral-500": "#c0ccd9", + "--color-neutral-600": "#aeb9c6", + "--color-neutral-700": "#9da9b6", + "--color-neutral-800": "#828b96", + "--color-neutral-900": "#56677a", + "--color-neutral-1000": "#4a5870", + "--color-neutral-1050": "#405975", + "--color-neutral-1100": "#485665", + "--color-neutral-1200": "#394552", + "--color-neutral-1300": "#333d47", + "--color-neutral-1400": "#2d3a48", + "--color-neutral-1450": "#243750", + "--color-neutral-1500": "#242d3c", + "--color-neutral-1550": "#17273b", + "--color-neutral-1600": "#181f2a", + "--color-neutral-1700": "#11151c", + "--color-neutral-1800": "#000000", + "--color-neutral-000": "#ffffff" + }, + opacity: { + "--color-opacity-70": "rgba(17, 21, 28, 0.7)" + }, + primary: { + "--color-primary-100": "#f4f8ff", + "--color-primary-200": "#ebf0ff", + "--color-primary-300": "#cee0ff", + "--color-primary-400": "#b0cfff", + "--color-primary-500": "#8cbcff", + "--color-primary-550": "#75aef0", + "--color-primary-580": "#729fd5", + "--color-primary-600": "#5ba7ff", + "--color-primary-700": "#5498e8", + "--color-primary-800": "#437dc0", + "--color-primary-900": "#335884", + "--color-primary-1000": "#294b72", + "--color-primary-1100": "#005ac1", + "--color-primary-1300": "#101e2d" + }, + red: { + "--color-red-100": "#fcf4f4", + "--color-red-200": "#f8dfe0", + "--color-red-300": "#f4cdcf", + "--color-red-400": "#eda4a7", + "--color-red-500": "#e98b8f", + "--color-red-600": "#e35861", + "--color-red-700": "#d54b54", + "--color-red-800": "#a63a41", + "--color-red-900": "#883035", + "--color-red-1000": "#6d272b", + "--color-red-1300": "#2d1012" + }, + scarlet: { + "--color-scarlet-50": "#fee6e6", + "--color-scarlet-100": "#fdcece", + "--color-scarlet-200": "#fcb5b5", + "--color-scarlet-300": "#fb9d9d", + "--color-scarlet-400": "#f96c6c", + "--color-scarlet-500": "#c50707", + "--color-scarlet-600": "#ac0606", + "--color-scarlet-700": "#8a0505", + "--color-scarlet-800": "#6c0404", + "--color-scarlet-900": "#4f0303" + }, + yellow: { + "--color-yellow-100": "#fffbf6", + "--color-yellow-200": "#fef1e3", + "--color-yellow-300": "#fde8cf", + "--color-yellow-400": "#fcdeb8", + "--color-yellow-500": "#fac980", + "--color-yellow-600": "#f9bd56", + "--color-yellow-700": "#ffc96b", + "--color-yellow-800": "#ecaf44", + "--color-yellow-900": "#b97d13", + "--color-yellow-1000": "#6f4b0b", + "--color-yellow-1300": "#382606" + } + }, + globant: { + avocado: { + "--color-avocado-100": "#f6f7ec", + "--color-avocado-200": "#e7e9c8", + "--color-avocado-300": "#d8dfa3", + "--color-avocado-400": "#c7d67b", + "--color-avocado-500": "#b4d050", + "--color-avocado-600": "#88af1d", + "--color-avocado-700": "#749519", + "--color-avocado-800": "#617920", + "--color-avocado-900": "#53681d", + "--color-avocado-1000": "#455519", + "--color-avocado-1100": "#333f13", + "--color-avocado-1200": "#232a0e", + "--color-avocado-1300": "#131708" + }, + extra: { + "--color-extra-violet-600": "#9a00fa" + }, + gradient: { + "--color-gradient-gaserage": "#c0fb73", + "--color-gradient-greenwood": "#d9e021", + "--color-gradient-lemon": "#8cc63f", + "--color-gradient-mint": "#38efa0" + }, + green: { + "--color-green-100": "#eef5f4", + "--color-green-200": "#ddebe9", + "--color-green-300": "#cae0dd", + "--color-green-400": "#b4d5d0", + "--color-green-500": "#9cc9c2", + "--color-green-600": "#3fa89b", + "--color-green-700": "#389287", + "--color-green-800": "#318278", + "--color-green-900": "#286a62", + "--color-green-1000": "#1c4b45", + "--color-green-1300": "#112d29" + }, + neutral: { + "--color-neutral-100": "#ffffff", + "--color-neutral-200": "#fafafa", + "--color-neutral-300": "#f5f5f5", + "--color-neutral-350": "#f0f0f0", + "--color-neutral-400": "#ededed", + "--color-neutral-500": "#e5e5e5", + "--color-neutral-600": "#d6d6d6", + "--color-neutral-700": "#cccccc", + "--color-neutral-800": "#bdbdbd", + "--color-neutral-900": "#a9a9a9", + "--color-neutral-1000": "#8c8c8c", + "--color-neutral-1050": "#6b6b6b", + "--color-neutral-1100": "#686868", + "--color-neutral-1200": "#575757", + "--color-neutral-1300": "#464646", + "--color-neutral-1400": "#3b3b3b", + "--color-neutral-1450": "#373737", + "--color-neutral-1500": "#303030", + "--color-neutral-1550": "#262626", + "--color-neutral-1600": "#212121", + "--color-neutral-1700": "#171717", + "--color-neutral-1800": "#000000" + }, + olive: { + "--color-olive-100": "#fcfcf2", + "--color-olive-200": "#f2f3c9", + "--color-olive-300": "#e8ed9f", + "--color-olive-400": "#dee873", + "--color-olive-500": "#d2e546", + "--color-olive-600": "#c3e01a", + "--color-olive-700": "#a8c118", + "--color-olive-800": "#8ea216", + "--color-olive-900": "#7c8e15", + "--color-olive-1000": "#647213", + "--color-olive-1100": "#4d580e", + "--color-olive-1200": "#3a420b", + "--color-olive-1300": "#262b08" + }, + opacity: { + "--color-opacity-70": "#171717" + }, + primary: { + "--color-primary-100": "#f9fbf2", + "--color-primary-200": "#f5f8e8", + "--color-primary-300": "#eaf1ce", + "--color-primary-400": "#deeab0", + "--color-primary-500": "#d2e38c", + "--color-primary-550": "#cfe184", + "--color-primary-580": "#c6d572", + "--color-primary-600": "#bfd732", + "--color-primary-700": "#b4cc28", + "--color-primary-800": "#a3b72b", + "--color-primary-900": "#8d9f25", + "--color-primary-1000": "#515c15", + "--color-primary-1100": "#2e340a", + "--color-primary-1200": "#262b08" + }, + red: { + "--color-red-100": "#fcf4f4", + "--color-red-200": "#f8dfe0", + "--color-red-300": "#f4cdcf", + "--color-red-400": "#eda4a7", + "--color-red-500": "#e98b8f", + "--color-red-600": "#e35861", + "--color-red-700": "#d54b54", + "--color-red-800": "#a63a41", + "--color-red-900": "#883035", + "--color-red-1000": "#6d272b", + "--color-red-1300": "#2d1012" + }, + yellow: { + "--color-yellow-100": "#fffbf6", + "--color-yellow-200": "#fef1e3", + "--color-yellow-300": "#fde8cf", + "--color-yellow-400": "#fcdeb8", + "--color-yellow-500": "#fac980", + "--color-yellow-600": "#f9bd56", + "--color-yellow-700": "#ffc96b", + "--color-yellow-800": "#ecaf44", + "--color-yellow-900": "#b97d13", + "--color-yellow-1000": "#6f4b0b", + "--color-yellow-1300": "#382606" + } + } + }, + "font-family": { + "--font-family-body": "Inter", + "--font-family-code": "DM Mono", + "--font-family-header": "Inter" + }, + "font-style": { + "--font-style-bold": "Bold", + "--font-style-italic": "Italic", + "--font-style-regular": "Regular", + "--font-style-semi-bold": "Semi Bold" + }, + size: { + "--size-0": "0px", + "--size-1": "1px", + "--size-2": "2px", + "--size-4": "4px", + "--size-6": "6px", + "--size-8": "8px", + "--size-10": "10px", + "--size-11": "11px", + "--size-12": "12px", + "--size-14": "14px", + "--size-15": "15px", + "--size-16": "16px", + "--size-18": "18px", + "--size-20": "20px", + "--size-22": "22px", + "--size-24": "24px", + "--size-26": "26px", + "--size-28": "28px", + "--size-32": "32px", + "--size-40": "40px", + "--size-48": "48px", + "--size-56": "56px", + "--size-64": "64px", + "--size-72": "72px", + "--size-80": "80px", + "--size--1": "-1px", + "--size--2": "-2px" + } + }, + semantic: { + color: { + mercury: { + light: { + accent: { + "--color-accent-backdrop-default": "--rgba(17, 21, 28, 0-8)", + "--color-accent-branding-surface": "--color-neutral-1800", + "--color-accent-error-contrast": "--color-scarlet-200", + "--color-accent-error-default": "--color-scarlet-500", + "--color-accent-error-hover": "--color-scarlet-800", + "--color-accent-error-light": "--color-scarlet-300", + "--color-accent-error-lighter": "--color-scarlet-200", + "--color-accent-error-pressed": "--color-scarlet-900", + "--color-accent-gradient-01-end": "--color-gradient-purple", + "--color-accent-gradient-01-start": "--color-gradient-sky", + "--color-accent-gradient-02-end": "--color-gradient-magenta", + "--color-accent-gradient-02-start": "--color-gradient-berry", + "--color-accent-item-active": "--color-azure-1000", + "--color-accent-item-hover": "--color-azure-300", + "--color-accent-item-selected": "--color-azure-1000", + "--color-accent-neutral-black": "--color-primary-1300", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-neutral-default": "--color-neutral-700", + "--color-accent-neutral-disabled": "--color-neutral-400", + "--color-accent-neutral-hover": "--color-neutral-1550", + "--color-accent-neutral-light": "--color-neutral-600", + "--color-accent-neutral-neutral": "--color-neutral-900", + "--color-accent-neutral-on-surface": "--color-primary-1300", + "--color-accent-neutral-pressed": "--color-neutral-200", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-primary-contrast": "--color-primary-200", + "--color-accent-primary-dark": "--color-azure-800", + "--color-accent-primary-default": "--color-azure-500", + "--color-accent-primary-focused": "--color-azure-900", + "--color-accent-primary-hover": "--color-azure-300", + "--color-accent-primary-light": "--color-azure-100", + "--color-accent-primary-lighter": "--color-azure-50", + "--color-accent-primary-on-default": "--color-azure-300", + "--color-accent-primary-on-hover": "--color-azure-800", + "--color-accent-primary-on-pressed": "--color-neutral-300", + "--color-accent-primary-pressed": "--color-azure-1000", + "--color-accent-semantic-error": "--color-scarlet-200", + "--color-accent-semantic-info": "--color-azure-200", + "--color-accent-semantic-neutral": + "--color-accent-neutral-disabled", + "--color-accent-semantic-success": "--color-chateau-200", + "--color-accent-semantic-warning": "--color-ember-200", + "--color-accent-shadow-shadow": "--rgba(7, 10, 18, 0-2)", + "--color-accent-success-contrast": "--color-chateau-200", + "--color-accent-success-default": "--color-chateau-500", + "--color-accent-success-hover": "--color-chateau-800", + "--color-accent-success-light": "--color-chateau-400", + "--color-accent-success-lighter": "--color-chateau-200", + "--color-accent-success-pressed": "--color-chateau-900", + "--color-accent-surface-elevation-01": "--color-lilac-200", + "--color-accent-surface-elevation-02": "--color-lilac-250", + "--color-accent-surface-elevation-03": "--color-lilac-400", + "--color-accent-surface-elevation-answer": "--color-lilac-600", + "--color-accent-surface-surface": "--color-lilac-50", + "--color-accent-warning-contrast": "--color-ember-200", + "--color-accent-warning-default": "--color-ember-400", + "--color-accent-warning-hover": "--color-ember-500", + "--color-accent-warning-light": "--color-ember-300", + "--color-accent-warning-lighter": "--color-ember-200", + "--color-accent-warning-pressed": "--color-ember-800" + }, + border: { + "--color-border-branding-surface": "--color-neutral-1400", + "--color-border-error-dark": "--color-scarlet-200", + "--color-border-error-default": "--color-scarlet-500", + "--color-border-error-hover": "--color-scarlet-800", + "--color-border-error-light": "--color-scarlet-300", + "--color-border-error-lighter": "--color-scarlet-200", + "--color-border-error-pressed": "--color-scarlet-900", + "--color-border-item-active": "--color-azure-800", + "--color-border-item-hover": "--color-azure-400", + "--color-border-item-selected": "--color-azure-800", + "--color-border-neutral-black": "--color-primary-1300", + "--color-border-neutral-default": "--color-neutral-700", + "--color-border-neutral-disabled": "--color-neutral-700", + "--color-border-neutral-hover": "--color-neutral-1550", + "--color-border-neutral-light": "--color-neutral-600", + "--color-border-neutral-neutral": "--color-neutral-900", + "--color-border-neutral-on-border": "--color-primary-1300", + "--color-border-neutral-pressed": "--color-neutral-1500", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-primary-dark": "--color-azure-900", + "--color-border-primary-default": "--color-azure-600", + "--color-border-primary-focused": "--color-azure-900", + "--color-border-primary-hover": "--color-azure-800", + "--color-border-primary-light": "--color-azure-100", + "--color-border-primary-lighter": "--color-azure-50", + "--color-border-primary-on_default": "--color-azure-300", + "--color-border-primary-on_hover": "--color-azure-800", + "--color-border-primary-on_pressed": "--color-neutral-300", + "--color-border-primary-pressed": "--color-azure-700", + "--color-border-success-dark": "--color-chateau-200", + "--color-border-success-default": "--color-chateau-500", + "--color-border-success-hover": "--color-chateau-800", + "--color-border-success-light": "--color-chateau-400", + "--color-border-success-lighter": "--color-chateau-200", + "--color-border-success-pressed": "--color-chateau-900", + "--color-border-surface-on-elevation-01": "--color-lilac-400", + "--color-border-surface-on-elevation-02": "--color-lilac-500", + "--color-border-surface-on-elevation-03": "--color-lilac-600", + "--color-border-warning-dark": "--color-ember-200", + "--color-border-warning-default": "--color-ember-500", + "--color-border-warning-hover": "--color-ember-800", + "--color-border-warning-light": "--color-ember-300", + "--color-border-warning-lighter": "--color-ember-200", + "--color-border-warning-pressed": "--color-ember-900" + }, + component: { + "--color-component-chat-01-end": "--color-gradient-magenta", + "--color-component-chat-01-middle": "--color-gradient-purple", + "--color-component-chat-01-start": "--color-gradient-sky" + }, + icon: { + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-neutral-default": "--color-neutral-1400", + "--color-icon-neutral-disabled": "--color-neutral-800", + "--color-icon-neutral-hover": "--color-neutral-1550", + "--color-icon-neutral-light": "--color-neutral-600", + "--color-icon-neutral-neutral": "--color-neutral-900", + "--color-icon-neutral-on-disabled": "--color-neutral-1000", + "--color-icon-neutral-on-icon": "--color-neutral-100", + "--color-icon-neutral-pressed": "--color-neutral-1450", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-primary-default": "--color-azure-600", + "--color-icon-primary-hover": "--color-azure-400", + "--color-icon-primary-on_default": "--color-azure-300", + "--color-icon-primary-on_hover": "--color-azure-800", + "--color-icon-primary-on_pressed": "--color-neutral-300", + "--color-icon-primary-pressed": "--color-azure-750", + "--color-icon-semantic-error": "--color-scarlet-900", + "--color-icon-semantic-neutral": "--color-neutral-1400", + "--color-icon-semantic-success": "--color-chateau-900", + "--color-icon-semantic-warning": "--color-ember-900" + }, + text: { + "--color-text-branding-surface": "--color-neutral-100", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-neutral-default": "--color-neutral-1400", + "--color-text-neutral-disabled": "--color-neutral-800", + "--color-text-neutral-hover": "--color-neutral-1550", + "--color-text-neutral-light": "--color-neutral-600", + "--color-text-neutral-neutral": "--color-neutral-900", + "--color-text-neutral-on-disabled": "--color-neutral-1000", + "--color-text-neutral-on-text": "--color-neutral-200", + "--color-text-neutral-pressed": "--color-neutral-1550", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-primary-default": "--color-azure-600", + "--color-text-primary-hover": "--color-azure-400", + "--color-text-primary-on_default": "--color-azure-300", + "--color-text-primary-on_hover": "--color-azure-800", + "--color-text-primary-on_pressed": "--color-neutral-300", + "--color-text-primary-pressed": "--color-azure-750", + "--color-text-semantic-error": "--color-scarlet-900", + "--color-text-semantic-neutral": "--color-neutral-1400", + "--color-text-semantic-success": "--color-chateau-900", + "--color-text-semantic-warning": "--color-ember-900" + } + }, + dark: { + accent: { + "--color-accent-backdrop-default": "--color-opacity-70", + "--color-accent-branding-surface": "--color-neutral-100", + "--color-accent-error-contrast": "--color-red-1300", + "--color-accent-error-default": "--color-red-600", + "--color-accent-error-hover": "--color-red-800", + "--color-accent-error-light": "--color-red-500", + "--color-accent-error-lighter": "--color-red-300", + "--color-accent-error-pressed": "--color-red-1000", + "--color-accent-gradient-01-end": "--color-gradient-purple", + "--color-accent-gradient-01-start": "--color-gradient-sky", + "--color-accent-gradient-02-end": "--color-gradient-magenta", + "--color-accent-gradient-02-start": "--color-gradient-berry", + "--color-accent-item-active": "--color-neutral-1550", + "--color-accent-item-hover": "--color-neutral-1450", + "--color-accent-item-selected": "--color-neutral-1550", + "--color-accent-neutral-black": "--color-neutral-1700", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-neutral-default": "--color-neutral-900", + "--color-accent-neutral-disabled": "--color-neutral-1300", + "--color-accent-neutral-hover": "--color-neutral-300", + "--color-accent-neutral-light": "--color-neutral-400", + "--color-accent-neutral-neutral": "--color-neutral-600", + "--color-accent-neutral-on-surface": "--color-neutral-100", + "--color-accent-neutral-pressed": "--color-neutral-600", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-primary-contrast": "--color-primary-1300", + "--color-accent-primary-dark": "--color-primary-1100", + "--color-accent-primary-default": "--color-primary-600", + "--color-accent-primary-focused": "--color-neutral-000", + "--color-accent-primary-hover": "--color-neutral-1450", + "--color-accent-primary-light": "--color-primary-500", + "--color-accent-primary-lighter": "--color-primary-300", + "--color-accent-primary-on-default": "--color-primary-600", + "--color-accent-primary-on-hover": "--color-primary-400", + "--color-accent-primary-on-pressed": "--color-neutral-200", + "--color-accent-primary-pressed": "--color-primary-1000", + "--color-accent-semantic-error": "--color-red-600", + "--color-accent-semantic-info": "--color-primary-600", + "--color-accent-semantic-neutral": "--color-neutral-800", + "--color-accent-semantic-success": "--color-green-600", + "--color-accent-semantic-warning": "--color-yellow-600", + "--color-accent-shadow-shadow": "--rgba(0, 0, 0, 0-2)", + "--color-accent-success-contrast": "--color-green-1300", + "--color-accent-success-default": "--color-green-600", + "--color-accent-success-hover": "--color-green-800", + "--color-accent-success-light": "--color-green-500", + "--color-accent-success-lighter": "--color-green-300", + "--color-accent-success-pressed": "--color-green-1000", + "--color-accent-surface-elevation-01": "--color-neutral-1600", + "--color-accent-surface-elevation-02": "--color-neutral-1500", + "--color-accent-surface-elevation-03": "--color-neutral-1400", + "--color-accent-surface-elevation-answer": "--color-neutral-1450", + "--color-accent-surface-surface": "--color-neutral-1700", + "--color-accent-warning-contrast": "--color-yellow-1300", + "--color-accent-warning-default": "--color-yellow-600", + "--color-accent-warning-hover": "--color-yellow-900", + "--color-accent-warning-light": "--color-yellow-400", + "--color-accent-warning-lighter": "--color-yellow-300", + "--color-accent-warning-pressed": "--color-yellow-1000" + }, + border: { + "--color-border-branding-surface": "--color-neutral-1700", + "--color-border-error-dark": "--color-red-1300", + "--color-border-error-default": "--color-red-600", + "--color-border-error-hover": "--color-red-700", + "--color-border-error-light": "--color-red-500", + "--color-border-error-lighter": "--color-red-300", + "--color-border-error-pressed": "--color-red-900", + "--color-border-item-active": "--color-primary-580", + "--color-border-item-hover": "--color-neutral-1050", + "--color-border-item-selected": "--color-primary-580", + "--color-border-neutral-black": "--color-neutral-1700", + "--color-border-neutral-default": "--color-neutral-900", + "--color-border-neutral-disabled": "--color-neutral-800", + "--color-border-neutral-hover": "--color-neutral-300", + "--color-border-neutral-light": "--color-neutral-400", + "--color-border-neutral-neutral": "--color-neutral-600", + "--color-border-neutral-on-border": "--color-neutral-100", + "--color-border-neutral-pressed": "--color-neutral-400", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-primary-dark": "--color-primary-1300", + "--color-border-primary-default": "--color-primary-600", + "--color-border-primary-focused": "--color-neutral-000", + "--color-border-primary-hover": "--color-primary-550", + "--color-border-primary-light": "--color-primary-500", + "--color-border-primary-lighter": "--color-primary-300", + "--color-border-primary-on_default": "--color-primary-600", + "--color-border-primary-on_hover": "--color-primary-400", + "--color-border-primary-on_pressed": "--color-neutral-400", + "--color-border-primary-pressed": "--color-primary-580", + "--color-border-success-dark": "--color-green-1300", + "--color-border-success-default": "--color-green-600", + "--color-border-success-hover": "--color-green-800", + "--color-border-success-light": "--color-green-500", + "--color-border-success-lighter": "--color-green-300", + "--color-border-success-pressed": "--color-green-1000", + "--color-border-surface-on-elevation-01": "--color-neutral-1300", + "--color-border-surface-on-elevation-02": "--color-neutral-1100", + "--color-border-surface-on-elevation-03": "--color-neutral-900", + "--color-border-warning-dark": "--color-yellow-1300", + "--color-border-warning-default": "--color-yellow-500", + "--color-border-warning-hover": "--color-yellow-800", + "--color-border-warning-light": "--color-yellow-400", + "--color-border-warning-lighter": "--color-yellow-300", + "--color-border-warning-pressed": "--color-yellow-900" + }, + component: { + "--color-component-chat-01-end": "--color-gradient-magenta", + "--color-component-chat-01-middle": "--color-gradient-purple", + "--color-component-chat-01-start": "--color-gradient-sky" + }, + icon: { + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-neutral-default": "--color-neutral-200", + "--color-icon-neutral-disabled": "--color-neutral-800", + "--color-icon-neutral-hover": "--color-neutral-300", + "--color-icon-neutral-light": "--color-neutral-400", + "--color-icon-neutral-neutral": "--color-neutral-400", + "--color-icon-neutral-on-disabled": "--color-neutral-600", + "--color-icon-neutral-on-icon": "--color-neutral-1700", + "--color-icon-neutral-pressed": "--color-neutral-400", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-primary-default": "--color-primary-600", + "--color-icon-primary-hover": "--color-primary-400", + "--color-icon-primary-on_default": "--color-primary-600", + "--color-icon-primary-on_hover": "--color-primary-400", + "--color-icon-primary-on_pressed": "--color-neutral-200", + "--color-icon-primary-pressed": "--color-primary-800", + "--color-icon-semantic-error": "--color-red-600", + "--color-icon-semantic-neutral": "--color-neutral-800", + "--color-icon-semantic-success": "--color-green-600", + "--color-icon-semantic-warning": "--color-yellow-600" + }, + text: { + "--color-text-branding-surface": "--color-neutral-1800", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-neutral-default": "--color-neutral-200", + "--color-text-neutral-disabled": "--color-neutral-800", + "--color-text-neutral-hover": "--color-neutral-300", + "--color-text-neutral-light": "--color-neutral-400", + "--color-text-neutral-neutral": "--color-neutral-400", + "--color-text-neutral-on-disabled": "--color-neutral-600", + "--color-text-neutral-on-text": "--color-neutral-1700", + "--color-text-neutral-pressed": "--color-neutral-400", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-primary-default": "--color-primary-600", + "--color-text-primary-hover": "--color-primary-400", + "--color-text-primary-on_default": "--color-primary-600", + "--color-text-primary-on_hover": "--color-primary-400", + "--color-text-primary-on_pressed": "--color-neutral-200", + "--color-text-primary-pressed": "--color-primary-800", + "--color-text-semantic-error": "--color-red-600", + "--color-text-semantic-neutral": "--color-neutral-800", + "--color-text-semantic-success": "--color-green-600", + "--color-text-semantic-warning": "--color-yellow-600" + } + } + }, + globant: { + light: { + accent: { + "--color-accent-backdrop-default": "--rgba(23, 23, 23, 0-8)", + "--color-accent-branding-surface": "--color-neutral-1800", + "--color-accent-error-contrast": "--color-scarlet-200", + "--color-accent-error-default": "--color-scarlet-500", + "--color-accent-error-hover": "--color-scarlet-800", + "--color-accent-error-light": "--color-scarlet-300", + "--color-accent-error-lighter": "--color-scarlet-200", + "--color-accent-error-pressed": "--color-scarlet-900", + "--color-accent-gradient-01-end": "--color-gradient-lemon", + "--color-accent-gradient-01-start": "--color-gradient-greenwood", + "--color-accent-gradient-02-end": "--color-gradient-mint", + "--color-accent-gradient-02-start": "--color-gradient-gaserage", + "--color-accent-item-active": "--color-avocado-1000", + "--color-accent-item-hover": "--color-avocado-300", + "--color-accent-item-selected": "--color-avocado-1000", + "--color-accent-neutral-black": "--color-neutral-1300", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-neutral-default": "--color-neutral-900", + "--color-accent-neutral-disabled": "--color-neutral-500", + "--color-accent-neutral-hover": "--color-neutral-1550", + "--color-accent-neutral-light": "--color-neutral-600", + "--color-accent-neutral-neutral": "--color-neutral-900", + "--color-accent-neutral-on-surface": "--color-neutral-1550", + "--color-accent-neutral-pressed": "--color-neutral-200", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-primary-contrast": "--color-primary-300", + "--color-accent-primary-dark": "--color-primary-1000", + "--color-accent-primary-default": "--color-avocado-600", + "--color-accent-primary-focused": "--color-avocado-1100", + "--color-accent-primary-hover": "--color-avocado-300", + "--color-accent-primary-light": "--color-avocado-300", + "--color-accent-primary-lighter": "--color-avocado-200", + "--color-accent-primary-on-default": "--color-avocado-300", + "--color-accent-primary-on-hover": "--color-primary-1000", + "--color-accent-primary-on-pressed": "--color-neutral-300", + "--color-accent-primary-pressed": "--color-primary-1000", + "--color-accent-semantic-error": "--color-scarlet-200", + "--color-accent-semantic-info": "--color-azure-200", + "--color-accent-semantic-neutral": + "--color-accent-neutral-disabled", + "--color-accent-semantic-success": "--color-chateau-200", + "--color-accent-semantic-warning": "--color-ember-200", + "--color-accent-shadow-shadow": "--rgba(11, 18, 7, 0-2)", + "--color-accent-success-contrast": "--color-chateau-200", + "--color-accent-success-default": "--color-chateau-500", + "--color-accent-success-hover": "--color-chateau-800", + "--color-accent-success-light": "--color-chateau-400", + "--color-accent-success-lighter": "--color-chateau-200", + "--color-accent-success-pressed": "--color-chateau-900", + "--color-accent-surface-elevation-01": "--color-neutral-200", + "--color-accent-surface-elevation-02": "--color-neutral-350", + "--color-accent-surface-elevation-03": "--color-neutral-500", + "--color-accent-surface-elevation-answer": "--color-neutral-600", + "--color-accent-surface-surface": "--color-neutral-100", + "--color-accent-warning-contrast": "--color-ember-200", + "--color-accent-warning-default": "--color-ember-400", + "--color-accent-warning-hover": "--color-ember-500", + "--color-accent-warning-light": "--color-ember-300", + "--color-accent-warning-lighter": "--color-ember-200", + "--color-accent-warning-pressed": "--color-ember-800" + }, + border: { + "--color-border-branding-surface": "--color-neutral-1400", + "--color-border-error-dark": "--color-scarlet-200", + "--color-border-error-default": "--color-scarlet-600", + "--color-border-error-hover": "--color-scarlet-700", + "--color-border-error-light": "--color-scarlet-300", + "--color-border-error-lighter": "--color-scarlet-200", + "--color-border-error-pressed": "--color-scarlet-900", + "--color-border-item-active": "--color-avocado-900", + "--color-border-item-hover": "--color-avocado-800", + "--color-border-item-selected": "--color-avocado-900", + "--color-border-neutral-black": "--color-neutral-1300", + "--color-border-neutral-default": "--color-neutral-800", + "--color-border-neutral-disabled": "--color-neutral-1000", + "--color-border-neutral-hover": "--color-neutral-1550", + "--color-border-neutral-light": "--color-neutral-600", + "--color-border-neutral-neutral": "--color-neutral-900", + "--color-border-neutral-on-border": "--color-neutral-1550", + "--color-border-neutral-pressed": "--color-neutral-1500", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-primary-dark": "--color-avocado-1200", + "--color-border-primary-default": "--color-avocado-500", + "--color-border-primary-focused": "--color-avocado-1100", + "--color-border-primary-hover": "--color-avocado-800", + "--color-border-primary-light": "--color-avocado-300", + "--color-border-primary-lighter": "--color-avocado-200", + "--color-border-primary-on_default": "--color-avocado-300", + "--color-border-primary-on_hover": "--color-primary-1000", + "--color-border-primary-on_pressed": "--color-neutral-300", + "--color-border-primary-pressed": "--color-avocado-900", + "--color-border-success-dark": "--color-chateau-200", + "--color-border-success-default": "--color-chateau-500", + "--color-border-success-hover": "--color-chateau-800", + "--color-border-success-light": "--color-chateau-400", + "--color-border-success-lighter": "--color-chateau-200", + "--color-border-success-pressed": "--color-chateau-900", + "--color-border-surface-on-elevation-01": "--color-neutral-400", + "--color-border-surface-on-elevation-02": "--color-neutral-500", + "--color-border-surface-on-elevation-03": "--color-neutral-600", + "--color-border-warning-dark": "--color-ember-200", + "--color-border-warning-default": "--color-ember-500", + "--color-border-warning-hover": "--color-ember-800", + "--color-border-warning-light": "--color-ember-300", + "--color-border-warning-lighter": "--color-ember-200", + "--color-border-warning-pressed": "--color-ember-900" + }, + component: { + "--color-component-chat-01-end": "--#ff00ff", + "--color-component-chat-01-middle": "--#a300ff", + "--color-component-chat-01-start": "--#00ccff" + }, + icon: { + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-neutral-default": "--color-neutral-1400", + "--color-icon-neutral-disabled": "--color-neutral-1000", + "--color-icon-neutral-hover": "--color-neutral-1550", + "--color-icon-neutral-light": "--color-neutral-600", + "--color-icon-neutral-neutral": "--color-neutral-900", + "--color-icon-neutral-on-disabled": "--color-neutral-1100", + "--color-icon-neutral-on-icon": "--color-neutral-200", + "--color-icon-neutral-pressed": "--color-neutral-1450", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-primary-default": "--color-primary-800", + "--color-icon-primary-hover": "--color-primary-900", + "--color-icon-primary-on_default": "--color-avocado-300", + "--color-icon-primary-on_hover": "--color-primary-1000", + "--color-icon-primary-on_pressed": "--color-neutral-300", + "--color-icon-primary-pressed": "--color-primary-1000", + "--color-icon-semantic-error": "--color-scarlet-900", + "--color-icon-semantic-neutral": "--color-neutral-1400", + "--color-icon-semantic-success": "--color-chateau-900", + "--color-icon-semantic-warning": "--color-ember-900" + }, + text: { + "--color-text-branding-surface": "--color-neutral-100", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-neutral-default": "--color-neutral-1400", + "--color-text-neutral-disabled": "--color-neutral-1000", + "--color-text-neutral-hover": "--color-neutral-1550", + "--color-text-neutral-light": "--color-neutral-600", + "--color-text-neutral-neutral": "--color-neutral-900", + "--color-text-neutral-on-disabled": "--color-neutral-1100", + "--color-text-neutral-on-text": "--color-neutral-200", + "--color-text-neutral-pressed": "--color-neutral-1450", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-primary-default": "--color-avocado-600", + "--color-text-primary-hover": "--color-primary-900", + "--color-text-primary-on_default": "--color-avocado-300", + "--color-text-primary-on_hover": "--color-primary-1000", + "--color-text-primary-on_pressed": "--color-neutral-300", + "--color-text-primary-pressed": "--color-primary-1000", + "--color-text-semantic-error": "--color-scarlet-900", + "--color-text-semantic-neutral": "--color-neutral-1400", + "--color-text-semantic-success": "--color-chateau-900", + "--color-text-semantic-warning": "--color-ember-900" + } + }, + dark: { + accent: { + "--color-accent-backdrop-default": "--rgba(23, 23, 23, 0-7)", + "--color-accent-branding-surface": "--color-neutral-100", + "--color-accent-error-contrast": "--color-red-1300", + "--color-accent-error-default": "--color-red-600", + "--color-accent-error-hover": "--color-red-800", + "--color-accent-error-light": "--color-red-500", + "--color-accent-error-lighter": "--color-red-300", + "--color-accent-error-pressed": "--color-red-1000", + "--color-accent-gradient-01-end": "--color-gradient-lemon", + "--color-accent-gradient-01-start": "--color-gradient-greenwood", + "--color-accent-gradient-02-end": "--color-gradient-mint", + "--color-accent-gradient-02-start": "--color-gradient-gaserage", + "--color-accent-item-active": "--color-olive-1100", + "--color-accent-item-hover": "--color-olive-1000", + "--color-accent-item-selected": "--color-olive-1100", + "--color-accent-neutral-black": "--color-neutral-1300", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-neutral-default": "--color-neutral-900", + "--color-accent-neutral-disabled": "--color-neutral-1300", + "--color-accent-neutral-hover": "--color-neutral-300", + "--color-accent-neutral-light": "--color-neutral-400", + "--color-accent-neutral-neutral": "--color-neutral-600", + "--color-accent-neutral-on-surface": "--color-neutral-100", + "--color-accent-neutral-pressed": "--color-neutral-600", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-primary-contrast": "--color-olive-1300", + "--color-accent-primary-dark": "--color-olive-1100", + "--color-accent-primary-default": "--color-olive-600", + "--color-accent-primary-focused": "--color-extra-violet-600", + "--color-accent-primary-hover": "--color-olive-1000", + "--color-accent-primary-light": "--color-olive-300", + "--color-accent-primary-lighter": "--color-olive-200", + "--color-accent-primary-on-default": "--color-olive-600", + "--color-accent-primary-on-hover": "--color-olive-200", + "--color-accent-primary-on-pressed": "--color-neutral-300", + "--color-accent-primary-pressed": "--color-olive-1100", + "--color-accent-semantic-error": "--color-red-600", + "--color-accent-semantic-info": "--color-primary-600", + "--color-accent-semantic-neutral": "--color-neutral-800", + "--color-accent-semantic-success": "--color-green-600", + "--color-accent-semantic-warning": "--color-yellow-600", + "--color-accent-shadow-shadow": "--rgba(0, 0, 0, 0-2)", + "--color-accent-success-contrast": "--color-green-1300", + "--color-accent-success-default": "--color-green-600", + "--color-accent-success-hover": "--color-green-800", + "--color-accent-success-light": "--color-green-500", + "--color-accent-success-lighter": "--color-green-300", + "--color-accent-success-pressed": "--color-green-1000", + "--color-accent-surface-elevation-01": "--color-neutral-1600", + "--color-accent-surface-elevation-02": "--color-neutral-1500", + "--color-accent-surface-elevation-03": "--color-neutral-1300", + "--color-accent-surface-elevation-answer": "--color-neutral-1450", + "--color-accent-surface-surface": "--color-neutral-1700", + "--color-accent-warning-contrast": "--color-yellow-1300", + "--color-accent-warning-default": "--color-yellow-600", + "--color-accent-warning-hover": "--color-yellow-900", + "--color-accent-warning-light": "--color-yellow-400", + "--color-accent-warning-lighter": "--color-yellow-300", + "--color-accent-warning-pressed": "--color-yellow-1000" + }, + border: { + "--color-border-branding-surface": "--color-neutral-1700", + "--color-border-error-dark": "--color-red-1300", + "--color-border-error-default": "--color-red-600", + "--color-border-error-hover": "--color-red-700", + "--color-border-error-light": "--color-red-500", + "--color-border-error-lighter": "--color-red-300", + "--color-border-error-pressed": "--color-red-900", + "--color-border-item-active": "--color-olive-900", + "--color-border-item-hover": "--color-olive-700", + "--color-border-item-selected": "--color-olive-900", + "--color-border-neutral-black": "--color-neutral-1300", + "--color-border-neutral-default": "--color-neutral-900", + "--color-border-neutral-disabled": "--color-neutral-1050", + "--color-border-neutral-hover": "--color-neutral-100", + "--color-border-neutral-light": "--color-neutral-400", + "--color-border-neutral-neutral": "--color-neutral-600", + "--color-border-neutral-on-border": "--color-neutral-100", + "--color-border-neutral-pressed": "--color-neutral-400", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-primary-dark": "--color-olive-1100", + "--color-border-primary-default": "--color-olive-500", + "--color-border-primary-focused": "--color-extra-violet-600", + "--color-border-primary-hover": "--color-olive-700", + "--color-border-primary-light": "--color-olive-300", + "--color-border-primary-lighter": "--color-olive-200", + "--color-border-primary-on_default": "--color-olive-600", + "--color-border-primary-on_hover": "--color-olive-200", + "--color-border-primary-on_pressed": "--color-neutral-300", + "--color-border-primary-pressed": "--color-olive-900", + "--color-border-success-dark": "--color-green-1300", + "--color-border-success-default": "--color-green-600", + "--color-border-success-hover": "--color-green-800", + "--color-border-success-light": "--color-green-500", + "--color-border-success-lighter": "--color-green-300", + "--color-border-success-pressed": "--color-green-1000", + "--color-border-surface-on-elevation-01": "--color-neutral-1300", + "--color-border-surface-on-elevation-02": "--color-neutral-1100", + "--color-border-surface-on-elevation-03": "--color-neutral-900", + "--color-border-warning-dark": "--color-yellow-1300", + "--color-border-warning-default": "--color-yellow-500", + "--color-border-warning-hover": "--color-yellow-800", + "--color-border-warning-light": "--color-yellow-400", + "--color-border-warning-lighter": "--color-yellow-300", + "--color-border-warning-pressed": "--color-yellow-900" + }, + component: { + "--color-component-chat-01-end": "--color-gradient-greenwood", + "--color-component-chat-01-middle": "--color-gradient-mint", + "--color-component-chat-01-start": "--color-gradient-gaserage" + }, + icon: { + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-neutral-default": "--color-neutral-400", + "--color-icon-neutral-disabled": "--color-neutral-1050", + "--color-icon-neutral-hover": "--color-neutral-300", + "--color-icon-neutral-light": "--color-neutral-400", + "--color-icon-neutral-neutral": "--color-neutral-300", + "--color-icon-neutral-on-disabled": "--color-neutral-600", + "--color-icon-neutral-on-icon": "--color-neutral-1700", + "--color-icon-neutral-pressed": "--color-neutral-300", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-primary-default": "--color-olive-600", + "--color-icon-primary-hover": "--color-olive-700", + "--color-icon-primary-on_default": "--color-olive-600", + "--color-icon-primary-on_hover": "--color-olive-200", + "--color-icon-primary-on_pressed": "--color-neutral-300", + "--color-icon-primary-pressed": "--color-olive-900", + "--color-icon-semantic-error": "--color-red-600", + "--color-icon-semantic-neutral": "--color-neutral-800", + "--color-icon-semantic-success": "--color-green-600", + "--color-icon-semantic-warning": "--color-yellow-600" + }, + text: { + "--color-text-branding-surface": "--color-neutral-1800", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-neutral-default": "--color-neutral-400", + "--color-text-neutral-disabled": "--color-neutral-1050", + "--color-text-neutral-hover": "--color-neutral-300", + "--color-text-neutral-light": "--color-neutral-400", + "--color-text-neutral-neutral": "--color-neutral-300", + "--color-text-neutral-on-disabled": "--color-neutral-600", + "--color-text-neutral-on-text": "--color-neutral-1700", + "--color-text-neutral-pressed": "--color-neutral-300", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-primary-default": "--color-olive-600", + "--color-text-primary-hover": "--color-olive-700", + "--color-text-primary-on_default": "--color-olive-600", + "--color-text-primary-on_hover": "--color-olive-200", + "--color-text-primary-on_pressed": "--color-neutral-300", + "--color-text-primary-pressed": "--color-olive-900", + "--color-text-semantic-error": "--color-red-600", + "--color-text-semantic-neutral": "--color-neutral-800", + "--color-text-semantic-success": "--color-green-600", + "--color-text-semantic-warning": "--color-yellow-600" + } + } + } + }, + "font-size": { + body: { + "--font-size-body-l": "--size-16", + "--font-size-body-m": "--size-14", + "--font-size-body-s": "--size-12", + "--font-size-body-xl": "--size-18", + "--font-size-body-xs": "--size-11" + }, + caption: { + "--font-size-caption-l": "--size-11", + "--font-size-caption-m": "--size-10", + "--font-size-caption-s": "--size-8" + }, + header: { + "--font-size-header-h1": "--size-40", + "--font-size-header-h2": "--size-32", + "--font-size-header-h3": "--size-28", + "--font-size-header-h4": "--size-24", + "--font-size-header-h5": "--size-20", + "--font-size-header-h6": "--size-18" + }, + subtitle: { + "--font-size-subtitle-l": "--size-18", + "--font-size-subtitle-m": "--size-16", + "--font-size-subtitle-s": "--size-15", + "--font-size-subtitle-xl": "--size-20", + "--font-size-subtitle-xs": "--size-14" + } + } + } +} as const; + +export default mercuryTokens; diff --git a/packages/showcase/src/app/core-concepts/tokens/tokens-result.d.ts b/packages/showcase/src/app/core-concepts/tokens/tokens-result.d.ts new file mode 100644 index 000000000..c35157dc9 --- /dev/null +++ b/packages/showcase/src/app/core-concepts/tokens/tokens-result.d.ts @@ -0,0 +1,35 @@ +// TokensResult is the interface for the object that will save all the tokens, +// as they are processed (processTokensCategory). + +export interface TokensResult { + primitive: { + color: { + mercury: TokensResultForColors; + globant: TokensResultForColors; + }; + "font-style": TokensResultWithoutArrays; + "font-family": TokensResultWithoutArrays; + size: TokensResultWithoutArrays; + }; + semantic: { + color: { + mercury: TokensResultForColors; + globant: TokensResultForColors; + }; + "font-size": TokensResultWithArrays; + }; +} + +export type TokensResultForColors = { + light: { [key: string]: TokenResult[] }; + dark: { [key: string]: TokenResult[] }; +}; +export type TokensResultWithoutArrays = { [key: string]: TokenResult }; +export type TokensResultWithArrays = { [key: string]: TokenResult[] }; + +export type TokensResultType = + | TokensResultForColors + | TokensResultWithoutArrays + | TokensResultWithArrays; + +export type TokenResult = { name: string; value: string }; diff --git a/packages/showcase/src/app/core-concepts/tokens/tokens.component.html b/packages/showcase/src/app/core-concepts/tokens/tokens.component.html new file mode 100644 index 000000000..604401e85 --- /dev/null +++ b/packages/showcase/src/app/core-concepts/tokens/tokens.component.html @@ -0,0 +1,87 @@ +
+

Tokens

+
+ +

+ Design tokens are the foundational values of a design system — covering color, + typography, spacing, radius, and more. They serve as a single source of truth to + keep styles consistent across platforms, components, and teams. By abstracting + styles into reusable tokens, your system becomes easier to scale, maintain, and + evolve. +

+ +@let isGlobantTheme = dsService.mercuryVariant() === "base/base-globant"; + +@if ( + (isGlobantTheme && existsGlobantTokens()) || + (!isGlobantTheme && existsMercuryTokens()) +) { +
+

Color tokens

+ + @let semanticCategories = + isGlobantTheme ? globantSemanticCategories() : mercurySemanticCategories(); + + @for (categoryType of semanticCategories; track categoryType.name) { + @if (categoryType.tokens.length > 0) { +
+

+ {{ categoryType.name }} +

+ +
    + @for (tokenName of categoryType.tokens; track tokenName) { +
  1. +
    + + +
    +
  2. + } +
+
+ } + } +
+} + +@if (existsTokensInFontSize()) { +
+

Font size tokens

+ + @for (categoryType of fontSizes(); track categoryType.name) { + @if (categoryType.tokens.length > 0) { +
+

+ {{ categoryType.name }} +

+ +
    + @for (tokenName of categoryType.tokens; track tokenName) { +
  1. +
    + +
    +
  2. + } +
+
+ } + } +
+} diff --git a/packages/showcase/src/app/core-concepts/tokens/tokens.component.scss b/packages/showcase/src/app/core-concepts/tokens/tokens.component.scss new file mode 100644 index 000000000..c52a88edc --- /dev/null +++ b/packages/showcase/src/app/core-concepts/tokens/tokens.component.scss @@ -0,0 +1,94 @@ +$commonBorderColor: var(--color-border-neutral-default, var(--elevation--4)); +$commonInlinePadding: var(--size-16); +$commonBorderRadius: var(--size-4, var(--spacing--s)); +$partContentPadding: var(--size-8, var(--spacing--m)); +$listContainerBlockPadding: var(--size-16, var(--spacing--l)); + +.description { + line-height: 1.6; // WA: Improve line-height, it is too tight. +} + +.category { + &__section { + display: grid; + grid-template-rows: max-content 1fr; + gap: var(--size-32, var(--spacing--xxl)); + } +} + +.type { + &__title { + padding: $commonInlinePadding; + border-block-end: var(--size-1, 1px) solid $commonBorderColor; + background-color: var(--color-accent-surface-elevation-01, var(--elevation--1)); + border-radius: $commonBorderRadius $commonBorderRadius 0 0; + } + &__section { + border: var(--size-1, 1px) solid $commonBorderColor; + border-radius: $commonBorderRadius; + } + &__list { + font-size: 0; + list-style: none; + padding: 0; + margin: 0; + columns: 3; + column-width: calc( + (var(--main-content-max-inline-size) - ($commonInlinePadding * 2)) / 3 - 1px + ); // for some reason, - 0 is required, otherwise three columns do not fit. + padding: var(--size-8, var(--spacing--m)) $commonInlinePadding; + } + &__list-item { + &-wrapper { + display: flex; + align-items: center; + gap: var(--size-8, var(--spacing--m)); + // padding-inline: $commonInlinePadding; + } + } +} +// just for "color" tokens +.color-representation { + display: inline-block; + block-size: var(--size-16, var(--spacing--l)); + inline-size: var(--size-16, var(--spacing--l)); + border-radius: 100%; + border: var(--size-1, 1px) solid var(--color-border-neutral-default); + flex-shrink: 0; +} + +// transition that shakes the .color-representation when the user copies the token +// value. Just for fun. +@keyframes shake { + 0% { + transform: translateX(0); + } + 12% { + transform: translateX(-3px); + } + 25% { + transform: translateX(3px); + } + 37% { + transform: translateX(-3px); + } + 50% { + transform: translateX(3px); + } + 62% { + transform: translateX(-3px); + } + 75% { + transform: translateX(3px); + } + 87% { + transform: translateX(-3px); + } + 100% { + transform: translateX(0); + } +} + +.shake { + animation: shake 0.5s ease; +} diff --git a/packages/showcase/src/app/core-concepts/tokens/tokens.component.ts b/packages/showcase/src/app/core-concepts/tokens/tokens.component.ts new file mode 100644 index 000000000..f6c4edd4d --- /dev/null +++ b/packages/showcase/src/app/core-concepts/tokens/tokens.component.ts @@ -0,0 +1,164 @@ +import { + ChangeDetectionStrategy, + Component, + CUSTOM_ELEMENTS_SCHEMA, + effect, + inject, + input, + Renderer2, + signal +} from "@angular/core"; + +// Tokens from Mercury +import { DesignSystemService } from "../../../services/design-system.service"; +import mercuryTokens from "./mercury-tokens"; + +type SemanticCategory = { + name: string; + tokens: string[]; +}; + +// globant +const globantDarkSemanticCategories = mercuryTokens.semantic.color.globant.dark; +const globantSemanticCategories: SemanticCategory[] = Object.entries( + globantDarkSemanticCategories +).map(([categoryName, categoryTokens]) => ({ + name: categoryName, + tokens: Object.keys(categoryTokens) +})); + +// mercury +const mercuryDarkSemanticCategories = mercuryTokens.semantic.color.mercury.dark; +const mercurySemanticCategories: SemanticCategory[] = Object.entries( + mercuryDarkSemanticCategories +).map(([categoryName, categoryTokens]) => ({ + name: categoryName, + tokens: Object.keys(categoryTokens) +})); + +const fontSizes: SemanticCategory[] = Object.entries( + mercuryTokens.semantic["font-size"] +).map(([categoryName, categoryTokens]) => ({ + name: categoryName, + tokens: Object.keys(categoryTokens) +})); + +@Component({ + selector: "core-concepts-tokens", + templateUrl: "./tokens.component.html", + changeDetection: ChangeDetectionStrategy.OnPush, + host: { class: "main-content" }, + schemas: [CUSTOM_ELEMENTS_SCHEMA], + styleUrls: ["./tokens.component.scss"] +}) +export class TokensComponent { + dsService = inject(DesignSystemService); + + // Comes from the router + filter = input(""); + + protected globantSemanticCategories = signal([]); + protected mercurySemanticCategories = signal([]); + protected fontSizes = signal([]); + + protected existsMercuryTokens = signal(false); + protected existsGlobantTokens = signal(false); + protected existsTokensInFontSize = signal(false); + + semanticTokens = mercuryTokens.semantic; + + constructor(private renderer: Renderer2) { + effect(() => { + // In Figma, tokens are separated with a "/", but it the implementation + // we use a "-", so this changes improves UX when copying and pasting a + // Figma token into the search input + const filterValue = (this.filter() ?? "").toLowerCase().replaceAll("/", "-"); + + this.globantSemanticCategories.set( + globantSemanticCategories.map(category => ({ + name: category.name, + tokens: category.tokens.filter(token => + token.toLowerCase().includes(filterValue) + ) + })) + ); + + this.mercurySemanticCategories.set( + mercurySemanticCategories.map(category => ({ + name: category.name, + tokens: category.tokens.filter(token => + token.toLowerCase().includes(filterValue) + ) + })) + ); + + this.fontSizes.set( + fontSizes.map(category => ({ + name: category.name, + tokens: category.tokens.filter(token => + token.toLowerCase().includes(filterValue) + ) + })) + ); + + this.existsMercuryTokens.set( + this.mercurySemanticCategories().find( + category => category.tokens.length > 0 + ) !== undefined + ); + this.existsGlobantTokens.set( + this.globantSemanticCategories().find( + category => category.tokens.length > 0 + ) !== undefined + ); + this.existsTokensInFontSize.set( + this.fontSizes().find(category => category.tokens.length > 0) !== undefined + ); + }); + } + + copyToClipboard(event: MouseEvent, shakeColorBall: boolean = false) { + const copiedToCliboardDelay = 750; + + const button = event.target as HTMLButtonElement; + this.renderer.setAttribute(button, "disabled", "true"); + + // Copy to clipboard + const originalText = button.innerText; + navigator.clipboard.writeText(`var(${originalText})`); + + button.innerText = `Token copied to clipboard`; + + setTimeout(() => { + button.innerText = originalText; + this.renderer.removeAttribute(button, "disabled"); + }, copiedToCliboardDelay); + + // Shake color ball + if (shakeColorBall) { + const SHAKE_COLOR_ANIMATION_CLASS = "shake"; + + const listItem = button.closest("li"); + + if (listItem) { + // Find the .color-representation span within the same li + const colorRepresentation = listItem.querySelector(".color-representation"); + + if (colorRepresentation) { + // Add the class to the .color-representation span + this.renderer.addClass(colorRepresentation, SHAKE_COLOR_ANIMATION_CLASS); + + // Optionally, remove the class after a brief delay (e.g., for a highlight effect) + setTimeout( + () => + this.renderer.removeClass( + colorRepresentation, + SHAKE_COLOR_ANIMATION_CLASS + ), + copiedToCliboardDelay + ); + } + } + } + } +} diff --git a/packages/showcase/src/app/core-concepts/typography/typography.component.html b/packages/showcase/src/app/core-concepts/typography/typography.component.html index 1b58ebf13..30a6f5274 100644 --- a/packages/showcase/src/app/core-concepts/typography/typography.component.html +++ b/packages/showcase/src/app/core-concepts/typography/typography.component.html @@ -44,6 +44,8 @@

2. Subtitles Regular

+ + @@ -60,6 +62,11 @@

3. Subtitles SemiBold

+ + @@ -127,37 +134,42 @@

} -@if (renderTinyRegularSection()) { -
-

- 7. Tiny Regular +@if (renderCaptionRegularSection()) { +
+

+ 7. Caption Regular

- - - + - + - +
} -@if (renderTinySemiBoldSection()) { -
-

- 8. Tiny SemiBold +@if (renderCaptionSemiBoldSection()) { +
+

+ 8. Caption SemiBold

- + + + - + +
+} - +@if (renderCodeSection()) { +
+

+ 9. Code +

- + + +
} diff --git a/packages/showcase/src/app/core-concepts/typography/typography.component.ts b/packages/showcase/src/app/core-concepts/typography/typography.component.ts index a7d2b89b3..d38bc3e05 100644 --- a/packages/showcase/src/app/core-concepts/typography/typography.component.ts +++ b/packages/showcase/src/app/core-concepts/typography/typography.component.ts @@ -19,8 +19,9 @@ const codeSnippetSubtitleSemiBoldArray: string[] = []; const codeSnippetBodyRegularArray: string[] = []; const codeSnippetBodySemiBoldArray: string[] = []; const codeSnippetBodyItalicArray: string[] = []; -const codeSnippetTinyRegularArray: string[] = []; -const codeSnippetTinySemiBoldArray: string[] = []; +const codeSnippetCaptionRegularArray: string[] = []; +const codeSnippetCaptionSemiBoldArray: string[] = []; +const codeSnippetCodeArray: string[] = []; for (let index = 0; index < codeSnippetsArray.length; index++) { const codeSnippetSection = codeSnippetsArray[index]; @@ -49,13 +50,18 @@ for (let index = 0; index < codeSnippetsArray.length; index++) { else if (codeSnippetSection.title.startsWith("6.")) { codeSnippetBodyItalicArray.push(codeSnippetSection.linkId); } - // 7. Tiny Regular + // 7. Caption Regular else if (codeSnippetSection.title.startsWith("7.")) { - codeSnippetTinyRegularArray.push(codeSnippetSection.linkId); + codeSnippetCaptionRegularArray.push(codeSnippetSection.linkId); } - // 8. Tiny SemiBold + // 8. Caption SemiBold else if (codeSnippetSection.title.startsWith("8.")) { - codeSnippetTinySemiBoldArray.push(codeSnippetSection.linkId); + codeSnippetCaptionSemiBoldArray.push(codeSnippetSection.linkId); + } + + // 9. Code + else if (codeSnippetSection.title.startsWith("9.")) { + codeSnippetCodeArray.push(codeSnippetSection.linkId); } } @@ -65,8 +71,9 @@ const subtitleSemiBoldSection = codeSnippetSubtitleSemiBoldArray.join(","); const bodyRegularSection = codeSnippetBodyRegularArray.join(","); const bodySemiBoldSection = codeSnippetBodySemiBoldArray.join(","); const bodyItalicSection = codeSnippetBodyItalicArray.join(","); -const tinyRegularSection = codeSnippetTinyRegularArray.join(","); -const tinySemiBoldSection = codeSnippetTinySemiBoldArray.join(","); +const captionRegularSection = codeSnippetCaptionRegularArray.join(","); +const captionSemiBoldSection = codeSnippetCaptionSemiBoldArray.join(","); +const codeSection = codeSnippetCodeArray.join(","); @Component({ selector: "core-concepts-typography", @@ -102,11 +109,14 @@ export class TypographyComponent { renderBodyItalicSection = computed( () => !(this.hiddenFields() ?? "").includes(bodyItalicSection) ); - renderTinyRegularSection = computed( - () => !(this.hiddenFields() ?? "").includes(tinyRegularSection) + renderCaptionRegularSection = computed( + () => !(this.hiddenFields() ?? "").includes(captionRegularSection) + ); + renderCaptionSemiBoldSection = computed( + () => !(this.hiddenFields() ?? "").includes(captionSemiBoldSection) ); - renderTinySemiBoldSection = computed( - () => !(this.hiddenFields() ?? "").includes(tinySemiBoldSection) + renderCodeSection = computed( + () => !(this.hiddenFields() ?? "").includes(codeSection) ); constructor() { diff --git a/packages/showcase/src/app/getting-started/chameleon-compatibility/chameleon-compatibility.scss b/packages/showcase/src/app/getting-started/chameleon-compatibility/chameleon-compatibility.scss index c6d751c0c..4786373b3 100644 --- a/packages/showcase/src/app/getting-started/chameleon-compatibility/chameleon-compatibility.scss +++ b/packages/showcase/src/app/getting-started/chameleon-compatibility/chameleon-compatibility.scss @@ -1,7 +1,7 @@ .pill-latest { // TODO: This should be defined as a utility in Mercury - color: var(--mer-text__on-primary); - background-color: var(--mer-accent__primary); + color: var(--color-text-neutral-on-text); + background-color: var(--color-accent-primary-default); padding: 0 6px; border-radius: 6px; margin-inline-start: 6px; diff --git a/packages/showcase/src/app/home/home.scss b/packages/showcase/src/app/home/home.scss index 4c7efbc17..4c2c7be88 100644 --- a/packages/showcase/src/app/home/home.scss +++ b/packages/showcase/src/app/home/home.scss @@ -10,7 +10,7 @@ home { .home-title { display: grid; grid-template-rows: max-content max-content; - gap: 24px; + gap: var(--size-24); max-inline-size: 328px; .button-primary { @@ -26,8 +26,8 @@ home { &-first { display: flex; - gap: 42px; - margin-block: 19px; + gap: 42px; // no 42px size token on Mercury + margin-block: 19px; // no 19px size token on Mercury justify-content: center; } } @@ -35,15 +35,16 @@ home { .description { display: grid; grid-auto-rows: max-content; - gap: 24px; + gap: var(--size-24); max-inline-size: 610px; > p > a { + // TODO: Use link color placeholder or class display: contents; - color: var(--mer-color__primary--200); + color: var(--color-text-primary-default); &:hover { - color: var(--color-green-600); + color: var(-color-text-primary-hover); } } } @@ -51,21 +52,21 @@ home { .features { display: flex; flex-wrap: wrap; - gap: 16px; + gap: var(--size-16); justify-content: center; & > article { display: grid; - grid-template-rows: 62px 1fr; - padding-block: 21px 32px; - padding-inline: 14px; - border-radius: 8px; + grid-template-rows: 62px 1fr; // no 62px size token on Mercury + padding-block: 21px var(--size-32); // no 21px size token on Mercury + padding-inline: var(--size-14); + border-radius: var(--size-8); opacity: 0; inline-size: 218px; // TODO: It should be #fff in light mode - color: var(--mer-text__bright); + color: var(--color-accent-primary-focused); - animation: fadeIn 0.5s ease forwards; + animation: fadeIn var(--timing-regular) ease forwards; animation-delay: calc(var(--delay) * 0.075s); } } @@ -77,6 +78,7 @@ home { } ::selection { + // TODO: Use semantic tokens background-color: #1e1e23; color: #c4b0eb; } diff --git a/packages/showcase/src/app/introduction/installation/Angular/angular.component.html b/packages/showcase/src/app/introduction/installation/Angular/angular.component.html deleted file mode 100644 index 34eb18256..000000000 --- a/packages/showcase/src/app/introduction/installation/Angular/angular.component.html +++ /dev/null @@ -1,8 +0,0 @@ -
-

Installation Angular

-
- -

- Mercury works with any version of Angular, even the latest one with SSR, - signals and more. -

diff --git a/packages/showcase/src/app/introduction/installation/Angular/angular.component.ts b/packages/showcase/src/app/introduction/installation/Angular/angular.component.ts deleted file mode 100644 index 047883d88..000000000 --- a/packages/showcase/src/app/introduction/installation/Angular/angular.component.ts +++ /dev/null @@ -1,9 +0,0 @@ -import { ChangeDetectionStrategy, Component } from "@angular/core"; - -@Component({ - selector: "installation-angular", - templateUrl: "./angular.component.html", - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: "main-content" } -}) -export class InstallationAngularComponent {} diff --git a/packages/showcase/src/app/introduction/what-is/what-is.component.html b/packages/showcase/src/app/introduction/what-is/what-is.component.html deleted file mode 100644 index 8a048645d..000000000 --- a/packages/showcase/src/app/introduction/what-is/what-is.component.html +++ /dev/null @@ -1,29 +0,0 @@ -
-

What is {{ ds() }}

-
- -

- {{ description() }}. It's implemented over - Chameleon - a library of white-label, highly-customizable and reusable web components, - which implements all components necessaries for the {{ ds() }} DS. -

- -

- Chameleon works on every framework since it's a library of web - components (the standard for creating components in the web) and provides the - following features: -

- -
    -
  • It build with accessibility in mind
  • -
  • Tiny bundle size
  • -
  • Blazing fast performance
  • -
  • Full RTL and internationalization support
  • -
  • Open source
  • -
diff --git a/packages/showcase/src/app/introduction/what-is/what-is.component.scss b/packages/showcase/src/app/introduction/what-is/what-is.component.scss deleted file mode 100644 index cf9d56902..000000000 --- a/packages/showcase/src/app/introduction/what-is/what-is.component.scss +++ /dev/null @@ -1,5 +0,0 @@ -what-is { - & > p + p { - margin-block-start: var(--mer-spacing--md, var(--spacing--l)); - } -} diff --git a/packages/showcase/src/app/introduction/what-is/what-is.component.ts b/packages/showcase/src/app/introduction/what-is/what-is.component.ts deleted file mode 100644 index 7f169118e..000000000 --- a/packages/showcase/src/app/introduction/what-is/what-is.component.ts +++ /dev/null @@ -1,30 +0,0 @@ -import { - ChangeDetectionStrategy, - Component, - computed, - inject, - ViewEncapsulation -} from "@angular/core"; -import { DesignSystemService } from "../../../services/design-system.service"; - -@Component({ - selector: "what-is", - templateUrl: "./what-is.component.html", - styleUrl: "./what-is.component.scss", - changeDetection: ChangeDetectionStrategy.OnPush, - host: { class: "main-content" }, - encapsulation: ViewEncapsulation.None -}) -export class WhatIsComponent { - dsService = inject(DesignSystemService); - - ds = computed(() => - this.dsService.designSystem() === "mercury" ? "Mercury" : "Unanimo" - ); - - description = computed(() => - this.dsService.designSystem() === "mercury" - ? "Mercury Design System is a robust and scalable solution designed to improve product development" - : "Unanimo Design System is a solution oriented to mission-critical business applications and the back-office generated by GeneXus" - ); -} diff --git a/packages/showcase/src/app/not-found/not-found.scss b/packages/showcase/src/app/not-found/not-found.scss index db3874d86..f88a52d34 100644 --- a/packages/showcase/src/app/not-found/not-found.scss +++ b/packages/showcase/src/app/not-found/not-found.scss @@ -1,8 +1,8 @@ not-found { display: flex; flex-direction: column; - gap: 48px; - margin-block-start: 48px; + gap: var(--size-48); + margin-block-start: var(--size-48); align-items: center; } diff --git a/packages/showcase/src/app/utility-classes/link/link.component.html b/packages/showcase/src/app/utility-classes/link/link.component.html new file mode 100644 index 000000000..dcabeb222 --- /dev/null +++ b/packages/showcase/src/app/utility-classes/link/link.component.html @@ -0,0 +1,11 @@ +
+

Link

+
+ +

{{ metadata.description }}

+ + + + + + diff --git a/packages/showcase/src/app/utility-classes/link/link.component.ts b/packages/showcase/src/app/utility-classes/link/link.component.ts new file mode 100644 index 000000000..b996cbec7 --- /dev/null +++ b/packages/showcase/src/app/utility-classes/link/link.component.ts @@ -0,0 +1,33 @@ +import { + ChangeDetectionStrategy, + Component, + CUSTOM_ELEMENTS_SCHEMA, + inject, + model +} from "@angular/core"; + +import { linkMetadata } from "@genexus/design-system-common"; +import { createRenders } from "../../../common/create-signals-from-code-snippets"; +import { PageFiltersService } from "../../../services/page-filters.service"; +import { CodeSnippetComponent } from "../../../user-controls/code-snippet/code-snippet.component"; + +@Component({ + selector: "utility-classes-link", + templateUrl: "./link.component.html", + changeDetection: ChangeDetectionStrategy.OnPush, + imports: [CodeSnippetComponent], + host: { class: "main-content" }, + schemas: [CUSTOM_ELEMENTS_SCHEMA] +}) +export class LinkComponent { + pageFilters = inject(PageFiltersService); + hiddenFields = model(""); + + metadata = linkMetadata; + codeSnippets = linkMetadata.codeSnippets; + + constructor() { + this.pageFilters.hiddenFields = this.hiddenFields; + this.pageFilters.renders.set(createRenders(linkMetadata)); + } +} diff --git a/packages/showcase/src/common/mercury-tokens.ts b/packages/showcase/src/common/mercury-tokens.ts new file mode 100644 index 000000000..0148f6932 --- /dev/null +++ b/packages/showcase/src/common/mercury-tokens.ts @@ -0,0 +1,840 @@ +// mercuryTokens is generated for packages/showcase tokens page. +const mercuryTokens = { + primitive: { + color: { + mercury: { + primary: { + "--color-primary-100": "#f4f8ff", + "--color-primary-200": "#ebf0ff", + "--color-primary-300": "#cee0ff", + "--color-primary-400": "#b0cfff", + "--color-primary-500": "#8cbcff", + "--color-primary-550": "#75aef0", + "--color-primary-580": "#729fd5", + "--color-primary-600": "#5ba7ff", + "--color-primary-700": "#5498e8", + "--color-primary-800": "#437dc0", + "--color-primary-900": "#335884", + "--color-primary-1000": "#294b72", + "--color-primary-1100": "#005ac1", + "--color-primary-1300": "#101e2d", + }, + neutral: { + "--color-neutral-100": "#fafbfd", + "--color-neutral-200": "#f0f4fa", + "--color-neutral-300": "#e1ecf9", + "--color-neutral-400": "#d2ddeb", + "--color-neutral-500": "#c0ccd9", + "--color-neutral-600": "#aeb9c6", + "--color-neutral-700": "#9da9b6", + "--color-neutral-800": "#828b96", + "--color-neutral-900": "#56677a", + "--color-neutral-1000": "#4a5870", + "--color-neutral-1050": "#405975", + "--color-neutral-1100": "#485665", + "--color-neutral-1200": "#394552", + "--color-neutral-1300": "#333d47", + "--color-neutral-1400": "#2d3a48", + "--color-neutral-1450": "#243750", + "--color-neutral-1500": "#242d3c", + "--color-neutral-1550": "#17273b", + "--color-neutral-1600": "#181f2a", + "--color-neutral-1700": "#11151c", + "--color-neutral-1800": "#000000", + "--color-neutral-000": "#ffffff", + }, + lilac: { + "--color-lilac-50": "#f9fafa", + "--color-lilac-100": "#f8f9fc", + "--color-lilac-200": "#edf0f8", + "--color-lilac-300": "#dee1ed", + "--color-lilac-400": "#d5daeb", + "--color-lilac-500": "#c8d0e9", + "--color-lilac-600": "#c2cbe6", + "--color-lilac-700": "#bcc5e4", + "--color-lilac-800": "#b7c2e2", + "--color-lilac-900": "#9babd9", + }, + azure: { + "--color-azure-50": "#eaf3fe", + "--color-azure-100": "#e1eefe", + "--color-azure-200": "#c6dffd", + "--color-azure-300": "#9cc8fc", + "--color-azure-400": "#3791fb", + "--color-azure-500": "#0a7cff", + "--color-azure-600": "#0072f8", + "--color-azure-700": "#0049cd", + "--color-azure-800": "#0034b1", + "--color-azure-900": "#002da8", + }, + chateau: { + "--color-chateau-50": "#f6fef9", + "--color-chateau-100": "#edfdf3", + "--color-chateau-200": "#f5fded", + "--color-chateau-300": "#34e474", + "--color-chateau-400": "#1aba56", + "--color-chateau-500": "#089141", + "--color-chateau-600": "#077e42", + "--color-chateau-700": "#066f3b", + "--color-chateau-800": "#05572e", + "--color-chateau-900": "#044926", + }, + scarlet: { + "--color-scarlet-50": "#fffafa", + "--color-scarlet-100": "#fff5f5", + "--color-scarlet-200": "#ffebeb", + "--color-scarlet-300": "#fc7d7d", + "--color-scarlet-400": "#f92525", + "--color-scarlet-500": "#c50707", + "--color-scarlet-600": "#a61212", + "--color-scarlet-700": "#891a1a", + "--color-scarlet-800": "#6d2121", + "--color-scarlet-900": "#4b2020", + }, + ember: { + "--color-ember-50": "#fffdfa", + "--color-ember-100": "#fff9f0", + "--color-ember-200": "#fef5e1", + "--color-ember-300": "#fde3af", + "--color-ember-400": "#eea507", + "--color-ember-500": "#b17e07", + "--color-ember-600": "#9d7006", + "--color-ember-700": "#936906", + "--color-ember-800": "#765405", + "--color-ember-900": "#4e3803", + }, + red: { + "--color-red-100": "#fcf4f4", + "--color-red-200": "#f8dfe0", + "--color-red-300": "#f4cdcf", + "--color-red-400": "#eda4a7", + "--color-red-500": "#e98b8f", + "--color-red-600": "#e35861", + "--color-red-700": "#d54b54", + "--color-red-800": "#a63a41", + "--color-red-900": "#883035", + "--color-red-1000": "#6d272b", + "--color-red-1300": "#2d1012", + }, + green: { + "--color-green-100": "#eef5f4", + "--color-green-200": "#ddebe9", + "--color-green-300": "#cae0dd", + "--color-green-400": "#b4d5d0", + "--color-green-500": "#9cc9c2", + "--color-green-600": "#3fa89b", + "--color-green-700": "#389287", + "--color-green-800": "#318278", + "--color-green-900": "#286a62", + "--color-green-1000": "#1c4b45", + "--color-green-1300": "#112d29", + }, + yellow: { + "--color-yellow-100": "#fffbf6", + "--color-yellow-200": "#fef1e3", + "--color-yellow-300": "#fde8cf", + "--color-yellow-400": "#fcdeb8", + "--color-yellow-500": "#fac980", + "--color-yellow-600": "#f9bd56", + "--color-yellow-700": "#ffc96b", + "--color-yellow-800": "#ecaf44", + "--color-yellow-900": "#b97d13", + "--color-yellow-1000": "#6f4b0b", + "--color-yellow-1300": "#382606", + }, + gradient: { + "--color-gradient-sky": "#00ccff", + "--color-gradient-purple": "#a300ff", + "--color-gradient-magenta": "#ff00ff", + "--color-gradient-berry": "#0095ff", + "--color-gradient-cyan": "#00f5ff", + "--color-gradient-yellow": "#ffea00", + }, + opacity: { + "--color-opacity-70": "rgba(17, 21, 28, 70)", + }, + }, + globant: { + primary: { + "--color-primary-100": "#f9fbf2", + "--color-primary-200": "#f5f8e8", + "--color-primary-300": "#eaf1ce", + "--color-primary-400": "#deeab0", + "--color-primary-500": "#d2e38c", + "--color-primary-550": "#cfe184", + "--color-primary-580": "#c6d572", + "--color-primary-600": "#bfd732", + "--color-primary-700": "#b4cc28", + "--color-primary-800": "#a3b72b", + "--color-primary-900": "#8d9f25", + "--color-primary-1000": "#515c15", + "--color-primary-1100": "#2e340a", + "--color-primary-1300": "#262b08", + }, + neutral: { + "--color-neutral-100": "#ffffff", + "--color-neutral-200": "#fafafa", + "--color-neutral-300": "#f5f5f5", + "--color-neutral-400": "#ededed", + "--color-neutral-500": "#e5e5e5", + "--color-neutral-600": "#d6d6d6", + "--color-neutral-700": "#cccccc", + "--color-neutral-800": "#bdbdbd", + "--color-neutral-900": "#a9a9a9", + "--color-neutral-1000": "#8c8c8c", + "--color-neutral-1050": "#6b6b6b", + "--color-neutral-1100": "#686868", + "--color-neutral-1200": "#575757", + "--color-neutral-1300": "#464646", + "--color-neutral-1400": "#3b3b3b", + "--color-neutral-1450": "#373737", + "--color-neutral-1500": "#303030", + "--color-neutral-1550": "#262626", + "--color-neutral-1600": "#212121", + "--color-neutral-1700": "#171717", + "--color-neutral-1800": "#000000", + }, + red: { + "--color-red-100": "#fcf4f4", + "--color-red-200": "#f8dfe0", + "--color-red-300": "#f4cdcf", + "--color-red-400": "#eda4a7", + "--color-red-500": "#e98b8f", + "--color-red-600": "#e35861", + "--color-red-700": "#d54b54", + "--color-red-800": "#a63a41", + "--color-red-900": "#883035", + "--color-red-1000": "#6d272b", + "--color-red-1300": "#2d1012", + }, + green: { + "--color-green-100": "#eef5f4", + "--color-green-200": "#ddebe9", + "--color-green-300": "#cae0dd", + "--color-green-400": "#b4d5d0", + "--color-green-500": "#9cc9c2", + "--color-green-600": "#3fa89b", + "--color-green-700": "#389287", + "--color-green-800": "#318278", + "--color-green-900": "#286a62", + "--color-green-1000": "#1c4b45", + "--color-green-1300": "#112d29", + }, + yellow: { + "--color-yellow-100": "#fffbf6", + "--color-yellow-200": "#fef1e3", + "--color-yellow-300": "#fde8cf", + "--color-yellow-400": "#fcdeb8", + "--color-yellow-500": "#fac980", + "--color-yellow-600": "#f9bd56", + "--color-yellow-700": "#ffc96b", + "--color-yellow-800": "#ecaf44", + "--color-yellow-900": "#b97d13", + "--color-yellow-1000": "#6f4b0b", + "--color-yellow-1300": "#382606", + }, + gradient: { + "--color-gradient-gaserage": "#c0fb73", + "--color-gradient-mint": "#38efa0", + "--color-gradient-greenwood": "#d9e021", + "--color-gradient-lemon": "#8cc63f", + "--color-gradient-aqua": "#15c9c3", + "--color-gradient-spearmint": "#79f6c0", + }, + opacity: { + "--color-opacity-70": "rgba(23, 23, 23, 70)", + }, + }, + }, + "font-family": { + "--font-family-header": "Inter", + "--font-family-body": "Inter", + "--font-family-code": "DM Mono", + }, + "font-style": { + "--font-style-regular": "Regular", + "--font-style-semi-bold": "Semi Bold", + "--font-style-bold": "Bold", + "--font-style-italic": "Italic", + }, + size: { + "--size-0": "0px", + "--size-1": "1px", + "--size-2": "2px", + "--size-4": "4px", + "--size-6": "6px", + "--size-8": "8px", + "--size-10": "10px", + "--size-11": "11px", + "--size-12": "12px", + "--size-14": "14px", + "--size-16": "16px", + "--size-18": "18px", + "--size-20": "20px", + "--size-24": "24px", + "--size-28": "28px", + "--size-32": "32px", + "--size-40": "40px", + "--size-48": "48px", + "--size-56": "56px", + "--size-64": "64px", + "--size-72": "72px", + "--size--2": "-2px", + "--size--1": "-1px", + }, + }, + semantic: { + color: { + mercury: { + light: { + accent: { + "--color-accent-primary-lighter": "--color-azure-50", + "--color-accent-primary-light": "--color-azure-100", + "--color-accent-primary-default": "--color-azure-500", + "--color-accent-primary-hover": "--color-azure-400", + "--color-accent-primary-pressed": "--color-azure-700", + "--color-accent-primary-contrast": "--color-primary-200", + "--color-accent-neutral-default": "--color-neutral-700", + "--color-accent-neutral-hover": "--color-neutral-1550", + "--color-accent-neutral-pressed": "--color-neutral-200", + "--color-accent-neutral-disabled": "--color-neutral-400", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-neutral-neutral": "--color-neutral-900", + "--color-accent-neutral-black": "--color-primary-1300", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-error-lighter": "--color-scarlet-200", + "--color-accent-error-light": "--color-scarlet-300", + "--color-accent-error-default": "--color-scarlet-500", + "--color-accent-error-hover": "--color-scarlet-800", + "--color-accent-error-pressed": "--color-scarlet-900", + "--color-accent-error-contrast": "--color-scarlet-200", + "--color-accent-succcess-lighter": "--color-chateau-200", + "--color-accent-succcess-light": "--color-chateau-400", + "--color-accent-succcess-default": "--color-chateau-500", + "--color-accent-succcess-hover": "--color-chateau-800", + "--color-accent-succcess-pressed": "--color-chateau-900", + "--color-accent-succcess-contrast": "--color-chateau-200", + "--color-accent-warning-lighter": "--color-ember-200", + "--color-accent-warning-light": "--color-ember-300", + "--color-accent-warning-default": "--color-ember-400", + "--color-accent-warning-hover": "--color-ember-500", + "--color-accent-warning-pressed": "--color-ember-800", + "--color-accent-warning-contrast": "--color-ember-200", + "--color-accent-backdrop-default": "--rgba(17, 21, 28, 80)", + "--color-accent-item-hover": "--color-azure-100", + "--color-accent-item-selected": "--color-azure-200", + "--color-accent-surface-surface": "--color-lilac-50", + "--color-accent-surface-elevation-01": "--color-lilac-200", + "--color-accent-surface-elevation-02": "--color-lilac-300", + "--color-accent-surface-elevation-03": "--color-lilac-500", + "--color-accent-surface-elevation-answer": "--color-lilac-600", + "--color-accent-semantic-info": "--color-azure-400", + "--color-accent-semantic-success": "--color-chateau-400", + "--color-accent-semantic-warning": "--color-ember-400", + "--color-accent-semantic-error": "--color-scarlet-400", + "--color-accent-semantic-neutral": "--color-neutral-1200", + "--color-accent-branding-surface": "--color-neutral-1800", + "--color-accent-shadow-shadow": "--rgba(7, 10, 18, 20)", + }, + border: { + "--color-border-primary-lighter": "--color-azure-50", + "--color-border-primary-light": "--color-azure-100", + "--color-border-primary-default": "--color-azure-500", + "--color-border-primary-hover": "--color-azure-300", + "--color-border-primary-focused": "--color-neutral-1500", + "--color-border-primary-pressed": "--color-azure-700", + "--color-border-primary-dark": "--color-primary-1300", + "--color-border-neutral-default": "--color-neutral-700", + "--color-border-neutral-hover": "--color-neutral-1550", + "--color-border-neutral-pressed": "--color-neutral-1500", + "--color-border-neutral-disabled": "--color-neutral-700", + "--color-border-neutral-on-border": "--color-neutral-100", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-neutral-neutral": "--color-neutral-900", + "--color-border-neutral-black": "--color-primary-1300", + "--color-border-error-lighter": "--color-scarlet-200", + "--color-border-error-light": "--color-scarlet-300", + "--color-border-error-default": "--color-scarlet-500", + "--color-border-error-hover": "--color-scarlet-800", + "--color-border-error-pressed": "--color-scarlet-900", + "--color-border-error-dark": "--color-scarlet-200", + "--color-border-success-lighter": "--color-chateau-200", + "--color-border-success-light": "--color-chateau-400", + "--color-border-success-default": "--color-chateau-500", + "--color-border-success-hover": "--color-chateau-800", + "--color-border-success-pressed": "--color-chateau-900", + "--color-border-success-dark": "--color-chateau-200", + "--color-border-warning-lighter": "--color-ember-200", + "--color-border-warning-light": "--color-ember-300", + "--color-border-warning-default": "--color-ember-500", + "--color-border-warning-hover": "--color-ember-800", + "--color-border-warning-pressed": "--color-ember-900", + "--color-border-warning-dark": "--color-ember-200", + "--color-border-item-hover": "--color-primary-500", + "--color-border-item-selected": "--color-primary-700", + "--color-border-surface-on-elevation-01": "--color-lilac-400", + "--color-border-surface-on-elevation-02": "--color-lilac-500", + "--color-border-surface-on-elevation-03": "--color-lilac-600", + "--color-border-branding-surface": "--color-neutral-1400", + }, + text: { + "--color-text-primary-default": "--color-azure-500", + "--color-text-primary-hover": "--color-azure-400", + "--color-text-primary-pressed": "--color-azure-700", + "--color-text-neutral-default": "--color-neutral-1400", + "--color-text-neutral-hover": "--color-neutral-1550", + "--color-text-neutral-pressed": "--color-neutral-1550", + "--color-text-neutral-disabled": "--color-neutral-800", + "--color-text-neutral-on-disabled": "--color-neutral-1000", + "--color-text-neutral-on-text": "--color-neutral-200", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-neutral-neutral": "--color-neutral-900", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-semantic-success": "--color-chateau-500", + "--color-text-semantic-warning": "--color-ember-500", + "--color-text-semantic-error": "--color-scarlet-500", + "--color-text-semantic-neutral": "--color-neutral-1200", + "--color-text-branding-surface": "--color-neutral-100", + }, + icon: { + "--color-icon-primary-default": "--color-azure-500", + "--color-icon-primary-hover": "--color-azure-400", + "--color-icon-primary-pressed": "--color-azure-700", + "--color-icon-neutral-default": "--color-neutral-1400", + "--color-icon-neutral-hover": "--color-neutral-1550", + "--color-icon-neutral-pressed": "--color-neutral-1450", + "--color-icon-neutral-disabled": "--color-neutral-800", + "--color-icon-neutral-on-disabled": "--color-neutral-1000", + "--color-icon-neutral-on-icon": "--color-neutral-100", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-neutral-neutral": "--color-neutral-900", + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-semantic-success": "--color-chateau-600", + "--color-icon-semantic-warning": "--color-ember-600", + "--color-icon-semantic-error": "--color-scarlet-600", + "--color-icon-semantic-neutral": "--color-neutral-1200", + }, + }, + dark: { + accent: { + "--color-accent-primary-lighter": "--color-primary-300", + "--color-accent-primary-light": "--color-primary-500", + "--color-accent-primary-default": "--color-primary-600", + "--color-accent-primary-hover": "--color-neutral-1450", + "--color-accent-primary-pressed": "--color-primary-1000", + "--color-accent-primary-contrast": "--color-primary-1300", + "--color-accent-neutral-default": "--color-neutral-900", + "--color-accent-neutral-hover": "--color-neutral-300", + "--color-accent-neutral-pressed": "--color-neutral-600", + "--color-accent-neutral-disabled": "--color-neutral-1300", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-neutral-neutral": "--color-neutral-600", + "--color-accent-neutral-black": "--color-neutral-1700", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-error-lighter": "--color-red-300", + "--color-accent-error-light": "--color-red-500", + "--color-accent-error-default": "--color-red-600", + "--color-accent-error-hover": "--color-red-800", + "--color-accent-error-pressed": "--color-red-1000", + "--color-accent-error-contrast": "--color-red-1300", + "--color-accent-succcess-lighter": "--color-green-300", + "--color-accent-succcess-light": "--color-green-500", + "--color-accent-succcess-default": "--color-green-600", + "--color-accent-succcess-hover": "--color-green-800", + "--color-accent-succcess-pressed": "--color-green-1000", + "--color-accent-succcess-contrast": "--color-green-1300", + "--color-accent-warning-lighter": "--color-yellow-300", + "--color-accent-warning-light": "--color-yellow-400", + "--color-accent-warning-default": "--color-yellow-600", + "--color-accent-warning-hover": "--color-yellow-900", + "--color-accent-warning-pressed": "--color-yellow-1000", + "--color-accent-warning-contrast": "--color-yellow-1300", + "--color-accent-backdrop-default": "--color-opacity-70", + "--color-accent-item-hover": "--color-neutral-1450", + "--color-accent-item-selected": "--color-neutral-1550", + "--color-accent-surface-surface": "--color-neutral-1700", + "--color-accent-surface-elevation-01": "--color-neutral-1600", + "--color-accent-surface-elevation-02": "--color-neutral-1500", + "--color-accent-surface-elevation-03": "--color-neutral-1400", + "--color-accent-surface-elevation-answer": "--color-neutral-1450", + "--color-accent-semantic-info": "--color-primary-600", + "--color-accent-semantic-success": "--color-green-600", + "--color-accent-semantic-warning": "--color-yellow-600", + "--color-accent-semantic-error": "--color-red-600", + "--color-accent-semantic-neutral": "--color-neutral-800", + "--color-accent-branding-surface": "--color-neutral-100", + "--color-accent-shadow-shadow": "--rgba(0, 0, 0, 20)", + }, + border: { + "--color-border-primary-lighter": "--color-primary-300", + "--color-border-primary-light": "--color-primary-500", + "--color-border-primary-default": "--color-primary-600", + "--color-border-primary-hover": "--color-primary-550", + "--color-border-primary-focused": "--color-neutral-400", + "--color-border-primary-pressed": "--color-primary-580", + "--color-border-primary-dark": "--color-primary-1300", + "--color-border-neutral-default": "--color-neutral-900", + "--color-border-neutral-hover": "--color-neutral-300", + "--color-border-neutral-pressed": "--color-neutral-400", + "--color-border-neutral-disabled": "--color-neutral-800", + "--color-border-neutral-on-border": "--color-neutral-1700", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-neutral-neutral": "--color-neutral-600", + "--color-border-neutral-black": "--color-neutral-1700", + "--color-border-error-lighter": "--color-red-300", + "--color-border-error-light": "--color-red-500", + "--color-border-error-default": "--color-red-600", + "--color-border-error-hover": "--color-red-700", + "--color-border-error-pressed": "--color-red-900", + "--color-border-error-dark": "--color-red-1300", + "--color-border-success-lighter": "--color-green-300", + "--color-border-success-light": "--color-green-500", + "--color-border-success-default": "--color-green-600", + "--color-border-success-hover": "--color-green-800", + "--color-border-success-pressed": "--color-green-1000", + "--color-border-success-dark": "--color-green-1300", + "--color-border-warning-lighter": "--color-yellow-300", + "--color-border-warning-light": "--color-yellow-400", + "--color-border-warning-default": "--color-yellow-500", + "--color-border-warning-hover": "--color-yellow-800", + "--color-border-warning-pressed": "--color-yellow-900", + "--color-border-warning-dark": "--color-yellow-1300", + "--color-border-item-hover": "--color-neutral-1050", + "--color-border-item-selected": "--color-primary-580", + "--color-border-surface-on-elevation-01": "--color-neutral-1300", + "--color-border-surface-on-elevation-02": "--color-neutral-1100", + "--color-border-surface-on-elevation-03": "--color-neutral-900", + "--color-border-branding-surface": "--color-neutral-1700", + }, + text: { + "--color-text-primary-default": "--color-primary-600", + "--color-text-primary-hover": "--color-primary-400", + "--color-text-primary-pressed": "--color-primary-800", + "--color-text-neutral-default": "--color-neutral-200", + "--color-text-neutral-hover": "--color-neutral-300", + "--color-text-neutral-pressed": "--color-neutral-400", + "--color-text-neutral-disabled": "--color-neutral-800", + "--color-text-neutral-on-disabled": "--color-neutral-600", + "--color-text-neutral-on-text": "--color-neutral-1700", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-neutral-neutral": "--color-neutral-600", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-semantic-success": "--color-green-600", + "--color-text-semantic-warning": "--color-yellow-600", + "--color-text-semantic-error": "--color-red-600", + "--color-text-semantic-neutral": "--color-neutral-800", + "--color-text-branding-surface": "--color-neutral-1800", + }, + icon: { + "--color-icon-primary-default": "--color-primary-600", + "--color-icon-primary-hover": "--color-primary-400", + "--color-icon-primary-pressed": "--color-primary-800", + "--color-icon-neutral-default": "--color-neutral-200", + "--color-icon-neutral-hover": "--color-neutral-300", + "--color-icon-neutral-pressed": "--color-neutral-400", + "--color-icon-neutral-disabled": "--color-neutral-800", + "--color-icon-neutral-on-disabled": "--color-neutral-600", + "--color-icon-neutral-on-icon": "--color-neutral-1700", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-neutral-neutral": "--color-neutral-600", + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-semantic-success": "--color-green-600", + "--color-icon-semantic-warning": "--color-yellow-600", + "--color-icon-semantic-error": "--color-red-600", + "--color-icon-semantic-neutral": "--color-neutral-800", + }, + }, + }, + globant: { + light: { + accent: { + "--color-accent-primary-lighter": "--color-primary-300", + "--color-accent-primary-light": "--color-primary-500", + "--color-accent-primary-default": "--color-primary-800", + "--color-accent-primary-hover": "--color-primary-300", + "--color-accent-primary-pressed": "--color-primary-1000", + "--color-accent-primary-contrast": "--color-primary-300", + "--color-accent-neutral-default": "--color-neutral-1100", + "--color-accent-neutral-hover": "--color-neutral-1550", + "--color-accent-neutral-pressed": "--color-neutral-200", + "--color-accent-neutral-disabled": "--color-neutral-500", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-neutral-neutral": "--color-neutral-900", + "--color-accent-neutral-black": "--color-neutral-1300", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-error-lighter": "--color-red-300", + "--color-accent-error-light": "--color-red-500", + "--color-accent-error-default": "--color-red-600", + "--color-accent-error-hover": "--color-red-800", + "--color-accent-error-pressed": "--color-red-900", + "--color-accent-error-contrast": "--color-red-300", + "--color-accent-succcess-lighter": "--color-green-300", + "--color-accent-succcess-light": "--color-green-500", + "--color-accent-succcess-default": "--color-green-600", + "--color-accent-succcess-hover": "--color-green-800", + "--color-accent-succcess-pressed": "--color-green-1000", + "--color-accent-succcess-contrast": "--color-green-300", + "--color-accent-warning-lighter": "--color-ember-200", + "--color-accent-warning-light": "--color-ember-300", + "--color-accent-warning-default": "--color-ember-400", + "--color-accent-warning-hover": "--color-ember-500", + "--color-accent-warning-pressed": "--color-ember-800", + "--color-accent-warning-contrast": "--color-ember-200", + "--color-accent-backdrop-default": "--rgba(23, 23, 23, 80)", + "--color-accent-item-hover": "--color-neutral-200", + "--color-accent-item-selected": "--color-primary-300", + "--color-accent-surface-surface": "--color-neutral-100", + "--color-accent-surface-elevation-01": "--color-neutral-300", + "--color-accent-surface-elevation-02": "--color-neutral-400", + "--color-accent-surface-elevation-03": "--color-neutral-700", + "--color-accent-surface-elevation-answer": "--color-neutral-600", + "--color-accent-semantic-info": "--color-green-600", + "--color-accent-semantic-success": "--color-green-600", + "--color-accent-semantic-warning": "--color-yellow-600", + "--color-accent-semantic-error": "--color-red-600", + "--color-accent-semantic-neutral": "--color-neutral-1300", + "--color-accent-branding-surface": "--color-neutral-1800", + "--color-accent-shadow-shadow": "--rgba(11, 18, 7, 20)", + }, + border: { + "--color-border-primary-lighter": "--color-primary-300", + "--color-border-primary-light": "--color-primary-500", + "--color-border-primary-default": "--color-primary-800", + "--color-border-primary-hover": "--color-primary-600", + "--color-border-primary-focused": "--color-neutral-1550", + "--color-border-primary-pressed": "--color-primary-1000", + "--color-border-primary-dark": "--color-primary-1300", + "--color-border-neutral-default": "--color-neutral-800", + "--color-border-neutral-hover": "--color-neutral-1550", + "--color-border-neutral-pressed": "--color-neutral-1500", + "--color-border-neutral-disabled": "--color-neutral-700", + "--color-border-neutral-on-border": "--color-neutral-200", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-neutral-neutral": "--color-neutral-900", + "--color-border-neutral-black": "--color-neutral-1300", + "--color-border-error-lighter": "--color-red-300", + "--color-border-error-light": "--color-red-500", + "--color-border-error-default": "--color-red-600", + "--color-border-error-hover": "--color-red-700", + "--color-border-error-pressed": "--color-red-900", + "--color-border-error-dark": "--color-red-1300", + "--color-border-success-lighter": "--color-green-300", + "--color-border-success-light": "--color-green-500", + "--color-border-success-default": "--color-green-600", + "--color-border-success-hover": "--color-green-800", + "--color-border-success-pressed": "--color-green-1000", + "--color-border-success-dark": "--color-green-1300", + "--color-border-warning-lighter": "--color-yellow-300", + "--color-border-warning-light": "--color-yellow-400", + "--color-border-warning-default": "--color-yellow-500", + "--color-border-warning-hover": "--color-yellow-800", + "--color-border-warning-pressed": "--color-yellow-900", + "--color-border-warning-dark": "--color-yellow-1300", + "--color-border-item-hover": "--color-neutral-500", + "--color-border-item-selected": "--color-primary-580", + "--color-border-surface-on-elevation-01": "--color-neutral-800", + "--color-border-surface-on-elevation-02": "--color-neutral-1000", + "--color-border-surface-on-elevation-03": "--color-neutral-1200", + "--color-border-branding-surface": "--color-neutral-1400", + }, + text: { + "--color-text-primary-default": "--color-primary-800", + "--color-text-primary-hover": "--color-primary-700", + "--color-text-primary-pressed": "--color-primary-1000", + "--color-text-neutral-default": "--color-neutral-1400", + "--color-text-neutral-hover": "--color-neutral-1550", + "--color-text-neutral-pressed": "--color-neutral-1450", + "--color-text-neutral-disabled": "--color-neutral-800", + "--color-text-neutral-on-disabled": "--color-neutral-1000", + "--color-text-neutral-on-text": "--color-neutral-200", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-neutral-neutral": "--color-neutral-900", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-semantic-success": "--color-green-600", + "--color-text-semantic-warning": "--color-yellow-600", + "--color-text-semantic-error": "--color-red-600", + "--color-text-semantic-neutral": "--color-neutral-1300", + "--color-text-branding-surface": "--color-neutral-100", + }, + icon: { + "--color-icon-primary-default": "--color-primary-800", + "--color-icon-primary-hover": "--color-primary-700", + "--color-icon-primary-pressed": "--color-primary-1000", + "--color-icon-neutral-default": "--color-neutral-1400", + "--color-icon-neutral-hover": "--color-neutral-1550", + "--color-icon-neutral-pressed": "--color-neutral-1450", + "--color-icon-neutral-disabled": "--color-neutral-800", + "--color-icon-neutral-on-disabled": "--color-neutral-1000", + "--color-icon-neutral-on-icon": "--color-neutral-200", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-neutral-neutral": "--color-neutral-900", + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-semantic-success": "--color-green-600", + "--color-icon-semantic-warning": "--color-yellow-600", + "--color-icon-semantic-error": "--color-red-600", + "--color-icon-semantic-neutral": "--color-neutral-1300", + }, + }, + dark: { + accent: { + "--color-accent-primary-lighter": "--color-primary-300", + "--color-accent-primary-light": "--color-primary-500", + "--color-accent-primary-default": "--color-primary-600", + "--color-accent-primary-hover": "--color-primary-1100", + "--color-accent-primary-pressed": "--color-primary-1000", + "--color-accent-primary-contrast": "--color-primary-1300", + "--color-accent-neutral-default": "--color-neutral-900", + "--color-accent-neutral-hover": "--color-neutral-300", + "--color-accent-neutral-pressed": "--color-neutral-600", + "--color-accent-neutral-disabled": "--color-neutral-1300", + "--color-accent-neutral-white": "--color-neutral-100", + "--color-accent-neutral-neutral": "--color-neutral-600", + "--color-accent-neutral-black": "--color-neutral-1300", + "--color-accent-neutral-contrast": "--color-neutral-1550", + "--color-accent-error-lighter": "--color-red-300", + "--color-accent-error-light": "--color-red-500", + "--color-accent-error-default": "--color-red-600", + "--color-accent-error-hover": "--color-red-800", + "--color-accent-error-pressed": "--color-red-1000", + "--color-accent-error-contrast": "--color-red-1300", + "--color-accent-succcess-lighter": "--color-green-300", + "--color-accent-succcess-light": "--color-green-500", + "--color-accent-succcess-default": "--color-green-600", + "--color-accent-succcess-hover": "--color-green-800", + "--color-accent-succcess-pressed": "--color-green-1000", + "--color-accent-succcess-contrast": "--color-green-1300", + "--color-accent-warning-lighter": "--color-yellow-300", + "--color-accent-warning-light": "--color-yellow-400", + "--color-accent-warning-default": "--color-yellow-600", + "--color-accent-warning-hover": "--color-yellow-900", + "--color-accent-warning-pressed": "--color-yellow-1000", + "--color-accent-warning-contrast": "--color-yellow-1300", + "--color-accent-backdrop-default": "--rgba(23, 23, 23, 70)", + "--color-accent-item-hover": "--color-primary-1100", + "--color-accent-item-selected": "--color-primary-1300", + "--color-accent-surface-surface": "--color-neutral-1700", + "--color-accent-surface-elevation-01": "--color-neutral-1600", + "--color-accent-surface-elevation-02": "--color-neutral-1500", + "--color-accent-surface-elevation-03": "--color-neutral-1300", + "--color-accent-surface-elevation-answer": "--color-neutral-1450", + "--color-accent-semantic-info": "--color-green-600", + "--color-accent-semantic-success": "--color-green-600", + "--color-accent-semantic-warning": "--color-yellow-600", + "--color-accent-semantic-error": "--color-red-600", + "--color-accent-semantic-neutral": "--color-neutral-800", + "--color-accent-branding-surface": "--color-neutral-100", + "--color-accent-shadow-shadow": "--rgba(0, 0, 0, 20)", + }, + border: { + "--color-border-primary-lighter": "--color-primary-300", + "--color-border-primary-light": "--color-primary-500", + "--color-border-primary-default": "--color-primary-600", + "--color-border-primary-hover": "--color-primary-550", + "--color-border-primary-focused": "--color-neutral-400", + "--color-border-primary-pressed": "--color-primary-580", + "--color-border-primary-dark": "--color-primary-1300", + "--color-border-neutral-default": "--color-neutral-900", + "--color-border-neutral-hover": "--color-neutral-100", + "--color-border-neutral-pressed": "--color-neutral-400", + "--color-border-neutral-disabled": "--color-neutral-1050", + "--color-border-neutral-on-border": "--color-neutral-1700", + "--color-border-neutral-white": "--color-neutral-100", + "--color-border-neutral-neutral": "--color-neutral-600", + "--color-border-neutral-black": "--color-neutral-1300", + "--color-border-error-lighter": "--color-red-300", + "--color-border-error-light": "--color-red-500", + "--color-border-error-default": "--color-red-600", + "--color-border-error-hover": "--color-red-700", + "--color-border-error-pressed": "--color-red-900", + "--color-border-error-dark": "--color-red-1300", + "--color-border-success-lighter": "--color-green-300", + "--color-border-success-light": "--color-green-500", + "--color-border-success-default": "--color-green-600", + "--color-border-success-hover": "--color-green-800", + "--color-border-success-pressed": "--color-green-1000", + "--color-border-success-dark": "--color-green-1300", + "--color-border-warning-lighter": "--color-yellow-300", + "--color-border-warning-light": "--color-yellow-400", + "--color-border-warning-default": "--color-yellow-500", + "--color-border-warning-hover": "--color-yellow-800", + "--color-border-warning-pressed": "--color-yellow-900", + "--color-border-warning-dark": "--color-yellow-1300", + "--color-border-item-hover": "--color-neutral-1050", + "--color-border-item-selected": "--color-primary-580", + "--color-border-surface-on-elevation-01": "--color-neutral-1300", + "--color-border-surface-on-elevation-02": "--color-neutral-1100", + "--color-border-surface-on-elevation-03": "--color-neutral-900", + "--color-border-branding-surface": "--color-neutral-1700", + }, + text: { + "--color-text-primary-default": "--color-primary-600", + "--color-text-primary-hover": "--color-primary-400", + "--color-text-primary-pressed": "--color-primary-800", + "--color-text-neutral-default": "--color-neutral-400", + "--color-text-neutral-hover": "--color-neutral-300", + "--color-text-neutral-pressed": "--color-neutral-300", + "--color-text-neutral-disabled": "--color-neutral-1050", + "--color-text-neutral-on-disabled": "--color-neutral-600", + "--color-text-neutral-on-text": "--color-neutral-1700", + "--color-text-neutral-white": "--color-neutral-100", + "--color-text-neutral-neutral": "--color-neutral-600", + "--color-text-neutral-dark": "--color-neutral-1700", + "--color-text-semantic-success": "--color-green-600", + "--color-text-semantic-warning": "--color-yellow-600", + "--color-text-semantic-error": "--color-red-600", + "--color-text-semantic-neutral": "--color-neutral-800", + "--color-text-branding-surface": "--color-neutral-1800", + }, + icon: { + "--color-icon-primary-default": "--color-primary-600", + "--color-icon-primary-hover": "--color-primary-400", + "--color-icon-primary-pressed": "--color-primary-800", + "--color-icon-neutral-default": "--color-neutral-400", + "--color-icon-neutral-hover": "--color-neutral-300", + "--color-icon-neutral-pressed": "--color-neutral-300", + "--color-icon-neutral-disabled": "--color-neutral-1050", + "--color-icon-neutral-on-disabled": "--color-neutral-600", + "--color-icon-neutral-on-icon": "--color-neutral-1700", + "--color-icon-neutral-white": "--color-neutral-100", + "--color-icon-neutral-neutral": "--color-neutral-600", + "--color-icon-neutral-dark": "--color-neutral-1700", + "--color-icon-semantic-success": "--color-green-600", + "--color-icon-semantic-warning": "--color-yellow-600", + "--color-icon-semantic-error": "--color-red-600", + "--color-icon-semantic-neutral": "--color-neutral-800", + }, + }, + }, + }, + "font-size": { + header: { + "--font-size-header-h1": "--size-40", + "--font-size-header-h2": "--size-32", + "--font-size-header-h3": "--size-28", + "--font-size-header-h4": "--size-24", + "--font-size-header-h5": "--size-20", + "--font-size-header-h6": "--size-18", + }, + subtitle: { + "--font-size-subtitle-large": "--size-20", + "--font-size-subtitle-medium": "--size-18", + "--font-size-subtitle-small": "--size-16", + "--font-size-subtitle-xsmall": "--size-14", + }, + body: { + "--font-size-body-xlarge": "--size-18", + "--font-size-body-large": "--size-16", + "--font-size-body-medium": "--size-14", + "--font-size-body-small": "--size-12", + "--font-size-body-xsmall": "--size-11", + }, + caption: { + "--font-size-caption-large": "--size-12", + "--font-size-caption-medium": "--size-11", + "--font-size-caption-small": "--size-10", + "--font-size-caption-xsmall": "--size-8", + }, + }, + }, +}; +export default mercuryTokens; diff --git a/packages/showcase/src/main.server.ts b/packages/showcase/src/main.server.ts index 8211e47a0..3797a8b47 100644 --- a/packages/showcase/src/main.server.ts +++ b/packages/showcase/src/main.server.ts @@ -6,5 +6,6 @@ import { AppComponent } from "./app/app.component"; import { config } from "./app/app.config.server"; export default function bootstrap(context: BootstrapContext) { + // Accepts an optional BootstrapContext for SSR return bootstrapApplication(AppComponent, config, context); } diff --git a/packages/showcase/src/main.ts b/packages/showcase/src/main.ts index 9601ac11d..ff80da848 100644 --- a/packages/showcase/src/main.ts +++ b/packages/showcase/src/main.ts @@ -13,7 +13,8 @@ import { bundleToHashMappings } from "../.mercury/bundle-to-hash-mappings"; typeof import("@genexus/design-system-common"); -setBundleMapping(bundleToHashMappings); +// TODO: Fix this type issue, the "as any" cast must be removed +setBundleMapping(bundleToHashMappings as any); registerMercury(); defineCustomElements(window); registryProperty("getImagePathCallback", getImagePathCallbackDefinitions); diff --git a/packages/showcase/src/styles.scss b/packages/showcase/src/styles.scss index b4986b395..59440e7cb 100644 --- a/packages/showcase/src/styles.scss +++ b/packages/showcase/src/styles.scss @@ -6,10 +6,14 @@ :root { --main-content-max-inline-size: 1000px; // ideal width to allow three columns on tokens component. - --main-content-margin-inline: 48px; + --main-content-margin-inline: var(--size-48); } .main-content { + --main-content-margin-inline: var( + --size-48, + calc(var(--spacing--xxl) + var(--spacing--l)) + ); display: grid; grid-auto-rows: max-content; justify-self: center; @@ -18,10 +22,10 @@ flex: 1; & > header { - margin-block-end: 16px; + margin-block-end: var(--size-16); } - $commonMarkginBlockSpacing: 64px; + $commonMarkginBlockSpacing: var(--size-64); & > section, & > code-snippet > section, @@ -38,7 +42,7 @@ } copy-code > .tab { - margin-block-start: 16px; + margin-block-start: var(--size-16); } } @@ -64,7 +68,7 @@ .step-list { > li { - margin-block: 4px; + margin-block: var(--size-4); } } @@ -76,9 +80,9 @@ code { padding-block: 1px; padding-inline: 6px; - background-color: var(--mer-color__neutral-gray--650); + background-color: var(--color-accent-surface-elevation-01); border-radius: 4px; - color: var(--mer-text__on-elevation); + color: var(--color-text-neutral-default); } runtime-bundles { @@ -87,41 +91,43 @@ runtime-bundles { // This is a WA to add support for RTL and add paddings for Unanimo ch-code { - padding-inline: 12px; - padding-block: 8px; + padding-inline: var(--size-12); + padding-block: var(--size-8); max-block-size: 600px; } .blockquote-info { - padding: 16px; + padding: var(--size-16); margin: 0; - margin-block-start: 16px; - border-inline-start: 2px solid var(--color-border-neutral-default); - background-color: var(--mer-surface__elevation--01); - border-radius: 4px; - color: var(--mer-color__neutral-gray--300); - line-height: 1.5; + margin-block-start: var(--size-16); + border-inline-start: var(--size-2) solid var(--color-border-neutral-default); + background-color: var(--color-border-surface-on-elevation-01); + border-radius: var(--size-4); + color: var(--color-text-neutral-neutral); + line-height: var(--line-height-spacious); } .blockquote-info > code { - background-color: var(--mer-color__neutral-gray--600); + background-color: var(--color-accent-neutral-neutral); } .hyperlink { - color: var(--mer-accent__primary, var(--text__primary)); + color: var(--color-text-primary-default); text-decoration: underline; } a { &:focus-visible { - outline: 1px solid; + outline: var(--size-1) solid; } } // TODO: This is a WA to improve the tab-list-end styling .tab::part(tab-list-end block-start) { - border-block-end: var(--items-container__border-width) - var(--items-container__border-style) - var(--elevation-border-color, var(--items-container__border-color)); + // TODO: Use a items container mixin + padding-inline-end: var(--size-12); + border-block-end: var(--items-container-border-width) + var(--items-container-border-style) + var(--elevation-border-color, var(--items-container-border-color)); } html { diff --git a/packages/showcase/src/user-controls/code-snippet/code-snippet.component.ts b/packages/showcase/src/user-controls/code-snippet/code-snippet.component.ts index 571ccde4c..7df791be6 100644 --- a/packages/showcase/src/user-controls/code-snippet/code-snippet.component.ts +++ b/packages/showcase/src/user-controls/code-snippet/code-snippet.component.ts @@ -39,7 +39,6 @@ export class CodeSnippetComponent { bundles = input(); protected bundleBasePath = signal(MERCURY_BASE_CSS_URL); - protected bundleToHashMapping = bundleToHashMappings; codeSnippet = input(); diff --git a/packages/showcase/src/user-controls/code-snippet/code-snippet.scss b/packages/showcase/src/user-controls/code-snippet/code-snippet.scss index fa2ad1d85..fa12e2928 100644 --- a/packages/showcase/src/user-controls/code-snippet/code-snippet.scss +++ b/packages/showcase/src/user-controls/code-snippet/code-snippet.scss @@ -3,7 +3,7 @@ code-snippet { > section > h2, > section > h3 { - margin-block-end: var(--mer-spacing--md, var(--spacing--l)); + margin-block-end: var(--size-16, var(--spacing--l)); } > section > ch-tree-view-render { @@ -18,9 +18,9 @@ code-snippet { .code-snippet-before-and-after > template-render { display: block; - margin-block-start: var(--mer-spacing--md, var(--spacing--l)); + margin-block-start: var(--size-16, var(--spacing--l)); } .c-green { - color: var(--mer-color__message-green--100); + color: var(--color-accent-succcess-default); } diff --git a/packages/showcase/src/user-controls/common-snippets/common-snippets.component.html b/packages/showcase/src/user-controls/common-snippets/common-snippets.component.html index e4539c190..5885c7abb 100644 --- a/packages/showcase/src/user-controls/common-snippets/common-snippets.component.html +++ b/packages/showcase/src/user-controls/common-snippets/common-snippets.component.html @@ -39,35 +39,35 @@
  • Accordion
  • Dialog
  • Form classes
  • Layouts
  • Tab diff --git a/packages/showcase/src/user-controls/common-snippets/common-snippets.component.scss b/packages/showcase/src/user-controls/common-snippets/common-snippets.component.scss index d2e0f49e4..e9d282471 100644 --- a/packages/showcase/src/user-controls/common-snippets/common-snippets.component.scss +++ b/packages/showcase/src/user-controls/common-snippets/common-snippets.component.scss @@ -5,33 +5,30 @@ padding: 0; margin: 0; display: grid; - gap: var(--mer-spacing--xs); + gap: var(--size-8); grid-template-columns: repeat(3, 1fr); &__item { align-items: center; - background-color: var(--item__bg-color); - border-color: var(--item__border-color); - border-radius: var(--mer-border__width--lg); - border-style: solid; - border-width: var(--mer-border__width--sm); - color: var(--item__color); + background-color: var(--item-bg-color); + color: var(--item-color); + --item-bg-color: var(--color-accent-surface-elevation-01); + --item-color: var(--color-text-neutral-default); + border-radius: var(--size-4); display: flex; justify-content: center; - --item__bg-color: var(--mer-surface__elevation--01); - padding: var(--mer-spacing--sm) var(--mer-spacing--md); + --sc-item-bg-color: var(--color-accent-surface-elevation-01); + padding: var(--size-12) var(--size-16); } a { text-decoration: underline; &:hover { - --item__bg-color: var(--item__bg-color--hover); - --item__border-color: var(--item__border-color--hover); - --item__color: var(--item__color--hover); + --item-bg-color: var(--color-accent-item-selected); + --item-color: var(--color-text-primary-hover); } &:active { - --item__bg-color: var(--item__bg-color--selected); - --item__border-color: var(--item__border-color--selected); - --item__color: var(--item__color--selected); + --item-bg-color: var(--color-accent-item-selected); + --item-color: var(--color-text-primary-default); } } } @@ -39,17 +36,16 @@ // container-* // --bg-color-container-inline-size: Used to customize inline size, if you want other value than 100%. .background-color-container { - $afterPaddingBlock: var(--mer-spacing--md); - $afterFontSize: var(--font-size-body-m); + $afterPaddingBlock: var(--size-16); + $afterFontSize: var(--font-size-body-medium); $afterBlockSize: calc(($afterPaddingBlock * 2) + $afterFontSize); inline-size: var(--bg-color-container-inline-size, 100%); position: relative; - padding: var(--mer-spacing--lg); - border: 1px dashed var(--mer-border-color__on-surface); - border-radius: var(--mer-spacing--2xs); + padding: var(--size-24); + border-radius: var(--size-4); display: grid; grid-template-rows: max-content 1fr; - gap: var(--mer-spacing--lg); + gap: var(--size-24); justify-content: center; &__caption { @@ -59,25 +55,29 @@ .block-control-slot { // These styles should replicate a control styles (.input, .combo-box...) - font-size: var(--font-size-body-m); + font-size: var(--font-size-body-medium); line-height: var(--line-height-tight); - border: var(--control__border-width) dashed var(--control__border-color); - border-radius: var(--control__border-radius); - color: var(--control__color); - padding-block: var(--control__padding-block); - padding-inline: var(--control__padding-inline); + border: var(--control-border-width) dashed var(--control-border-color); + border-radius: var(--control-border-radius); + color: var(--control-color); + padding-block: var(--control-padding-block); + padding-inline: var(--control-padding-inline); text-align: center; } .elevation-box { + --elevation-border-color: var( + --color-border-surface-on-elevation-01 + ); // default for surface background. grid-template-columns: 1fr; - margin-block-start: var(--mer-spacing--md, var(--spacing--l)); - padding: var(--mer-spacing--md, var(--spacing--l)); + margin-block-start: var(--size-16, var(--spacing--l)); + padding: var(--size-16, var(--spacing--l)); + border: var(--size-1) dashed var(--elevation-border-color); } .place-center { display: grid; place-content: center; - padding: 64px; - border: 1px dashed var(--mer-border-color__on-surface); + padding: var(--size-64); + border: var(--size-1) dashed var(--color-border-neutral-default); } diff --git a/packages/showcase/src/user-controls/copy-code/copy-code.scss b/packages/showcase/src/user-controls/copy-code/copy-code.scss index 67b87040e..1034852c1 100644 --- a/packages/showcase/src/user-controls/copy-code/copy-code.scss +++ b/packages/showcase/src/user-controls/copy-code/copy-code.scss @@ -2,9 +2,9 @@ copy-code { display: contents; & > .tab { - border: var(--mer-border__width--sm, 1px) solid - var(--mer-surface__elevation--03, var(--border-color__mild)); - border-radius: var(--mer-border__radius--sm); + border: var(--size-1, 1px) solid + var(--color-accent-surface-elevation-03, var(--border-color__mild)); + border-radius: var(--size-4); min-block-size: 75px; // Necessary to avoid CLS on the initial load // TODO: There is a bug in the browser with content-visibility: hidden, @@ -21,22 +21,22 @@ copy-code { & > .code { border: unset; min-block-size: 36px; // Necessary to avoid CLS on the initial load - margin-block: 1px; + margin-block: var(--size-1); } & > .button-icon-only { position: absolute; - inset-block-start: 4px; - inset-inline-end: 4px; - border: 1px solid; + inset-block-start: var(--size-4); + inset-inline-end: var(--size-4); + border: var(--size-1) solid; } } .copy-code-css { - border: var(--mer-border__width--sm, 1px) solid - var(--mer-surface__elevation--03, var(--border-color__mild)); - border-radius: var(--mer-border__radius--sm); - margin-block-start: var(--mer-spacing--sm); + border: var(--sizes-1, 1px) solid + var(--color-accent-surface-elevation-03, var(--border-color__mild)); + border-radius: var(--size-4); + margin-block-start: var(--size-12); } .copy-code__label { @@ -47,16 +47,16 @@ copy-code { display: grid; grid-auto-flow: column; inline-size: max-content; - gap: var(--mer-spacing--sm); + gap: var(--size-12); - padding-inline-end: var(--mer-spacing--sm); + padding-inline-end: var(--size-12); &-separator { block-size: 100%; - inline-size: 1px; + inline-size: var(--size-1); margin: 0; padding: 0; border: unset; - background-color: var(--mer-border-color__on-elevation--01); + background-color: var(--color-accent-surface-elevation-01); } } diff --git a/packages/showcase/src/user-controls/page-filters/page-filters.ng.html b/packages/showcase/src/user-controls/page-filters/page-filters.ng.html index 7365008dc..bc04d4af7 100644 --- a/packages/showcase/src/user-controls/page-filters/page-filters.ng.html +++ b/packages/showcase/src/user-controls/page-filters/page-filters.ng.html @@ -1,16 +1,64 @@ -@if (filtersService.renders() && rendersArray().length !== 0) { -
      - @for (inputEntry of rendersArray(); track inputEntry[0]) { -
    1. - -
    2. - } -
    -} +@if (filtersService.renders() && rendersArray().length !== 0) { @if (filterClosed) { + +} @else { +
    + + + + +
      + @for (inputEntry of rendersArray(); track inputEntry[0]) { + + + @let isDisabled = !inputEntry[1].render(); + +
    1. + {{inputEntry[1].name}} + +
    2. + } +
    +
    + + +
    +
    +} } diff --git a/packages/showcase/src/user-controls/page-filters/page-filters.ng.ts b/packages/showcase/src/user-controls/page-filters/page-filters.ng.ts index 988c2406c..aa6a3828d 100644 --- a/packages/showcase/src/user-controls/page-filters/page-filters.ng.ts +++ b/packages/showcase/src/user-controls/page-filters/page-filters.ng.ts @@ -7,9 +7,14 @@ import { inject, ViewEncapsulation } from "@angular/core"; -import { Router } from "@angular/router"; -import type { ChCheckboxCustomEvent } from "@genexus/chameleon-controls-library"; + +import { Router, RouterModule } from "@angular/router"; +import type { + ChCheckboxCustomEvent, + ChEditCustomEvent +} from "@genexus/chameleon-controls-library"; import { PageFiltersService } from "../../services/page-filters.service"; +import { getIconPath } from "@genexus/mercury"; @Component({ selector: "page-filters", @@ -17,11 +22,30 @@ import { PageFiltersService } from "../../services/page-filters.service"; styleUrl: "./page-filters.scss", changeDetection: ChangeDetectionStrategy.OnPush, schemas: [CUSTOM_ELEMENTS_SCHEMA], - encapsulation: ViewEncapsulation.None + encapsulation: ViewEncapsulation.None, + imports: [RouterModule] }) export class PageFiltersComponent { + CHEVRON_RIGHT_ICON = getIconPath({ + category: "navigation", + name: "chevron-right", + colorType: "primary" + }); + FILTERS_ICON = getIconPath({ + category: "system", + name: "filters", + colorType: "primary" + }); + router = inject(Router); filtersService = inject(PageFiltersService); + allCheckboxesChecked = computed(() => + this.rendersArray().every(([, value]) => value.render()) + ); + buttonLabel = computed(() => + this.allCheckboxesChecked() ? "Clear all" : "Check all" + ); + filterClosed = false; rendersArray = computed(() => this.filtersService.renders() @@ -40,17 +64,54 @@ export class PageFiltersComponent { // Update the rendered sections. If one section belongs to the // `hiddenFieldsSet`, the section must not be rendered - this.rendersArray().forEach(filter => - filter[1].render.set(!hiddenFieldsSet.has(filter[0])) - ); + this.rendersArray().forEach(filter => { + filter[1].render.set(!hiddenFieldsSet.has(filter[0])); + }); }); } + hideFilter = () => { + this.filterClosed = true; + }; + showFilter = () => { + this.filterClosed = false; + }; + + toggleAllCheckboxes = () => { + if (this.allCheckboxesChecked()) { + // Uncheck all + this.rendersArray().forEach(filter => { + filter[1].render.set(false); + }); + } else { + // Check all + this.rendersArray().forEach(filter => { + filter[1].render.set(true); + }); + } + }; + + updateFilteredInput = (event: ChEditCustomEvent) => { + const filterString = event.detail.toLowerCase().trim(); + const filterValuesWords = filterString.split(" "); + + if (filterString === "") { + this.rendersArray().forEach(filter => { + filter[1].render.set(true); + }); + } else { + this.rendersArray().forEach(filter => { + const name = filter[1].name.toLowerCase(); + const renderSet = filterValuesWords.some(word => name.includes(word)); + + filter[1].render.set(renderSet); + }); + } + }; + updateRenderedInput = (linkId: string) => (event: ChCheckboxCustomEvent) => { - this.filtersService - .renders()! - [linkId]!.render.set(event.detail === "true"); + this.filtersService.renders()![linkId]!.render.set(event.detail === "true"); let hiddenInputsQueryParam = ""; @@ -65,5 +126,48 @@ export class PageFiltersComponent { queryParams: { hiddenFields: hiddenInputsQueryParam }, queryParamsHandling: "merge" // Conserve other query parameters }); + + if (this.allCheckboxesChecked()) { + console.log("All checkboxes are checked"); + } else { + console.log("Not all checkboxes are checked"); + } }; + + scrollTo(id: string, event: Event) { + event.preventDefault(); + const target = document.getElementById(id); + const prefersReducedMotion = window.matchMedia( + "(prefers-reduced-motion: reduce)" + ).matches; + const fancyModeIsOn = true; // TODO: Implement fancy mode switch + const scrollIntoViewBehavior = + prefersReducedMotion && !fancyModeIsOn ? "instant" : "smooth"; + const applyFocusOnAnchor = prefersReducedMotion && !fancyModeIsOn; + + if (target) { + const sectionElement = target.parentElement; // Expected to be a section element + if (!sectionElement) { + return; + } + const targetFocusableElement = target.querySelector( + ":scope > a" + ) as HTMLAnchorElement | null; + history.replaceState(null, "", `${location.pathname}${location.search}#${id}`); + + sectionElement.scrollIntoView({ + behavior: scrollIntoViewBehavior, + block: "start" + }); + if (applyFocusOnAnchor) { + targetFocusableElement?.focus?.(); + } else { + // TODO: targetFocusableElement?.focus?.() doesn't work well with smooth scroll. + // focus should be applied after the scroll is completed, and the timing is different + // across browsers, and there is no native event to know when the scroll is completed. + // On the other hand, if prefersReducedMotion is turned off, we can asumme that the user + // is not using a screen reader.In this case we don't care much about applying focus(). + } + } + } } diff --git a/packages/showcase/src/user-controls/page-filters/page-filters.scss b/packages/showcase/src/user-controls/page-filters/page-filters.scss index 75c1904bb..4d32cab9b 100644 --- a/packages/showcase/src/user-controls/page-filters/page-filters.scss +++ b/packages/showcase/src/user-controls/page-filters/page-filters.scss @@ -3,24 +3,76 @@ page-filters { } .filters { + $commonPadding: var(--size-16); display: grid; - gap: var(--mer-spacing--xs, var(--spacing--m)); + gap: var(--size-8); position: absolute; - inset-block-start: calc(100% + var(--mer-spacing--xs, var(--spacing--m))); + inset-block-start: calc(100% + var(--size-8)); inset-inline-end: 8px; // Due to the border-width of the app header - padding: var(--mer-spacing--md, var(--spacing--l)); + padding: var(--size-16); margin: 0; margin-inline-end: -1px; - border: 1px solid - var(--mer-border-color__on-elevation--01, var(--border-color__mild)); - border-radius: var(--mer-border__radius--sm, var(--border-radius--m)); + border: var(--size-1) solid var(--color-accent-surface-elevation-01); + border-radius: var(--size-4); + max-block-size: calc(100dvh - 78px - var(--size-8)); + transition: transform 0s ease-in-out; +} + +.filters, +.filters__open-filters-button { + position: fixed; + inset-block-start: calc(var(--size-8) + var(--size-48)); + inset-inline-end: var(--size-12); +} + +.filters--hidden { + display: none !important; +} +.filters__list { + display: grid; + gap: var(--size-8); + padding-inline-start: 0; + margin-block-start: var(--size-16); + margin-block-end: var(--size-12); + list-style: none; overflow: clip auto; - max-block-size: calc(100dvh - 60px - var(--mer-spacing--xs, var(--spacing--m))); + max-block-size: calc(100dvh - 60px - var(--size-8)); // This is necessary since the Tabular Grid has z-index in its column headers z-index: 100; } -.filters-checkbox { - display: contents; +.filters__filter { + margin-inline-end: var(--size-12); +} + +.filters__list-item { + display: flex; + gap: var(--size-18); + align-items: center; + justify-content: space-between; +} + +// TODO: Links styles should be defined on Mercury +.filters__link:enabled { + color: var(--color-text-primary-default); +} +.filters__link:hover { + color: var(--color-text-primary-hover); + text-decoration: underline; +} +.filters__link:active { + color: var(--color-text-primary-pressed); +} +.filters__link-disabled { + color: var(--color-text-neutral-disabled); + pointer-events: none; +} + +.filters__buttons-wrapper { + justify-content: space-between; + padding-inline-end: var(--size-12); +} +.filters__toggle-all-button { + padding-inline-start: 0 !important; // force start vertical alignment } diff --git a/scripts/clear-showcase.js b/scripts/clear-showcase.js new file mode 100644 index 000000000..47fbd165c --- /dev/null +++ b/scripts/clear-showcase.js @@ -0,0 +1,15 @@ +// clear-showcase.js +import fs from "fs"; + +// TODO: Understand why it is required to clear these folders when changes on +// /common are made and fix it, so that this script is not even required. +const paths = ["./packages/showcase/.angular", "./packages/showcase/.mercury"]; + +for (const path of paths) { + try { + fs.rmSync(path, { recursive: true, force: true }); + console.log(`Removed: ${path}`); + } catch (err) { + console.error(`Error removing ${path}:`, err); + } +}