@outs-tand-ing/ui 0.0.4 → 0.0.6

package/dist/components/BrandLogo.vue.d.ts

@@ -1,5 +1,5 @@
 type __VLS_Props = {
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/components/BrandLogo.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BrandLogo.vue.d.ts","sourceRoot":"","sources":["../../src/components/BrandLogo.vue"],"names":[],"mappings":"AAYA,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B,CAAC;AA6BF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"BrandLogo.vue.d.ts","sourceRoot":"","sources":["../../src/components/BrandLogo.vue"],"names":[],"mappings":"AAYA,KAAK,WAAW,GAAG;IACjB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CACjC,CAAC;AA6BF,QAAA,MAAM,YAAY,kSAEhB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/index.js

@@ -1,5 +1,5 @@
-import { defineComponent as s, openBlock as _, createElementBlock as i, toDisplayString as p, normalizeClass as u } from "vue";
-const l = /* @__PURE__ */ s({
+import { defineComponent as r, openBlock as _, createElementBlock as i, toDisplayString as p, normalizeClass as u } from "vue";
+const l = /* @__PURE__ */ r({
   __name: "PinkBox",
   props: {
     label: { type: String, required: !1 }
@@ -11,11 +11,11 @@ const l = /* @__PURE__ */ s({
   }
 }), a = (n, t) => {
   const e = n.__vccOpts || n;
-  for (const [o, r] of t)
-    e[o] = r;
+  for (const [s, o] of t)
+    e[s] = o;
   return e;
 }, d = { class: "bg-pink-500 text-white rounded-lg p-4 font-medium" };
-function f(n, t, e, o, r, c) {
+function f(n, t, e, s, o, c) {
   return _(), i(
     "div",
     d,
@@ -24,7 +24,7 @@ function f(n, t, e, o, r, c) {
     /* TEXT */
   );
 }
-const g = /* @__PURE__ */ a(l, [["render", f], ["__file", "/Users/kemal/Desktop/Kite/_Code/outs/ui/src/components/PinkBox.vue"]]), m = /* @__PURE__ */ s({
+const g = /* @__PURE__ */ a(l, [["render", f], ["__file", "/Users/kemal/Desktop/Kite/_Code/outs/ui/src/components/PinkBox.vue"]]), m = /* @__PURE__ */ r({
   __name: "BrandLogo",
   props: {
     size: { type: String, required: !1 }
@@ -35,11 +35,11 @@ const g = /* @__PURE__ */ a(l, [["render", f], ["__file", "/Users/kemal/Desktop/
     return Object.defineProperty(e, "__isScriptSetup", { enumerable: !1, value: !0 }), e;
   }
 });
-function x(n, t, e, o, r, c) {
+function x(n, t, e, s, o, c) {
   return _(), i(
     "span",
     {
-      class: u(["font-posterama text-gray-900", { "text-xl": e.size === "sm", "text-3xl": !e.size || e.size === "md", "text-5xl": e.size === "lg" }])
+      class: u(["font-posterama", { "text-base": e.size === "xs", "text-xl": e.size === "sm", "text-3xl": !e.size || e.size === "md", "text-5xl": e.size === "lg" }])
     },
     "OUTSTANDING",
     2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outs-tand-ing/ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "description": "Shared Vue components, icons, and design tokens for Outs",
   "type": "module",
   "sideEffects": [

package/src/assets/typography.css

@@ -5,3 +5,43 @@
   font-style: normal;
   font-display: swap;
 }
+
+.text-trim {
+  text-box: trim-both cap alphabetic;
+}
+
+@utility text-trim-start {
+  text-box: trim-start cap alphabetic;
+}
+
+@utility text-trim-end {
+  text-box: trim-end cap alphabetic;
+}
+
+@layer base {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-heading);
+    color: var(--color-text-primary);
+    font-weight: 900;
+    line-height: 1.1;
+    letter-spacing: -0.02em;
+    transition: color 200ms ease, font-family 200ms ease;
+  }
+
+  h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
+
+  h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); }
+
+  h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); letter-spacing: -0.01em; }
+
+  h4 { font-size: 1.25rem; letter-spacing: 0; font-weight: 700; }
+
+  h5 { font-size: 1rem; letter-spacing: 0; font-weight: 700; }
+
+  h6 { font-size: 0.875rem; letter-spacing: 0; font-weight: 600; color: var(--color-text-secondary); }
+}

package/src/components/BrandLogo.vue

@@ -1,9 +1,9 @@
 <template>
-  <span class="font-posterama text-gray-900" :class="{ 'text-xl': size === 'sm', 'text-3xl': !size || size === 'md', 'text-5xl': size === 'lg' }">OUTSTANDING</span>
+  <span class="font-posterama" :class="{ 'text-base': size === 'xs', 'text-xl': size === 'sm', 'text-3xl': !size || size === 'md', 'text-5xl': size === 'lg' }">OUTSTANDING</span>
 </template>
 
 <script setup lang="ts">
 defineProps<{
-  size?: 'sm' | 'md' | 'lg'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
 }>()
 </script>