@ama-pt/agora-design-system 3.7.0 → 4.0.1

package/src/styles/theme.css

@@ -0,0 +1,418 @@
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+
+@theme {
+  /* Colors */
+  --color-*: initial;
+  --color-transparent: transparent;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-focus: #f408fc;
+  --color-backdrop: rgba(43, 54, 60, 0.96);
+
+  --color-mask-image: rgba(43, 54, 60, 0.8);
+  --color-mask-neutral-900: #2b363ccc;
+  --color-mask-primary-900: #021c51cc;
+  --color-mask-secondary-900: #0d4c75cc;
+
+  --color-neutral-50: #f7f8fa;
+  --color-neutral-100: #f1f3f8;
+  --color-neutral-200: #e1e4ea;
+  --color-neutral-300: #cdd2dc;
+  --color-neutral-400: #bac0cc;
+  --color-neutral-500: #9ca6b8;
+  --color-neutral-600: #8893aa;
+  --color-neutral-700: #64718b;
+  --color-neutral-800: #475164;
+  --color-neutral-900: #2b363c;
+
+  --color-primary-50: #fafcff;
+  --color-primary-100: #f2f6ff;
+  --color-primary-200: #e5eeff;
+  --color-primary-300: #bbd1fd;
+  --color-primary-400: #5f93fc;
+  --color-primary-500: #1a65fa;
+  --color-primary-600: #034ad8;
+  --color-primary-700: #0338a2;
+  --color-primary-800: #002b82;
+  --color-primary-900: #021c51;
+
+  --color-secondary-50: #f5fbff;
+  --color-secondary-100: #ebf6ff;
+  --color-secondary-200: #e3f4ff;
+  --color-secondary-300: #cceaff;
+  --color-secondary-400: #a0d8fe;
+  --color-secondary-500: #1ca3fc;
+  --color-secondary-600: #1993e3;
+  --color-secondary-700: #1682ca;
+  --color-secondary-800: #12669e;
+  --color-secondary-900: #0d4c75;
+
+  --color-informative-50: #e5f6ff;
+  --color-informative-100: #e5f6ff;
+  --color-informative-200: #a5deff;
+  --color-informative-300: #77ceff;
+  --color-informative-400: #49bcff;
+  --color-informative-500: #0079bf;
+  --color-informative-600: #00598c;
+  --color-informative-700: #0b486b;
+  --color-informative-800: #083752;
+  --color-informative-900: #00121c;
+
+  --color-success-50: #e5fff6;
+  --color-success-100: #c2f2e2;
+  --color-success-200: #7accb1;
+  --color-success-300: #36b289;
+  --color-success-400: #1f9970;
+  --color-success-500: #008558;
+  --color-success-600: #00724c;
+  --color-success-700: #005539;
+  --color-success-800: #013926;
+  --color-success-900: #001c13;
+
+  --color-warning-50: #fff9e5;
+  --color-warning-100: #fff2cc;
+  --color-warning-200: #ffe699;
+  --color-warning-300: #ffe699;
+  --color-warning-400: #ffd966;
+  --color-warning-500: #fbcb3c;
+  --color-warning-600: #fbbb3c;
+  --color-warning-700: #f2a222;
+  --color-warning-800: #b06112;
+  --color-warning-900: #80460d;
+
+  --color-danger-50: #fef1f2;
+  --color-danger-100: #fee1e3;
+  --color-danger-200: #fec8cc;
+  --color-danger-300: #fca6ad;
+  --color-danger-400: #f8727d;
+  --color-danger-500: #de2d3b;
+  --color-danger-600: #d12332;
+  --color-danger-700: #c41826;
+  --color-danger-800: #b20917;
+  --color-danger-900: #86131d;
+
+  /* Font family */
+  --font-*: initial;
+  --font-sans: 'Noto Sans', sans-serif;
+
+  /* Typography */
+  --text-*: initial;
+  --text-base: 16px;
+
+  /* Typography / S */
+  --text-s-regular: 0.875rem;
+  --text-s-regular--line-height: 1.5rem;
+  --text-s-regular--letter-spacing: 0;
+  --text-s-regular--font-weight: 400;
+
+  --text-s-medium: 0.875rem;
+  --text-s-medium--line-height: 1.5rem;
+  --text-s-medium--letter-spacing: 0;
+  --text-s-medium--font-weight: 500;
+
+  --text-s-semibold: 0.875rem;
+  --text-s-semibold--line-height: 1.5rem;
+  --text-s-semibold--letter-spacing: 0;
+  --text-s-semibold--font-weight: 600;
+
+  --text-s-bold: 0.875rem;
+  --text-s-bold--line-height: 1.5rem;
+  --text-s-bold--letter-spacing: 0;
+  --text-s-bold--font-weight: 700;
+
+  /* Typography / M */
+  --text-m-light: 1rem;
+  --text-m-light--line-height: 1.75rem;
+  --text-m-light--letter-spacing: 0;
+  --text-m-light--font-weight: 300;
+
+  --text-m-regular: 1rem;
+  --text-m-regular--line-height: 1.75rem;
+  --text-m-regular--letter-spacing: 0;
+  --text-m-regular--font-weight: 400;
+
+  --text-m-medium: 1rem;
+  --text-m-medium--line-height: 1.75rem;
+  --text-m-medium--letter-spacing: 0;
+  --text-m-medium--font-weight: 500;
+
+  --text-m-semibold: 1rem;
+  --text-m-semibold--line-height: 1.75rem;
+  --text-m-semibold--letter-spacing: 0;
+  --text-m-semibold--font-weight: 600;
+
+  --text-m-bold: 1rem;
+  --text-m-bold--line-height: 1.75rem;
+  --text-m-bold--letter-spacing: 0;
+  --text-m-bold--font-weight: 700;
+
+  /* Typography / L */
+  --text-l-light: 1.25rem;
+  --text-l-light--line-height: 2rem;
+  --text-l-light--letter-spacing: 0;
+  --text-l-light--font-weight: 300;
+
+  --text-l-regular: 1.25rem;
+  --text-l-regular--line-height: 2rem;
+  --text-l-regular--letter-spacing: 0;
+  --text-l-regular--font-weight: 400;
+
+  --text-l-medium: 1.25rem;
+  --text-l-medium--line-height: 2rem;
+  --text-l-medium--letter-spacing: 0;
+  --text-l-medium--font-weight: 500;
+
+  --text-l-semibold: 1.25rem;
+  --text-l-semibold--line-height: 2rem;
+  --text-l-semibold--letter-spacing: 0;
+  --text-l-semibold--font-weight: 600;
+
+  --text-l-bold: 1.25rem;
+  --text-l-bold--line-height: 2rem;
+  --text-l-bold--letter-spacing: 0;
+  --text-l-bold--font-weight: 700;
+
+  /* Typography / XL */
+  --text-xl-light: 1.5rem;
+  --text-xl-light--line-height: 2.25rem;
+  --text-xl-light--letter-spacing: 0;
+  --text-xl-light--font-weight: 300;
+
+  --text-xl-regular: 1.5rem;
+  --text-xl-regular--line-height: 2.25rem;
+  --text-xl-regular--letter-spacing: 0;
+  --text-xl-regular--font-weight: 400;
+
+  --text-xl-medium: 1.5rem;
+  --text-xl-medium--line-height: 2.25rem;
+  --text-xl-medium--letter-spacing: 0;
+  --text-xl-medium--font-weight: 500;
+
+  --text-xl-semibold: 1.5rem;
+  --text-xl-semibold--line-height: 2.25rem;
+  --text-xl-semibold--letter-spacing: 0;
+  --text-xl-semibold--font-weight: 600;
+
+  --text-xl-bold: 1.5rem;
+  --text-xl-bold--line-height: 2.25rem;
+  --text-xl-bold--letter-spacing: 0;
+  --text-xl-bold--font-weight: 700;
+
+  /* Typography / 2XL */
+  --text-2xl-light: 2rem;
+  --text-2xl-light--line-height: 3rem;
+  --text-2xl-light--letter-spacing: 0;
+  --text-2xl-light--font-weight: 300;
+
+  --text-2xl-regular: 2rem;
+  --text-2xl-regular--line-height: 3rem;
+  --text-2xl-regular--letter-spacing: 0;
+  --text-2xl-regular--font-weight: 400;
+
+  --text-2xl-medium: 2rem;
+  --text-2xl-medium--line-height: 3rem;
+  --text-2xl-medium--letter-spacing: 0;
+  --text-2xl-medium--font-weight: 500;
+
+  --text-2xl-semibold: 2rem;
+  --text-2xl-semibold--line-height: 3rem;
+  --text-2xl-semibold--letter-spacing: 0;
+  --text-2xl-semibold--font-weight: 600;
+
+  --text-2xl-bold: 2rem;
+  --text-2xl-bold--line-height: 3rem;
+  --text-2xl-bold--letter-spacing: 0;
+  --text-2xl-bold--font-weight: 700;
+
+  /* Typography / 3XL */
+  --text-3xl-light: 2.5rem;
+  --text-3xl-light--line-height: 3.75rem;
+  --text-3xl-light--letter-spacing: 0;
+  --text-3xl-light--font-weight: 300;
+
+  --text-3xl-regular: 2.5rem;
+  --text-3xl-regular--line-height: 3.75rem;
+  --text-3xl-regular--letter-spacing: 0;
+  --text-3xl-regular--font-weight: 400;
+
+  --text-3xl-medium: 2.5rem;
+  --text-3xl-medium--line-height: 3.75rem;
+  --text-3xl-medium--letter-spacing: 0;
+  --text-3xl-medium--font-weight: 500;
+
+  --text-3xl-semibold: 2.5rem;
+  --text-3xl-semibold--line-height: 3.75rem;
+  --text-3xl-semibold--letter-spacing: 0;
+  --text-3xl-semibold--font-weight: 600;
+
+  --text-3xl-bold: 2.5rem;
+  --text-3xl-bold--line-height: 3.75rem;
+  --text-3xl-bold--letter-spacing: 0;
+  --text-3xl-bold--font-weight: 700;
+
+  /* Spacing */
+  --spacing-*: initial;
+  --spacing-0: 0px;
+  --spacing-8: 8px;
+  --spacing-16: 16px;
+  --spacing-24: 24px;
+  --spacing-32: 32px;
+  --spacing-40: 40px;
+  --spacing-48: 48px;
+  --spacing-56: 56px;
+  --spacing-64: 64px;
+  --spacing-72: 72px;
+  --spacing-80: 80px;
+  --spacing-88: 88px;
+  --spacing-96: 96px;
+  --spacing-104: 104px;
+  --spacing-112: 112px;
+  --spacing-120: 120px;
+  --spacing-128: 128px;
+  --spacing-256: 256px;
+  --spacing-1\/4: 25%;
+  --spacing-1\/2: 50%;
+  --spacing-full: 100%;
+
+  /* Screens */
+  --breakpoint-*: initial;
+  --breakpoint-xs: 360px;
+  --breakpoint-md: 768px;
+  --breakpoint-xl: 1280px;
+
+  /* Border Radius */
+  --radius-*: initial;
+  --radius-none: 0px;
+  --radius-4: 4px;
+  --radius-8: 8px;
+  --radius-16: 16px;
+  --radius-24: 24px;
+  --radius-32: 32px;
+  --radius-full: 100%;
+
+  /* Box Shadow */
+  --shadow-*: initial;
+  --shadow-none: 0 0 #0000;
+  --shadow-top-lower: 0px -4px 4px 0px rgba(0, 0, 0, 0.16);
+  --shadow-top-low: 0px -8px 8px 0px rgba(0, 0, 0, 0.08);
+  --shadow-top-medium: 0px -16px 16px 0px rgba(0, 0, 0, 0.08);
+  --shadow-top-high: 0px -16px 16px 0px rgba(0, 0, 0, 0.16);
+  --shadow-top-higher: 0px -16px 16px 0px rgba(0, 0, 0, 0.32);
+  --shadow-center-lower: 0px 0px 4px 0px rgba(0, 0, 0, 0.32);
+  --shadow-center-low: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);
+  --shadow-center-medium: 0px 0px 16px 0px rgba(0, 0, 0, 0.08);
+  --shadow-center-high: 0px 0px 16px 0px rgba(0, 0, 0, 0.16);
+  --shadow-center-higher: 0px 0px 16px 0px rgba(0, 0, 0, 0.32);
+  --shadow-bottom-lower: 0px 4px 4px 0px rgba(0, 0, 0, 0.16);
+  --shadow-bottom-low: 0px 8px 8px 0px rgba(0, 0, 0, 0.08);
+  --shadow-bottom-medium: 0px 16px 16px 0px rgba(0, 0, 0, 0.08);
+  --shadow-bottom-high: 0px 16px 16px 0px rgba(0, 0, 0, 0.16);
+  --shadow-bottom-higher: 0px 16px 16px 0px rgba(0, 0, 0, 0.32);
+  --shadow-inner: 0px 4px 4px 0px rgba(0, 0, 0, 0.32) inset;
+
+  /* Z-Index */
+  --z-dropdown: 1000;
+  --z-backdrop: 2000;
+  --z-sticky: 3000;
+  --z-fixed: 4000;
+  --z-drawer: 5000;
+  --z-dialog: 6000;
+  --z-toast: 7000;
+  --z-tooltip: 8000;
+
+  /* Opacity */
+  --opacity-16: 0.16;
+  --opacity-32: 0.32;
+
+  /* Grid Template Columns */
+  --grid-template-columns-1-auto: auto;
+  --grid-template-columns-2-auto: auto auto;
+  --grid-template-columns-3-auto: auto auto auto;
+  --grid-template-columns-4-auto: auto auto auto auto;
+  --grid-template-columns-5-auto: auto auto auto auto auto;
+  --grid-template-columns-6-auto: auto auto auto auto auto auto;
+  --grid-template-columns-7-auto: auto auto auto auto auto auto auto;
+  --grid-template-columns-8-auto: auto auto auto auto auto auto auto auto;
+  --grid-template-columns-9-auto: auto auto auto auto auto auto auto auto auto;
+  --grid-template-columns-10-auto: auto auto auto auto auto auto auto auto auto auto;
+  --grid-template-columns-11-auto: auto auto auto auto auto auto auto auto auto auto auto;
+  --grid-template-columns-12-auto: auto auto auto auto auto auto auto auto auto auto auto auto;
+
+  /* Transition Duration — semantic token for the DS default animation speed */
+  --duration-default: 200ms;
+
+  /*
+  Tailwind v3 merged default utilities automatically; v4 only generates utilities
+  for values explicitly defined in the config. Because this project imports only
+  'tailwindcss/preflight' and 'tailwindcss/utilities' (not 'tailwindcss/theme'),
+  the default CSS variables are absent and must be declared here.
+
+  Variables in Tailwind v4 recognized namespaces (--animate-*, --ease-*,
+  --font-weight-*, --leading-*, --content-*) auto-generate their corresponding
+  utilities — no @utility block needed (unlike --z-*, which does require one).
+
+  Only values actually referenced via @apply in component CSS files are listed.
+*/
+  --animate-spin: spin 1s linear infinite;
+  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --font-weight-bold: 700;
+  --font-weight-medium: 500;
+  --leading-5: 1.25rem;
+  --content-empty: '';
+}
+
+@utility duration {
+  transition-duration: var(--duration-default);
+}
+
+@utility z-dropdown {
+  z-index: var(--z-dropdown);
+}
+
+@utility z-backdrop {
+  z-index: var(--z-backdrop);
+}
+
+@utility z-sticky {
+  z-index: var(--z-sticky);
+}
+
+@utility z-fixed {
+  z-index: var(--z-fixed);
+}
+
+@utility z-drawer {
+  z-index: var(--z-drawer);
+}
+
+@utility z-dialog {
+  z-index: var(--z-dialog);
+}
+
+@utility z-toast {
+  z-index: var(--z-toast);
+}
+
+@utility z-tooltip {
+  z-index: var(--z-tooltip);
+}
+
+@utility container {
+  max-width: 1216px;
+
+  @variant xs {
+    padding-inline: 32px;
+  }
+
+  @variant md {
+    padding-inline: 64px;
+  }
+
+  @variant xl {
+    padding-inline: 0;
+  }
+}
+
+/* Replaces safelist. Forces generation of utilities regardless of source scan.
+   Needed for classes constructed dynamically at runtime (e.g. `bg-${color}-${shade}`). */
+@source inline("{,hover:,focus:,xs:,md:,xl:}{border,bg,fill,text,stroke,gap}-{neutral,primary,secondary,informative,success,warning,danger}-{50,100,200,300,400,500,600,700,800,900}");