@monimesl/dot-cli 1.0.0-beta.11 → 1.0.0-beta.13

package/dist/templates/showcase/dot.ts

@@ -60,21 +60,36 @@ export default defineDot({
     // shape: 'rounded',
     // density: 'compact',
     // elevation: 'raised',
-    // components: { Button: { size: 'large' }, View: { variants: { card: { border: 'none' } } } },
     // The showcase's own colours, used by name on the Styles page, and the Page colours swatches.
     colors: {
       custom: {
         gold: { light: '#f5c542', dark: '#d4a72c' },
+        // The outline of what isn't chosen, on the Styles page.
+        line: { light: '#d9d9de', dark: '#3a3a3c' },
+        // Gold's text colour, which reads on the page where gold wouldn't.
+        bronze: { light: '#8a6100', dark: '#d4a72c' },
         // Dark text that reads on gold in both light and dark.
         ink: { light: '#1c1c1e', dark: '#1c1c1e' },
+        // Light text that reads on ink in both light and dark.
+        paper: { light: '#ffffff', dark: '#ffffff' },
         amber: { light: '#e8952a', dark: '#f0a63a' },
         ...swatchColors(),
       },
     },
     // The showcase's own icon, an SVG in statics/, used by name like Dot's icons.
     icons: { 'ticket-stub': 'statics/icons/ticket-stub.svg' },
-    // A gradient between two of the theme's colours, for a View's background.
-    gradients: { goldenHour: { from: 'gold', to: 'amber', direction: 'diagonal' } },
+    // Gradients between two of the theme's colours, for a View's background.
+    gradients: {
+      goldenHour: { from: 'gold', to: 'amber', direction: 'diagonal' },
+      shade: { from: 'transparent', to: 'ink' },
+    },
+    // Default props for components, and the showcase's own variants, used on the Theme page.
+    components: {
+      // Button: { size: 'large' },
+      Button: { variants: { quiet: { variant: 'ghost', size: 'small' } } },
+      Text: { variants: { label: { variant: 'caption', weight: 'bold', tone: 'muted' } } },
+      View: { variants: { ticket: { variant: 'card', borderTone: 'gold', elevation: 'low' } } },
+    },
   },
   // logger() writes each page load, event, navigation and state change to the console.
   plugins: [logger()],

package/dist/templates/showcase/pages/basics/theme/view.dml

@@ -34,11 +34,17 @@
   <View gap="small">
     <Text variant="subtitle">components</Text>
     <Text variant="caption" tone="muted">Default props for every use of a component, or for one of its variants, so a dot sets its look once. Button: { size: "large" } makes every Button large. View: { variants: { card: { elevation: "low" } } } gives only cards a shadow. A prop in the markup still wins.</Text>
+    <Text variant="caption" tone="muted">View, Text and Button can have variants of the dot's own too, such as ticket, label and quiet here. Set variant in one to start from a variant the component has, as ticket starts from card.</Text>
+    <View variant="ticket" gap="small">
+      <Text variant="label" caps>Your seat</Text>
+      <Text weight="medium">Salone Sounds Live, Freetown</Text>
+      <Button variant="quiet">Change seat</Button>
+    </View>
   </View>
 
   <View gap="small">
     <Text variant="subtitle">icons and gradients</Text>
-    <Text variant="caption" tone="muted">icons names SVGs in statics/, such as ticket-stub here. They work wherever Dot's icons do, and take the icon's tone. The build refuses an SVG with scripts or links, so export it from your design tool as plain shapes. gradients names a gradient between two of the theme's colours, for a View's background, such as goldenHour.</Text>
+    <Text variant="caption" tone="muted">icons names SVGs in statics/, such as ticket-stub here. They work wherever Dot's icons do, and take the icon's tone. The build refuses an SVG with scripts or links, so export it from your design tool as plain shapes. gradients names a gradient between two of the theme's colours, for a View's background, such as goldenHour. An end can be transparent, so it fades out behind words on a picture, as shade does here.</Text>
     <View background="goldenHour" radius="large" padding="large" gap="small">
       <View direction="row" align="center" gap="small">
         <Icon name="ticket-stub" tone="ink" />
@@ -46,5 +52,11 @@
       </View>
       <Text variant="title" tone="ink">2 tickets</Text>
     </View>
+    <Stack radius="large" aspect="16:9">
+      <View background="goldenHour" />
+      <View background="shade" justify="end" padding="large">
+        <Text variant="subtitle" tone="paper">Bureh Beach at sunset</Text>
+      </View>
+    </Stack>
   </View>
 </View>

package/dist/templates/showcase/pages/components/styles/controller.ts

@@ -3,4 +3,8 @@ import state from './state';
 export default definePage({
   initialState: state,
   configs: { navigationBar: { title: 'Styles' } },
+  mutations: {
+    chooseSeat: (_state, event: DataEvent<{ seat: string }>) => ({ seat: event.data.seat }),
+    toggleAppeared: (state) => ({ appeared: !state.appeared }),
+  },
 });

package/dist/templates/showcase/pages/components/styles/state.ts

@@ -1,3 +1,5 @@
 export default {
   balance: 'SLE 1,250.00',
+  seat: 'regular',
+  appeared: false,
 };

package/dist/templates/showcase/pages/components/styles/view.dml

@@ -40,12 +40,12 @@
 
   <View gap="small">
     <Text variant="subtitle">The dot's own colours</Text>
-    <Text variant="caption" tone="muted">The theme in dot.ts can name its own colours, such as gold and ink here. Use them as a background or a text tone. The Theme page has the rest of the theme.</Text>
+    <Text variant="caption" tone="muted">The theme in dot.ts can name its own colours, such as gold, ink and bronze here. Use them as a background or a text tone. The Theme page has the rest of the theme.</Text>
     <View direction="row" gap="small" align="center">
       <View background="gold" radius="full" paddingTop="small" paddingBottom="small" paddingStart="medium" paddingEnd="medium">
         <Text weight="medium" tone="ink">Gold member</Text>
       </View>
-      <Text tone="gold" weight="bold">Since 2024</Text>
+      <Text tone="bronze" weight="bold">Since 2024</Text>
     </View>
   </View>
 
@@ -63,6 +63,67 @@
     </View>
   </View>
 
+  <View gap="small">
+    <Text variant="subtitle">borderTone</Text>
+    <Text variant="caption" tone="muted">Colours the outline with a colour of the theme or one of the dot's own, such as to mark what's chosen.</Text>
+    <View direction="row" gap="small">
+      <View grow variant="card" align="center" borderTone="{{ seat === 'regular' ? 'primary' : 'line' }}" data-seat="regular" onTap="chooseSeat">
+        <Text weight="medium">Regular</Text>
+        <Text variant="caption" tone="muted" numeric>SLE 120</Text>
+      </View>
+      <View grow variant="card" align="center" borderTone="{{ seat === 'front' ? 'primary' : 'line' }}" data-seat="front" onTap="chooseSeat">
+        <Text weight="medium">Front row</Text>
+        <Text variant="caption" tone="muted" numeric>SLE 300</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">corners</Text>
+    <Text variant="caption" tone="muted">Rounds only the top or the bottom of a box, so two boxes can join into one.</Text>
+    <View gap="none">
+      <View background="primary" radius="large" corners="top" padding="medium">
+        <Text tone="onPrimary" weight="bold">Freetown to Bo</Text>
+      </View>
+      <View background="muted" radius="large" corners="bottom" padding="medium">
+        <Text>Leaves Cotton Tree at 7 am</Text>
+      </View>
+    </View>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">opacity</Text>
+    <Text variant="caption" tone="muted">Lets what's behind a View show through it: full, soft or faint.</Text>
+    <Stack radius="large" height="88">
+      <View background="goldenHour" />
+      <View direction="row" gap="small" padding="medium">
+        <View grow background="surface" radius="medium" opacity="full" justify="center" align="center">
+          <Text>full</Text>
+        </View>
+        <View grow background="surface" radius="medium" opacity="soft" justify="center" align="center">
+          <Text>soft</Text>
+        </View>
+        <View grow background="surface" radius="medium" opacity="faint" justify="center" align="center">
+          <Text>faint</Text>
+        </View>
+      </View>
+    </Stack>
+  </View>
+
+  <View gap="small">
+    <Text variant="subtitle">enter</Text>
+    <Text variant="caption" tone="muted">How a View comes in when it appears, such as inside an If or when hidden turns off: fade or rise. Phones set to reduce motion skip it.</Text>
+    <Button variant="secondary" onClick="toggleAppeared">{{ appeared ? 'Hide them' : 'Show them' }}</Button>
+    <If condition="{{ appeared }}">
+      <View variant="card" enter="fade">
+        <Text>enter="fade", inside an If</Text>
+      </View>
+    </If>
+    <View variant="card" enter="rise" hidden="{{ !appeared }}">
+      <Text>enter="rise", with hidden</Text>
+    </View>
+  </View>
+
   <View gap="small">
     <Text variant="subtitle">elevation</Text>
     <Text variant="caption" tone="muted">A shadow lifts a box off the page. low suits a card, and high something that floats over others.</Text>
@@ -78,7 +139,7 @@
 
   <View gap="small">
     <Text variant="subtitle">Buttons</Text>
-    <Text variant="caption" tone="muted">variant is primary, secondary, outline or ghost. tone colours a button, such as danger for one that deletes. size is small, medium or large.</Text>
+    <Text variant="caption" tone="muted">variant is primary, secondary, outline or ghost. tone colours a button, such as danger for one that deletes. size is small, medium or large. Anything that can be tapped dims under the finger by itself.</Text>
     <View direction="row" gap="small" wrap>
       <Button>Primary</Button>
       <Button variant="secondary">Secondary</Button>

package/dist/templates/showcase/pages/components/text/view.dml

@@ -27,13 +27,14 @@
   </View>
 
   <View gap="small">
-    <Text variant="subtitle">weight, italic and decoration</Text>
+    <Text variant="subtitle">weight, italic, caps and decoration</Text>
     <View variant="card" gap="small">
       <View direction="row" wrap gap="medium">
         <Text weight="regular">regular</Text>
         <Text weight="medium">medium</Text>
         <Text weight="bold">bold</Text>
         <Text italic>italic</Text>
+        <Text caps>caps</Text>
       </View>
       <View direction="row" wrap gap="medium">
         <Text decoration="underline">underline</Text>

package/dist/templates/showcase/pages/index/state.ts

@@ -70,7 +70,7 @@ export default {
         {
           page: 'basics/theme',
           title: 'Theme',
-          covers: 'colors, shape, density, elevation, fonts, components, icons, gradients',
+          covers: 'colors, shape, density, elevation, fonts, own variants, icons, gradients',
           icon: 'eye',
         },
         {
@@ -94,7 +94,7 @@ export default {
         {
           page: 'components/styles',
           title: 'Styles',
-          covers: 'background, border, radius, sizes, elevation, buttons, own colours',
+          covers: 'background, border, corners, opacity, enter, sizes, elevation, buttons',
           icon: 'star',
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@monimesl/dot-cli",
-  "version": "1.0.0-beta.11",
+  "version": "1.0.0-beta.13",
   "description": "The dotctl command: build mini apps and run them in the simulator",
   "type": "module",
   "repository": {
@@ -24,11 +24,11 @@
   "dependencies": {
     "typescript": "^5.9.3",
     "uqr": "^0.1.3",
-    "@monimesl/dot-compiler": "1.0.0-beta.11",
-    "@monimesl/dot-core": "1.0.0-beta.11",
-    "@monimesl/dot-dml-parser": "1.0.0-beta.11",
-    "@monimesl/dot-script-parser": "1.0.0-beta.11",
-    "@monimesl/dot-simulator": "1.0.0-beta.11"
+    "@monimesl/dot-compiler": "1.0.0-beta.13",
+    "@monimesl/dot-core": "1.0.0-beta.13",
+    "@monimesl/dot-dml-parser": "1.0.0-beta.13",
+    "@monimesl/dot-script-parser": "1.0.0-beta.13",
+    "@monimesl/dot-simulator": "1.0.0-beta.13"
   },
   "devDependencies": {
     "@types/node": "^22.20.4",