@incodetech/web 2.0.0-alpha.1 → 2.0.0-alpha.2

package/dist/styles/tokens.css

@@ -0,0 +1,543 @@
+:root,
+:host {
+  /* Color / Gray */
+
+  --primitive-color-gray-0: #ffffff;
+  --primitive-color-gray-0-80: rgba(255, 255, 255, 0.8);
+  --primitive-color-gray-50: #fcfcfd;
+  --primitive-color-gray-100: #ebecef;
+  --primitive-color-gray-200: #c6c8d2;
+  --primitive-color-gray-300: #a3a8b8;
+  --primitive-color-gray-500: #60667c;
+  --primitive-color-gray-700: #3a3e4b;
+  --primitive-color-gray-800: #262831;
+  --primitive-color-gray-900: #14151a;
+  --primitive-color-gray-900-80: rgba(20, 21, 26, 0.8);
+  --primitive-color-gray-1000: #000000;
+  --primitive-color-gray-1000-80: rgba(0, 0, 0, 0.8);
+
+  /* Color / Brand */
+
+  --primitive-color-brand-50: #e5f0ff;
+  --primitive-color-brand-200: #99ceff;
+  --primitive-color-brand-300: #66a6ff;
+  --primitive-color-brand-400: #3388ff;
+  --primitive-color-brand-500: #006aff;
+  --primitive-color-brand-600: #0055cc;
+  --primitive-color-brand-900: #21273b;
+
+  /* Color / Brand Secondary */
+
+  --primitive-color-brand-secondary-50: #f2e2fe;
+  --primitive-color-brand-secondary-500: #820ad1;
+
+  /* Color / Positive */
+
+  --primitive-color-positive-50: #e4fbf0;
+  --primitive-color-positive-600: #189f60;
+  --primitive-color-positive-800: #0c5030;
+
+  /* Color / Warning */
+
+  --primitive-color-warning-50: #fff7eb;
+  --primitive-color-warning-400: #ffb647;
+  --primitive-color-warning-500: #ff9900;
+  --primitive-color-warning-950: #523100;
+
+  /* Color / Negative */
+
+  --primitive-color-negative-50: #fff0f0;
+  --primitive-color-negative-500: #ff5a5f;
+  --primitive-color-negative-600: #e71111;
+  --primitive-color-negative-950: #240001;
+
+  /* Typography / Family */
+  --primitive-typography-family-rethink-sans: "Rethink Sans";
+  --primitive-typography-family-dm-sans: "DM Sans";
+
+  /* Typography / Size */
+
+  --primitive-typography-size-12: 12px;
+  --primitive-typography-size-14: 14px;
+  --primitive-typography-size-16: 16px;
+  --primitive-typography-size-18: 18px;
+  --primitive-typography-size-20: 20px;
+  --primitive-typography-size-24: 24px;
+  --primitive-typography-size-32: 32px;
+  --primitive-typography-size-40: 40px;
+  --primitive-typography-size-48: 48px;
+  --primitive-typography-size-80: 80px;
+
+  /* Typography / Weight */
+
+  --primitive-typography-weight-thin: 300;
+  --primitive-typography-weight-regular: 400;
+  --primitive-typography-weight-medium: 500;
+  --primitive-typography-weight-semibold: 600;
+  --primitive-typography-weight-bold: 700;
+  --primitive-typography-weight-extrabold: 800;
+
+  /* Typography / Letter Spacing */
+
+  --primitive-typography-letter-spacing-0: 0px;
+  --primitive-typography-letter-spacing-minus-0-5: -0.5px;
+  --primitive-typography-letter-spacing-minus-1: -1px;
+  --primitive-typography-letter-spacing-minus-1-5: -1.5px;
+
+  /* Border / Width */
+
+  --primitive-border-width-0: 0px;
+  --primitive-border-width-1: 1px;
+  --primitive-border-width-2: 2px;
+  --primitive-border-width-4: 4px;
+
+  /* Border / Radius */
+
+  --primitive-border-radius-0: 0px;
+  --primitive-border-radius-4: 4px;
+  --primitive-border-radius-8: 8px;
+  --primitive-border-radius-16: 16px;
+  --primitive-border-radius-24: 24px;
+  --primitive-border-radius-40: 40px;
+  --primitive-border-radius-64: 64px;
+  --primitive-border-radius-9999: 9999px;
+
+  /* Scale */
+
+  --primitive-scale-0: 0px;
+  --primitive-scale-2: 2px;
+  --primitive-scale-4: 4px;
+  --primitive-scale-8: 8px;
+  --primitive-scale-12: 12px;
+  --primitive-scale-16: 16px;
+  --primitive-scale-20: 20px;
+  --primitive-scale-24: 24px;
+  --primitive-scale-32: 32px;
+  --primitive-scale-40: 40px;
+  --primitive-scale-48: 48px;
+  --primitive-scale-56: 56px;
+  --primitive-scale-64: 64px;
+  --primitive-scale-72: 72px;
+  --primitive-scale-80: 80px;
+  --primitive-scale-88: 88px;
+  --primitive-scale-96: 96px;
+  --primitive-scale-104: 104px;
+  --primitive-scale-120: 120px;
+  --primitive-scale-128: 128px;
+  --primitive-scale-160: 160px;
+  --primitive-scale-200: 200px;
+}
+:root,
+:host {
+  /* Border / Width */
+
+  --border-none: var(--primitive-border-width-0);
+  --border-regular: var(--primitive-border-width-1);
+  --border-bold: var(--primitive-border-width-2);
+
+  /* Border / Radius */
+
+  --border-radius-none: var(--primitive-border-radius-0);
+  --border-radius-x-small: var(--primitive-border-radius-4);
+  --border-radius-small: var(--primitive-border-radius-8);
+  --border-radius-medium: var(--primitive-border-radius-16);
+  --border-radius-large: var(--primitive-border-radius-24);
+  --border-radius-x-large: var(--primitive-border-radius-40);
+  --border-radius-xx-large: var(--primitive-border-radius-64);
+  --border-radius-full: var(--primitive-border-radius-9999);
+
+  /* Spacing */
+
+  --spacing-none: var(--primitive-scale-0);
+  --spacing-2: var(--primitive-scale-2);
+  --spacing-4: var(--primitive-scale-4);
+  --spacing-8: var(--primitive-scale-8);
+  --spacing-12: var(--primitive-scale-12);
+  --spacing-16: var(--primitive-scale-16);
+  --spacing-20: var(--primitive-scale-20);
+  --spacing-24: var(--primitive-scale-24);
+  --spacing-32: var(--primitive-scale-32);
+  --spacing-40: var(--primitive-scale-40);
+  --spacing-48: var(--primitive-scale-48);
+  --spacing-64: var(--primitive-scale-64);
+  --spacing-80: var(--primitive-scale-80);
+  --spacing-96: var(--primitive-scale-96);
+  --spacing-104: var(--primitive-scale-104);
+  --spacing-120: var(--primitive-scale-120);
+  --spacing-160: var(--primitive-scale-160);
+  --spacing-200: var(--primitive-scale-200);
+
+  /* Icon / Size */
+
+  --icon-size-xx-small: var(--primitive-scale-16);
+  --icon-size-x-small: var(--primitive-scale-20);
+  --icon-size-small: var(--primitive-scale-24);
+  --icon-size-medium: var(--primitive-scale-32);
+  --icon-size-large: var(--primitive-scale-40);
+  --icon-size-x-large: var(--primitive-scale-48);
+  --icon-size-xx-large: var(--primitive-scale-64);
+  --icon-size-xxx-large: var(--primitive-scale-80);
+}
+:root,
+:host {
+  /* Surface / Neutral */
+
+  --surface-neutral-0: var(--primitive-color-gray-0);
+  --surface-neutral-0-80: var(--primitive-color-gray-0-80);
+  --surface-neutral-50: var(--primitive-color-gray-50);
+  --surface-neutral-100: var(--primitive-color-gray-100);
+  --surface-neutral-200: var(--primitive-color-gray-200);
+  --surface-neutral-300: var(--primitive-color-gray-300);
+  --surface-neutral-500: var(--primitive-color-gray-500);
+  --surface-neutral-700: var(--primitive-color-gray-700);
+  --surface-neutral-800: var(--primitive-color-gray-800);
+  --surface-neutral-900: var(--primitive-color-gray-900);
+  --surface-neutral-900-80: var(--primitive-color-gray-900-80);
+  --surface-neutral-900-static: var(--primitive-color-gray-900);
+  --surface-neutral-1000: var(--primitive-color-gray-1000);
+
+  /* Surface / Brand */
+
+  --surface-brand-50: var(--primitive-color-brand-50);
+  --surface-brand-400: var(--primitive-color-brand-400);
+  --surface-brand-400-static: var(--primitive-color-brand-400);
+  --surface-brand-500: var(--primitive-color-brand-500);
+  --surface-brand-500-static: var(--primitive-color-brand-500);
+  --surface-brand-600: var(--primitive-color-brand-600);
+  --surface-brand-600-static: var(--primitive-color-brand-600);
+
+  /* Surface / Status */
+
+  --surface-status-negative-50: var(--primitive-color-negative-50);
+  --surface-status-negative-600: var(--primitive-color-negative-600);
+
+  --surface-status-warning-50: var(--primitive-color-warning-50);
+  --surface-status-warning-500: var(--primitive-color-warning-500);
+
+  --surface-status-positive-50: var(--primitive-color-positive-50);
+  --surface-status-positive-600: var(--primitive-color-positive-600);
+  --surface-status-positive-600-static: var(--primitive-color-positive-600);
+
+  /* Icon / Neutral */
+
+  --icon-neutral-0: var(--primitive-color-gray-0);
+  --icon-neutral-0-static: var(--primitive-color-gray-0);
+  --icon-neutral-50: var(--primitive-color-gray-50);
+  --icon-neutral-50-static: var(--primitive-color-gray-50);
+  --icon-neutral-300: var(--primitive-color-gray-300);
+  --icon-neutral-500: var(--primitive-color-gray-500);
+  --icon-neutral-500-static: var(--primitive-color-gray-500);
+  --icon-neutral-800: var(--primitive-color-gray-800);
+  --icon-neutral-800-static: var(--primitive-color-gray-800);
+
+  /* Icon / Brand */
+
+  --icon-brand-500: var(--primitive-color-brand-500);
+  --icon-brand-500-static: var(--primitive-color-brand-500);
+
+  /* Icon / Status */
+
+  --icon-status-negative: var(--primitive-color-negative-600);
+  --icon-status-warning: var(--primitive-color-warning-500);
+  --icon-status-positive: var(--primitive-color-positive-600);
+  --icon-status-positive-static: var(--primitive-color-positive-600);
+
+  /* Border / Neutral */
+
+  --border-neutral-100: var(--primitive-color-gray-100);
+  --border-neutral-300: var(--primitive-color-gray-300);
+  --border-neutral-500: var(--primitive-color-gray-500);
+
+  /* Border / Brand */
+
+  --border-brand-500: var(--primitive-color-brand-500);
+  --border-brand-500-static: var(--primitive-color-brand-500);
+  --border-brand-600: var(--primitive-color-brand-600);
+
+  /* Border / Status */
+
+  --border-status-negative: var(--primitive-color-negative-600);
+  --border-status-warning: var(--primitive-color-warning-500);
+  --border-status-positive: var(--primitive-color-positive-600);
+  --border-status-positive-static: var(--primitive-color-positive-600);
+
+  /* Text / Body */
+
+  --text-body-primary: var(--primitive-color-gray-800);
+  --text-body-secondary: var(--primitive-color-gray-500);
+  --text-body-tertiary: var(--primitive-color-gray-300);
+  --text-body-0: var(--primitive-color-gray-0);
+  --text-body-0-static: var(--primitive-color-gray-0);
+
+  /* Text / Link */
+
+  --text-link-default: var(--primitive-color-brand-500);
+  --text-link-hover: var(--primitive-color-brand-300);
+  --text-link-hover-static: var(--primitive-color-brand-300);
+  --text-link-disabled: var(--primitive-color-gray-500);
+  --text-link-disabled-static: var(--primitive-color-gray-500);
+  --text-link-visited: var(--primitive-color-gray-700);
+
+  /* Text / Accent */
+
+  --text-accent-brand: var(--primitive-color-brand-500);
+  --text-accent-brand-static: var(--primitive-color-brand-500);
+  --text-accent-brand-secondary: var(--primitive-color-brand-secondary-500);
+  --text-accent-brand-secondary-static: var(
+    --primitive-color-brand-secondary-500
+  );
+
+  /* Text / Status */
+
+  --text-status-negative: var(--primitive-color-negative-600);
+  --text-status-warning: var(--primitive-color-warning-500);
+  --text-status-positive: var(--primitive-color-positive-600);
+  --text-status-positive-static: var(--primitive-color-positive-600);
+}
+[data-incode-theme="dark"] {
+  /* Surface / Neutral */
+
+  --surface-neutral-0: var(--primitive-color-gray-1000);
+  --surface-neutral-0-80: var(--primitive-color-gray-900-80);
+  --surface-neutral-50: var(--primitive-color-gray-900);
+  --surface-neutral-100: var(--primitive-color-gray-800);
+  --surface-neutral-200: var(--primitive-color-gray-700);
+  --surface-neutral-300: var(--primitive-color-gray-500);
+  --surface-neutral-500: var(--primitive-color-gray-300);
+  --surface-neutral-700: var(--primitive-color-gray-200);
+  --surface-neutral-800: var(--primitive-color-gray-100);
+  --surface-neutral-900: var(--primitive-color-gray-0);
+  --surface-neutral-900-80: var(--primitive-color-gray-0-80);
+  --surface-neutral-1000: var(--primitive-color-gray-0);
+
+  /* Surface / Brand */
+
+  --surface-brand-50: var(--primitive-color-brand-900);
+
+  /* Surface / Status */
+
+  --surface-status-negative-50: var(--primitive-color-negative-950);
+  --surface-status-negative-600: var(--primitive-color-negative-500);
+
+  --surface-status-warning-50: var(--primitive-color-warning-950);
+  --surface-status-warning-500: var(--primitive-color-warning-400);
+
+  --surface-status-positive-50: var(--primitive-color-positive-800);
+
+  /* Icon / Neutral */
+
+  --icon-neutral-0: var(--primitive-color-gray-800);
+  --icon-neutral-300: var(--primitive-color-gray-500);
+  --icon-neutral-500: var(--primitive-color-gray-300);
+  --icon-neutral-800: var(--primitive-color-gray-100);
+
+  /* Icon / Status */
+
+  --icon-status-negative: var(--primitive-color-negative-500);
+  --icon-status-warning: var(--primitive-color-warning-400);
+
+  /* Border / Neutral */
+
+  --border-neutral-100: var(--primitive-color-gray-700);
+  --border-neutral-300: var(--primitive-color-gray-500);
+  --border-neutral-500: var(--primitive-color-gray-300);
+
+  /* Border / Brand */
+
+  --border-brand-600: var(--primitive-color-brand-400);
+
+  /* Border / Status */
+
+  --border-status-negative: var(--primitive-color-negative-500);
+  --border-status-warning: var(--primitive-color-warning-400);
+
+  /* Text / Body */
+
+  --text-body-primary: var(--primitive-color-gray-50);
+  --text-body-secondary: var(--primitive-color-gray-300);
+  --text-body-tertiary: var(--primitive-color-gray-500);
+
+  /* Text / Link */
+
+  --text-link-default: var(--primitive-color-brand-400);
+  --text-link-visited: var(--primitive-color-gray-300);
+
+  /* Text / Status */
+
+  --text-status-negative: var(--primitive-color-negative-500);
+  --text-status-warning: var(--primitive-color-warning-400);
+}
+:root,
+:host {
+  /* Button / Primary */
+  --button-primary-surface-default: var(--surface-brand-500-static);
+  --button-primary-surface-hover: var(--surface-brand-400-static);
+  --button-primary-surface-pressed: var(--surface-brand-600-static);
+  --button-primary-surface-disabled: var(--surface-neutral-100);
+
+  --button-primary-text-default: var(--text-body-0-static);
+  --button-primary-text-disabled: var(--text-body-tertiary);
+
+  --button-primary-border-default: var(--surface-brand-500-static);
+  --button-primary-border-hover: var(--surface-brand-400-static);
+  --button-primary-border-pressed: var(--surface-brand-600-static);
+  --button-primary-border-disabled: var(--surface-neutral-100);
+  --button-primary-border-radius: var(--border-radius-medium);
+
+  /* Button / Secondary */
+  --button-secondary-surface-default: var(--surface-neutral-0);
+  --button-secondary-surface-hover: var(--surface-brand-50);
+  --button-secondary-surface-pressed: var(--surface-brand-600-static);
+  --button-secondary-surface-disabled: var(--surface-neutral-200);
+
+  --button-secondary-text-default: var(--text-accent-brand-static);
+  --button-secondary-text-disabled: var(--text-body-secondary);
+
+  --button-secondary-border-default: var(--surface-brand-500-static);
+  --button-secondary-border-hover: var(--surface-brand-400-static);
+  --button-secondary-border-pressed: var(--surface-brand-600-static);
+  --button-secondary-border-disabled: var(--surface-neutral-100);
+  --button-secondary-border-radius: var(--border-radius-medium);
+
+  /* Button / Tertiary */
+  --button-tertiary-text-default: var(--text-accent-brand-static);
+  --button-tertiary-text-disabled: var(--text-body-secondary);
+
+  /* Checkbox */
+  --checkbox-surface-default: var(--surface-neutral-50);
+  --checkbox-surface-selected: var(--surface-brand-500-static);
+  --checkbox-surface-disabled: var(--surface-neutral-200);
+
+  --checkbox-border-default: var(--border-neutral-100);
+  --checkbox-border-selected: var(--border-brand-500-static);
+  --checkbox-border-disabled: var(--border-neutral-300);
+  --checkbox-border-negative: var(--border-status-negative);
+  --checkbox-border-radius: var(--border-radius-small);
+
+  --checkbox-icon-default: var(--surface-neutral-0);
+
+  --checkbox-text-default: var(--text-body-primary);
+  --checkbox-text-disabled: var(--text-body-tertiary);
+  --checkbox-text-negative: var(--text-status-negative);
+
+  /* Card */
+  --card-surface-primary: var(--surface-neutral-800);
+
+  --card-text-title: var(--surface-neutral-100);
+  --card-text-subtitle: var(--text-body-secondary);
+
+  /* Countdown */
+  --countdown-surface-default: var(--surface-neutral-900-static);
+
+  --countdown-text-default: var(--text-body-0-static);
+
+  /* Input */
+  --input-surface-default: var(--surface-neutral-50);
+  --input-surface-active: var(--surface-neutral-50);
+  --input-surface-disabled: var(--surface-neutral-100);
+  --input-surface-negative: var(--surface-neutral-50);
+
+  --input-border-default: var(--border-neutral-100);
+  --input-border-active: var(--border-brand-500-static);
+  --input-border-disabled: var(--border-neutral-100);
+  --input-border-negative: var(--border-status-negative);
+
+  --input-icon-default: var(--surface-neutral-300);
+  --input-icon-positive: var(--surface-status-positive-600-static);
+  --input-icon-negative: var(--border-status-negative);
+  --input-icon-warning: var(--surface-status-warning-500);
+
+  --input-text-label-default: var(--text-body-primary);
+  --input-text-label-disabled: var(--text-body-tertiary);
+
+  --input-text-field-default: var(--text-body-primary);
+  --input-text-field-disabled: var(--text-body-tertiary);
+  --input-text-field-placeholder: var(--text-body-tertiary);
+
+  --input-text-helper-default: var(--text-body-secondary);
+  --input-text-helper-disabled: var(--text-body-tertiary);
+  --input-text-helper-negative: var(--text-status-negative);
+
+  /* Dropdown */
+
+  --dropdown-surface-default: var(--surface-neutral-50);
+  --dropdown-surface-active: var(--surface-neutral-50);
+  --dropdown-surface-disabled: var(--surface-neutral-100);
+  --dropdown-surface-negative: var(--surface-neutral-50);
+
+  --dropdown-border-default: var(--border-neutral-100);
+  --dropdown-border-active: var(--border-brand-500-static);
+  --dropdown-border-disabled: var(--border-neutral-100);
+  --dropdown-border-negative: var(--border-status-negative);
+
+  --dropdown-icon-default: var(--surface-neutral-300);
+  --dropdown-icon-positive: var(--surface-status-positive-600-static);
+  --dropdown-icon-negative: var(--border-status-negative);
+  --dropdown-icon-warning: var(--surface-status-warning-500);
+
+  --dropdown-text-label-default: var(--text-body-primary);
+  --dropdown-text-label-disabled: var(--text-body-tertiary);
+
+  --dropdown-text-input-default: var(--text-body-primary);
+  --dropdown-text-input-disabled: var(--text-body-tertiary);
+  --dropdown-text-input-placeholder: var(--text-body-tertiary);
+
+  --dropdown-text-helper-default: var(--text-body-secondary);
+  --dropdown-text-helper-disabled: var(--text-body-tertiary);
+  --dropdown-text-helper-negative: var(--text-status-negative);
+
+  /* Link */
+
+  --link-default: var(--text-accent-brand-static);
+  --link-hover: var(--text-body-primary);
+  --link-disabled: var(--text-body-secondary);
+  --link-visited: var(--text-accent-brand-static);
+
+  /* Spinner */
+
+  --spinner-surface-primary: var(--surface-brand-500-static);
+  --spinner-surface-secondary: var(--surface-brand-50);
+  --spinner-surface-overlay: var(--surface-neutral-0);
+  --spinner-surface-overlay-opacity: 1;
+
+  --spinner-text-title: var(--text-body-primary);
+  --spinner-text-subtitle: var(--text-body-secondary);
+
+  /* Snackbar */
+
+  --snackbar-surface-neutral: var(--surface-brand-50);
+  --snackbar-surface-positive: var(--surface-status-positive-50);
+  --snackbar-surface-warning: var(--surface-status-warning-50);
+  --snackbar-surface-negative: var(--surface-status-negative-50);
+
+  --snackbar-border-neutral: var(--border-brand-500-static);
+  --snackbar-border-positive: var(--border-status-positive-static);
+  --snackbar-border-warning: var(--border-status-warning);
+  --snackbar-border-negative: var(--border-status-negative);
+
+  --snackbar-icon-brand: var(--icon-brand-500-static);
+  --snackbar-icon-positive: var(--icon-status-positive-static);
+  --snackbar-icon-negative: var(--icon-status-negative);
+  --snackbar-icon-warning: var(--icon-status-warning);
+
+  --snackbar-text-default: var(--text-body-primary);
+  --snackbar-text-link: var(--link-default);
+  --snackbar-text-positive: var(--text-status-positive-static);
+  --snackbar-text-warning: var(--text-status-warning);
+  --snackbar-text-negative: var(--text-status-negative);
+
+  /* Toggle-switch */
+
+  --toggle-switch-surface-primary-on: var(--surface-brand-500-static);
+  --toggle-switch-surface-primary-off: var(--surface-neutral-200);
+  --toggle-switch-surface-primary-disabled: var(--surface-neutral-200);
+
+  --toggle-switch-surface-secondary-on: var(--surface-neutral-100);
+  --toggle-switch-surface-secondary-off: var(--surface-neutral-100);
+  --toggle-switch-surface-secondary-disabled: var(--surface-neutral-200);
+
+  --toggle-switch-text-default: var(--text-body-primary);
+  --toggle-switch-text-disabled: var(--text-body-tertiary);
+  --toggle-switch-text-negative: var(--text-status-negative);
+  --toggle-switch-text-link: var(--text-accent-brand-static);
+}

package/dist/successIcon.css

@@ -0,0 +1,4 @@
+/*! tailwindcss v4.1.17 | MIT License | https://tailwindcss.com */
+.IncodeSuccessIcon {
+  flex-shrink: 0;
+}