@gestio/gds 0.0.1

package/src/lib/styles/tokens/typography.css

@@ -0,0 +1,115 @@
+@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap");
+
+:root {
+  --gds-font-primary: "Plus Jakarta Sans", sans-serif;
+}
+
+* {
+  font-family: var(--gds-font-primary);
+}
+
+.gds-heading-3xl {
+  font-weight: 600;
+  font-size: 2.25rem;
+  line-height: 1.25;
+  letter-spacing: 0.2px;
+  color: var(--text-foreground);
+  text-wrap: balance;
+
+  @media (min-width: 768px) {
+    font-size: 3.75rem;
+    line-height: 4rem;
+  }
+}
+
+.gds-heading-2xl {
+  font-weight: 600;
+  font-size: 1.875rem;
+  line-height: 1.25;
+  letter-spacing: 0.2px;
+  color: var(--text-foreground);
+  text-wrap: balance;
+
+  @media (min-width: 768px) {
+    font-size: 3rem;
+    line-height: 4rem;
+  }
+}
+
+.gds-heading-xl {
+  font-weight: 600;
+  font-size: 1.875rem;
+  line-height: 1.25;
+  letter-spacing: 0.1px;
+  color: var(--text-foreground);
+  text-wrap: balance;
+
+  @media (min-width: 768px) {
+    font-size: 2.5rem;
+    line-height: 3rem;
+  }
+}
+
+.gds-heading-lg {
+  font-weight: 600;
+  font-size: 1.5rem;
+  line-height: 1.25;
+  letter-spacing: 0.1px;
+  color: var(--text-foreground);
+  text-wrap: balance;
+
+  @media (min-width: 768px) {
+    font-size: 2rem;
+    line-height: 2.75rem;
+  }
+}
+
+.gds-heading-md {
+  font-weight: 600;
+  font-size: 1.25rem;
+  line-height: 1.25;
+  letter-spacing: normal;
+  color: var(--text-foreground);
+  text-wrap: balance;
+
+  @media (min-width: 768px) {
+    font-size: 1.75rem;
+    line-height: 2.5rem;
+  }
+}
+
+.gds-heading-sm {
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.25;
+  letter-spacing: 0.1px;
+  color: var(--text-foreground);
+  text-wrap: balance;
+
+  @media (min-width: 768px) {
+    font-size: 1.5rem;
+    line-height: 2.25rem;
+  }
+}
+
+.gds-heading-xs {
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.25;
+  letter-spacing: normal;
+  color: var(--text-foreground);
+  text-wrap: balance;
+
+  @media (min-width: 768px) {
+    font-size: 1.25rem;
+    line-height: 2.125rem;
+  }
+}
+
+.gds-subheading {
+  margin-top: 1rem;
+  margin-bottom: 2rem;
+  font-size: 1.125rem;
+  color: var(--gds-neutral-400);
+  text-wrap: balance;
+}

package/src/lib/styles/utilities/line-counter.scss

@@ -0,0 +1,29 @@
+.line {
+  counter-increment: line;
+  position: relative;
+  padding-left: 2.5rem; // pl-10
+
+  &::before {
+    content: counter(line);
+    position: absolute;
+    inset-block: 0;
+    left: 0;
+
+    width: 1.5rem;
+    margin-right: 1.5rem;
+
+    text-align: right;
+    font-size: 0.75rem; // text-xs
+    opacity: 0.35;
+
+    transition: opacity 0.2s ease;
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+
+  &:first-of-type {
+    counter-set: line var(--counter-start);
+  }
+}

package/src/lib/styles.scss

@@ -0,0 +1,5 @@
+// Gestio Design System - Main Styles
+// Import this file to get all design tokens in your application
+// Usage: @import '@gestio/gds/styles';
+
+@import "./styles/tokens/index.css";

package/src/lib/tokens/colors.ts

@@ -0,0 +1,216 @@
+// BASE COLORS
+export const BASE_COLORS = ['gestio-dark', 'gestio-light'];
+
+// PRIMARY COLORS
+export const PRIMARY_COLORS = [
+  'primary',
+  'gestio-primary',
+  'gestio-primary-hover',
+];
+
+// SECONDARY COLORS
+export const SECONDARY_COLORS = ['gestio-secondary'];
+
+// TERTIARY COLORS
+export const TERTIARY_COLORS = ['gestio-tertiary'];
+
+// BRAND COLORS
+export const BRAND_COLORS = [
+  'gestio-brand-25',
+  'gestio-brand-50',
+  'gestio-brand-100',
+  'gestio-brand-200',
+  'gestio-brand-300',
+  'gestio-brand-400',
+  'gestio-brand-500',
+  'gestio-brand-600',
+  'gestio-brand-700',
+  'gestio-brand-800',
+  'gestio-brand-900',
+];
+
+// NEUTRAL COLORS
+export const NEUTRAL_COLORS = [
+  'gestio-neutral-25',
+  'gestio-neutral-50',
+  'gestio-neutral-100',
+  'gestio-neutral-200',
+  'gestio-neutral-300',
+  'gestio-neutral-400',
+  'gestio-neutral-500',
+  'gestio-neutral-600',
+  'gestio-neutral-700',
+  'gestio-neutral-800',
+  'gestio-neutral-900',
+  'gestio-neutral-1000',
+];
+
+// GREEN COLORS
+export const GREEN_COLORS = [
+  'gestio-green-25',
+  'gestio-green-50',
+  'gestio-green-100',
+  'gestio-green-200',
+  'gestio-green-300',
+  'gestio-green-400',
+  'gestio-green-500',
+  'gestio-green-600',
+  'gestio-green-700',
+  'gestio-green-800',
+  'gestio-green-900',
+];
+
+// RED COLORS
+export const RED_COLORS = [
+  'gestio-red-25',
+  'gestio-red-50',
+  'gestio-red-100',
+  'gestio-red-200',
+  'gestio-red-300',
+  'gestio-red-400',
+  'gestio-red-500',
+  'gestio-red-600',
+  'gestio-red-700',
+  'gestio-red-800',
+  'gestio-red-900',
+];
+
+// BLUE COLORS
+export const BLUE_COLORS = [
+  'gestio-blue-25',
+  'gestio-blue-50',
+  'gestio-blue-100',
+  'gestio-blue-200',
+  'gestio-blue-300',
+  'gestio-blue-400',
+  'gestio-blue-500',
+  'gestio-blue-600',
+  'gestio-blue-700',
+  'gestio-blue-800',
+  'gestio-blue-900',
+];
+
+// AMBER COLORS
+export const AMBER_COLORS = [
+  'gestio-amber-25',
+  'gestio-amber-50',
+  'gestio-amber-100',
+  'gestio-amber-200',
+  'gestio-amber-300',
+  'gestio-amber-400',
+  'gestio-amber-500',
+  'gestio-amber-600',
+  'gestio-amber-700',
+  'gestio-amber-800',
+  'gestio-amber-900',
+];
+
+// TEAL COLORS
+export const TEAL_COLORS = [
+  'gestio-teal-25',
+  'gestio-teal-50',
+  'gestio-teal-100',
+  'gestio-teal-200',
+  'gestio-teal-300',
+  'gestio-teal-400',
+  'gestio-teal-500',
+  'gestio-teal-600',
+  'gestio-teal-700',
+  'gestio-teal-800',
+  'gestio-teal-900',
+];
+
+// PURPLE COLORS
+export const PURPLE_COLORS = [
+  'gestio-purple-25',
+  'gestio-purple-50',
+  'gestio-purple-100',
+  'gestio-purple-200',
+  'gestio-purple-300',
+  'gestio-purple-400',
+  'gestio-purple-500',
+  'gestio-purple-600',
+  'gestio-purple-700',
+  'gestio-purple-800',
+  'gestio-purple-900',
+];
+
+// EMERALD COLORS
+export const EMERALD_COLORS = [
+  'gestio-emerald-25',
+  'gestio-emerald-50',
+  'gestio-emerald-100',
+  'gestio-emerald-200',
+  'gestio-emerald-300',
+  'gestio-emerald-400',
+  'gestio-emerald-500',
+  'gestio-emerald-600',
+  'gestio-emerald-700',
+  'gestio-emerald-800',
+  'gestio-emerald-900',
+];
+
+// MAGENTA COLORS
+export const MAGENTA_COLORS = [
+  'gestio-magenta-25',
+  'gestio-magenta-50',
+  'gestio-magenta-100',
+  'gestio-magenta-200',
+  'gestio-magenta-300',
+  'gestio-magenta-400',
+  'gestio-magenta-500',
+  'gestio-magenta-600',
+  'gestio-magenta-700',
+  'gestio-magenta-800',
+  'gestio-magenta-900',
+];
+
+// YELLOW COLORS
+export const YELLOW_COLORS = [
+  'gestio-yellow-25',
+  'gestio-yellow-50',
+  'gestio-yellow-100',
+  'gestio-yellow-200',
+  'gestio-yellow-300',
+  'gestio-yellow-400',
+  'gestio-yellow-500',
+  'gestio-yellow-600',
+  'gestio-yellow-700',
+  'gestio-yellow-800',
+  'gestio-yellow-900',
+];
+
+// LIME COLORS
+export const LIME_COLORS = [
+  'gestio-lime-25',
+  'gestio-lime-50',
+  'gestio-lime-100',
+  'gestio-lime-200',
+  'gestio-lime-300',
+  'gestio-lime-400',
+  'gestio-lime-500',
+  'gestio-lime-600',
+  'gestio-lime-700',
+  'gestio-lime-800',
+  'gestio-lime-900',
+];
+
+// ALL COLORS
+export const ALL_COLORS = [
+  ...BASE_COLORS,
+  ...PRIMARY_COLORS,
+  ...SECONDARY_COLORS,
+  ...TERTIARY_COLORS,
+  ...BRAND_COLORS,
+  ...NEUTRAL_COLORS,
+  ...GREEN_COLORS,
+  ...RED_COLORS,
+  ...BLUE_COLORS,
+  ...AMBER_COLORS,
+  ...TEAL_COLORS,
+  ...PURPLE_COLORS,
+  ...EMERALD_COLORS,
+  ...MAGENTA_COLORS,
+  ...YELLOW_COLORS,
+  ...LIME_COLORS,
+];

package/src/lib/tokens/elevation.ts

@@ -0,0 +1,13 @@
+export const ELEVATION_TOKENS = [
+  'shadow-gds-small',
+  'shadow-gds-medium',
+  'shadow-gds-large',
+  'shadow-gds-x-large',
+];
+
+export const ELEVATION_DESCRIPTIONS = {
+  'shadow-gds-small': 'Small elevation for subtle depth',
+  'shadow-gds-medium': 'Medium elevation for cards and surfaces',
+  'shadow-gds-large': 'Large elevation for modals and overlays',
+  'shadow-gds-x-large': 'X-Large elevation for major UI elements',
+};

package/src/lib/tokens/typography.ts

@@ -0,0 +1,33 @@
+export const TYPOGRAPHY_TOKENS = [
+  'gds-heading-3xl',
+  'gds-heading-2xl',
+  'gds-heading-xl',
+  'gds-heading-lg',
+  'gds-heading-md',
+  'gds-heading-sm',
+  'gds-heading-xs',
+  'gds-subheading',
+];
+
+export const TYPOGRAPHY_DESCRIPTIONS = {
+  'gds-heading-3xl': 'Largest heading for hero sections and major page titles',
+  'gds-heading-2xl': 'Secondary large heading for section dividers',
+  'gds-heading-xl': 'Large heading for important content blocks',
+  'gds-heading-lg': 'Medium heading for subsections',
+  'gds-heading-md': 'Standard heading for content areas',
+  'gds-heading-sm': 'Small heading for cards and components',
+  'gds-heading-xs': 'Smallest heading for micro components',
+  'gds-subheading': 'Supporting text for headings and descriptions',
+};
+
+export const TYPOGRAPHY_EXAMPLES = {
+  'gds-heading-3xl': 'Design System',
+  'gds-heading-2xl': 'Foundation',
+  'gds-heading-xl': 'Typography',
+  'gds-heading-lg': 'Heading Large',
+  'gds-heading-md': 'Heading Medium',
+  'gds-heading-sm': 'Heading Small',
+  'gds-heading-xs': 'Heading XS',
+  'gds-subheading':
+    'Supporting text that provides additional context and helps establish hierarchy',
+};