@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/tokens/typography.css

@@ -1,422 +1,422 @@
-/* ⚠️ DEPRECATED: These px-based classes are kept for backward compatibility.
-   Use <Text variant="..."> component or text-ds-* Tailwind classes instead.
-   See src/tokens/typography-semantic.css for the canonical type scale. */
-
-/* ═══════════════════════════════════════════════════════════════════
-   TYPOGRAPHY — Font faces, type scale utilities, and prose styles
-   ═══════════════════════════════════════════════════════════════════ */
-
-/* ── Font Faces ─────────────────────────────────────────────────── */
-
-/* Inter (primary UI font) — Variable font: supports weights 100-900 */
-@font-face {
-  font-family: 'Inter';
-  src: url('../../fonts/Inter-Variable.woff2') format('woff2');
-  font-weight: 100 900;
-  font-style: normal;
-  font-display: swap;
-}
-@font-face {
-  font-family: 'Inter';
-  src: url('../../fonts/Inter-Italic-Variable.woff2') format('woff2');
-  font-weight: 100 900;
-  font-style: italic;
-  font-display: swap;
-}
-
-/* Ranade (accent — brand moments, hero headings, special callouts) */
-@font-face {
-  font-family: 'Ranade';
-  src: url('../../fonts/Ranade-Variable.woff2') format('woff2');
-  font-weight: 100 900;
-  font-display: swap;
-}
-@font-face {
-  font-family: 'Ranade';
-  src: url('../../fonts/Ranade-VariableItalic.woff2') format('woff2');
-  font-weight: 100 900;
-  font-style: italic;
-  font-display: swap;
-}
-
-/* ── DEPRECATED Title Scale (T1–T7) ────────────────────────────────
- * @deprecated Use typography-semantic.css tokens instead:
- *   T1-Reg → --typo-heading-2xl  (60px)
- *   T2-Reg → --typo-heading-xl   (48px)
- *   T3-Reg → --typo-heading-lg   (36px)
- *   T4-Reg → --typo-heading-md   (32px)
- *   T5-Reg → --typo-heading-sm   (24px)
- *   T6-Reg → --typo-heading-xs   (20px)
- *   T7-Reg → --typo-heading-xs   (20px, tighter)
- * These classes will be removed in v1.0.
- * ──────────────────────────────────────────────────────────────── */
-
-.T1-Reg {
-  font-family: inherit;
-  font-size: 60px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 115%;
-  letter-spacing: -1.2px;
-}
-
-.T2-Reg {
-  font-family: inherit;
-  font-size: 48px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 115%;
-  letter-spacing: -0.96px;
-}
-
-.T3-Reg {
-  font-family: inherit;
-  font-size: 36px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 115%;
-  letter-spacing: -0.72px;
-}
-
-.T4-Reg {
-  font-family: inherit;
-  font-size: 32px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 115%;
-  letter-spacing: -0.64px;
-}
-
-.T5-Reg {
-  font-family: inherit;
-  font-size: 24px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 125%;
-  letter-spacing: -0.48px;
-}
-
-.T6-Reg {
-  font-family: inherit;
-  font-size: 20px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 125%;
-}
-
-.T7-Reg {
-  font-family: inherit;
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 125%;
-  letter-spacing: -0.48px;
-}
-
-/* ── DEPRECATED Body Scale (B1–B8) ─────────────────────────────────
- * @deprecated Use typography-semantic.css tokens instead:
- *   B1-Reg → --typo-body-lg   (16px)
- *   B2-Reg → --typo-body-md   (14px)
- *   B3-Reg → --typo-body-sm   (12px)
- *   B4-Reg → --typo-body-xs   (10px)
- *   B5-B8  → Use body-lg/md/sm/xs with weight overrides
- * These classes will be removed in v1.0.
- * ──────────────────────────────────────────────────────────────── */
-
-.B1-Reg {
-  font-family: inherit;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%;
-  letter-spacing: -0.32px;
-}
-
-.B2-Reg {
-  font-family: inherit;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%;
-  letter-spacing: -0.32px;
-}
-
-.B3-Reg {
-  font-family: inherit;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%;
-  letter-spacing: -0.32px;
-}
-
-.B4-Reg {
-  font-family: inherit;
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%;
-  letter-spacing: -0.32px;
-}
-
-.B5-Reg {
-  font-family: inherit;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  letter-spacing: 0.32px;
-}
-
-.B6-Reg {
-  font-family: inherit;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 140%;
-}
-
-.B7-Reg {
-  font-family: inherit;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%;
-}
-
-.B8-Reg {
-  font-family: inherit;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 150%;
-  letter-spacing: -0.28px;
-}
-
-.B2-Semibold {
-  font-family: inherit;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 150%;
-  letter-spacing: -0.32px;
-}
-
-/* ── DEPRECATED Label Scale (L1–L6) ────────────────────────────────
- * @deprecated Use typography-semantic.css tokens instead:
- *   L1 → --typo-label-lg   (16px)
- *   L2 → --typo-label-md   (14px)
- *   L3 → --typo-label-sm   (12px)
- *   L4 → --typo-label-xs   (10px)
- *   L5-L6 → Use label-sm/xs with weight overrides
- * These classes will be removed in v1.0.
- * ──────────────────────────────────────────────────────────────── */
-
-.L1 {
-  font-family: inherit;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 130%;
-  letter-spacing: 0.96px;
-  text-transform: uppercase;
-}
-
-.L2 {
-  font-family: inherit;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 130%;
-  letter-spacing: 0.96px;
-  text-transform: uppercase;
-}
-
-.L3 {
-  font-family: inherit;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 130%;
-  letter-spacing: 0.72px;
-  text-transform: uppercase;
-}
-
-.L4 {
-  font-family: inherit;
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 130%;
-  letter-spacing: 0.6px;
-  text-transform: uppercase;
-}
-
-.L6 {
-  font-family: inherit;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 130%;
-  letter-spacing: 0.84px;
-  text-transform: uppercase;
-}
-
-/* ── DEPRECATED Paragraph Scale (P1–P7) ────────────────────────────
- * @deprecated Use typography-semantic.css --typo-body-* tokens instead.
- * These classes will be removed in v1.0.
- * ──────────────────────────────────────────────────────────────── */
-/* NOTE: P2 (0.36px tracking) and B5-Reg (0.32px tracking) are near-identical
-   at 16px/140%. P2 is for paragraph blocks, B5-Reg for inline body text. */
-
-.P1 {
-  font-family: inherit;
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  letter-spacing: 0.36px;
-}
-
-.P2 {
-  font-family: inherit;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  letter-spacing: 0.36px;
-}
-
-.P3 {
-  font-family: inherit;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  letter-spacing: 0.36px;
-}
-
-.P4 {
-  font-family: inherit;
-  font-size: 12px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  letter-spacing: 0.36px;
-}
-
-.P5 {
-  font-family: inherit;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  letter-spacing: 0.16px;
-}
-
-.P6 {
-  font-family: inherit;
-  font-size: 18px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 140%;
-}
-
-.P7 {
-  font-family: inherit;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 140%;
-  letter-spacing: 0.14px;
-}
-
-/* ── Weight Modifier ────────────────────────────────────────────── */
-
-.semibold {
-  font-weight: 600;
-}
-
-/* ── Responsive Overrides ───────────────────────────────────────── */
-
-@media (max-width: 767px) {
-  .T5-Reg {
-    font-size: 16px;
-  }
-}
-
-/* ── Prose Styles (Devsabha AI Insights) ────────────────────────── */
-
-.prose-devsabha {
-  font-family: 'Ranade', sans-serif;
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--color-surface-fg-muted);
-}
-
-.prose-devsabha h1,
-.prose-devsabha h2,
-.prose-devsabha h3,
-.prose-devsabha h4 {
-  font-family: 'Ranade', sans-serif;
-  font-weight: 600;
-  color: var(--color-surface-fg);
-  margin-top: 1em;
-  margin-bottom: 0.5em;
-}
-
-.prose-devsabha h1 { font-size: 18px; }
-.prose-devsabha h2 { font-size: 16px; }
-.prose-devsabha h3 { font-size: 14px; }
-.prose-devsabha h4 { font-size: 14px; }
-
-.prose-devsabha p {
-  margin-bottom: 0.5em;
-}
-
-.prose-devsabha ul {
-  list-style-type: disc;
-  padding-left: 1.5em;
-  margin-bottom: 0.5em;
-}
-
-.prose-devsabha ol {
-  list-style-type: decimal;
-  padding-left: 1.5em;
-  margin-bottom: 0.5em;
-}
-
-.prose-devsabha li {
-  margin-bottom: 0.25em;
-}
-
-.prose-devsabha strong {
-  font-weight: 600;
-  color: var(--color-surface-fg);
-}
-
-.prose-devsabha em {
-  font-style: italic;
-}
-
-.prose-devsabha code {
-  font-size: 12px;
-  background: var(--color-surface-raised-hover);
-  border-radius: 4px;
-  padding: 0.15em 0.4em;
-}
-
-.prose-devsabha blockquote {
-  border-left: 3px solid var(--color-surface-border-strong);
-  padding-left: 1em;
-  margin: 0.5em 0;
-  color: var(--color-surface-fg-subtle);
-}
-
-.prose-devsabha *:first-child {
-  margin-top: 0;
-}
-
-.prose-devsabha *:last-child {
-  margin-bottom: 0;
-}
+/* ⚠️ DEPRECATED: These px-based classes are kept for backward compatibility.
+   Use <Text variant="..."> component or text-ds-* Tailwind classes instead.
+   See src/tokens/typography-semantic.css for the canonical type scale. */
+
+/* ═══════════════════════════════════════════════════════════════════
+   TYPOGRAPHY — Font faces, type scale utilities, and prose styles
+   ═══════════════════════════════════════════════════════════════════ */
+
+/* ── Font Faces ─────────────────────────────────────────────────── */
+
+/* Inter (primary UI font) — Variable font: supports weights 100-900 */
+@font-face {
+  font-family: 'Inter';
+  src: url('../../fonts/Inter-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter';
+  src: url('../../fonts/Inter-Italic-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Ranade (accent — brand moments, hero headings, special callouts) */
+@font-face {
+  font-family: 'Ranade';
+  src: url('../../fonts/Ranade-Variable.woff2') format('woff2');
+  font-weight: 100 900;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Ranade';
+  src: url('../../fonts/Ranade-VariableItalic.woff2') format('woff2');
+  font-weight: 100 900;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* ── DEPRECATED Title Scale (T1–T7) ────────────────────────────────
+ * @deprecated Use typography-semantic.css tokens instead:
+ *   T1-Reg → --typo-heading-2xl  (60px)
+ *   T2-Reg → --typo-heading-xl   (48px)
+ *   T3-Reg → --typo-heading-lg   (36px)
+ *   T4-Reg → --typo-heading-md   (32px)
+ *   T5-Reg → --typo-heading-sm   (24px)
+ *   T6-Reg → --typo-heading-xs   (20px)
+ *   T7-Reg → --typo-heading-xs   (20px, tighter)
+ * These classes will be removed in v1.0.
+ * ──────────────────────────────────────────────────────────────── */
+
+.T1-Reg {
+  font-family: inherit;
+  font-size: 60px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 115%;
+  letter-spacing: -1.2px;
+}
+
+.T2-Reg {
+  font-family: inherit;
+  font-size: 48px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 115%;
+  letter-spacing: -0.96px;
+}
+
+.T3-Reg {
+  font-family: inherit;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 115%;
+  letter-spacing: -0.72px;
+}
+
+.T4-Reg {
+  font-family: inherit;
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 115%;
+  letter-spacing: -0.64px;
+}
+
+.T5-Reg {
+  font-family: inherit;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 125%;
+  letter-spacing: -0.48px;
+}
+
+.T6-Reg {
+  font-family: inherit;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 125%;
+}
+
+.T7-Reg {
+  font-family: inherit;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 125%;
+  letter-spacing: -0.48px;
+}
+
+/* ── DEPRECATED Body Scale (B1–B8) ─────────────────────────────────
+ * @deprecated Use typography-semantic.css tokens instead:
+ *   B1-Reg → --typo-body-lg   (16px)
+ *   B2-Reg → --typo-body-md   (14px)
+ *   B3-Reg → --typo-body-sm   (12px)
+ *   B4-Reg → --typo-body-xs   (10px)
+ *   B5-B8  → Use body-lg/md/sm/xs with weight overrides
+ * These classes will be removed in v1.0.
+ * ──────────────────────────────────────────────────────────────── */
+
+.B1-Reg {
+  font-family: inherit;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: -0.32px;
+}
+
+.B2-Reg {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: -0.32px;
+}
+
+.B3-Reg {
+  font-family: inherit;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: -0.32px;
+}
+
+.B4-Reg {
+  font-family: inherit;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: -0.32px;
+}
+
+.B5-Reg {
+  font-family: inherit;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.32px;
+}
+
+.B6-Reg {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 140%;
+}
+
+.B7-Reg {
+  font-family: inherit;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+}
+
+.B8-Reg {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 150%;
+  letter-spacing: -0.28px;
+}
+
+.B2-Semibold {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 150%;
+  letter-spacing: -0.32px;
+}
+
+/* ── DEPRECATED Label Scale (L1–L6) ────────────────────────────────
+ * @deprecated Use typography-semantic.css tokens instead:
+ *   L1 → --typo-label-lg   (16px)
+ *   L2 → --typo-label-md   (14px)
+ *   L3 → --typo-label-sm   (12px)
+ *   L4 → --typo-label-xs   (10px)
+ *   L5-L6 → Use label-sm/xs with weight overrides
+ * These classes will be removed in v1.0.
+ * ──────────────────────────────────────────────────────────────── */
+
+.L1 {
+  font-family: inherit;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 130%;
+  letter-spacing: 0.96px;
+  text-transform: uppercase;
+}
+
+.L2 {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 130%;
+  letter-spacing: 0.96px;
+  text-transform: uppercase;
+}
+
+.L3 {
+  font-family: inherit;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 130%;
+  letter-spacing: 0.72px;
+  text-transform: uppercase;
+}
+
+.L4 {
+  font-family: inherit;
+  font-size: 10px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 130%;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+}
+
+.L6 {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 130%;
+  letter-spacing: 0.84px;
+  text-transform: uppercase;
+}
+
+/* ── DEPRECATED Paragraph Scale (P1–P7) ────────────────────────────
+ * @deprecated Use typography-semantic.css --typo-body-* tokens instead.
+ * These classes will be removed in v1.0.
+ * ──────────────────────────────────────────────────────────────── */
+/* NOTE: P2 (0.36px tracking) and B5-Reg (0.32px tracking) are near-identical
+   at 16px/140%. P2 is for paragraph blocks, B5-Reg for inline body text. */
+
+.P1 {
+  font-family: inherit;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.36px;
+}
+
+.P2 {
+  font-family: inherit;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.36px;
+}
+
+.P3 {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.36px;
+}
+
+.P4 {
+  font-family: inherit;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.36px;
+}
+
+.P5 {
+  font-family: inherit;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.16px;
+}
+
+.P6 {
+  font-family: inherit;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 140%;
+}
+
+.P7 {
+  font-family: inherit;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 140%;
+  letter-spacing: 0.14px;
+}
+
+/* ── Weight Modifier ────────────────────────────────────────────── */
+
+.semibold {
+  font-weight: 600;
+}
+
+/* ── Responsive Overrides ───────────────────────────────────────── */
+
+@media (max-width: 767px) {
+  .T5-Reg {
+    font-size: 16px;
+  }
+}
+
+/* ── Prose Styles (Devsabha AI Insights) ────────────────────────── */
+
+.prose-devsabha {
+  font-family: 'Ranade', sans-serif;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--color-surface-fg-muted);
+}
+
+.prose-devsabha h1,
+.prose-devsabha h2,
+.prose-devsabha h3,
+.prose-devsabha h4 {
+  font-family: 'Ranade', sans-serif;
+  font-weight: 600;
+  color: var(--color-surface-fg);
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+}
+
+.prose-devsabha h1 { font-size: 18px; }
+.prose-devsabha h2 { font-size: 16px; }
+.prose-devsabha h3 { font-size: 14px; }
+.prose-devsabha h4 { font-size: 14px; }
+
+.prose-devsabha p {
+  margin-bottom: 0.5em;
+}
+
+.prose-devsabha ul {
+  list-style-type: disc;
+  padding-left: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose-devsabha ol {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.prose-devsabha li {
+  margin-bottom: 0.25em;
+}
+
+.prose-devsabha strong {
+  font-weight: 600;
+  color: var(--color-surface-fg);
+}
+
+.prose-devsabha em {
+  font-style: italic;
+}
+
+.prose-devsabha code {
+  font-size: 12px;
+  background: var(--color-surface-raised-hover);
+  border-radius: 4px;
+  padding: 0.15em 0.4em;
+}
+
+.prose-devsabha blockquote {
+  border-left: 3px solid var(--color-surface-border-strong);
+  padding-left: 1em;
+  margin: 0.5em 0;
+  color: var(--color-surface-fg-subtle);
+}
+
+.prose-devsabha *:first-child {
+  margin-top: 0;
+}
+
+.prose-devsabha *:last-child {
+  margin-bottom: 0;
+}