@teseor/css 1.0.0

package/src/05-utilities/spacing/spacing.scss

@@ -0,0 +1,399 @@
+/* Spacing utilities - all values align to 8px grid */
+
+/* Uses logical properties for international/RTL support */
+@layer utilities {
+  /* Margin utilities */
+  .m-0 {
+    margin: 0;
+  }
+
+  .m-1 {
+    margin: var(--ui-space-1);
+  }
+
+  .m-2 {
+    margin: var(--ui-space-2);
+  }
+
+  .m-3 {
+    margin: var(--ui-space-3);
+  }
+
+  .m-4 {
+    margin: var(--ui-space-4);
+  }
+
+  .m-6 {
+    margin: var(--ui-space-6);
+  }
+
+  .m-8 {
+    margin: var(--ui-space-8);
+  }
+
+  .mt-0 {
+    margin-block-start: 0;
+  }
+
+  .mt-1 {
+    margin-block-start: var(--ui-space-1);
+  }
+
+  .mt-2 {
+    margin-block-start: var(--ui-space-2);
+  }
+
+  .mt-3 {
+    margin-block-start: var(--ui-space-3);
+  }
+
+  .mt-4 {
+    margin-block-start: var(--ui-space-4);
+  }
+
+  .mt-6 {
+    margin-block-start: var(--ui-space-6);
+  }
+
+  .mt-8 {
+    margin-block-start: var(--ui-space-8);
+  }
+
+  .me-0 {
+    margin-inline-end: 0;
+  }
+
+  .me-1 {
+    margin-inline-end: var(--ui-space-1);
+  }
+
+  .me-2 {
+    margin-inline-end: var(--ui-space-2);
+  }
+
+  .me-3 {
+    margin-inline-end: var(--ui-space-3);
+  }
+
+  .me-4 {
+    margin-inline-end: var(--ui-space-4);
+  }
+
+  .me-6 {
+    margin-inline-end: var(--ui-space-6);
+  }
+
+  .me-8 {
+    margin-inline-end: var(--ui-space-8);
+  }
+
+  .mb-0 {
+    margin-block-end: 0;
+  }
+
+  .mb-1 {
+    margin-block-end: var(--ui-space-1);
+  }
+
+  .mb-2 {
+    margin-block-end: var(--ui-space-2);
+  }
+
+  .mb-3 {
+    margin-block-end: var(--ui-space-3);
+  }
+
+  .mb-4 {
+    margin-block-end: var(--ui-space-4);
+  }
+
+  .mb-6 {
+    margin-block-end: var(--ui-space-6);
+  }
+
+  .mb-8 {
+    margin-block-end: var(--ui-space-8);
+  }
+
+  .ms-0 {
+    margin-inline-start: 0;
+  }
+
+  .ms-1 {
+    margin-inline-start: var(--ui-space-1);
+  }
+
+  .ms-2 {
+    margin-inline-start: var(--ui-space-2);
+  }
+
+  .ms-3 {
+    margin-inline-start: var(--ui-space-3);
+  }
+
+  .ms-4 {
+    margin-inline-start: var(--ui-space-4);
+  }
+
+  .ms-6 {
+    margin-inline-start: var(--ui-space-6);
+  }
+
+  .ms-8 {
+    margin-inline-start: var(--ui-space-8);
+  }
+
+  .mx-0 {
+    margin-inline: 0;
+  }
+
+  .mx-1 {
+    margin-inline: var(--ui-space-1);
+  }
+
+  .mx-2 {
+    margin-inline: var(--ui-space-2);
+  }
+
+  .mx-3 {
+    margin-inline: var(--ui-space-3);
+  }
+
+  .mx-4 {
+    margin-inline: var(--ui-space-4);
+  }
+
+  .mx-auto {
+    margin-inline: auto;
+  }
+
+  .my-0 {
+    margin-block: 0;
+  }
+
+  .my-1 {
+    margin-block: var(--ui-space-1);
+  }
+
+  .my-2 {
+    margin-block: var(--ui-space-2);
+  }
+
+  .my-3 {
+    margin-block: var(--ui-space-3);
+  }
+
+  .my-4 {
+    margin-block: var(--ui-space-4);
+  }
+
+  /* Padding utilities */
+  .p-0 {
+    padding: 0;
+  }
+
+  .p-1 {
+    padding: var(--ui-space-1);
+  }
+
+  .p-2 {
+    padding: var(--ui-space-2);
+  }
+
+  .p-3 {
+    padding: var(--ui-space-3);
+  }
+
+  .p-4 {
+    padding: var(--ui-space-4);
+  }
+
+  .p-6 {
+    padding: var(--ui-space-6);
+  }
+
+  .p-8 {
+    padding: var(--ui-space-8);
+  }
+
+  .pt-0 {
+    padding-block-start: 0;
+  }
+
+  .pt-1 {
+    padding-block-start: var(--ui-space-1);
+  }
+
+  .pt-2 {
+    padding-block-start: var(--ui-space-2);
+  }
+
+  .pt-3 {
+    padding-block-start: var(--ui-space-3);
+  }
+
+  .pt-4 {
+    padding-block-start: var(--ui-space-4);
+  }
+
+  .pt-6 {
+    padding-block-start: var(--ui-space-6);
+  }
+
+  .pt-8 {
+    padding-block-start: var(--ui-space-8);
+  }
+
+  .pe-0 {
+    padding-inline-end: 0;
+  }
+
+  .pe-1 {
+    padding-inline-end: var(--ui-space-1);
+  }
+
+  .pe-2 {
+    padding-inline-end: var(--ui-space-2);
+  }
+
+  .pe-3 {
+    padding-inline-end: var(--ui-space-3);
+  }
+
+  .pe-4 {
+    padding-inline-end: var(--ui-space-4);
+  }
+
+  .pe-6 {
+    padding-inline-end: var(--ui-space-6);
+  }
+
+  .pe-8 {
+    padding-inline-end: var(--ui-space-8);
+  }
+
+  .pb-0 {
+    padding-block-end: 0;
+  }
+
+  .pb-1 {
+    padding-block-end: var(--ui-space-1);
+  }
+
+  .pb-2 {
+    padding-block-end: var(--ui-space-2);
+  }
+
+  .pb-3 {
+    padding-block-end: var(--ui-space-3);
+  }
+
+  .pb-4 {
+    padding-block-end: var(--ui-space-4);
+  }
+
+  .pb-6 {
+    padding-block-end: var(--ui-space-6);
+  }
+
+  .pb-8 {
+    padding-block-end: var(--ui-space-8);
+  }
+
+  .ps-0 {
+    padding-inline-start: 0;
+  }
+
+  .ps-1 {
+    padding-inline-start: var(--ui-space-1);
+  }
+
+  .ps-2 {
+    padding-inline-start: var(--ui-space-2);
+  }
+
+  .ps-3 {
+    padding-inline-start: var(--ui-space-3);
+  }
+
+  .ps-4 {
+    padding-inline-start: var(--ui-space-4);
+  }
+
+  .ps-6 {
+    padding-inline-start: var(--ui-space-6);
+  }
+
+  .ps-8 {
+    padding-inline-start: var(--ui-space-8);
+  }
+
+  .px-0 {
+    padding-inline: 0;
+  }
+
+  .px-1 {
+    padding-inline: var(--ui-space-1);
+  }
+
+  .px-2 {
+    padding-inline: var(--ui-space-2);
+  }
+
+  .px-3 {
+    padding-inline: var(--ui-space-3);
+  }
+
+  .px-4 {
+    padding-inline: var(--ui-space-4);
+  }
+
+  .py-0 {
+    padding-block: 0;
+  }
+
+  .py-1 {
+    padding-block: var(--ui-space-1);
+  }
+
+  .py-2 {
+    padding-block: var(--ui-space-2);
+  }
+
+  .py-3 {
+    padding-block: var(--ui-space-3);
+  }
+
+  .py-4 {
+    padding-block: var(--ui-space-4);
+  }
+
+  /* Gap utilities (for flex/grid) */
+  .gap-0 {
+    gap: 0;
+  }
+
+  .gap-1 {
+    gap: var(--ui-space-1);
+  }
+
+  .gap-2 {
+    gap: var(--ui-space-2);
+  }
+
+  .gap-3 {
+    gap: var(--ui-space-3);
+  }
+
+  .gap-4 {
+    gap: var(--ui-space-4);
+  }
+
+  .gap-6 {
+    gap: var(--ui-space-6);
+  }
+
+  .gap-8 {
+    gap: var(--ui-space-8);
+  }
+}

package/src/05-utilities/text/text.api.json

@@ -0,0 +1,38 @@
+{
+  "name": "text",
+  "type": "utility",
+  "utilities": [
+    "text-xs",
+    "text-sm",
+    "text-md",
+    "text-lg",
+    "text-xl",
+    "text-2xl",
+    "text-3xl",
+    "text-4xl",
+    "text-lead",
+    "text-eyebrow",
+    "text-caption",
+    "text-body-sm",
+    "font-normal",
+    "font-medium",
+    "font-semibold",
+    "font-bold",
+    "tracking-display",
+    "tracking-body",
+    "tracking-caps",
+    "uppercase",
+    "prose-sm",
+    "prose",
+    "prose-lg",
+    "text-primary",
+    "text-muted",
+    "text-success",
+    "text-warning",
+    "text-danger",
+    "text-start",
+    "text-center",
+    "text-end"
+  ],
+  "cssVars": []
+}

package/src/05-utilities/text/text.docs.json

@@ -0,0 +1,132 @@
+{
+  "id": "text-utils",
+  "type": "utility",
+  "title": "Text",
+  "description": "Typography and text utilities. Font sizes follow a 1.2 modular scale.",
+  "api": "text.api.json",
+  "sections": [
+    {
+      "title": "Sizes",
+      "description": "Font size utilities with 8px grid-snapped line-heights.",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            { "tag": "p", "class": "ui-text-xs", "text": "text-xs: 12px / 16px line-height" },
+            { "tag": "p", "class": "ui-text-sm", "text": "text-sm: 14px / 24px line-height" },
+            { "tag": "p", "class": "ui-text-md", "text": "text-md: 16px / 24px line-height" },
+            { "tag": "p", "class": "ui-text-lg", "text": "text-lg: 20px / 32px line-height" },
+            { "tag": "p", "class": "ui-text-xl", "text": "text-xl: 24px / 32px line-height" },
+            { "tag": "p", "class": "ui-text-2xl", "text": "text-2xl: 28px / 32px line-height" },
+            { "tag": "p", "class": "ui-text-3xl", "text": "text-3xl: 32px / 40px line-height" },
+            { "tag": "p", "class": "ui-text-4xl", "text": "text-4xl: 40px / 48px line-height" }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Text Roles",
+      "description": "Semantic text styles for specific use cases.",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "p",
+              "class": "ui-text-lead",
+              "text": "Lead: Opening paragraph style (20px / 32px)"
+            },
+            { "tag": "p", "class": "ui-text-eyebrow", "text": "Eyebrow: Small caps label" },
+            {
+              "tag": "p",
+              "class": "ui-text-caption",
+              "text": "Caption: Labels and hints (12px / 16px)"
+            },
+            {
+              "tag": "p",
+              "class": "ui-text-body-sm",
+              "text": "Body small: Secondary text (14px / 24px)"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Weights",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            { "tag": "p", "class": "ui-font-normal", "text": "font-normal (400)" },
+            { "tag": "p", "class": "ui-font-medium", "text": "font-medium (500)" },
+            { "tag": "p", "class": "ui-font-semibold", "text": "font-semibold (600)" },
+            { "tag": "p", "class": "ui-font-bold", "text": "font-bold (700)" }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Letter Spacing",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            {
+              "tag": "p",
+              "class": "ui-text-2xl ui-tracking-display",
+              "text": "tracking-display: Tight (-0.02em)"
+            },
+            { "tag": "p", "class": "ui-tracking-body", "text": "tracking-body: Default (0)" },
+            {
+              "tag": "p",
+              "class": "ui-tracking-caps ui-uppercase",
+              "text": "tracking-caps: Wide (+0.08em)"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Line Length",
+      "description": "Constrain text width for optimal readability.",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            { "tag": "p", "class": "ui-prose-sm", "text": "prose-sm: 45ch max-width" },
+            { "tag": "p", "class": "ui-prose", "text": "prose: 65ch max-width (recommended)" },
+            { "tag": "p", "class": "ui-prose-lg", "text": "prose-lg: 75ch max-width" }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Colors",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            { "tag": "p", "class": "ui-text-primary", "text": "text-primary" },
+            { "tag": "p", "class": "ui-text-muted", "text": "text-muted" },
+            { "tag": "p", "class": "ui-text-success", "text": "text-success" },
+            { "tag": "p", "class": "ui-text-warning", "text": "text-warning" },
+            { "tag": "p", "class": "ui-text-danger", "text": "text-danger" }
+          ]
+        }
+      ]
+    },
+    {
+      "title": "Alignment",
+      "examples": [
+        {
+          "layout": "stack",
+          "items": [
+            { "tag": "p", "class": "ui-text-start", "text": "text-start (default)" },
+            { "tag": "p", "class": "ui-text-center", "text": "text-center" },
+            { "tag": "p", "class": "ui-text-end", "text": "text-end" }
+          ]
+        }
+      ]
+    }
+  ]
+}