feat(mode-directive, mode-island): DLT-3067 add v-dt-mode directive

apps/dialtone-documentation/docs/.vuepress/baseComponents/FontUtilitiesNotice.vue

@@ -3,7 +3,7 @@
     kind="warning"
     hide-close
     class="d-wmx100p d-my16"
-    title="Use DtText in favor CSS Utilities"
+    title="Use DtText over CSS Utilities"
   >
     <template #default>
       Reach for the

apps/dialtone-documentation/docs/.vuepress/theme/assets/less/dialtone-syntax.less

@@ -3,6 +3,14 @@
  * Based on dabblet (http://dabblet.com)
  */
 
+
+:root {
+  --code-c-text: var(--dt-color-foreground-secondary);
+  --code-c-bg: blue;
+  --code-c-highlight-bg:var(--dt-color-blue-800);
+  --code-c-line-number: gray;
+}
+
 div[class*="language-"] {
 	margin: var(--dt-size-500) 0;
 	padding: var(--dt-size-500);

apps/dialtone-documentation/docs/components/breadcrumbs.md

@@ -72,30 +72,35 @@ showHtmlWarning />
 ### Inverted
 
 <dt-notice title="Deprecated" kind="error" class="d-wmx100p d-my16">
-  The <code>inverted</code> prop has been deprecated in favor of using <dt-link to="mode-island.html">DtModeIsland</dt-link> as a wrapper.
+  The <code>inverted</code> prop has been deprecated. Use the
+  <dt-link to="mode-island.html#inverting">v-dt-mode directive</dt-link>
+  instead, or <dt-link to="mode-island.html#dtmodeisland-component">DtModeIsland</dt-link>
+  when no natural container element exists.
 </dt-notice>
 
-In place of the <code>inverted</code> prop, use the <dt-link to="mode-island.html">DtModeIsland</dt-link> component as a wrapper.
+In place of the `inverted` prop, use the [v-dt-mode directive](mode-island.html#inverting) on the component element.
 
 <code-well-header>
-  <dt-mode-island class="d-p16 d-bar8">
+  <div class="d-bgc-contrast">
     <dt-breadcrumbs
+      v-dt-mode:invert
       ref="invertedBreadcrumbsExample"
+      class="d-p16 d-bar8"
       :breadcrumbs="[
         { href: '#', label: 'Root' },
         { href: '#', label: 'Section' },
         { href: '#', label: 'Current Page', selected: true },
       ]"
     />
-  </dt-mode-island>
+  </div>
 </code-well-header>
 
 <code-example-tabs
 :htmlCode='() => $refs.invertedBreadcrumbsExample'
 vueCode='
-<dt-mode-island>
-  <dt-breadcrumbs :breadcrumbs="breadcrumbs" />
-</dt-mode-island>
+<div class="d-bgc-contrast">
+  <dt-breadcrumbs v-dt-mode:invert :breadcrumbs="breadcrumbs" />
+</div>
 '
 showHtmlWarning />
 

apps/dialtone-documentation/docs/components/button.md

@@ -229,7 +229,6 @@ Buttons can be set to active state using the `active` prop or `.d-btn--active` D
     <dt-button active>Place Call</dt-button>
     <dt-button kind="danger" importance="clear" active>Place Call</dt-button>
     <dt-button kind="positive" importance="clear" active>Place Call</dt-button>
-    <dt-button kind="inverted" active>Place Call</dt-button>
     <dt-button kind="muted" active>Place Call</dt-button>
   </dt-stack>
 </code-well-header>
@@ -241,7 +240,6 @@ vueCode='
 <dt-button active>Place Call</dt-button>
 <dt-button kind="danger" importance="clear" active>Place Call</dt-button>
 <dt-button kind="positive" importance="clear" active>Place Call</dt-button>
-<dt-button kind="inverted" active>Place Call</dt-button>
 <dt-button kind="muted" active>Place Call</dt-button>
 '
 showHtmlWarning />
@@ -315,6 +313,49 @@ vueCode='
 '
 showHtmlWarning />
 
+### Inverted
+
+<dt-notice
+  title="Deprecated"
+  kind="info"
+  class="d-wmx100p d-my16"
+>
+  <code>kind="inverted"</code> has been deprecated. Use the <dt-link to="mode-island.html#inverting">v-dt-mode directive</dt-link> instead, or <dt-link to="mode-island.html#dtmodeisland-component">DtModeIsland</dt-link>.
+</dt-notice>
+
+Use the [v-dt-mode directive](mode-island.html#inverting) in place of `kind="inverted"` on the component element. The previous `inverted` variant of DtButton was limited to a single presentation style. The directive now makes every combination available as an inverted style.
+
+<code-well-header>
+  <dt-toggle v-model="isInverted" size="sm" wrapperClass="d-g8 d-m-auto d-pb8">Inverted</dt-toggle>
+  <dt-stack gap="400" ref="invertedAll">
+    <dt-stack gap="400" :direction="{ 'default': 'column', 'md': 'row' }">
+      <dt-button v-dt-mode:invert="isInverted"> Place Call </dt-button>
+      <dt-button v-dt-mode:invert="isInverted" importance="outlined"> Place Call </dt-button>
+      <dt-button v-dt-mode:invert="isInverted" importance="clear"> Place Call </dt-button>
+    </dt-stack>
+    <dt-stack gap="400" :direction="{ 'default': 'column', 'md': 'row' }">
+      <dt-button v-dt-mode:invert="isInverted" kind="danger"> Place Call </dt-button>
+      <dt-button v-dt-mode:invert="isInverted" kind="danger" importance="outlined"> Place Call </dt-button>
+      <dt-button v-dt-mode:invert="isInverted" kind="danger" importance="clear"> Place Call </dt-button>
+    </dt-stack>
+    <dt-stack gap="400" :direction="{ 'default': 'column', 'md': 'row' }">
+      <dt-button v-dt-mode:invert="isInverted" kind="positive">Place Call</dt-button>
+      <dt-button v-dt-mode:invert="isInverted" kind="positive" importance="outlined">Place Call</dt-button>
+      <dt-button v-dt-mode:invert="isInverted" kind="positive" importance="clear">Place Call</dt-button>
+    </dt-stack>
+    <dt-stack gap="400" :direction="{ 'default': 'column', 'md': 'row' }">
+      <dt-button v-dt-mode:invert="isInverted" kind="muted" importance="clear"> Place Call </dt-button>
+      <dt-button v-dt-mode:invert="isInverted" kind="muted" importance="outlined"> Place Call </dt-button>
+    </dt-stack>
+  </dt-stack>
+</code-well-header>
+<code-example-tabs
+:htmlCode='() => $refs.invertedAll'
+vueCode='
+<dt-button v-dt-mode:invert {props}>Place Call</dt-button>
+'
+showHtmlWarning />
+
 ## Navigation
 
 DtButton can render as an `<a>` or `<router-link>` for cases where you need button styling with navigation behavior.
@@ -430,40 +471,6 @@ vueCode='
 '
 />
 
-### Inverted
-
-<dt-notice
-  title="Deprecated"
-  kind="error"
-  class="d-wmx100p d-my16"
->
-  <code>kind="inverted"</code> has been deprecated in favor of using <dt-link to="mode-island.html">DtModeIsland</dt-link> as a wrapper.
-</dt-notice>
-
-In place of <code>kind="inverted"</code>, use the <dt-link to="mode-island.html">DtModeIsland</dt-link> component as a wrapper.
-
-<code-well-header>
-  <dt-split-button
-    end-tooltip-text="More calling options"
-  >
-    Place call
-    <template #dropdownList>
-      <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 1 </dt-list-item>
-      <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 2 </dt-list-item>
-      <dt-list-item role="menuitem" navigation-type="arrow-keys"> Option 3 </dt-list-item>
-    </template>
-  </dt-split-button>
-</code-well-header>
-
-<code-example-tabs
-:htmlCode='() => $refs.modeIslandExample'
-vueCode='
-<dt-mode-island>
-  <dt-button {props}>Place Call</dt-button>
-</dt-mode-island>
-'
-showHtmlWarning />
-
 ## Sizes
 
 The default button size is `md`, but does not need to be explicitly specified.
@@ -742,32 +749,6 @@ Icon-only buttons are commonly used for toggling actions, navigation, or closing
         </template>
       </dt-button>
     </dt-stack>
-    <dt-stack direction="row" gap="400" class="d-bgc-contrast d-p8">
-      <dt-button v-dt-tooltip="`Tooltip`" kind="inverted" importance="clear">
-        <template #startIcon="{ iconSize }">
-          <dt-icon
-            name="phone"
-            :size="iconSize"
-          />
-        </template>
-      </dt-button>
-      <dt-button v-dt-tooltip="`Tooltip`" kind="inverted" importance="outlined">
-        <template #startIcon="{ iconSize }">
-          <dt-icon
-            name="phone"
-            :size="iconSize"
-          />
-        </template>
-      </dt-button>
-      <dt-button v-dt-tooltip="`Tooltip`" kind="inverted">
-        <template #startIcon="{ iconSize }">
-          <dt-icon
-            name="phone"
-            :size="iconSize"
-          />
-        </template>
-      </dt-button>
-    </dt-stack>
   </dt-stack>
 </code-well-header>
 
@@ -862,30 +843,6 @@ vueCode='
     />
   </template>
 </dt-button>
-<dt-button v-dt-tooltip="`Tooltip`" kind="inverted" importance="clear">
-  <template #startIcon="{ iconSize }">
-    <dt-icon
-      name="phone"
-      :size="iconSize"
-    />
-  </template>
-</dt-button>
-<dt-button v-dt-tooltip="`Tooltip`" kind="inverted" importance="outlined">
-  <template #startIcon="{ iconSize }">
-    <dt-icon
-      name="phone"
-      :size="iconSize"
-    />
-  </template>
-</dt-button>
-<dt-button v-dt-tooltip="`Tooltip`" kind="inverted">
-  <template #startIcon="{ iconSize }">
-    <dt-icon
-      name="phone"
-      :size="iconSize"
-    />
-  </template>
-</dt-button>
 '
 showHtmlWarning />
 
@@ -969,32 +926,6 @@ The following styles are available as a circle shape.
         </template>
       </dt-button>
     </dt-stack>
-    <dt-stack direction="row" gap="400" class="d-bgc-contrast d-p8">
-      <dt-button v-dt-tooltip="`Tooltip`" circle kind="inverted" importance="clear">
-        <template #startIcon="{ iconSize }">
-          <dt-icon
-            name="phone"
-            :size="iconSize"
-          />
-        </template>
-      </dt-button>
-      <dt-button v-dt-tooltip="`Tooltip`" circle kind="inverted" importance="outlined">
-        <template #startIcon="{ iconSize }">
-          <dt-icon
-            name="phone"
-            :size="iconSize"
-          />
-        </template>
-      </dt-button>
-      <dt-button v-dt-tooltip="`Tooltip`" circle kind="inverted">
-        <template #startIcon="{ iconSize }">
-          <dt-icon
-            name="phone"
-            :size="iconSize"
-          />
-        </template>
-      </dt-button>
-    </dt-stack>
   </dt-stack>
 </code-well-header>
 
@@ -1065,30 +996,6 @@ vueCode='
     />
   </template>
 </dt-button>
-<dt-button v-dt-tooltip="`Tooltip`" circle kind="inverted" importance="clear">
-  <template #startIcon="{ iconSize }">
-    <dt-icon
-      name="phone"
-      :size="iconSize"
-    />
-  </template>
-</dt-button>
-<dt-button v-dt-tooltip="`Tooltip`" circle kind="inverted" importance="outlined">
-  <template #startIcon="{ iconSize }">
-    <dt-icon
-      name="phone"
-      :size="iconSize"
-    />
-  </template>
-</dt-button>
-<dt-button v-dt-tooltip="`Tooltip`" circle kind="inverted">
-  <template #startIcon="{ iconSize }">
-    <dt-icon
-      name="phone"
-      :size="iconSize"
-    />
-  </template>
-</dt-button>
 '
 showHtmlWarning />
 
@@ -1391,4 +1298,5 @@ import { ref } from 'vue';
 import ButtonVariantsTable from '@baseComponents/ButtonVariantsTable.vue';
 
 const isDisabled = ref(true);
+const isInverted = ref(true);
 </script>