@clusterenvision/ui-scss 1.94.3

package/dist/components/specialty/ce-atm-card.css

@@ -0,0 +1,204 @@
+.ce-atmcard {
+  position: relative;
+  width: var(--ce-atmcard-width, 100%);
+  max-width: var(--ce-atmcard-max-width, 380px);
+  height: var(--ce-atmcard-height, 240px);
+  border-radius: var(--ce-atmcard-radius, 12px);
+  border-width: var(--ce-atmcard-border-width, 1px);
+  border-style: var(--ce-atmcard-border-style, solid);
+  border-color: var(--ce-atmcard-border-color, rgba(255, 255, 255, 0.2));
+  padding: var(--ce-atmcard-padding, 1.5rem);
+  background: var(--ce-atmcard-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
+  box-shadow: var(--ce-atmcard-shadow, 0 10px 30px rgba(0, 0, 0, 0.2));
+  color: var(--ce-atmcard-color, white);
+  font-family: var(--ce-atmcard-font, "Courier New", monospace);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+}
+.ce-atmcard::before {
+  content: "";
+  position: absolute;
+  top: var(--ce-atmcard-chip-top, 1.5rem);
+  right: var(--ce-atmcard-chip-right, 1.5rem);
+  width: var(--ce-atmcard-chip-width, 50px);
+  height: var(--ce-atmcard-chip-height, 40px);
+  background: var(--ce-atmcard-chip-bg, linear-gradient(135deg, #ffd700 0%, #ffed4e 100%));
+  border-radius: var(--ce-atmcard-chip-radius, 4px);
+  opacity: var(--ce-atmcard-chip-opacity, 0.8);
+}
+.ce-atmcard--light {
+  --ce-atmcard-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  --ce-atmcard-color: white;
+}
+.ce-atmcard--dark {
+  --ce-atmcard-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+  --ce-atmcard-color: white;
+}
+.ce-atmcard--visa {
+  --ce-atmcard-bg: linear-gradient(135deg, #1434CB 0%, #0F2896 100%);
+}
+.ce-atmcard--mastercard {
+  --ce-atmcard-bg: linear-gradient(135deg, #EB001B 0%, #F79E1B 100%);
+}
+.ce-atmcard--amex {
+  --ce-atmcard-bg: linear-gradient(135deg, #006FCF 0%, #0048A0 100%);
+}
+.ce-atmcard--discover {
+  --ce-atmcard-bg: linear-gradient(135deg, #FF6000 0%, #F05A28 100%);
+}
+.ce-atmcard__brand {
+  font-size: var(--ce-atmcard-brand-size, 0.875rem);
+  font-weight: var(--ce-atmcard-brand-weight, 600);
+  text-transform: var(--ce-atmcard-brand-transform, uppercase);
+  letter-spacing: var(--ce-atmcard-brand-letter-spacing, 1px);
+  opacity: var(--ce-atmcard-brand-opacity, 0.9);
+  margin-bottom: var(--ce-atmcard-brand-margin-bottom, 0.5rem);
+}
+.ce-atmcard__chip {
+  position: absolute;
+  top: var(--ce-atmcard-chip-top, 2rem);
+  left: var(--ce-atmcard-chip-left, 1.5rem);
+  width: var(--ce-atmcard-chip-width, 50px);
+  height: var(--ce-atmcard-chip-height, 40px);
+  background: var(--ce-atmcard-chip-bg, linear-gradient(135deg, #ffd700 0%, #ffed4e 100%));
+  border-radius: var(--ce-atmcard-chip-radius, 6px);
+  opacity: var(--ce-atmcard-chip-opacity, 0.9);
+}
+.ce-atmcard__chip::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--ce-atmcard-chip-inner-width, 30px);
+  height: var(--ce-atmcard-chip-inner-height, 25px);
+  border-width: var(--ce-atmcard-chip-inner-border-width, 2px);
+  border-style: var(--ce-atmcard-chip-inner-border-style, solid);
+  border-color: var(--ce-atmcard-chip-inner-border-color, rgba(0, 0, 0, 0.1));
+  border-radius: var(--ce-atmcard-chip-inner-radius, 2px);
+}
+.ce-atmcard__number {
+  font-size: var(--ce-atmcard-number-size, 1.5rem);
+  letter-spacing: var(--ce-atmcard-number-letter-spacing, 3px);
+  margin: var(--ce-atmcard-number-margin, 1.5rem 0);
+  text-shadow: var(--ce-atmcard-number-shadow, 0 2px 4px rgba(0, 0, 0, 0.2));
+}
+.ce-atmcard__meta {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--ce-atmcard-meta-gap, 1.5rem);
+}
+.ce-atmcard__holder, .ce-atmcard__expiry {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-atmcard-meta-field-gap, 0.25rem);
+}
+.ce-atmcard__holder span, .ce-atmcard__expiry span {
+  font-size: var(--ce-atmcard-meta-label-size, 0.625rem);
+  text-transform: var(--ce-atmcard-meta-label-transform, uppercase);
+  letter-spacing: var(--ce-atmcard-meta-label-letter-spacing, 1px);
+  opacity: var(--ce-atmcard-meta-label-opacity, 0.8);
+}
+.ce-atmcard__holder strong, .ce-atmcard__expiry strong {
+  font-size: var(--ce-atmcard-meta-value-size, 0.875rem);
+  font-weight: var(--ce-atmcard-meta-value-weight, 600);
+}
+.ce-atmcard__logo {
+  position: absolute;
+  top: var(--ce-atmcard-logo-top, 1rem);
+  right: var(--ce-atmcard-logo-right, 1rem);
+  width: var(--ce-atmcard-logo-width, 60px);
+  height: var(--ce-atmcard-logo-height, 40px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--ce-atmcard-logo-size, 1.5rem);
+  font-weight: var(--ce-atmcard-logo-weight, bold);
+  opacity: var(--ce-atmcard-logo-opacity, 0.8);
+}
+.ce-atmcard__logo--visa::after {
+  content: "VISA";
+  color: var(--ce-atmcard-logo-visa-color, white);
+  font-family: var(--ce-atmcard-logo-font, sans-serif);
+}
+.ce-atmcard__logo--mastercard::before {
+  content: "";
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--ce-atmcard-logo-radius, var(--ce-radius-circle, 50%));
+  background: var(--ce-atmcard-logo-mastercard-left-bg, #EB001B);
+  left: 0;
+}
+.ce-atmcard__logo--mastercard::after {
+  content: "";
+  position: absolute;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--ce-atmcard-logo-radius, var(--ce-radius-circle, 50%));
+  background: var(--ce-atmcard-logo-mastercard-right-bg, #F79E1B);
+  left: 12px;
+}
+.ce-atmcard__logo--amex::after {
+  content: "AMEX";
+  color: var(--ce-atmcard-logo-amex-color, white);
+  font-family: var(--ce-atmcard-logo-font, sans-serif);
+  font-size: var(--ce-atmcard-logo-amex-size, 1rem);
+}
+.ce-atmcard__logo--discover::after {
+  content: "DISCOVER";
+  color: var(--ce-atmcard-logo-discover-color, white);
+  font-family: var(--ce-atmcard-logo-font, sans-serif);
+  font-size: var(--ce-atmcard-logo-discover-size, 0.75rem);
+}
+.ce-atmcard__number {
+  font-size: var(--ce-atmcard-number-size, 1.5rem);
+  letter-spacing: var(--ce-atmcard-number-letter-spacing, 3px);
+  font-weight: var(--ce-atmcard-number-weight, 500);
+  text-align: center;
+  margin: var(--ce-atmcard-number-margin, 1rem 0);
+  text-shadow: var(--ce-atmcard-number-shadow, 0 2px 4px rgba(0, 0, 0, 0.2));
+}
+.ce-atmcard__details {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  font-size: var(--ce-atmcard-details-size, 0.875rem);
+}
+.ce-atmcard__holder, .ce-atmcard__expiry {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ce-atmcard-details-gap, 0.25rem);
+}
+.ce-atmcard__holder label, .ce-atmcard__expiry label {
+  font-size: var(--ce-atmcard-details-label-size, 0.625rem);
+  text-transform: var(--ce-atmcard-details-label-transform, uppercase);
+  letter-spacing: var(--ce-atmcard-details-label-letter-spacing, 0.5px);
+  opacity: var(--ce-atmcard-details-label-opacity, 0.8);
+}
+.ce-atmcard__holder strong, .ce-atmcard__expiry strong {
+  font-size: var(--ce-atmcard-details-value-size, 0.875rem);
+  font-weight: var(--ce-atmcard-details-value-weight, 600);
+  text-transform: var(--ce-atmcard-details-value-transform, uppercase);
+}
+.ce-atmcard:hover {
+  transform: var(--ce-atmcard-hover-transform, translateY(-5px));
+  box-shadow: var(--ce-atmcard-hover-shadow, 0 15px 40px rgba(0, 0, 0, 0.3));
+  transition: all var(--ce-atmcard-hover-transition-duration, 0.3s) var(--ce-atmcard-hover-transition-ease, ease);
+}
+@media (max-width: 480px) {
+  .ce-atmcard {
+    max-width: var(--ce-atmcard-max-width-mobile, 100%);
+    height: var(--ce-atmcard-height-mobile, 200px);
+    padding: var(--ce-atmcard-padding-mobile, 1rem);
+  }
+  .ce-atmcard__number {
+    font-size: var(--ce-atmcard-number-size-mobile, 1.25rem);
+    letter-spacing: var(--ce-atmcard-number-letter-spacing-mobile, 2px);
+  }
+  .ce-atmcard__details {
+    font-size: var(--ce-atmcard-details-size-mobile, 0.75rem);
+  }
+}

package/dist/components/tables-lists/data-table.css

@@ -0,0 +1,48 @@
+@charset "UTF-8";
+.data-table {
+  position: relative;
+}
+.data-table .data-table__toolbar {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+.data-table .data-table__toolbar .search-input {
+  max-width: 300px;
+}
+.data-table .data-table__sort {
+  cursor: pointer;
+}
+.data-table .data-table__sort::after {
+  content: " ⇅";
+  font-size: 0.8rem;
+  color: #9aa0a6;
+}
+.data-table .data-table__sort.asc::after {
+  content: " ↑";
+}
+.data-table .data-table__sort.desc::after {
+  content: " ↓";
+}
+.data-table .data-table__status {
+  font-size: 0.875rem;
+  padding: 0.25rem;
+  border-radius: 4px;
+  background-color: #f8f9fa;
+  color: #202124;
+}
+.data-table .data-table__status--active {
+  background-color: #34a853;
+  color: #ffffff;
+}
+.data-table .data-table__status--inactive {
+  background-color: #9aa0a6;
+}
+.data-table .data-table__status--error {
+  background-color: #ea4335;
+  color: #ffffff;
+}
+.data-table .data-table__actions {
+  display: flex;
+  gap: 0.5rem;
+}

package/dist/components/tables-lists/list.css

@@ -0,0 +1,22 @@
+.list {
+  margin: 0;
+  padding-left: 1.5rem;
+  color: #202124;
+  line-height: 1.6;
+}
+.list--inline {
+  display: flex;
+  gap: 1rem;
+  list-style: none;
+  padding-left: 0;
+}
+.list--unstyled {
+  list-style: none;
+  padding-left: 0;
+}
+.list--bulleted {
+  list-style-type: disc;
+}
+.list--numbered {
+  list-style-type: decimal;
+}

package/dist/components/tables-lists/table.css

@@ -0,0 +1,40 @@
+.table {
+  width: var(--ce-table-width, 100%);
+  border-collapse: var(--ce-table-collapse, collapse);
+  font-size: var(--ce-table-size, 0.95rem);
+  background-color: var(--ce-table-bg, var(--theme-table-bg, #ffffff));
+}
+.table thead {
+  background-color: var(--ce-table-thead-bg, var(--theme-table-thead-bg, #f8f9fa));
+  border-bottom: var(--ce-table-thead-border, 2px solid var(--theme-table-border, #9aa0a6));
+}
+.table th,
+.table td {
+  padding: var(--ce-table-cell-padding, 0.5rem 1rem);
+  text-align: var(--ce-table-cell-align, left);
+  border-bottom: var(--ce-table-cell-border, 1px solid var(--theme-table-border, #9aa0a6));
+}
+.table th:focus-visible,
+.table td:focus-visible {
+  outline: var(--ce-table-cell-focus-outline, 2px solid var(--theme-accent, var(--theme-primary)));
+  outline-offset: var(--ce-table-cell-focus-offset, 2px);
+}
+.table th {
+  font-weight: var(--ce-table-th-weight, 600);
+  color: var(--ce-table-th-color, var(--theme-table-th-fg, #202124));
+}
+.table tbody tr:hover {
+  background-color: var(--ce-table-row-hover, var(--theme-table-row-hover, rgba(26, 115, 232, 0.05)));
+}
+.table--striped tbody tr:nth-child(odd) {
+  background-color: var(--ce-table-row-striped, var(--theme-table-row-striped, #f8f9fa));
+}
+.table--bordered, .table--bordered th, .table--bordered td {
+  border: var(--ce-table-bordered, 1px solid var(--theme-table-border, #9aa0a6));
+}
+.table--responsive {
+  display: var(--ce-table-responsive-display, block);
+  width: var(--ce-table-responsive-width, 100%);
+  overflow-x: var(--ce-table-responsive-overflow, auto);
+  white-space: var(--ce-table-responsive-nowrap, nowrap);
+}

package/dist/components/tables-lists/tree-view.css

@@ -0,0 +1,37 @@
+@charset "UTF-8";
+.tree-view {
+  list-style: none;
+  padding-left: 1rem;
+}
+.tree-view .tree-node {
+  margin-bottom: 0.25rem;
+  position: relative;
+}
+.tree-view .tree-node__label {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+.tree-view .tree-node__label:hover {
+  background-color: #f8f9fa;
+}
+.tree-view .tree-node__label.expanded::before {
+  content: "▼";
+  font-size: 0.75rem;
+  color: #9aa0a6;
+}
+.tree-view .tree-node__label::before {
+  content: "▶";
+  font-size: 0.75rem;
+  color: #9aa0a6;
+}
+.tree-view .tree-node .tree-children {
+  display: none;
+  padding-left: 1rem;
+}
+.tree-view .tree-node.expanded .tree-children {
+  display: block;
+}

package/dist/themes/core/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@clusterenvision/ce-ui-theme-core",
+  "version": "1.0.0",
+  "description": "Core CE UI tokens",
+  "main": "tokens.css",
+  "types": "tokens.d.ts",
+  "files": [
+    "tokens.css",
+    "tokens.json",
+    "tokens.d.ts"
+  ]
+}

package/dist/themes/core/tokens.css

@@ -0,0 +1,120 @@
+/* CE UI Tokens v1.0.0 */
+:root {
+  --ce-spacing-0: 0rem;
+  --ce-spacing-4: 0.25rem;
+  --ce-spacing-8: 0.5rem;
+  --ce-spacing-12: 0.75rem;
+  --ce-spacing-16: 1rem;
+  --ce-spacing-24: 1.5rem;
+  --ce-spacing-32: 2rem;
+  --ce-spacing-48: 3rem;
+  --ce-spacing-64: 4rem;
+  --ce-radius-none: 0;
+  --ce-radius-xs: 2px;
+  --ce-radius-sm: 4px;
+  --ce-radius-md: 8px;
+  --ce-radius-lg: 12px;
+  --ce-radius-xl: 16px;
+  --ce-radius-pill: 10px;
+  --ce-radius-circle: 50%;
+  --ce-typography-font-family: 'Inter', system-ui, sans-serif;
+  --ce-typography-font-size-xs: 0.75rem;
+  --ce-typography-font-size-sm: 0.875rem;
+  --ce-typography-font-size-md: 1rem;
+  --ce-typography-font-size-lg: 1.125rem;
+  --ce-typography-font-size-xl: 1.25rem;
+  --ce-typography-font-size-xxl: 1.5rem;
+  --ce-typography-font-weight-regular: 400;
+  --ce-typography-font-weight-medium: 500;
+  --ce-typography-font-weight-bold: 600;
+  --ce-typography-line-height-tight: 1.2;
+  --ce-typography-line-height-normal: 1.5;
+  --ce-typography-line-height-relaxed: 1.7;
+  --ce-density-comfortable: 1;
+  --ce-density-compact: 0.85;
+  --ce-component-button-background: var(--ce-color-primary);
+  --ce-component-button-foreground: #ffffff;
+  --ce-component-button-border: var(--ce-color-primary);
+  --ce-component-button-radius: var(--ce-radius-sm);
+  --ce-component-button-padding-y: var(--ce-space-8);
+  --ce-component-button-padding-x: var(--ce-space-16);
+  --ce-component-input-background: var(--ce-color-surface);
+  --ce-component-input-foreground: var(--ce-color-text);
+  --ce-component-input-border: var(--ce-color-border);
+  --ce-component-input-radius: var(--ce-radius-sm);
+  --ce-component-input-padding-y: var(--ce-space-8);
+  --ce-component-input-padding-x: var(--ce-space-12);
+  --ce-component-card-background: var(--ce-color-surface);
+  --ce-component-card-foreground: var(--ce-color-text);
+  --ce-component-card-border: var(--ce-color-border);
+  --ce-component-card-radius: var(--ce-radius-md);
+  --ce-component-card-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
+  --ce-component-tooltip-background: var(--ce-color-text);
+  --ce-component-tooltip-foreground: var(--ce-color-surface);
+  --ce-component-tooltip-radius: var(--ce-radius-sm);
+  --ce-component-tooltip-padding-y: var(--ce-space-4);
+  --ce-component-tooltip-padding-x: var(--ce-space-8);
+  --ce-color-background: #f8fafc;
+  --ce-color-surface: #ffffff;
+  --ce-color-text: #0f172a;
+  --ce-color-text-muted: #6b7280;
+  --ce-color-primary: #2563eb;
+  --ce-color-accent: #2563eb;
+  --ce-color-border: #e5e7eb;
+  --ce-color-focus-ring: #2563eb;
+  --ce-color-success: #34a853;
+  --ce-color-warning: #f9ab00;
+  --ce-color-danger: #ea4335;
+  --ce-color-info: #4285f4;
+}
+
+:root[data-ce-theme="dark"],
+:root.theme-dark,
+.theme-dark {
+  --ce-color-background: #202124;
+  --ce-color-surface: #111827;
+  --ce-color-text: #ffffff;
+  --ce-color-text-muted: #f8f9fa;
+  --ce-color-primary: #1a73e8;
+  --ce-color-accent: #1a73e8;
+  --ce-color-border: #2b2f36;
+  --ce-color-focus-ring: #1a73e8;
+  --ce-color-success: #34a853;
+  --ce-color-warning: #f9ab00;
+  --ce-color-danger: #ea4335;
+  --ce-color-info: #4285f4;
+}
+
+:root[data-ce-theme="high-contrast"],
+:root.theme-high-contrast,
+.theme-high-contrast {
+  --ce-color-background: #000000;
+  --ce-color-surface: #0f1115;
+  --ce-color-text: #ffffff;
+  --ce-color-text-muted: #cbd5e1;
+  --ce-color-primary: #1d4ed8;
+  --ce-color-accent: #1d4ed8;
+  --ce-color-border: #ffffff;
+  --ce-color-focus-ring: #ffffff;
+  --ce-color-success: #34a853;
+  --ce-color-warning: #f9ab00;
+  --ce-color-danger: #ea4335;
+  --ce-color-info: #4285f4;
+}
+
+@media (prefers-color-scheme: dark) {
+:root:not([data-ce-theme]):not([data-theme]):not(.theme-dark):not(.theme-light) {
+  --ce-color-background: #202124;
+  --ce-color-surface: #111827;
+  --ce-color-text: #ffffff;
+  --ce-color-text-muted: #f8f9fa;
+  --ce-color-primary: #1a73e8;
+  --ce-color-accent: #1a73e8;
+  --ce-color-border: #2b2f36;
+  --ce-color-focus-ring: #1a73e8;
+  --ce-color-success: #34a853;
+  --ce-color-warning: #f9ab00;
+  --ce-color-danger: #ea4335;
+  --ce-color-info: #4285f4;
+}
+}

package/dist/themes/core/tokens.d.ts

@@ -0,0 +1,69 @@
+export type CeTokenName =
+  "color.accent" |
+  "color.background" |
+  "color.border" |
+  "color.danger" |
+  "color.focusRing" |
+  "color.info" |
+  "color.primary" |
+  "color.success" |
+  "color.surface" |
+  "color.text" |
+  "color.textMuted" |
+  "color.warning" |
+  "component.button.background" |
+  "component.button.border" |
+  "component.button.foreground" |
+  "component.button.paddingX" |
+  "component.button.paddingY" |
+  "component.button.radius" |
+  "component.card.background" |
+  "component.card.border" |
+  "component.card.foreground" |
+  "component.card.radius" |
+  "component.card.shadow" |
+  "component.input.background" |
+  "component.input.border" |
+  "component.input.foreground" |
+  "component.input.paddingX" |
+  "component.input.paddingY" |
+  "component.input.radius" |
+  "component.tooltip.background" |
+  "component.tooltip.foreground" |
+  "component.tooltip.paddingX" |
+  "component.tooltip.paddingY" |
+  "component.tooltip.radius" |
+  "density.comfortable" |
+  "density.compact" |
+  "radius.circle" |
+  "radius.lg" |
+  "radius.md" |
+  "radius.none" |
+  "radius.pill" |
+  "radius.sm" |
+  "radius.xl" |
+  "radius.xs" |
+  "spacing.0" |
+  "spacing.12" |
+  "spacing.16" |
+  "spacing.24" |
+  "spacing.32" |
+  "spacing.4" |
+  "spacing.48" |
+  "spacing.64" |
+  "spacing.8" |
+  "typography.fontFamily" |
+  "typography.fontSize.lg" |
+  "typography.fontSize.md" |
+  "typography.fontSize.sm" |
+  "typography.fontSize.xl" |
+  "typography.fontSize.xs" |
+  "typography.fontSize.xxl" |
+  "typography.fontWeight.bold" |
+  "typography.fontWeight.medium" |
+  "typography.fontWeight.regular" |
+  "typography.lineHeight.normal" |
+  "typography.lineHeight.relaxed" |
+  "typography.lineHeight.tight";
+
+export type CeTokenMap = Record<CeTokenName, string>;

package/dist/themes/core/tokens.json

@@ -0,0 +1,136 @@
+{
+  "version": "1.0.0",
+  "product": "core",
+  "name": "@clusterenvision/ce-ui-theme-core",
+  "description": "Core CE UI tokens",
+  "tokens": {
+    "spacing": {
+      "0": "0rem",
+      "4": "0.25rem",
+      "8": "0.5rem",
+      "12": "0.75rem",
+      "16": "1rem",
+      "24": "1.5rem",
+      "32": "2rem",
+      "48": "3rem",
+      "64": "4rem"
+    },
+    "radius": {
+      "none": "0",
+      "xs": "2px",
+      "sm": "4px",
+      "md": "8px",
+      "lg": "12px",
+      "xl": "16px",
+      "pill": "10px",
+      "circle": "50%"
+    },
+    "typography": {
+      "fontFamily": "'Inter', system-ui, sans-serif",
+      "fontSize": {
+        "xs": "0.75rem",
+        "sm": "0.875rem",
+        "md": "1rem",
+        "lg": "1.125rem",
+        "xl": "1.25rem",
+        "xxl": "1.5rem"
+      },
+      "fontWeight": {
+        "regular": "400",
+        "medium": "500",
+        "bold": "600"
+      },
+      "lineHeight": {
+        "tight": "1.2",
+        "normal": "1.5",
+        "relaxed": "1.7"
+      }
+    },
+    "density": {
+      "comfortable": "1",
+      "compact": "0.85"
+    },
+    "component": {
+      "button": {
+        "background": "var(--ce-color-primary)",
+        "foreground": "#ffffff",
+        "border": "var(--ce-color-primary)",
+        "radius": "var(--ce-radius-sm)",
+        "paddingY": "var(--ce-space-8)",
+        "paddingX": "var(--ce-space-16)"
+      },
+      "input": {
+        "background": "var(--ce-color-surface)",
+        "foreground": "var(--ce-color-text)",
+        "border": "var(--ce-color-border)",
+        "radius": "var(--ce-radius-sm)",
+        "paddingY": "var(--ce-space-8)",
+        "paddingX": "var(--ce-space-12)"
+      },
+      "card": {
+        "background": "var(--ce-color-surface)",
+        "foreground": "var(--ce-color-text)",
+        "border": "var(--ce-color-border)",
+        "radius": "var(--ce-radius-md)",
+        "shadow": "0 8px 24px rgba(0, 0, 0, 0.08)"
+      },
+      "tooltip": {
+        "background": "var(--ce-color-text)",
+        "foreground": "var(--ce-color-surface)",
+        "radius": "var(--ce-radius-sm)",
+        "paddingY": "var(--ce-space-4)",
+        "paddingX": "var(--ce-space-8)"
+      }
+    }
+  },
+  "modes": {
+    "light": {
+      "color": {
+        "background": "#f8fafc",
+        "surface": "#ffffff",
+        "text": "#0f172a",
+        "textMuted": "#6b7280",
+        "primary": "#2563eb",
+        "accent": "#2563eb",
+        "border": "#e5e7eb",
+        "focusRing": "#2563eb",
+        "success": "#34a853",
+        "warning": "#f9ab00",
+        "danger": "#ea4335",
+        "info": "#4285f4"
+      }
+    },
+    "dark": {
+      "color": {
+        "background": "#202124",
+        "surface": "#111827",
+        "text": "#ffffff",
+        "textMuted": "#f8f9fa",
+        "primary": "#1a73e8",
+        "accent": "#1a73e8",
+        "border": "#2b2f36",
+        "focusRing": "#1a73e8",
+        "success": "#34a853",
+        "warning": "#f9ab00",
+        "danger": "#ea4335",
+        "info": "#4285f4"
+      }
+    },
+    "high-contrast": {
+      "color": {
+        "background": "#000000",
+        "surface": "#0f1115",
+        "text": "#ffffff",
+        "textMuted": "#cbd5e1",
+        "primary": "#1d4ed8",
+        "accent": "#1d4ed8",
+        "border": "#ffffff",
+        "focusRing": "#ffffff",
+        "success": "#34a853",
+        "warning": "#f9ab00",
+        "danger": "#ea4335",
+        "info": "#4285f4"
+      }
+    }
+  }
+}