@esds-sangam/styles 0.1.0

package/README.md

@@ -0,0 +1,3 @@
+# @esds-sangam/styles
+
+Global CSS and theme styles for the ESDS Sangam Design System. Provides base styles, CSS variables, and Tailwind layers that power `@esds-sangam` UI components.

package/dark.css

@@ -0,0 +1,61 @@
+@layer base {
+  .dark {
+    /* Brand Colors - Sangam Dark Mode */
+    --color-primary: 12 140 233; /* Blue-600 #0C8CE9 */
+    --color-primary-foreground: 7 40 74;
+    --color-secondary: 56 184 124; /* Green-600 #38B87C */
+    --color-secondary-foreground: 3 70 38;
+    --color-accent: 252 196 92; /* Orange-500 #FCC45C */
+    --color-accent-foreground: 43 43 43;
+    
+    /* Semantic Colors - Sangam Dark Mode */
+    --color-success: 56 184 124; /* Green-600 #38B87C */
+    --color-success-foreground: 3 70 38;
+    --color-error: 225 69 57; /* Red-600 #E14539 */
+    --color-error-foreground: 91 9 3;
+    --color-warning: 252 185 60; /* Orange-600 #FCB93C */
+    --color-warning-foreground: 105 70 5;
+    --color-info: 12 140 233; /* Blue-600 #0C8CE9 */
+    --color-info-foreground: 7 40 74;
+    
+    /* Base Colors */
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    
+    /* Card */
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    
+    /* Popover */
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    
+    /* Muted */
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    
+    /* Accent */
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    
+    /* Destructive */
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    
+    /* Border */
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    
+    /* Ring */
+    --ring: 212.7 26.8% 83.9%;
+    
+    /* Shadows - Enhanced for dark mode */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.5);
+    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.5), 0 1px 2px -1px rgb(0 0 0 / 0.5);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.5);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.5);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.5), 0 8px 10px -6px rgb(0 0 0 / 0.5);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.75);
+  }
+}
+

package/globals.css

@@ -0,0 +1,94 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  html {
+    @apply scroll-smooth;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: "rlig" 1, "calt" 1;
+  }
+
+  /* Remove default margins */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p,
+  ul,
+  ol,
+  figure,
+  blockquote,
+  dl,
+  dd {
+    @apply m-0;
+  }
+
+  /* Remove list styles on ul, ol elements with a list role */
+  ul[role="list"],
+  ol[role="list"] {
+    @apply list-none;
+  }
+
+  /* Set core root defaults */
+  html:focus-within {
+    scroll-behavior: smooth;
+  }
+
+  /* Set core body defaults */
+  body {
+    @apply min-h-screen text-base leading-normal antialiased;
+  }
+
+  /* A elements that don't have a class get default styles */
+  a:not([class]) {
+    text-decoration-skip-ink: auto;
+  }
+
+  /* Make images easier to work with */
+  img,
+  picture,
+  svg {
+    @apply max-w-full block;
+  }
+
+  /* Inherit fonts for inputs and buttons */
+  input,
+  button,
+  textarea,
+  select {
+    font: inherit;
+  }
+
+  /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
+  @media (prefers-reduced-motion: reduce) {
+    html:focus-within {
+      scroll-behavior: auto;
+    }
+
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+}
+

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@esds-sangam/styles",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./globals.css",
+  "exports": {
+    "./globals.css": "./globals.css",
+    "./theme.css": "./theme.css",
+    "./dark.css": "./dark.css",
+    "./tailwind.css": "./tailwind.css",
+    "./globals": "./globals.css",
+    "./theme": "./theme.css",
+    "./dark": "./dark.css",
+    "./tailwind": "./tailwind.css"
+  },
+  "dependencies": {
+    "@esds-sangam/tokens": "*"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^3.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/tailwind.css

@@ -0,0 +1,10 @@
+/* Import base styles */
+@import "./globals.css";
+@import "./theme.css";
+@import "./dark.css";
+
+/* Additional Tailwind configuration */
+@layer components {
+  /* Component-specific utilities can be added here */
+}
+

package/theme.css

@@ -0,0 +1,86 @@
+@layer base {
+  :root {
+    /* Brand Colors - Sangam Custom Palette */
+    --color-primary: 0 111 201; /* Blue-700 #006FC9 */
+    --color-primary-foreground: 255 255 255;
+    --color-secondary: 6 166 91; /* Green-700 #06A65B */
+    --color-secondary-foreground: 255 255 255;
+    --color-accent: 252 185 60; /* Orange-600 #FCB93C */
+    --color-accent-foreground: 17 17 17;
+    
+    /* Semantic Colors - Sangam Custom Palette */
+    --color-success: 6 166 91; /* Green-700 #06A65B */
+    --color-success-foreground: 255 255 255;
+    --color-error: 217 22 8; /* Red-700 #D91608 */
+    --color-error-foreground: 255 255 255;
+    --color-warning: 251 167 11; /* Orange-700 #FBA70B */
+    --color-warning-foreground: 255 255 255;
+    --color-info: 0 111 201; /* Blue-700 #006FC9 */
+    --color-info-foreground: 255 255 255;
+    
+    /* Base Colors */
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    
+    /* Card */
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    
+    /* Popover */
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    
+    /* Muted */
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    
+    /* Accent */
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    
+    /* Destructive */
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    
+    /* Border */
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    
+    /* Ring */
+    --ring: 222.2 84% 4.9%;
+    
+    /* Radius */
+    --radius-sm: 0.125rem;
+    --radius-base: 0.25rem;
+    --radius-md: 0.375rem;
+    --radius-lg: 0.5rem;
+    --radius-xl: 0.75rem;
+    --radius-2xl: 1rem;
+    --radius-3xl: 1.5rem;
+    --radius-full: 9999px;
+    
+    /* Spacing */
+    --spacing-0: 0px;
+    --spacing-1: 0.25rem;
+    --spacing-2: 0.5rem;
+    --spacing-3: 0.75rem;
+    --spacing-4: 1rem;
+    --spacing-5: 1.25rem;
+    --spacing-6: 1.5rem;
+    --spacing-8: 2rem;
+    --spacing-10: 2.5rem;
+    --spacing-12: 3rem;
+    --spacing-16: 4rem;
+    --spacing-20: 5rem;
+    --spacing-24: 6rem;
+    
+    /* Shadows */
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-base: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+  }
+}
+