@landtrustinc/design-system 1.0.11

package/dist/index.ts

@@ -0,0 +1,9 @@
+export * from './colorUtils';
+export * from './global';
+export { default as ShowcaseWrapper } from './ShowcaseWrapper';
+export * from './styles';
+export * from './theme';
+export { default as ThemeProvider } from './ThemeProvider';
+
+// CSS Variables - import this CSS file to get all design tokens
+export const variablesCssPath = './variables.css';

package/dist/styles.ts

@@ -0,0 +1,289 @@
+export const screens = {
+  sm: '640px',
+  md: '768px',
+  lg: '1024px',
+  xl: '1280px',
+};
+
+export const media = {
+  sm: `@media (min-width: ${screens.sm})`,
+  md: `@media (min-width: ${screens.md})`,
+  lg: `@media (min-width: ${screens.lg})`,
+  xl: `@media (min-width: ${screens.xl})`,
+};
+
+export const colors = {
+  gray: {
+    100: '#f7fafc',
+    200: '#edf2f7',
+    300: '#e2e8f0',
+    400: '#cbd5e0',
+    500: '#a1aec1',
+    600: '#718096',
+    700: '#4a5569',
+    800: '#2d3748',
+    900: '#1a202c',
+  },
+
+  olive: {
+    50: '#F3F6F3',
+    100: '#DEE4DF',
+    200: '#C3CEC4',
+    300: '#889E8A',
+    400: '#608663',
+    500: '#3E704B',
+    600: '#2A5E38',
+    700: '#164522',
+    800: '#10361B',
+    900: '#233933',
+  },
+
+  dark: {
+    100: '#4B514D',
+    200: '#222720',
+    300: '#1A1A1A',
+    900: '#000000',
+  },
+
+  light: {
+    100: '#FFFFFF',
+    200: '#FFFDF7',
+  },
+
+  yellow: {
+    100: '#FFF9DE',
+    200: '#FFF0A4',
+    300: '#FDE56F',
+    400: '#FFDD33',
+    500: '#FAD44E',
+    600: '#EDC94A',
+    700: '#E5BC2A',
+    800: '#D0A81C',
+    900: '#917513',
+  },
+
+  brown: {
+    100: '#f5f2ed',
+    200: '#e1ddd5',
+    300: '#e2caa5',
+    500: '#d1b398',
+    900: '#a36731',
+  },
+
+  red: {
+    100: '#FFE9E5',
+    200: '#FFC4B9',
+    300: '#F59A89',
+    400: '#F36C53',
+    500: '#E2430C',
+    600: '#ED3615',
+    900: '#CA2D10',
+  },
+
+  accent: {
+    green: '#4CA817',
+    gold: '#FFBB52',
+  },
+};
+
+export const fonts = {
+  base: `'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji'`,
+  headings: `'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji'`,
+  playfair: `'Playfair Display', serif`,
+};
+
+export const fontWeights = {
+  light: 300,
+  normal: 400,
+  medium: 600,
+  bold: 700,
+  bolder: 800,
+};
+
+export const fontSizes = {
+  xxs: '0.625rem', // 10px
+  xs: '0.75rem', // 12px
+  sm: '0.875rem', // 14px
+  base: '1rem', // 16px
+  lg: '1.125rem', // 18px
+  xl: '1.25rem', // 20px
+  '2xl': '1.5rem', // 24px
+  '3xl': '1.875rem', // 30px
+  '4xl': '2.25rem', // 36px
+  '5xl': '3rem', // 48px
+  '6xl': '4rem', // 64px
+  '7xl': '4.5rem', // 72px
+};
+
+export const headingSizes = {
+  xl: '60px',
+  lg: '48px',
+  md: '40px',
+  sm: '32px',
+  xs: '24px',
+  ['2xs']: '20px',
+};
+
+export const lineHeights = {
+  none: 1,
+  tight: 1.25,
+  snug: 1.375,
+  normal: 1.5,
+  relaxed: 1.625,
+  loose: 2,
+};
+
+export const space = {
+  0: '0rem',
+  1: '0.25rem', // 4px
+  2: '0.5rem', // 8px
+  3: '0.75rem', // 12px
+  4: '1rem', // 16px
+  5: '1.25rem', // 20px
+  6: '1.5rem', // 24px
+  7: '1.75rem', // 28px
+  8: '2rem', // 32px
+  9: '2.25rem', // 36px
+  10: '2.5rem', // 40px
+  11: '2.75rem', // 44px
+  12: '3rem', // 48px
+  13: '3.25rem', // 52px
+  14: '3.5rem', // 56px
+  15: '3.75rem', // 60px
+  16: '4rem', // 64px
+  17: '4.25rem', // 68px
+  18: '4.5rem', // 72px
+  19: '4.75rem', // 76px
+  20: '5rem', // 80px
+  21: '5.25rem', // 84px
+  22: '5.5rem', // 88px
+  23: '5.75rem', // 92px
+  24: '6rem', // 96px
+  25: '6.25rem', // 100px
+  26: '6.5rem', // 104px
+  28: '7rem', // 112px
+  29: '7.25rem', // 116px
+  30: '7.5rem', // 120px
+  32: '8rem', // 128px
+  33: '8.25rem', // 132px
+  34: '8.5rem', // 136px
+  35: ' 8.75rem', // 140px
+  36: '9rem', // 144px
+  38: '9.5rem', // 150px
+  40: '10rem', // 160px
+  41: '10.25rem', // 164px
+  42: '10.5rem', // 168px
+  43: '10.75rem', // 172px
+  44: '11rem', //180px
+  46: '11.5rem', // 184px
+  47: '11.75rem', // 188px
+  48: '12rem', // 192px
+  50: '12.5rem', // 200px
+  52: '13rem', // 208px
+  54: '13.5rem', // 216px
+  56: '14rem', // 224px
+  58: '14.5rem', // 232px
+  60: '15rem', // 240px
+  62: '15.5rem', // 248px
+  64: '16rem', // 256px
+  68: '17rem', // 272px
+  70: '17.5rem', // 280px
+  72: '18rem', // 288px
+  75: '18.75rem', // 300px
+  76: '19rem', // 304px
+  79: '19.75rem', // 316px
+  80: '20rem', // 320px
+  84: '21rem', // 336px
+  86: '21.5rem', // 344px
+  88: '22rem', // 352px
+  94: '23.5rem', // 376px
+  96: '24rem', // 384px
+  110: '27.5rem', // 440px
+  122: '30.5rem', // 488px
+  128: '32rem', // 512px
+  134: '33.5rem', // 536px
+  143: '35.75rem', // 572px
+  148: '37rem', // 592px
+  152: '38rem', // 608px
+  160: '40rem', // 640px
+  230: '50rem', // 800px
+};
+
+export const sizes = {
+  '1/2': '50%',
+  '1/3': '33.333333%',
+  '2/3': '66.666667%',
+  '1/4': '25%',
+  '1/5': '20%',
+  '2/5': '40%',
+  '3/4': '75%',
+  '3/5': '60%',
+  '4/5': '80%',
+};
+
+export const boxShadow = {
+  none: 'none',
+  base: '0 0 20px 0 rgba(0, 0, 0, 0.05)',
+  xl: '0 5px 30px 0 rgba(0, 0, 0, 0.1)',
+  xxl: '0 20px 40px 0 rgba(0, 0, 0, 0.3)',
+};
+
+export const textShadow = {
+  hunter: '0 0 20px rgba(35, 57, 51, 0.64)',
+  brown: '0 0 20px rgba(81, 59, 39, 0.64)',
+};
+
+export const opacity = {
+  0: 0,
+  25: 0.25,
+  50: 0.5,
+  75: 0.75,
+  95: 0.95,
+  100: 1,
+};
+
+export const borderRadius = {
+  base: '5px',
+  sm: '7px',
+  xl: '12px',
+  xxl: '25px',
+  xxxl: '40px',
+};
+
+export const transition = {
+  base: 'ease-in 0.2s',
+  fast: 'ease-in-out 0.1s',
+};
+
+export const zIndex = {
+  0: 0,
+  10: 10,
+  15: 15,
+  20: 20,
+  30: 30,
+  40: 40,
+  50: 50,
+};
+
+export const ThemeTokens = {
+  screens,
+  media,
+  colors,
+  fonts,
+  fontWeights,
+  fontSizes,
+  headingSizes,
+  lineHeights,
+  space,
+  sizes,
+  boxShadow,
+  textShadow,
+  opacity,
+  borderRadius,
+  transition,
+  zIndex,
+};

package/dist/theme.ts

@@ -0,0 +1,27 @@
+import {
+  borderRadius,
+  colors,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  sizes,
+  space,
+} from './styles';
+
+// Create a styled-system compatible theme
+export const theme = {
+  colors,
+  space,
+  fontSizes,
+  fontWeights,
+  lineHeights,
+  sizes,
+  radii: borderRadius,
+  // Add breakpoints for responsive props
+  breakpoints: ['640px', '768px', '1024px', '1280px'],
+};
+
+export type Theme = typeof theme;
+
+// Re-export ThemeProvider from the separate file
+export { default as ThemeProvider } from './ThemeProvider';

package/dist/variables.css

@@ -0,0 +1,194 @@
+:root {
+  --color-base-white: #ffffff;
+  --color-base-black: #000000;
+  --color-primary-900: #0c160f;
+  --color-primary-800: #192d1e;
+  --color-primary-700: #25432d;
+  --color-primary-600: #325a3c;
+  --color-primary-500: #3e704b;
+  --color-primary-400: #638b6d;
+  --color-primary-300: #87a58f;
+  --color-primary-200: #acc0b1;
+  --color-primary-100: #d0dad3;
+
+  --color-hunter-900: #0f100f;
+  --color-hunter-800: #1e201f;
+  --color-hunter-700: #2d312e;
+  --color-hunter-600: #3c413e;
+  --color-hunter-500: #4b514d;
+  --color-hunter-400: #6d726f;
+  --color-hunter-300: #8f9390;
+  --color-hunter-200: #b1b3b2;
+  --color-hunter-100: #d3d4d3;
+
+  --color-brown-900: #2a241e;
+  --color-brown-800: #54483d;
+  --color-brown-700: #7d6b5b;
+  --color-brown-600: #a78f7a;
+  --color-brown-500: #d1b398;
+  --color-brown-400: #d8c0ab;
+  --color-brown-300: #dfcdbd;
+  --color-brown-200: #e7dbd0;
+  --color-brown-100: #f5f2ed;
+  --color-brown-50: #fffdf7;
+
+  --color-neutral-900: #202327;
+  --color-neutral-800: #40464d;
+  --color-neutral-700: #606874;
+  --color-neutral-600: #808b9a;
+  --color-neutral-500: #a0aec1;
+  --color-neutral-400: #b1bccb;
+  --color-neutral-300: #c2cad6;
+  --color-neutral-200: #d3d9e0;
+  --color-neutral-100: #e4e7eb;
+  --color-neutral-50: #f8fafc;
+
+  --color-yellow-900: #64551f;
+  --color-yellow-800: #967f2f;
+  --color-yellow-700: #e4bc29;
+  --color-yellow-600: #edc94a;
+  --color-yellow-500: #fad44e;
+  --color-yellow-400: #fbdd71;
+  --color-yellow-300: #fce595;
+  --color-yellow-200: #fdeeb8;
+  --color-yellow-100: #fef6dc;
+  --color-yellow-50: #fefbed;
+
+  --color-gold-900: #332510;
+  --color-gold-800: #664b21;
+  --color-gold-700: #997031;
+  --color-gold-600: #cc9642;
+  --color-gold-500: #ffbb52;
+  --color-gold-400: #ffc975;
+  --color-gold-300: #ffd697;
+  --color-gold-200: #ffe4ba;
+  --color-gold-100: #fff1dc;
+  --color-gold-50: #fff8ed;
+
+  --color-accent-900: #2d0d02;
+  --color-accent-800: #5a1b05;
+  --color-accent-700: #882807;
+  --color-accent-600: #b5360a;
+  --color-accent-500: #e2430c;
+  --color-accent-400: #e8693d;
+  --color-accent-300: #ee8e6d;
+  --color-accent-200: #f3b49e;
+  --color-accent-100: #f9d9ce;
+  --color-accent-50: #fcece6;
+
+  --color-success-900: #0f2204;
+  --color-success-800: #1f4309;
+  --color-success-700: #2e650d;
+  --color-success-600: #3e8612;
+  --color-success-500: #4da816;
+  --color-success-400: #71b945;
+  --color-success-300: #94cb73;
+  --color-success-200: #b8dca2;
+  --color-success-100: #dbeed0;
+  --color-success-50: #edf6e8;
+
+  --color-error-900: #2c0808;
+  --color-error-800: #580f0f;
+  --color-error-700: #841717;
+  --color-error-600: #b01e1e;
+  --color-error-500: #dc2626;
+  --color-error-400: #e35151;
+  --color-error-300: #ea7d7d;
+  --color-error-200: #f1a8a8;
+  --color-error-100: #f8d4d4;
+  --color-error-50: #fbe9e9;
+
+  --text-primary: var(--color-neutral-900);
+  --text-secondary: var(--color-neutral-600);
+  --text-headings: var(--color-neutral-900);
+  --text-action: var(--color-neutral-900);
+  --text-action-hover: var(--color-neutral-600);
+  --text-on-disabled: var(--color-neutral-300);
+  --text-disabled: var(--color-neutral-300);
+  --text-success: var(--color-success-500);
+  --text-error: var(--color-error-500);
+  --text-warning: var(--color-yellow-500);
+  --text-on-action: var(--color-base-white);
+
+  --surface-page: var(--color-base-white);
+  --surface-subtle: var(--color-brown-50);
+  --surface-success: var(--color-success-50);
+  --surface-warning: var(--color-yellow-200);
+  --surface-error: var(--color-error-100);
+  --surface-disabled: var(--color-primary-200);
+  --surface-disabled-2: var(--color-neutral-50);
+  --surface-action: var(--color-primary-500);
+  --surface-action-2: var(--color-yellow-500);
+  --surface-action-hover: var(--color-primary-700);
+  --surface-action-2-hover: var(--color-yellow-600);
+  --surface-action-hover-outline: var(--color-primary-500);
+  --surface-action-3: var(--surface-page);
+  --surface-action-3-hover: var(--color-neutral-50);
+
+  --border-primary: var(--color-neutral-200);
+  --border-secondary: var(--color-base-black);
+  --border-success: var(--color-success-50);
+  --border-warning: var(--color-yellow-200);
+  --border-error: var(--color-error-300);
+  --border-disabled: var(--color-neutral-300);
+  --border-disabled-2: var(--color-neutral-100);
+  --border-action: var(--color-primary-500);
+  --border-action-hover: var(--color-primary-700);
+  --border-focus: var(--color-primary-500);
+
+  --icon-primary: var(--color-neutral-900);
+  --icon-secondary: var(--color-neutral-600);
+  --icon-success: var(--color-success-500);
+  --icon-warning: var(--color-yellow-500);
+  --icon-error: var(--color-error-500);
+  --icon-action: var(--color-primary-500);
+  --icon-action-hover: var(--color-primary-700);
+  --icon-on-action: var(--color-base-white);
+  --icon-on-disabled: var(--color-neutral-300);
+
+  --spacing-0: 0;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 28px;
+  --spacing-8: 32px;
+  --spacing-10: 40px;
+  --spacing-12: 48px;
+  --spacing-14: 56px;
+  --spacing-24: 96px;
+  --spacing-32: 128px;
+  --spacing-64: 256px;
+
+  --shadow-blur-2xs: 4px;
+  --shadow-blur-xs: 8px;
+  --shadow-blur-sm: 12px;
+  --shadow-blur-md: 16px;
+  --shadow-blur-lg: 24px;
+  --shadow-blur-xl: 48px;
+  --shadow-blur-2xl: 64px;
+
+  --shadow-spread-xs: -4px;
+  --shadow-spread-sm: -8px;
+  --shadow-spread-md: -12px;
+  --shadow-spread-lg: -16px;
+  --shadow-spread-xl: -24px;
+  --shadow-spread-2xl: -32px;
+
+  --shadow-xs: 0px var(--spacing-1) var(--shadow-blur-2xs) 0px
+    rgba(0, 0, 0, 0.05);
+  --shadow-sm: 0px var(--spacing-1) var(--shadow-blur-2xs) 0px
+    rgba(17, 17, 17, 0.1);
+  --shadow-md: 0px var(--spacing-1) var(--shadow-blur-xs) 0px
+    rgba(17, 17, 17, 0.1);
+  --shadow-lg: 0px var(--spacing-3) var(--shadow-blur-md)
+    var(--shadow-spread-xs) var(--color-brown-100);
+  --shadow-xl: 0px var(--spacing-5) var(--shadow-blur-lg)
+    var(--shadow-spread-xs) rgba(17, 17, 17, 0.1);
+  --shadow-2xl: 0px var(--spacing-6) var(--shadow-blur-xl)
+    var(--shadow-spread-md) var(--color-brown-200);
+  --shadow-3xl: 0px var(--spacing-8) var(--shadow-blur-2xl)
+    var(--shadow-spread-md) rgba(17, 17, 17, 0.1);
+}

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@landtrustinc/design-system",
+  "version": "1.0.11",
+  "private": false,
+  "description": "Design system components for LandTrust applications",
+  "homepage": "https://github.com/LandtrustInc/landtrust-ui/tree/main/packages/design-system",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LandtrustInc/landtrust-ui.git",
+    "directory": "packages/design-system"
+  },
+  "license": "MIT",
+  "author": "LandTrust",
+  "type": "commonjs",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js"
+    },
+    "./variables.css": "./variables.css"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**",
+    "variables.css"
+  ],
+  "scripts": {
+    "prebuild": "npm run prepareIcons",
+    "build": "tsup",
+    "build-storybook": "storybook build",
+    "build:types": "tsc --project tsconfig.json",
+    "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist",
+    "dev": "tsup --watch",
+    "lint-staged:eslint": "eslint --max-warnings=0 --fix --no-ignore",
+    "lint-staged:prettier": "prettier --write",
+    "lint-staged:tsc-files": "tsc-files --noEmit emotion.d.ts declarations.d.ts",
+    "prepareIcons": "svgr ./src/Icon/icons",
+    "storybook": "storybook dev -p 6006"
+  },
+  "dependencies": {
+    "hex-rgb": "^4.2.0",
+    "lodash": "^4.17.21"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.3.3",
+    "@emotion/react": "^11.1.1",
+    "@emotion/styled": "^11.11.0",
+    "@landtrustinc/typescript-config": "*",
+    "@storybook/addon-a11y": "^8.1.1",
+    "@storybook/addon-designs": "^8.0.1",
+    "@storybook/addon-essentials": "^8.1.1",
+    "@storybook/addon-interactions": "^8.1.1",
+    "@storybook/addon-links": "^8.1.1",
+    "@storybook/addon-mdx-gfm": "^8.1.1",
+    "@storybook/addon-onboarding": "^8.1.1",
+    "@storybook/addon-themes": "^8.1.1",
+    "@storybook/blocks": "^8.1.1",
+    "@storybook/react": "^8.1.1",
+    "@storybook/react-vite": "^8.1.1",
+    "@storybook/test": "^8.1.1",
+    "@svgr/cli": "^8.1.0",
+    "@types/lodash": "^4.14.200",
+    "@types/node": "^20.8.4",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "@types/styled-system": "^5.1.20",
+    "@vercel/style-guide": "^5.2.0",
+    "@vitejs/plugin-react": "^3.1.0",
+    "chromatic": "^11.3.0",
+    "eslint": "^7.14.0",
+    "eslint-config-prettier": "^8.1.0",
+    "eslint-config-turbo": "^1.12.4",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.3.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-mdx": "^3.1.5",
+    "eslint-plugin-only-warn": "^1.1.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "prettier": "^2.2.0",
+    "react": "^18.2.0",
+    "storybook": "^8.1.1",
+    "tsc-files": "^1.1.4",
+    "tsup": "^8.0.2",
+    "typescript": "^5.3.3",
+    "vite": "^4.1.4"
+  },
+  "peerDependencies": {
+    "@emotion/react": "^11.1.1",
+    "@emotion/styled": "^11.11.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-system": "^5.1.5"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}