Core design system

apps/gitness/package.json

@@ -25,6 +25,7 @@
     "@harnessio/code-service-client": "3.5.0",
     "@harnessio/forms": "workspace:*",
     "@harnessio/pipeline-graph": "workspace:*",
+    "@harnessio/core-design-system": "workspace:*",
     "@harnessio/ui": "workspace:*",
     "@harnessio/views": "workspace:*",
     "@harnessio/yaml-editor": "workspace:*",

apps/gitness/src/test-component.tsx

@@ -0,0 +1,154 @@
+import { useMemo } from 'react'
+
+import * as styles from '@harnessio/core-design-system/styles-esm'
+import { Badge, Icon, Text, Tooltip } from '@harnessio/ui/components'
+
+export default function TestComponent() {
+  const colorPalette = useMemo(() => {
+    const shades = Object.keys(styles.colors.colors.blue)
+
+    return { shades }
+  }, [])
+
+  return (
+    <div className="p-8 bg-black text-white max-w-[800px] mx-auto my-6 grid gap-10">
+      <div>
+        <Text as="h1" className="text-3xl font-bold mb-2">
+          Badge
+        </Text>
+        <Text as="p" className="mb-10 text-gray-400">
+          Different Badge variations
+        </Text>
+
+        <div className="space-x-2">
+          <Badge>Default</Badge>
+          <Badge variant="neutral">neutral</Badge>
+          <Badge variant="success">Success</Badge>
+          <Badge variant="warning">warning</Badge>
+          <Badge variant="danger">danger</Badge>
+          <Badge variant="running">running</Badge>
+          <Badge variant="merged">merged</Badge>
+          <Badge variant="ai">ai</Badge>
+        </div>
+
+        <Text as="p" className="mt-10 mb-5 text-gray-400">
+          Rounded full
+        </Text>
+
+        <div className="space-x-2">
+          <Badge borderRadius="full">Default</Badge>
+          <Badge borderRadius="full" variant="neutral">
+            neutral
+          </Badge>
+          <Badge borderRadius="full" variant="success">
+            {/* <Icon size={10} name="tick" /> <span>Success</span> */}
+            Success
+          </Badge>
+          <Badge borderRadius="full" variant="warning">
+            warning
+          </Badge>
+          <Badge borderRadius="full" variant="danger">
+            danger
+          </Badge>
+          <Badge borderRadius="full" variant="running">
+            running
+          </Badge>
+          <Badge borderRadius="full" variant="merged">
+            merged
+          </Badge>
+          <Badge borderRadius="full" variant="ai">
+            ai
+          </Badge>
+        </div>
+
+        <Text as="p" className="mt-10 mb-5 text-gray-400">
+          Size sm
+        </Text>
+
+        <div className="space-x-2">
+          <Badge size="sm">Default</Badge>
+          <Badge size="sm" variant="neutral">
+            neutral
+          </Badge>
+          <Badge size="sm" variant="success">
+            {/* <Icon size={10} name="tick" /> <span>Success</span> */}
+            Success
+          </Badge>
+          <Badge size="sm" variant="warning">
+            warning
+          </Badge>
+          <Badge size="sm" variant="danger">
+            danger
+          </Badge>
+          <Badge size="sm" variant="running">
+            running
+          </Badge>
+          <Badge size="sm" variant="merged">
+            merged
+          </Badge>
+          <Badge size="sm" variant="ai">
+            ai
+          </Badge>
+        </div>
+      </div>
+
+      <div style={{ backgroundColor: '#333' }} className="h-1" />
+
+      <div>
+        <Text as="h1" className="text-3xl font-bold my-2">
+          Core color palette
+        </Text>
+        <Text as="p" className="mb-10 text-gray-400">
+          The main color used to define the brand or highlight key elements.
+        </Text>
+
+        {/* Shades */}
+        <div className="flex mb-4">
+          <div className="w-24"></div> {/* Empty space for color name column */}
+          {colorPalette.shades.map(shade => (
+            <div key={shade} className="flex-1 text-center font-medium">
+              {shade}
+            </div>
+          ))}
+        </div>
+
+        {/* Colors */}
+        <div className="space-y-2">
+          {Object.keys(styles.colors.colors).map(colorName => {
+            const colorGroup = styles.colors.colors[colorName as keyof typeof styles.colors.colors]
+
+            return (
+              <div key={colorName} className="flex items-center">
+                <div className="w-24 font-medium capitalize text-white">{colorName}</div>
+
+                {colorPalette.shades.map(shade => {
+                  const color = colorGroup[shade as keyof typeof colorGroup]
+                  const colorValue = color?.$value || ''
+
+                  return (
+                    <div key={shade} className="flex-1 flex justify-center">
+                      <Tooltip.Root>
+                        <Tooltip.Trigger asChild>
+                          <div
+                            className="size-14 rounded-md"
+                            style={{
+                              backgroundColor: colorValue,
+                              border: '1px solid rgba(255,255,255,0.1)'
+                            }}
+                          />
+                        </Tooltip.Trigger>
+                        <Tooltip.Content style={{ backgroundColor: 'black' }} side="top" align="center">
+                          --{color?.name}: {colorValue}
+                        </Tooltip.Content>
+                      </Tooltip.Root>
+                    </div>
+                  )
+                })}
+              </div>
+            )
+          })}
+        </div>
+      </div>
+    </div>
+  )
+}

packages/core-design-system/README.md

@@ -0,0 +1,63 @@
+# Harness Design System
+
+This package provides the core design system for Harness UI components.
+
+## Installation
+
+```bash
+npm install @harnessio/core-design-system
+```
+
+## Usage
+
+### Importing CSS Styles
+
+To import all design system styles:
+
+```js
+import '@harnessio/core-design-system/styles'
+```
+
+### Importing JavaScript Tokens
+
+To import JavaScript tokens for programmatic usage:
+
+```js
+import { colors, spacing, typography } from '@harnessio/core-design-system/styles-esm'
+
+// Example usage
+console.log(colors.primary)
+console.log(spacing.md)
+```
+
+Or import everything:
+
+```js
+import * as designTokens from '@harnessio/core-design-system/styles-esm'
+```
+
+### Importing Individual Components
+
+You can also import the main package:
+
+```js
+import * as designSystem from '@harnessio/core-design-system'
+```
+
+## Building
+
+To build the design system:
+
+```bash
+npm run build
+```
+
+This will:
+
+1. Build the CSS styles (`npm run build:styles`)
+2. Build the JavaScript ESM exports (`npm run build:styles:esm`)
+
+## Development
+
+- `src/styles/` - Contains all CSS stylesheets
+- `src/styles-js/` - Contains all JavaScript values for the design system

packages/core-design-system/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@harnessio/core-design-system",
+  "version": "1.0.0",
+  "description": "Harness Design System",
+  "type": "module",
+  "main": "src/core-style-esm.js",
+  "exports": {
+    "./core-styles": "./src/styles/core-imports.css",
+    "./oss-styles": "./src/styles/oss.css",
+    "./enterprise-styles": "./src/styles/enterprise.css",
+    "./styles-esm": "./src/core-styles-esm.ts"
+  },
+  "scripts": {
+    "build:styles": "rm -rf src/styles/design-system && node export-tokens/build.js",
+    "build:styles:esm": "rm -rf src/styles/design-system && node export-tokens-js/build.js",
+    "build": " pnpm clean && pnpm build:uni",
+    "build:uni": "node scripts/build.js",
+    "clean": "rimraf ./src/styles && rimraf ./src/styles-esm"
+  },
+  "keywords": [
+    "design-system",
+    "css",
+    "styles"
+  ],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@tokens-studio/sd-transforms": "^1.2.9",
+    "figlet": "^1.8.0",
+    "gradient-string": "^3.0.0",
+    "rimraf": "^6.0.1",
+    "style-dictionary": "^4.1.4"
+  }
+}