Skip to content

Commit f97efca

Browse files
francisrupertfrancisrupert
authored
feat(mode-directive, mode-island): DLT-3067 DLT-3078 DLT-3077 add v-dt-mode directive (#1109)
1 parent a50bc23 commit f97efca

67 files changed

Lines changed: 2251 additions & 855 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
kind="warning"
44
hide-close
55
class="d-wmx100p d-my16"
6-
title="Use DtText in favor CSS Utilities"
6+
title="Use DtText over CSS Utilities"
77
>
88
<template #default>
99
Reach for the

‎apps/dialtone-documentation/docs/.vuepress/baseComponents/tokens/TokenTable.vue‎

Lines changed: 98 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,105 @@
11
<template>
22
<div v-dt-scrollbar:never class="d-hmx464 d-bar8 d-ba d-bc-subtle">
3-
<dt-mode-island :mode="mode">
4-
<table class="d-table dialtone-doc-table">
5-
<thead class="d-bgc-primary d-ps-sticky d-zi-base1 d-t0">
6-
<tr>
7-
<th
8-
scope="col"
9-
class="d-p0 d-bbw0 d-tt-none"
10-
>
11-
<div class="d-p16 d-bb d-bbw1">
12-
Preview
13-
</div>
14-
</th>
15-
<th
16-
scope="col"
17-
class="d-p0 d-bbw0 d-tt-none"
18-
>
19-
<div class="d-p16 d-bb d-bbw1">
20-
Token Name
21-
</div>
22-
</th>
23-
<th
24-
v-if="showValue"
25-
scope="col"
26-
class="d-p0 d-bbw0 d-tt-none d-ta-right"
27-
>
28-
<div class="d-p16 d-bb d-bbw1">
29-
{{ tokenList ? "REM" : "Value" }}
30-
</div>
31-
</th>
32-
<th
33-
v-show="!!tokenList"
34-
scope="col"
35-
class="d-p0 d-bbw0"
36-
>
37-
<div class="d-p16 d-bb d-bbw1">
38-
PX
39-
</div>
40-
</th>
41-
</tr>
42-
</thead>
43-
<tbody>
44-
<tr
45-
v-for="({ exampleValue, exampleName, name, tokenValue, description, deprecated }) in shownTokens"
46-
:key="name"
47-
tabindex="0"
48-
@mouseenter="onEnterRow(name)"
49-
@mouseleave="onLeaveRow()"
50-
@focusin="onEnterRow(name)"
51-
@focusout="onLeaveRow()"
3+
<table v-dt-mode:[mode] class="d-bgc-primary d-table dialtone-doc-table">
4+
<thead class="d-bgc-primary d-ps-sticky d-zi-base1 d-t0">
5+
<tr>
6+
<th
7+
scope="col"
8+
class="d-p0 d-bbw0 d-tt-none"
529
>
53-
<td class="d-w72 sm:d-w128 d-box-content">
54-
<token-example
55-
:category="category"
56-
:name="exampleName || name"
57-
:value="exampleValue.toString()"
58-
:mode="mode"
59-
/>
60-
</td>
61-
<th scope="row">
62-
<dt-badge v-if="deprecated" type="critical" kind="label" text="Deprecated" />
63-
<dt-stack
64-
direction="row"
65-
gap="300"
66-
align="center"
67-
class="token-name"
68-
>
69-
<dt-text as="p" kind="label" size="md">
70-
{{ name }}
71-
</dt-text>
72-
<div class="d-w32">
73-
<dt-lazy-show :show="showCopyButton(name)">
74-
<copy-button
75-
v-if="!isSmallDevice"
76-
:text="name"
77-
aria-label="Copy Token"
78-
/>
79-
</dt-lazy-show>
80-
</div>
81-
</dt-stack>
82-
<dt-text kind="body" size="sm" tone="tertiary">
83-
{{ description }}
84-
</dt-text>
85-
<token-value
86-
v-if="isSmallDevice && showValue"
87-
:token-value="valueToString(tokenValue)"
88-
:tokens="tokens"
89-
/>
90-
</th>
91-
<td v-if="!isSmallDevice && showValue" class="d-ta-right d-wmx164">
92-
<dt-text as="span" kind="code" size="md" class="d-fc-blue-800">
93-
<token-value :token-value="valueToString(tokenValue)" :tokens="tokens" />
94-
</dt-text>
95-
</td>
96-
<td v-if="!!tokenList">
97-
<dt-text as="div" kind="code" size="md" class="d-docsite-code d-wmx264">
98-
{{ remToPixels(tokenValue) }}
10+
<div class="d-p16 d-bb d-bbw1">
11+
Preview
12+
</div>
13+
</th>
14+
<th
15+
scope="col"
16+
class="d-p0 d-bbw0 d-tt-none"
17+
>
18+
<div class="d-p16 d-bb d-bbw1">
19+
Token Name
20+
</div>
21+
</th>
22+
<th
23+
v-if="showValue"
24+
scope="col"
25+
class="d-p0 d-bbw0 d-tt-none d-ta-right"
26+
>
27+
<div class="d-p16 d-bb d-bbw1">
28+
{{ tokenList ? "REM" : "Value" }}
29+
</div>
30+
</th>
31+
<th
32+
v-show="!!tokenList"
33+
scope="col"
34+
class="d-p0 d-bbw0"
35+
>
36+
<div class="d-p16 d-bb d-bbw1">
37+
PX
38+
</div>
39+
</th>
40+
</tr>
41+
</thead>
42+
<tbody>
43+
<tr
44+
v-for="({ exampleValue, exampleName, name, tokenValue, description, deprecated }) in shownTokens"
45+
:key="name"
46+
tabindex="0"
47+
@mouseenter="onEnterRow(name)"
48+
@mouseleave="onLeaveRow()"
49+
@focusin="onEnterRow(name)"
50+
@focusout="onLeaveRow()"
51+
>
52+
<td class="d-w72 sm:d-w128 d-box-content">
53+
<token-example
54+
:category="category"
55+
:name="exampleName || name"
56+
:value="exampleValue.toString()"
57+
:mode="mode"
58+
/>
59+
</td>
60+
<th scope="row">
61+
<dt-badge v-if="deprecated" type="critical" kind="label" text="Deprecated" />
62+
<dt-stack
63+
direction="row"
64+
gap="300"
65+
align="center"
66+
class="token-name"
67+
>
68+
<dt-text as="p" kind="label" size="md">
69+
{{ name }}
9970
</dt-text>
100-
</td>
101-
</tr>
102-
</tbody>
103-
</table>
104-
</dt-mode-island>
71+
<div class="d-w32">
72+
<dt-lazy-show :show="showCopyButton(name)">
73+
<copy-button
74+
v-if="!isSmallDevice"
75+
:text="name"
76+
aria-label="Copy Token"
77+
/>
78+
</dt-lazy-show>
79+
</div>
80+
</dt-stack>
81+
<dt-text kind="body" size="sm" tone="tertiary">
82+
{{ description }}
83+
</dt-text>
84+
<token-value
85+
v-if="isSmallDevice && showValue"
86+
:token-value="valueToString(tokenValue)"
87+
:tokens="tokens"
88+
/>
89+
</th>
90+
<td v-if="!isSmallDevice && showValue" class="d-ta-right d-wmx164">
91+
<dt-text as="span" kind="code" size="md" class="d-fc-blue-800">
92+
<token-value :token-value="valueToString(tokenValue)" :tokens="tokens" />
93+
</dt-text>
94+
</td>
95+
<td v-if="!!tokenList">
96+
<dt-text as="div" kind="code" size="md" class="d-docsite-code d-wmx264">
97+
{{ remToPixels(tokenValue) }}
98+
</dt-text>
99+
</td>
100+
</tr>
101+
</tbody>
102+
</table>
105103
</div>
106104
</template>
107105

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@
33
* Based on dabblet (http://dabblet.com)
44
*/
55

6+
7+
:root {
8+
--code-c-text: var(--dt-color-foreground-secondary);
9+
--code-c-bg: blue;
10+
--code-c-highlight-bg:var(--dt-color-blue-800);
11+
--code-c-line-number: gray;
12+
}
13+
614
div[class*="language-"] {
715
margin: var(--dt-size-500) 0;
816
padding: var(--dt-size-500);

‎apps/dialtone-documentation/docs/.vuepress/views/ColorsCatalog.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
2-
<dt-mode-island
3-
:mode="mode"
2+
<div
3+
v-dt-mode:[mode]
44
class="d-p16 d-bgc-secondary"
55
>
66
<dt-stack as="section" gap="500">
@@ -14,7 +14,7 @@
1414
/>
1515
</div>
1616
</dt-stack>
17-
</dt-mode-island>
17+
</div>
1818
</template>
1919

2020
<script setup>

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

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -71,31 +71,35 @@ showHtmlWarning />
7171

7272
### Inverted
7373

74-
<dt-notice title="Deprecated" kind="error" class="d-wmx100p d-my16">
75-
The <code>inverted</code> prop has been deprecated in favor of using <dt-link to="mode-island.html">DtModeIsland</dt-link> as a wrapper.
74+
<dt-notice title="Deprecated" kind="info" class="d-wmx100p d-my16" hide-close>
75+
The <code>inverted</code> prop has been deprecated. Use the
76+
<dt-link to="mode-island.html#inverting">v-dt-mode directive</dt-link>
77+
instead.
7678
</dt-notice>
7779

78-
In place of the <code>inverted</code> prop, use the <dt-link to="mode-island.html">DtModeIsland</dt-link> component as a wrapper.
80+
In place of the `inverted` prop, use the [v-dt-mode directive](mode-island.html#inverting) on the component element.
7981

8082
<code-well-header>
81-
<dt-mode-island class="d-p16 d-bar8">
83+
<div class="d-bgc-contrast">
8284
<dt-breadcrumbs
85+
v-dt-mode:invert
8386
ref="invertedBreadcrumbsExample"
87+
class="d-p16 d-bar8"
8488
:breadcrumbs="[
8589
{ href: '#', label: 'Root' },
8690
{ href: '#', label: 'Section' },
8791
{ href: '#', label: 'Current Page', selected: true },
8892
]"
8993
/>
90-
</dt-mode-island>
94+
</div>
9195
</code-well-header>
9296

9397
<code-example-tabs
9498
:htmlCode='() => $refs.invertedBreadcrumbsExample'
9599
vueCode='
96-
<dt-mode-island>
97-
<dt-breadcrumbs :breadcrumbs="breadcrumbs" />
98-
</dt-mode-island>
100+
<div class="d-bgc-contrast">
101+
<dt-breadcrumbs v-dt-mode:invert :breadcrumbs="breadcrumbs" />
102+
</div>
99103
'
100104
showHtmlWarning />
101105

0 commit comments

Comments
 (0)