baseline-ds 0.1.4

package/dist/tokens/semantic/scss/_variables.scss

@@ -0,0 +1,264 @@
+
+// Do not edit directly, this file was auto-generated.
+
+$primitive-color-azure-100: #f1f1fc;
+$primitive-color-azure-200: #e4e4f9;
+$primitive-color-azure-300: #babbf0;
+$primitive-color-azure-400: #8889e5;
+$primitive-color-azure-500: #6568dd;
+$primitive-color-azure-600: #5154d9;
+$primitive-color-azure-700: #292cbd;
+$primitive-color-azure-800: #1d2087;
+$primitive-color-azure-900: #161865;
+$primitive-color-blue-100: #edf2ff;
+$primitive-color-blue-200: #dde6fe;
+$primitive-color-blue-300: #a6befd;
+$primitive-color-blue-400: #648dfc;
+$primitive-color-blue-500: #3269fb;
+$primitive-color-blue-600: #1252fb;
+$primitive-color-blue-700: #0334b7;
+$primitive-color-blue-800: #022683;
+$primitive-color-blue-900: #021c62;
+$primitive-color-brick-100: #f8f0f0;
+$primitive-color-brick-200: #e9d1d1;
+$primitive-color-brick-300: #ddb6b7;
+$primitive-color-brick-400: #d29e9f;
+$primitive-color-brick-500: #bc6f71;
+$primitive-color-brick-600: #b35b5d;
+$primitive-color-brick-700: #8c4143;
+$primitive-color-brick-800: #4e2425;
+$primitive-color-brick-900: #3a1b1b;
+$primitive-color-emerald-100: #eaf5ea;
+$primitive-color-emerald-200: #bce0bd;
+$primitive-color-emerald-300: #93cd96;
+$primitive-color-emerald-400: #6fbc72;
+$primitive-color-emerald-500: #459549;
+$primitive-color-emerald-600: #357238;
+$primitive-color-emerald-700: #2e6331;
+$primitive-color-emerald-800: #244e26;
+$primitive-color-emerald-900: #132914;
+$primitive-color-green-100: #daf9e9;
+$primitive-color-green-200: #b5f4d4;
+$primitive-color-green-300: #22da7c;
+$primitive-color-green-400: #1aa85f;
+$primitive-color-green-500: #15864c;
+$primitive-color-green-600: #127442;
+$primitive-color-green-700: #0c502d;
+$primitive-color-green-800: #093820;
+$primitive-color-green-900: #062a18;
+$primitive-color-grey-100: #f6f6f6;
+$primitive-color-grey-200: #e6e6e5;
+$primitive-color-grey-300: #c0bfbd;
+$primitive-color-grey-400: #acaaa8;
+$primitive-color-grey-500: #949290;
+$primitive-color-grey-600: #676563;
+$primitive-color-grey-700: #595856;
+$primitive-color-grey-800: #464543;
+$primitive-color-grey-900: #121212;
+$primitive-color-pink-100: #feeef8;
+$primitive-color-pink-200: #fdc7e8;
+$primitive-color-pink-300: #fba4da;
+$primitive-color-pink-400: #fa81cc;
+$primitive-color-pink-500: #f521a5;
+$primitive-color-pink-600: #df0a8e;
+$primitive-color-pink-700: #aa076c;
+$primitive-color-pink-800: #62043e;
+$primitive-color-pink-900: #4a032f;
+$primitive-color-purple-100: #f8f0f6;
+$primitive-color-purple-200: #e9cfe4;
+$primitive-color-purple-300: #dcb3d4;
+$primitive-color-purple-400: #d09ac5;
+$primitive-color-purple-500: #c27bb4;
+$primitive-color-purple-600: #b969a9;
+$primitive-color-purple-700: #af539d;
+$primitive-color-purple-800: #853e77;
+$primitive-color-purple-900: #4a2242;
+$primitive-color-red-100: #feefee;
+$primitive-color-red-200: #fedfde;
+$primitive-color-red-300: #fbaaa8;
+$primitive-color-red-400: #f85f5b;
+$primitive-color-red-500: #ea0f0a;
+$primitive-color-red-600: #cc0d08;
+$primitive-color-red-700: #8e0906;
+$primitive-color-red-800: #670704;
+$primitive-color-red-900: #4e0503;
+$primitive-color-white-500: #ffffff;
+$primitive-color-yellow-100: #fdf3c1;
+$primitive-color-yellow-200: #fbe682;
+$primitive-color-yellow-300: #f9d425;
+$primitive-color-yellow-400: #e2bc06;
+$primitive-color-yellow-500: #caa806;
+$primitive-color-yellow-600: #8b7304;
+$primitive-color-yellow-700: #786403;
+$primitive-color-yellow-800: #524402;
+$primitive-color-yellow-900: #2b2301;
+$primitive-color-yellow-050: #f9fae1;
+$primitive-color-yolk-100: #fef1d0;
+$primitive-color-yolk-200: #fce4a2;
+$primitive-color-yolk-300: #f4b407;
+$primitive-color-yolk-400: #bb8a05;
+$primitive-color-yolk-500: #966f04;
+$primitive-color-yolk-600: #826004;
+$primitive-color-yolk-700: #594102;
+$primitive-color-yolk-800: #3f2e02;
+$primitive-color-yolk-900: #2e2201;
+$primitive-sizing-radius-100: 0.500rem;
+$primitive-sizing-radius-150: 0.750rem;
+$primitive-sizing-radius-200: 1.000rem;
+$primitive-sizing-radius-300: 1.500rem;
+$primitive-sizing-radius-000: 0.000rem;
+$primitive-sizing-radius-025: 0.125rem;
+$primitive-sizing-radius-050: 0.250rem;
+$primitive-sizing-radius-075: 0.375rem;
+$primitive-sizing-radius-full: 624.938rem;
+$primitive-sizing-scale-100: 4.000rem;
+$primitive-sizing-scale-110: 5.000rem;
+$primitive-sizing-scale-120: 6.000rem;
+$primitive-sizing-scale-130: 8.000rem;
+$primitive-sizing-scale-140: 10.000rem;
+$primitive-sizing-scale-000: 0.000rem;
+$primitive-sizing-scale-010: 0.250rem;
+$primitive-sizing-scale-020: 0.500rem;
+$primitive-sizing-scale-030: 0.750rem;
+$primitive-sizing-scale-040: 1.000rem;
+$primitive-sizing-scale-050: 1.250rem;
+$primitive-sizing-scale-060: 1.500rem;
+$primitive-sizing-scale-070: 2.000rem;
+$primitive-sizing-scale-080: 2.500rem;
+$primitive-sizing-scale-090: 3.000rem;
+$primitive-sizing-stroke-100: 0.125rem;
+$primitive-sizing-stroke-200: 0.250rem;
+$primitive-sizing-stroke-300: 0.375rem;
+$primitive-sizing-stroke-000: 0.000rem;
+$primitive-sizing-stroke-020: 0.016rem;
+$primitive-sizing-stroke-050: 0.063rem;
+$primitive-spacing-scale-100: 1.500rem;
+$primitive-spacing-scale-110: 2.000rem;
+$primitive-spacing-scale-120: 2.500rem;
+$primitive-spacing-scale-130: 3.000rem;
+$primitive-spacing-scale-140: 4.000rem;
+$primitive-spacing-scale-150: 5.000rem;
+$primitive-spacing-scale-160: 6.000rem;
+$primitive-spacing-scale-000: 0.000rem;
+$primitive-spacing-scale-010: 0.063rem;
+$primitive-spacing-scale-020: 0.125rem;
+$primitive-spacing-scale-030: 0.250rem;
+$primitive-spacing-scale-040: 0.375rem;
+$primitive-spacing-scale-050: 0.500rem;
+$primitive-spacing-scale-060: 0.625rem;
+$primitive-spacing-scale-070: 0.750rem;
+$primitive-spacing-scale-080: 1.000rem;
+$primitive-spacing-scale-090: 1.250rem;
+$primitive-typography-font-family-dm-sans: DM Sans;
+$primitive-typography-font-family-fustat: Fustat;
+$primitive-typography-font-family-gabarito: Gabarito;
+$primitive-typography-font-family-geist-mono: Geist Mono;
+$primitive-typography-font-family-jet-brains-mono: JetBrains Mono;
+$primitive-typography-font-size-100: 1.000rem;
+$primitive-typography-font-size-120: 1.188rem;
+$primitive-typography-font-size-145: 1.438rem;
+$primitive-typography-font-size-175: 1.750rem;
+$primitive-typography-font-size-200: 2.063rem;
+$primitive-typography-font-size-250: 2.500rem;
+$primitive-typography-font-size-300: 3.000rem;
+$primitive-typography-font-size-360: 3.625rem;
+$primitive-typography-font-size-435: 4.375rem;
+$primitive-typography-font-size-525: 5.250rem;
+$primitive-typography-font-size-625: 100;
+$primitive-typography-font-size-750: 7.500rem;
+$primitive-typography-font-size-1250: 12.500rem;
+$primitive-typography-font-size-070: 0.688rem;
+$primitive-typography-font-size-080: 0.813rem;
+$primitive-typography-font-weight-bold: 43.750rem;
+$primitive-typography-font-weight-extra-bold: 56.250rem;
+$primitive-typography-font-weight-light: 18.750rem;
+$primitive-typography-font-weight-normal: 31.250rem;
+$primitive-typography-line-height-loose: 10.000rem;
+$primitive-typography-line-height-looser: 11.250rem;
+$primitive-typography-line-height-normal: 8.750rem;
+$primitive-typography-line-height-tight: 7.500rem;
+$primitive-typography-line-height-tighter: 6.250rem;
+$brand-color-accent-100: #22da7c;
+$brand-color-accent-150: #15864c;
+$brand-color-accent-050: #b5f4d4;
+$brand-color-background-primary: #feefee;
+$brand-color-brand-100: #1252fb;
+$brand-color-brand-150: #1d2087;
+$brand-color-brand-050: #648dfc;
+$brand-color-danger-100: #cc0d08;
+$brand-color-danger-150: #8e0906;
+$brand-color-danger-050: #fbaaa8;
+$brand-color-highlight-100: #f4b407;
+$brand-color-highlight-150: #bb8a05;
+$brand-color-highlight-050: #fce4a2;
+$brand-color-input-100: #dde6fe;
+$brand-color-input-050: #ffffff;
+$brand-color-neutral-100: #c0bfbd;
+$brand-color-neutral-125: #949290;
+$brand-color-neutral-150: #595856;
+$brand-color-neutral-050: #f6f6f6;
+$brand-color-neutral-075: #e6e6e5;
+$brand-color-secondary-100: #f85f5b;
+$brand-color-secondary-150: #cc0d08;
+$brand-color-secondary-050: #fedfde;
+$brand-color-success-100: #1aa85f;
+$brand-color-success-150: #127442;
+$brand-color-success-050: #b5f4d4;
+$brand-color-warning-100: #bb8a05;
+$brand-color-warning-150: #826004;
+$brand-color-warning-050: #fce4a2;
+$brand-sizing-radius-full: 624.938rem;
+$brand-sizing-radius-large: 1.500rem;
+$brand-sizing-radius-medium: 1.000rem;
+$brand-sizing-radius-small: 0.750rem;
+$brand-sizing-stroke-lg: 0.000rem;
+$brand-sizing-stroke-md: 0.000rem;
+$brand-sizing-stroke-sm: 0.000rem;
+$brand-sizing-stroke-xl: 0.063rem;
+$brand-typography-font-family-body: Fustat;
+$brand-typography-font-family-code: JetBrains Mono;
+$brand-typography-font-family-display: Gabarito;
+$brand-typography-font-family-heading: Fustat;
+$brand-typography-font-family-label: Fustat;
+$semantic-color-background-code-default: #595856;
+$semantic-color-background-disabled-default: #e6e6e5;
+$semantic-color-background-primary-default: #f6f6f6;
+$semantic-color-background-secondary-default: #1252fb;
+$semantic-color-background-tertiary-default: #595856;
+$semantic-color-border-default: #fce4a2;
+$semantic-color-border-secondary: #e6e6e5;
+$semantic-color-input-background-active: #ffffff;
+$semantic-color-input-background-default: #dde6fe;
+$semantic-color-input-background-disabled: #e6e6e5;
+$semantic-color-typography-code-default: #f6f6f6;
+$semantic-color-typography-code-secondary: #949290;
+$semantic-color-typography-label-default: #949290;
+$semantic-color-typography-primary-darker: #bb8a05;
+$semantic-color-typography-primary-default: #1d2087;
+$semantic-color-typography-primary-lighter: #1252fb;
+$semantic-color-typography-secondary-darker: #f85f5b;
+$semantic-color-typography-secondary-default: #fedfde;
+$semantic-color-typography-secondary-lighter: #f6f6f6;
+$semantic-sizing-typography-font-size-code-large: 1.188rem;
+$semantic-sizing-typography-font-size-code-medium: 1.000rem;
+$semantic-sizing-typography-font-size-code-small: 0.813rem;
+$semantic-sizing-typography-font-size-code-xsmall: 0.688rem;
+$semantic-sizing-typography-font-size-display-large: 7.500rem;
+$semantic-sizing-typography-font-size-display-medium: 4.375rem;
+$semantic-sizing-typography-font-size-display-small: 3.625rem;
+$semantic-sizing-typography-font-size-display-x-large: 12.500rem;
+$semantic-sizing-typography-font-size-display-x-small: 3.000rem;
+$semantic-sizing-typography-font-size-heading-large: 2.063rem;
+$semantic-sizing-typography-font-size-heading-medium: 1.750rem;
+$semantic-sizing-typography-font-size-heading-small: 1.438rem;
+$semantic-sizing-typography-font-size-heading-xlarge: 2.500rem;
+$semantic-sizing-typography-font-size-heading-xsmall: 1.188rem;
+$semantic-sizing-typography-font-size-heading-xxlarge: 3.625rem;
+$semantic-sizing-typography-font-size-label-large: 1.188rem;
+$semantic-sizing-typography-font-size-label-medium: 1.000rem;
+$semantic-sizing-typography-font-size-label-small: 0.813rem;
+$semantic-sizing-typography-font-size-label-xsmall: 0.688rem;
+$semantic-sizing-typography-font-size-paragraph-large: 1.188rem;
+$semantic-sizing-typography-font-size-paragraph-medium: 1.000rem;
+$semantic-sizing-typography-font-size-paragraph-small: 0.813rem;
+$semantic-sizing-typography-font-size-paragraph-xsmall: 0.688rem;

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "baseline-ds",
+  "version": "0.1.4",
+  "description": "Baseline Design System - A comprehensive design system with tokens, components, and Storybook documentation",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "tokens",
+    "src/fonts.css"
+  ],
+  "scripts": {
+    "build": "npm run build:components && npm run build:tokens && npm run combine:tokens",
+    "build:tokens": "node scripts/build-all-brands.js",
+    "combine:tokens": "node scripts/combine-token-css.js",
+    "build:components": "tsup",
+    "generate-icons": "node scripts/generate-icons.js",
+    "changelog": "node scripts/generate-master-changelog.js",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "fetch-tokens": "node scripts/fetch-tokens.js",
+    "figma:sync": "figma connect sync",
+    "figma:create": "figma connect create",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "design-system",
+    "components",
+    "tokens",
+    "react",
+    "storybook"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "style-dictionary": "^4.3.1"
+  },
+  "devDependencies": {
+    "@figma/code-connect": "^1.3.12",
+    "@storybook/addon-links": "^10.2.11",
+    "@storybook/addon-onboarding": "^10.2.11",
+    "@storybook/react": "^10.2.11",
+    "@storybook/react-vite": "^10.2.11",
+    "@types/node": "^22.10.2",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^10.2.11",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.5"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./fonts.css": "./src/fonts.css",
+    "./dist/index.css": "./dist/index.css",
+    "./tokens/css": "./dist/tokens/baseline/css/variables.css",
+    "./tokens/scss": "./dist/tokens/baseline/scss/_variables.scss",
+    "./tokens/js": "./dist/tokens/baseline/js/tokens.js",
+    "./tokens/json": "./dist/tokens/baseline/json/tokens.json",
+    "./tokens/css/*": "./dist/tokens/*/css/variables.css",
+    "./tokens/scss/*": "./dist/tokens/*/scss/_variables.scss",
+    "./tokens/js/*": "./dist/tokens/*/js/tokens.js",
+    "./tokens/json/*": "./dist/tokens/*/json/tokens.json"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zeroheight-demos/baseline-ds.git"
+  }
+}

package/src/fonts.css

@@ -0,0 +1,17 @@
+/* Google Fonts imports for design system fonts */
+
+/* DM Sans - Used for body, heading, label */
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..144,100..1000;1,9..144,100..1000&display=swap');
+
+/* Fustat - Used for body, heading, label */
+@import url('https://fonts.googleapis.com/css2?family=Fustat:wght@400;500;600;700;800&display=swap');
+
+/* Gabarito - Used for display */
+@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400;500;600;700;800;900&display=swap');
+
+/* Geist Mono - Used for code */
+@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&display=swap');
+
+/* JetBrains Mono - Used for code */
+@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+

package/tokens/token_0001PrimitiveBrand_Baseline.json

@@ -0,0 +1,204 @@
+{
+  "brand": {
+    "color": {
+      "accent": {
+        "050": {
+          "type": "color",
+          "value": "{primitive.color.pink.300}"
+        },
+        "100": {
+          "type": "color",
+          "value": "{primitive.color.pink.500}"
+        },
+        "150": {
+          "type": "color",
+          "value": "{primitive.color.pink.700}"
+        }
+      },
+      "background": {
+        "primary": {
+          "type": "color",
+          "value": "{primitive.color.yellow.050}"
+        }
+      },
+      "brand": {
+        "050": {
+          "type": "color",
+          "value": "{primitive.color.azure.300}"
+        },
+        "100": {
+          "type": "color",
+          "value": "{primitive.color.azure.500}"
+        },
+        "150": {
+          "type": "color",
+          "value": "{primitive.color.azure.800}"
+        }
+      },
+      "danger": {
+        "050": {
+          "type": "color",
+          "value": "{primitive.color.brick.400}"
+        },
+        "100": {
+          "type": "color",
+          "value": "{primitive.color.brick.600}"
+        },
+        "150": {
+          "type": "color",
+          "value": "{primitive.color.brick.700}"
+        }
+      },
+      "highlight": {
+        "050": {
+          "type": "color",
+          "value": "{primitive.color.azure.700}"
+        },
+        "100": {
+          "type": "color",
+          "value": "{primitive.color.azure.800}"
+        },
+        "150": {
+          "type": "color",
+          "value": "{primitive.color.azure.900}"
+        }
+      },
+      "input": {
+        "050": {
+          "type": "color",
+          "value": "{primitive.color.white.500}"
+        },
+        "100": {
+          "type": "color",
+          "value": "{primitive.color.azure.200}"
+        }
+      },
+      "neutral": {
+        "050": {
+          "type": "color",
+          "value": "{primitive.color.grey.100}"
+        },
+        "075": {
+          "type": "color",
+          "value": "{primitive.color.grey.300}"
+        },
+        "100": {
+          "type": "color",
+          "value": "{primitive.color.grey.500}"
+        },
+        "125": {
+          "type": "color",
+          "value": "{primitive.color.grey.600}"
+        },
+        "150": {
+          "type": "color",
+          "value": "{primitive.color.grey.800}"
+        }
+      },
+      "secondary": {
+        "050": {
+          "type": "color",
+          "value": "{primitive.color.yellow.100}"
+        },
+        "100": {
+          "type": "color",
+          "value": "{primitive.color.yellow.200}"
+        },
+        "150": {
+          "type": "color",
+          "value": "{primitive.color.yellow.400}"
+        }
+      },
+      "success": {
+        "050": {
+          "type": "color",
+          "value": "{primitive.color.emerald.300}"
+        },
+        "100": {
+          "type": "color",
+          "value": "{primitive.color.emerald.500}"
+        },
+        "150": {
+          "type": "color",
+          "value": "{primitive.color.emerald.600}"
+        }
+      },
+      "warning": {
+        "050": {
+          "type": "color",
+          "value": "{primitive.color.yellow.300}"
+        },
+        "100": {
+          "type": "color",
+          "value": "{primitive.color.yellow.500}"
+        },
+        "150": {
+          "type": "color",
+          "value": "{primitive.color.yellow.600}"
+        }
+      }
+    },
+    "sizing": {
+      "radius": {
+        "full": {
+          "type": "number",
+          "value": "{primitive.sizing.radius.full}"
+        },
+        "large": {
+          "type": "number",
+          "value": "{primitive.sizing.radius.150}"
+        },
+        "medium": {
+          "type": "number",
+          "value": "{primitive.sizing.radius.075}"
+        },
+        "small": {
+          "type": "number",
+          "value": "{primitive.sizing.radius.025}"
+        }
+      },
+      "stroke": {
+        "lg": {
+          "type": "number",
+          "value": "{primitive.sizing.stroke.100}"
+        },
+        "md": {
+          "type": "number",
+          "value": "{primitive.sizing.stroke.050}"
+        },
+        "sm": {
+          "type": "number",
+          "value": "{primitive.sizing.stroke.020}"
+        },
+        "xl": {
+          "type": "number",
+          "value": "{primitive.sizing.stroke.200}"
+        }
+      }
+    },
+    "typography": {
+      "font-family": {
+        "body": {
+          "type": "string",
+          "value": "{primitive.typography.font-family.DMSans}"
+        },
+        "code": {
+          "type": "string",
+          "value": "{primitive.typography.font-family.Geist Mono}"
+        },
+        "display": {
+          "type": "string",
+          "value": "{primitive.typography.font-family.DMSans}"
+        },
+        "heading": {
+          "type": "string",
+          "value": "{primitive.typography.font-family.DMSans}"
+        },
+        "label": {
+          "type": "string",
+          "value": "{primitive.typography.font-family.DMSans}"
+        }
+      }
+    }
+  }
+}