feat(typography): added a-title & a-subtitle classes

docs/components/Api.vue

@@ -18,7 +18,7 @@ const propsHeader = Object.keys(props.api.props[0])
         class="not-last-mb-4"
       >
         <span
-          class="font-semibold text-[hsla(var(--a-typography-title-color),var(--a-typography-title-opacity))]"
+          class="font-semibold text-[hsla(var(--a-title-color),var(--a-title-opacity))]"
         >{{ prop.name.replace('?', '') }}</span>
         <span class="text-[hsla(var(--a-base-color),var(--a-text-emphasis-light-opacity))]"> : {{ prop.type.replace(/\s*\| (undefined)$/, '') }}</span>
         <span

docs/components/demos/card/DemoCardVariants.vue

@@ -17,7 +17,9 @@
       variant="light"
       color="primary"
       class="shadow-none"
-    />
+    >
+      <p>Awesome</p>
+    </ACard>
 
     <!-- 👉 Outline -->
     <ACard

docs/components/demos/typography/DemoTypographyClasses.vue

@@ -0,0 +1,8 @@
+<template>
+  <p class="a-title">
+    Title
+  </p>
+  <p class="a-subtitle">
+    Subtitle
+  </p>
+</template>

docs/components/demos/typography/DemoTypographyConfigArray.vue

@@ -8,7 +8,6 @@
         class="rounded-lg text-[1.25rem]"
       />
       <ATypography
-        class="!children:leading-tight"
         :title="['Sales', 'text-sm font-normal !text-medium-emphasis']"
         :subtitle="['2.5k', 'text-xl font-bold !text-high-emphasis']"
       />
@@ -21,7 +20,6 @@
         class="rounded-lg text-[1.25rem]"
       />
       <ATypography
-        class="!children:leading-tight"
         :title="['Revenue', 'text-sm !text-medium-emphasis font-normal']"
         :subtitle="['$816', 'text-xl font-bold !text-high-emphasis']"
       />
@@ -35,7 +33,6 @@
         class="rounded-lg text-[1.25rem]"
       />
       <ATypography
-        class="!children:leading-tight"
         :title="['Customers', 'text-sm !text-medium-emphasis font-normal']"
         :subtitle="['1.5', 'text-xl font-bold !text-high-emphasis']"
       />
@@ -49,7 +46,6 @@
         class="rounded-lg text-[1.25rem]"
       />
       <ATypography
-        class="!children:leading-tight"
         :title="['Returns', 'text-sm !text-medium-emphasis font-normal']"
         :subtitle="['1.5', 'text-xl font-bold !text-high-emphasis']"
       />

docs/components/demos/typography/DemoTypographySizing.vue

@@ -11,10 +11,7 @@
       subtitle="last payment"
       class="text-sm"
     />
-    <ATypography
-      :text="['+$789', 'text-success']"
-      class="text-sm font-semibold place-self-end"
-    />
+    <span class="text-success text-sm font-semibold ms-auto">+$789</span>
 
     <!-- 👉 Credit card -->
     <AAvatar
@@ -27,10 +24,7 @@
       subtitle="ordered books"
       class="text-sm"
     />
-    <ATypography
-      :text="['-$13.6', 'text-danger']"
-      class="text-sm font-semibold place-self-end"
-    />
+    <span class="text-danger text-sm font-semibold ms-auto">-$13.6</span>
 
     <!-- 👉 Server storage -->
     <AAvatar
@@ -43,9 +37,6 @@
       subtitle="90% storage used"
       class="text-sm"
     />
-    <ATypography
-      :text="['4 minutes ago', 'text-warning']"
-      class="text-sm font-semibold place-self-end"
-    />
+    <span class="text-warning text-sm font-semibold ms-auto">4 minutes ago</span>
   </div>
 </template>

docs/components/ui/misc/UIMiscComments.vue

@@ -48,7 +48,9 @@ const comments = [
               class="text-base"
               :src="comment.avatar"
             />
-            <ATypography :title="[comment.name, 'text-base']" />
+            <p class="a-title text-base">
+              {{ comment.name }}
+            </p>
           </div>
 
           <!-- Comment -->
@@ -57,10 +59,9 @@ const comments = [
           </p>
 
           <!-- Comment time -->
-          <ATypography
-            class="text-xs mt-1"
-            :subtitle="comment.time"
-          />
+          <p class="a-subtitle text-xs mt-1">
+            {{ comment.time }}
+          </p>
         </div>
 
         <ATextarea v-model="input" />

docs/guide/base-components/typography.md

@@ -4,19 +4,60 @@ import api from '@anu/component-meta/ATypography.json';
 
 # Typography
 
+<!-- 👉 Classes -->
+::::card Classes
+
+Anu provides useful classes like `.a-title` & `.a-subtitle` for rendering typography with consistency.
+
+:::code DemoTypographyClasses
+<<< @/components/demos/typography/DemoTypographyClasses.vue
+:::
+
+::::
+
 <!-- 👉 Basic -->
 ::::card Basic
 
-`ATypography` provides customizable typography for any needs.
+`ATypography` component provides customizable typography to render title, subtitle & text using single component.
 
-This will completely change how you work with typography.
+You might feel like this is useless but this greatly improves DX and boosts component reusability. This will completely change how you work with typography.
 
 :::code DemoTypographyBasic
 <<< @/components/demos/typography/DemoTypographyBasic.vue
 :::
 
 ::::
 
+:::details `ATypography`'s `text` prop
+`text` prop is for convenience so you don't have to do this:
+
+```vue
+<template>
+  <ATypography
+    title="Title"
+    subtitle="This is subtitle"
+  >
+    <p>This is text</p>
+  </ATypography>
+</template>
+```
+
+Instead you can just insert text using `text` prop.
+
+```vue
+<template>
+  <ATypography
+    title="Title"
+    subtitle="This is subtitle"
+    text="This is text"
+  />
+</template>
+
+```
+
+When you use `text` prop of `ATypography` component, it adds class `.a-text` to customize that particular text rendered using `ATypography` component.
+:::
+
 <!-- 👉 Sizing -->
 ::::card Sizing
 
@@ -25,7 +66,7 @@ Want to create a list with title and subtitle no worries, Just add `text-sm`.
 You can use other font-size utilities to change typography size.
 
 :::code DemoTypographySizing
-<<< @/components/demos/typography/DemoTypographySizing.vue{7,12,16,23,28,32,39,44,48}
+<<< @/components/demos/typography/DemoTypographySizing.vue{7,12,14,20,25,27,33,38,40}
 :::
 
 ::::
@@ -40,7 +81,7 @@ First element of array will be treated as content and rest of them will be class
 It greatly improves DX and keep you code a bit DRY.
 
 :::code DemoTypographyConfigArray
-<<< @/components/demos/typography/DemoTypographyConfigArray.vue{12-13,25-26,39-40,53-54}
+<<< @/components/demos/typography/DemoTypographyConfigArray.vue{11-12,23-24,36-37,49-50}
 :::
 
 ::::

docs/ui/misc.md

@@ -3,7 +3,6 @@
 <!-- 👉 Comments -->
 <!--
     TODO:
-    - We should create classes like `.a-title` & `.a-subtitle` to easily get styles for `ATypography` element.
       This will prevent use of component if we just want to render single element.
       After finishing this task, make sure to add "info" about when to use `ATypography` component and when to use typography classes.
     - Create new rule `s-\d+` then provide height & width. This is useful if we want fixed height & width of avatar instead of eye bowling it.

packages/anu-vue/src/components/data-table/ADataTable.vue

@@ -3,7 +3,7 @@ import { defu } from 'defu'
 import type { ExtractPropTypes, Ref } from 'vue'
 import type { DataTablePropColumn, ItemsFunction } from './props'
 import { dataTableColDefaults, dataTableProps } from './props'
-import { ABtn, AInput, ASelect, ATable, ATypography } from '@/components'
+import { ABtn, AInput, ASelect, ATable } from '@/components'
 import { tableProps } from '@/components/table'
 import { useSearch } from '@/composables/useSearch'
 import type { typeSortBy } from '@/composables/useSort'
@@ -306,10 +306,7 @@ const paginationMeta = computed(() => {
     <!-- 👉 Pagination -->
     <template #after-table>
       <div class="a-data-table-pagination flex items-center w-full">
-        <ATypography
-          class="a-data-table-pagination-meta"
-          :subtitle="paginationMeta"
-        />
+        <span class="a-subtitle a-data-table-pagination-meta">{{ paginationMeta }}</span>
         <div class="flex-grow" />
         <div class="a-data-table-per-page flex items-center">
           <span class="sm:inline hidden">per page</span>

packages/anu-vue/src/components/typography/ATypography.vue

@@ -26,7 +26,7 @@ const text = useConfigurable(toRef(props, 'text'))
           :is="props.titleTag"
           v-if="(Array.isArray(props.title) ? props.title[0] : props.title) || $slots.title"
           v-bind="title.attrs"
-          class="a-typography-title font-medium block em:text-lg text-[hsla(var(--a-typography-title-color),var(--a-typography-title-opacity))]"
+          class="a-title"
           :class="[title.classes]"
         >
           <slot name="title">
@@ -39,7 +39,7 @@ const text = useConfigurable(toRef(props, 'text'))
           :is="props.subtitleTag"
           v-if="(Array.isArray(props.subtitle) ? props.subtitle[0] : props.subtitle) || $slots.subtitle"
           v-bind="subtitle.attrs"
-          class="a-typography-subtitle block em:text-sm text-[hsla(var(--a-typography-subtitle-color),var(--a-typography-subtitle-opacity))]"
+          class="a-subtitle"
           :class="[subtitle.classes]"
         >
           <slot name="subtitle">
@@ -57,7 +57,7 @@ const text = useConfigurable(toRef(props, 'text'))
       :is="props.textTag"
       v-if="(Array.isArray(props.text) ? props.text[0] : props.text) || $slots.text"
       v-bind="text.attrs"
-      class="a-typography-text text-[hsla(var(--a-typography-text-color),var(--a-typography-text-opacity))]"
+      class="a-text"
       :class="[text.classes]"
     >
       <slot>

packages/anu-vue/src/composables/useLayer.ts

@@ -102,14 +102,14 @@ export const useLayer = () => {
       ? propVariant === 'fill' ? 'white' : propColor
       : 'layer-text'
 
-    // ℹ️ `typography-title-${color}` does uses CSS variable however `text-${color}` don't so we need to attach the color our self
-    // TODO: Check is it convenient to add `typography-title-$color` like in above line to identify the color as CSS var 🤔
-    const textClasses = `text-${isThemeColor ? textColor : `\$a-${textColor}`} typography-title-${textColor} typography-subtitle-${textColor} typography-text-${textColor}`
+    // ℹ️ `a-title-${color}` does uses CSS variable however `text-${color}` don't so we need to attach the color our self
+    // TODO: Check is it convenient to add `a-title-$color` like in above line to identify the color as CSS var 🤔
+    const textClasses = `text-${isThemeColor ? textColor : `\$a-${textColor}`} a-title-${textColor} a-subtitle-${textColor}`
 
     if (propColor) {
       // common classes
       classes.push(textClasses)
-      classes.push('typography-subtitle-opacity-100 typography-text-opacity-100')
+      classes.push('a-subtitle-opacity-100')
 
       // Add classes based on variant
       if (propVariant === 'text') {

packages/anu-vue/test/__snapshots__/ABtn.test.ts.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1
 
 exports[`Testing ABtn > can mount component 1`] = `
-"<button tabindex=\\"0\\" style=\\"--a-layer-color: hsla(var(--a-primary),var(--un-bg-opacity)); --un-ring-color: hsl(var(--a-primary)); --a-spacing: 1;\\" class=\\"whitespace-nowrap inline-flex justify-center items-center a-btn states [--un-bg-opacity:1] text-white typography-title-white typography-subtitle-white typography-text-white typography-subtitle-opacity-100 typography-text-opacity-100 bg-$a-layer-color\\">
+"<button tabindex=\\"0\\" style=\\"--a-layer-color: hsla(var(--a-primary),var(--un-bg-opacity)); --un-ring-color: hsl(var(--a-primary)); --a-spacing: 1;\\" class=\\"whitespace-nowrap inline-flex justify-center items-center a-btn states [--un-bg-opacity:1] text-white a-title-white a-subtitle-white a-text-white a-subtitle-opacity-100 a-text-opacity-100 bg-$a-layer-color\\">
   <!--v-if-->Click me
   <!--v-if-->
 </button>"
@@ -17,11 +17,11 @@ exports[`Testing ABtn > has proper classes 1`] = `
   "states",
   "[--un-bg-opacity:1]",
   "text-white",
-  "typography-title-white",
-  "typography-subtitle-white",
-  "typography-text-white",
-  "typography-subtitle-opacity-100",
-  "typography-text-opacity-100",
+  "a-title-white",
+  "a-subtitle-white",
+  "a-text-white",
+  "a-subtitle-opacity-100",
+  "a-text-opacity-100",
   "bg-$a-layer-color",
 ]
 `;

packages/anu-vue/test/__snapshots__/ATable.test.ts.snap

@@ -36,19 +36,7 @@ exports[`Testing ATable & ADataTable > mount component 1`] = `
       <!--v-if-->
     </table>
   </div>
-  <div class=\\"a-data-table-pagination flex items-center w-full\\">
-    <div class=\\"text-base gap-4 flex flex-col a-data-table-pagination-meta\\">
-      <!-- SECTION Typography header -->
-      <div class=\\"flex justify-between\\">
-        <div class=\\"flex-grow\\">
-          <!-- 👉 Title -->
-          <!--v-if-->
-          <!-- 👉 Subtitle --><span class=\\"a-typography-subtitle block em:text-sm text-[hsla(var(--a-typography-subtitle-color),var(--a-typography-subtitle-opacity))]\\">1 - 5 of 10</span>
-        </div><!-- 👉 Slot: header-right -->
-      </div><!-- !SECTION -->
-      <!-- 👉 Text -->
-      <!--v-if-->
-    </div>
+  <div class=\\"a-data-table-pagination flex items-center w-full\\"><span class=\\"a-subtitle a-data-table-pagination-meta\\">1 - 5 of 10</span>
     <div class=\\"flex-grow\\"></div>
     <div class=\\"a-data-table-per-page flex items-center\\"><span class=\\"sm:inline hidden\\">per page</span><!-- 👉 Select Input -->
       <div class=\\"a-base-input-root i:children:focus-within:text-primary flex flex-col flex-grow flex-shrink-0 a-base-input-interactive a-select\\" style=\\"--a-spacing: 0.8;\\">
@@ -76,9 +64,9 @@ exports[`Testing ATable & ADataTable > mount component 1`] = `
       <!--teleport start-->
       <!--teleport end-->
     </div>
-    <div class=\\"a-data-table-pagination-navigation\\"><button tabindex=\\"-1\\" style=\\"--a-layer-color: hsla(var(--a-primary),var(--un-bg-opacity)); --un-ring-color: hsl(var(--a-primary)); --a-spacing: 1;\\" class=\\"whitespace-nowrap inline-flex justify-center items-center a-btn-icon-only opacity-50 pointer-events-none states [--un-bg-opacity:1] text-primary typography-title-primary typography-subtitle-primary typography-text-primary typography-subtitle-opacity-100 typography-text-opacity-100 a-data-table-paginate-previous\\" disabled=\\"\\"><i class=\\"i-bx-left-arrow-alt\\"></i>
+    <div class=\\"a-data-table-pagination-navigation\\"><button tabindex=\\"-1\\" style=\\"--a-layer-color: hsla(var(--a-primary),var(--un-bg-opacity)); --un-ring-color: hsl(var(--a-primary)); --a-spacing: 1;\\" class=\\"whitespace-nowrap inline-flex justify-center items-center a-btn-icon-only opacity-50 pointer-events-none states [--un-bg-opacity:1] text-primary a-title-primary a-subtitle-primary a-text-primary a-subtitle-opacity-100 a-text-opacity-100 a-data-table-paginate-previous\\" disabled=\\"\\"><i class=\\"i-bx-left-arrow-alt\\"></i>
         <!--v-if-->
-      </button><button tabindex=\\"0\\" style=\\"--a-layer-color: hsla(var(--a-primary),var(--un-bg-opacity)); --un-ring-color: hsl(var(--a-primary)); --a-spacing: 1;\\" class=\\"whitespace-nowrap inline-flex justify-center items-center a-btn-icon-only states [--un-bg-opacity:1] text-primary typography-title-primary typography-subtitle-primary typography-text-primary typography-subtitle-opacity-100 typography-text-opacity-100 a-data-table-paginate-next\\"><i class=\\"i-bx-right-arrow-alt\\"></i>
+      </button><button tabindex=\\"0\\" style=\\"--a-layer-color: hsla(var(--a-primary),var(--un-bg-opacity)); --un-ring-color: hsl(var(--a-primary)); --a-spacing: 1;\\" class=\\"whitespace-nowrap inline-flex justify-center items-center a-btn-icon-only states [--un-bg-opacity:1] text-primary a-title-primary a-subtitle-primary a-text-primary a-subtitle-opacity-100 a-text-opacity-100 a-data-table-paginate-next\\"><i class=\\"i-bx-right-arrow-alt\\"></i>
         <!--v-if-->
       </button></div>
   </div>

packages/preset-theme-default/src/index.ts

@@ -14,7 +14,7 @@ interface PresetOptions {
 export const colors = ['primary', 'success', 'info', 'warning', 'danger'] as const
 export type Colors = typeof colors
 
-export function presetThemeDefault(options: PresetOptions = {}): Preset {  
+export function presetThemeDefault(options: PresetOptions = {}): Preset {
   return {
     name: '@anu-vue/preset-theme-default',
     theme: {
@@ -40,9 +40,8 @@ export function presetThemeDefault(options: PresetOptions = {}): Preset {
       ...colors.map(c => `next:checked:border-${c}`),
 
       // Typography
-      ...[...colors, 'layer-text', 'white'].map(c => `typography-title-${c}`),
-      ...[...colors, 'layer-text', 'white'].map(c => `typography-subtitle-${c}`),
-      ...[...colors, 'layer-text', 'white'].map(c => `typography-text-${c}`),
+      ...[...colors, 'layer-text', 'white'].map(c => `a-title-${c}`),
+      ...[...colors, 'layer-text', 'white'].map(c => `a-subtitle-${c}`),
       ...['top', 'right', 'bottom', 'left'].map(dir => `a-drawer-anchor-${dir}`),
     ],
     rules,

packages/preset-theme-default/src/rules.ts

@@ -9,15 +9,15 @@ const rules: Preset['rules'] = [
 
   // Typography
   [
-    /^typography-(\w+)-([-\w]+)$/,
+    /^a-(title|subtitle|text)-([-\w]+)$/,
     ([, type, c]: string[]) => ({
-      [`--a-typography-${type}-color`]: `var(--a-${c})`,
+      [`--a-${type}-color`]: `var(--a-${c})`,
     }),
   ],
   [
-    /^typography-(\w+)-opacity-(\d+)$/,
+    /^a-(title|subtitle|text)-opacity-(\d+)$/,
     ([, type, o]: string[]) => ({
-      [`--a-typography-${type}-opacity`]: `${Number(o) * 0.01}`,
+      [`--a-${type}-opacity`]: `${Number(o) * 0.01}`,
     }),
   ],
 

packages/preset-theme-default/src/scss/index.scss

@@ -32,12 +32,10 @@ $body-color: hsla(var(--a-base-color), 0.68);
     --a-text-emphasis-light-opacity: 0.38;
 
     // Typography
-    --a-typography-title-color: var(--a-base-color);
-    --a-typography-subtitle-color: var(--a-base-color);
-    --a-typography-text-color: var(--a-base-color);
-    --a-typography-title-opacity: var(--a-text-emphasis-high-opacity);
-    --a-typography-subtitle-opacity: var(--a-text-emphasis-light-opacity);
-    --a-typography-text-opacity: var(--a-text-emphasis-medium-opacity);
+    --a-title-color: var(--a-base-color);
+    --a-subtitle-color: var(--a-base-color);
+    --a-title-opacity: var(--a-text-emphasis-high-opacity);
+    --a-subtitle-opacity: var(--a-text-emphasis-light-opacity);
 
     // SECTION Components