@genesislcap/rapid-design-system 14.446.2 → 14.447.0

package/dist/esm/button/button.styles.js

@@ -3,50 +3,159 @@ import { css } from '@microsoft/fast-element';
 import { appearanceBehavior } from '../utils';
 const rapidPrimaryStyles = css `
   :host([appearance='primary']) {
-    background: color-mix(in srgb, var(--accent-fill-rest), transparent 50%);
-    border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
+    background: var(--accent-fill-rest);
+    color: var(--foreground-on-accent-rest);
   }
 
   :host([appearance='primary']:hover) {
-    background: var(--accent-fill-rest);
+    background: var(--accent-fill-hover);
+    color: var(--foreground-on-accent-hover);
+  }
+
+  :host([appearance='primary']:active) {
+    background: var(--accent-fill-active);
+    color: var(--foreground-on-accent-active);
   }
 
   :host([appearance='primary'][disabled]),
   :host([appearance='primary'][disabled]):hover,
   :host([appearance='primary'][disabled]):active {
-    background: color-mix(in srgb, var(--accent-fill-rest), transparent 70%);
-    border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
-    color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);
-    opacity: 100%;
+    opacity: 50%;
+  }
+`;
+const rapidSecondaryStyles = css `
+  :host([appearance='secondary']) {
+    background: var(--secondary-fill-rest);
+    color: contrast-color(var(--secondary-fill-rest));
   }
 
-  :host([appearance='primary']:active) {
-    background: color-mix(in srgb, var(--accent-fill-rest), transparent 70%);
-    border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
+  :host([appearance='secondary']:hover) {
+    background: var(--secondary-fill-hover);
+    color: contrast-color(var(--secondary-fill-hover));
+  }
+
+  :host([appearance='secondary']:active) {
+    background: var(--secondary-fill-active);
+    color: contrast-color(var(--secondary-fill-active));
+  }
+
+  :host([appearance='secondary'][disabled]),
+  :host([appearance='secondary'][disabled]):hover,
+  :host([appearance='secondary'][disabled]):active {
+    opacity: 50%;
+  }
+`;
+const rapidNeutralStyles = css `
+  :host([appearance='neutral']) {
+    background: var(--neutral-fill-rest);
+    border: 0;
+    color: var(--neutral-foreground-rest);
+  }
+
+  :host([appearance='neutral']:hover) {
+    background: var(--neutral-fill-hover);
+  }
+
+  :host([appearance='neutral']:active) {
+    background: var(--neutral-fill-active);
+  }
+
+  :host([appearance='neutral'][disabled]),
+  :host([appearance='neutral'][disabled]):hover,
+  :host([appearance='neutral'][disabled]):active {
+    opacity: 50%;
   }
 `;
 const rapidDangerStyles = css `
   :host([appearance='danger']) {
-    background: color-mix(in srgb, var(--error-color), transparent 50%);
-    border: calc(var(--stroke-width) * 1px) solid var(--error-color);
+    background: var(--error-fill-rest);
+    color: contrast-color(var(--error-fill-rest));
+    border: 0;
   }
 
   :host([appearance='danger']:hover) {
-    background: var(--error-color);
+    background: var(--error-fill-hover);
+    color: contrast-color(var(--error-fill-hover));
+  }
+
+  :host([appearance='danger']:active) {
+    background: var(--error-fill-active);
+    color: contrast-color(var(--error-fill-active));
   }
 
   :host([appearance='danger'][disabled]),
   :host([appearance='danger'][disabled]):hover,
   :host([appearance='danger'][disabled]):active {
-    background: color-mix(in srgb, var(--error-color), transparent 70%);
-    border: calc(var(--stroke-width) * 1px) solid var(--error-color);
-    color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);
-    opacity: 100%;
+    opacity: 50%;
+  }
+`;
+const rapidSuccessStyles = css `
+  :host([appearance='success']) {
+    background: var(--success-fill-rest);
+    color: contrast-color(var(--success-fill-rest));
+    border: 0;
   }
 
-  :host([appearance='danger']:active) {
-    background: color-mix(in srgb, var(--error-color), transparent 70%);
-    border: calc(var(--stroke-width) * 1px) solid var(--error-color);
+  :host([appearance='success']:hover) {
+    background: var(--success-fill-hover);
+    color: contrast-color(var(--success-fill-hover));
+  }
+
+  :host([appearance='success']:active) {
+    background: var(--success-fill-active);
+    color: contrast-color(var(--success-fill-active));
+  }
+
+  :host([appearance='success'][disabled]),
+  :host([appearance='success'][disabled]):hover,
+  :host([appearance='success'][disabled]):active {
+    opacity: 50%;
+  }
+`;
+const rapidWarningStyles = css `
+  :host([appearance='warning']) {
+    background: var(--warning-fill-rest);
+    color: contrast-color(var(--warning-fill-rest));
+    border: 0;
+  }
+
+  :host([appearance='warning']:hover) {
+    background: var(--warning-fill-hover);
+    color: contrast-color(var(--warning-fill-hover));
+  }
+
+  :host([appearance='warning']:active) {
+    background: var(--warning-fill-active);
+    color: contrast-color(var(--warning-fill-active));
+  }
+
+  :host([appearance='warning'][disabled]),
+  :host([appearance='warning'][disabled]):hover,
+  :host([appearance='warning'][disabled]):active {
+    opacity: 50%;
+  }
+`;
+const rapidTertiaryStyles = css `
+  :host([appearance='tertiary']) {
+    background: var(--tertiary-fill-rest);
+    color: contrast-color(var(--tertiary-fill-rest));
+    border: 0;
+  }
+
+  :host([appearance='tertiary']:hover) {
+    background: var(--tertiary-fill-hover);
+    color: contrast-color(var(--tertiary-fill-hover));
+  }
+
+  :host([appearance='tertiary']:active) {
+    background: var(--tertiary-fill-active);
+    color: contrast-color(var(--tertiary-fill-active));
+  }
+
+  :host([appearance='tertiary'][disabled]),
+  :host([appearance='tertiary'][disabled]):hover,
+  :host([appearance='tertiary'][disabled]):active {
+    opacity: 50%;
   }
 `;
 const rapidPrimaryOutlineStyles = css `
@@ -56,42 +165,70 @@ const rapidPrimaryOutlineStyles = css `
   }
 
   :host([appearance='primary-outline']:hover) {
-    background: color-mix(in srgb, var(--accent-fill-rest), transparent 50%);
+    background: var(--accent-fill-hover);
+    color: contrast-color(var(--accent-fill-hover));
+  }
+
+  :host([appearance='primary-outline']:active) {
+    background: var(--accent-fill-active);
+    color: contrast-color(var(--accent-fill-active));
   }
 
   :host([appearance='primary-outline'][disabled]),
   :host([appearance='primary-outline'][disabled]):hover,
   :host([appearance='primary-outline'][disabled]):active {
+    opacity: 50%;
+  }
+`;
+const rapidSecondaryOutlineStyles = css `
+  :host([appearance='secondary-outline']) {
     background: none;
-    border: calc(var(--stroke-width) * 1px) solid var(--accent-fill-rest);
-    color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);
-    opacity: 100%;
+    border: calc(var(--stroke-width) * 1px) solid var(--secondary-fill-rest);
+  }
+
+  :host([appearance='secondary-outline']:hover) {
+    background: var(--secondary-fill-hover);
+    color: contrast-color(var(--secondary-fill-hover));
+  }
+
+  :host([appearance='secondary-outline']:active) {
+    background: var(--secondary-fill-active);
+    color: contrast-color(var(--secondary-fill-active));
+  }
+
+  :host([appearance='secondary-outline'][disabled]),
+  :host([appearance='secondary-outline'][disabled]):hover,
+  :host([appearance='secondary-outline'][disabled]):active {
+    opacity: 50%;
   }
 `;
 const rapidNeutralOutlineStyles = css `
   :host([appearance='neutral-outline']) {
     background: none;
-    border: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-rest);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
   }
 
   :host([appearance='neutral-outline']:hover) {
-    background: color-mix(in srgb, var(--neutral-fill-rest), transparent 50%);
+    background: var(--neutral-fill-hover);
+    color: contrast-color(var(--neutral-fill-hover));
+  }
+
+  :host([appearance='neutral-outline']:active) {
+    background: var(--neutral-fill-active);
+    color: contrast-color(var(--neutral-fill-active));
   }
 
   :host([appearance='neutral-outline'][disabled]),
   :host([appearance='neutral-outline'][disabled]):hover,
   :host([appearance='neutral-outline'][disabled]):active {
-    background: none;
-    border: calc(var(--stroke-width) * 1px) solid var(--neutral-fill-rest);
-    color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);
-    opacity: 100%;
+    opacity: 50%;
   }
 `;
 const rapidLinkStyles = css `
   :host([appearance='link']) {
     background: none;
     border: none;
-    color: color-mix(in srgb, var(--accent-fill-rest), transparent 35%);
+    color: var(--accent-foreground-rest);
   }
 
   :host([appearance='link']) .control {
@@ -99,16 +236,13 @@ const rapidLinkStyles = css `
   }
 
   :host([appearance='link']:hover) {
-    color: var(--accent-fill-rest);
-    background: none;
+    color: var(--accent-foreground-hover);
   }
 
   :host([appearance='link'][disabled]),
   :host([appearance='link'][disabled]):hover,
   :host([appearance='link'][disabled]):active {
-    background: none;
-    color: color-mix(in srgb, var(--accent-fill-rest), transparent 35%);
-    opacity: 100%;
+    opacity: 50%;
   }
 `;
 const baseStyles = (context, definition) => css `
@@ -116,7 +250,7 @@ const baseStyles = (context, definition) => css `
     font-weight: 500;
     color: var(--neutral-foreground-rest);
     box-sizing: border-box;
-    font-size: var(--type-ramp-minus-1-font-size);
+    font-size: var(--type-ramp-base-font-size);
     height: calc(((var(--base-height-multiplier) + var(--density)) * var(--design-unit) - 4) * 1px);
   }
 
@@ -162,8 +296,12 @@ const baseStyles = (context, definition) => css `
     color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 50%);
     opacity: 100%;
   }
+
+  :host([appearance='accent']) {
+    color: contrast-color(var(--accent-fill-rest));
+  }
 `;
 export const rapidButtonStyles = (context, definition) => css `
     ${foundationButtonStyles(context, definition)}
     ${baseStyles(context, definition)}
-  `.withBehaviors(appearanceBehavior('primary', rapidPrimaryStyles), appearanceBehavior('danger', rapidDangerStyles), appearanceBehavior('primary-outline', rapidPrimaryOutlineStyles), appearanceBehavior('neutral-outline', rapidNeutralOutlineStyles), appearanceBehavior('link', rapidLinkStyles));
+  `.withBehaviors(appearanceBehavior('primary', rapidPrimaryStyles), appearanceBehavior('secondary', rapidSecondaryStyles), appearanceBehavior('tertiary', rapidTertiaryStyles), appearanceBehavior('neutral', rapidNeutralStyles), appearanceBehavior('danger', rapidDangerStyles), appearanceBehavior('success', rapidSuccessStyles), appearanceBehavior('warning', rapidWarningStyles), appearanceBehavior('primary-outline', rapidPrimaryOutlineStyles), appearanceBehavior('secondary-outline', rapidSecondaryOutlineStyles), appearanceBehavior('neutral-outline', rapidNeutralOutlineStyles), appearanceBehavior('link', rapidLinkStyles));

package/dist/esm/dialog/dialog.styles.js

@@ -1,11 +1,9 @@
 import { foundationDialogStyles } from '@genesislcap/foundation-ui';
-import { neutralForegroundRest, neutralLayer2 } from '@microsoft/fast-components';
+import { neutralForegroundRest } from '@microsoft/fast-components';
 import { css } from '@microsoft/fast-element';
 export const rapidDialogStyles = css `
   ${foundationDialogStyles}
   :host {
-    --dialog-background: ${neutralLayer2};
-
     font-family: var(--body-font);
     font-size: var(--type-ramp-base-font-size);
     line-height: var(--type-ramp-base-line-height);
@@ -20,6 +18,7 @@ export const rapidDialogStyles = css `
     text-align: left;
     line-height: normal;
     box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);
+    background-color: var(--dialog-background, var(--neutral-layer-1));
   }
 
   .top {

package/dist/esm/flyout/flyout.styles.js

@@ -3,7 +3,7 @@ import { css } from '@microsoft/fast-element';
 export const rapidFlyoutStyles = css `
   ${foundationFlyoutStyles}
   div.flyout {
-    background-color: var(--neutral-layer-2);
+    background-color: var(--neutral-layer-1);
     border-color: var(--neutral-stroke-rest);
     color: var(--neutral-foreground-rest);
     padding: calc(var(--design-unit) * 4px);

package/dist/react.cjs

@@ -93,14 +93,14 @@ function _mergeRefs(...refs) {
   };
 }
 
-const Accordion = React.forwardRef(function Accordion(props, ref) {
+const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
 });
 
-const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
+const Accordion = React.forwardRef(function Accordion(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
 });
 
 const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
@@ -775,8 +775,8 @@ const SystemHealthOverlay = React.forwardRef(function SystemHealthOverlay(props,
 });
 
 module.exports = {
-  Accordion,
   AccordionItem,
+  Accordion,
   ActionsMenu,
   AiCriteriaSearch,
   AiIndicator,

package/dist/react.mjs

@@ -91,14 +91,14 @@ function _mergeRefs(...refs) {
   };
 }
 
-export const Accordion = React.forwardRef(function Accordion(props, ref) {
+export const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
 });
 
-export const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
+export const Accordion = React.forwardRef(function Accordion(props, ref) {
   const { children, ...rest } = props;
-  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-accordion-item', { ...rest, ref }, children);
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-accordion', { ...rest, ref }, children);
 });
 
 export const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/rapid-design-system",
   "description": "Rapid Design System",
-  "version": "14.446.2",
+  "version": "14.447.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -35,17 +35,17 @@
   },
   "devDependencies": {
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/genx": "14.446.2",
-    "@genesislcap/rollup-builder": "14.446.2",
-    "@genesislcap/ts-builder": "14.446.2",
-    "@genesislcap/uvu-playwright-builder": "14.446.2",
-    "@genesislcap/vite-builder": "14.446.2",
-    "@genesislcap/webpack-builder": "14.446.2"
+    "@genesislcap/genx": "14.447.0",
+    "@genesislcap/rollup-builder": "14.447.0",
+    "@genesislcap/ts-builder": "14.447.0",
+    "@genesislcap/uvu-playwright-builder": "14.447.0",
+    "@genesislcap/vite-builder": "14.447.0",
+    "@genesislcap/webpack-builder": "14.447.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-logger": "14.446.2",
-    "@genesislcap/foundation-ui": "14.446.2",
-    "@genesislcap/foundation-utils": "14.446.2",
+    "@genesislcap/foundation-logger": "14.447.0",
+    "@genesislcap/foundation-ui": "14.447.0",
+    "@genesislcap/foundation-utils": "14.447.0",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -73,5 +73,5 @@
       "require": "./dist/react.cjs"
     }
   },
-  "gitHead": "d52b7229e3b264f51e437aadab28c5befdecae9c"
+  "gitHead": "71ee8a3b6d2cd6acf2b0fb27782c5d82b51b9dca"
 }