@sonic-equipment/ui 0.0.0

package/src/tokens/font-face.css

@@ -0,0 +1,150 @@
+/*********************************************************
+ *
+ *  Pancetta
+ *
+*********************************************************/
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100022/fonts/pancetta/pancettapro-thin-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100018/fonts/pancetta/pancettapro-thin-webfont.woff") format("woff");
+  font-weight: 100;
+  font-style: normal;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100030/fonts/pancetta/pancettapro-thinitalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100042/fonts/pancetta/pancettapro-thinitalic-webfont.woff") format("woff");
+  font-weight: 100;
+  font-style: italic;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099957/fonts/pancetta/pancettapro-extralight-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099944/fonts/pancetta/pancettapro-extralight-webfont.woff") format("woff");
+  font-weight: 200;
+  font-style: normal;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099964/fonts/pancetta/pancettapro-extralightitalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099960/fonts/pancetta/pancettapro-extralightitalic-webfont.woff") format("woff");
+  font-weight: 200;
+  font-style: italic;
+}
+
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099985/fonts/pancetta/pancettapro-light-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099977/fonts/pancetta/pancettapro-light-webfont.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100009/fonts/pancetta/pancettapro-lightitalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099989/fonts/pancetta/pancettapro-lightitalic-webfont.woff") format("woff");
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100013/fonts/pancetta/pancettapro-regular-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100005/fonts/pancetta/pancettapro-regular-webfont.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099973/fonts/pancetta/pancettapro-italic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099969/fonts/pancetta/pancettapro-italic-webfont.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099997/fonts/pancetta/pancettapro-medium-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099981/fonts/pancetta/pancettapro-medium-webfont.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100001/fonts/pancetta/pancettapro-mediumitalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099993/fonts/pancetta/pancettapro-mediumitalic-webfont.woff") format("woff");
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100038/fonts/pancetta/pancettapro-semibold-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100034/fonts/pancetta/pancettapro-semibold-webfont.woff") format("woff");
+  font-weight: 600;
+  font-style: normal;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100026/fonts/pancetta/pancettapro-semibolditalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711100047/fonts/pancetta/pancettapro-semibolditalic-webfont.woff") format("woff");
+  font-weight: 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099948/fonts/pancetta/pancettapro-bold-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099932/fonts/pancetta/pancettapro-bold-webfont.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099952/fonts/pancetta/pancettapro-bolditalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099936/fonts/pancetta/pancettapro-bolditalic-webfont.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099929/fonts/pancetta/pancettapro-black-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099921/fonts/pancetta/pancettapro-black-webfont.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-display: swap;
+  font-family: "Pancetta";
+  src: url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099941/fonts/pancetta/pancettapro-blackitalic-webfont.woff2") format("woff2"),
+      url("https://res.cloudinary.com/dkz9eknwh/raw/upload/v1711099924/fonts/pancetta/pancettapro-blackitalic-webfont.woff") format("woff");
+  font-weight: 900;
+  font-style: italic;
+}

package/src/tokens/fonts.css

@@ -0,0 +1,28 @@
+:root {   
+  --font-family-sonic: 'Pancetta', sans-serif;  
+
+  --font-size-20: 0.75rem; /* 12px */
+  --font-size-24: 0.875rem; /* 14px */
+  --font-size-28: 1rem; /* 16px */
+  --font-size-32: 1.125rem; /* 18px */
+  --font-size-36: 1.25rem; /* 20px */
+  --font-size-40: 1.5rem; /* 24px */
+  --font-size-48: 1.875rem;/* 30px */ 
+  --font-size-56: 2.25rem; /* 36px */
+  --font-size-64: 3rem; /* 48px */
+  --font-size-72: 3.75rem; /* 60px */
+  --font-size-80: 4.5rem; /* 72px */
+  --font-size-96: 6rem; /* 96px */
+  --font-size-112: 8rem; /* 128px */
+  --font-size-base: var(--font-size-28);
+
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+}

package/src/tokens/index.css

@@ -0,0 +1,6 @@
+@import "./fonts.css";
+@import "./font-face.css";
+@import "./breakpoints.css";
+@import "./spacing.css";
+@import "./colors.css";
+@import "./border.css";

package/src/tokens/spacing.css

@@ -0,0 +1,23 @@
+:root {
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-26: 24px;
+  --space-28: 28px;
+  --space-32: 32px;
+  --space-36: 36px;
+  --space-40: 40px;
+  --space-48: 48px;
+  --space-64: 64px;
+  --space-80: 80px;
+  --space-96: 96px;
+  --space-112: 112px;
+  --space-128: 128px;
+  --space-160: 160px;
+  --space-192: 192px;
+  --space-224: 224px;
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "declaration": true,
+    "declarationDir": "dist/dts",
+  }
+}

package/typings.d.ts

@@ -0,0 +1 @@
+declare module "*.module.css";