@kroo-web/design-system 1.0.13 → 1.0.15

package/dist/styles/global.css

@@ -0,0 +1,20 @@
+
+/* Import all tokens from each section of Design System */
+@import "./tokens/index.css";
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-family: var(--font-primary);
+}
+
+.sr-only:not(:focus):not(:active) {
+  clip: rect(0 0 0 0); 
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap; 
+  width: 1px;
+}

package/dist/styles/tokens/global.css

@@ -0,0 +1,7 @@
+
+:root {
+  --font-primary: "Inter", sans-serif;
+  --font-secondary: "Brygada 1918", sans-serif;
+}
+
+

package/dist/styles/tokens/index.css

@@ -0,0 +1,10 @@
+/* PRODUCT TOKENS */
+@import url("./product.css");
+
+/* MARKETING TOKENS */
+
+@import url("./marketing.css");
+
+/* GLOBAL TOKENS */
+
+@import url("./global.css");

package/dist/styles/tokens/product.css

@@ -0,0 +1,36 @@
+
+
+/* Product Variables */
+
+:root {
+  /* Colors */
+  --product-error: rgba(var(--system-red-rgb));
+
+  /* Spacing */
+  --product-spacing-1: 0.25rem;
+  --product-spacing-2: 0.50rem;
+  --product-spacing-3: 0.75rem;
+  --product-spacing-4: 1rem;
+  --product-spacing-5: 1.25rem;
+  --product-spacing-6: 1.50rem;
+  --product-spacing-7: 2rem;
+  --product-spacing-8: 2.50rem;
+  --product-spacing-9: 3rem;
+  --product-spacing-10: 3.50rem;
+  --product-spacing-11: 4rem;
+
+  /* Border Radius  */
+  --product-radius-1: 0.25rem;
+  --product-radius-2: 0.50rem;
+  --product-radius-3: 0.75rem;
+  --product-radius-4: 1rem;
+
+  /* Border Width */
+  --product-border-width-1: 2px;
+
+
+  /* Component Specific Variables */
+
+  --product-text-field-spacing: 0.625rem;
+  --product-radio-select-spacing: 1.25rem;
+}

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "@kroo-web/design-system",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "Web design system for Kroo including the components for the marketing site and the product side.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
-  "types": "dist/types.d.ts", 
+  "types": "dist/types.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src/styles/global.css"
   ],
   "scripts": {
-    "dev": "storybook",
+    "dev": "storybook dev -p 6006",
+    "dev:build": "storybook build",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "copy-files": "copyfiles -u 1 \"src/**/*.css\" \"src/**/*.svg\" \"src/**/*.json\" dist/",
     "build": "rimraf dist && rollup -c --bundleConfigAsCjs",
     "deploy": "npm run build && npm publish --access public",
     "prebuild": "rimraf ./dist"
@@ -52,6 +51,8 @@
     "react-hook-form": "^7.51.0",
     "rimraf": "^5.0.5",
     "rollup": "^4.12.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-import-css": "^3.5.0",
     "rollup-plugin-postcss": "^4.0.2",
     "typescript": "^5.4.2",
     "vitest": "^1.3.1"

package/src/styles/global.css

@@ -0,0 +1,20 @@
+
+/* Import all tokens from each section of Design System */
+@import "./tokens/index.css";
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-family: var(--font-primary);
+}
+
+.sr-only:not(:focus):not(:active) {
+  clip: rect(0 0 0 0); 
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap; 
+  width: 1px;
+}