@ethlete/components 1.0.0-next.77 → 1.0.0-next.78

package/design/sdk/foundations/colors/colors.css

@@ -0,0 +1,528 @@
+/* Generated from libs/core/design/theme-css.ts by tools/scripts/generate-sdk-tokens.mjs. Rerun: yarn sdk:tokens */
+
+@layer base {
+  .et-surface--default-light,
+  .et-surface--light {
+    --et-surface-background: 255 255 255;
+    --et-surface-color: 23 23 23;
+    --et-surface-color-muted: 82 82 82;
+    --et-surface-color-subtle: 112 112 112;
+    --et-surface-border: 229 229 229;
+    --et-surface-type: light;
+    --et-surface-elevation: 0;
+    --et-shadow-color-rgb: 23 23 23;
+    --et-surface-interaction: 115 115 115;
+    --et-surface-interaction-hover: 64 64 64;
+    --et-surface-interaction-focus: 64 64 64;
+    --et-surface-interaction-active: 23 23 23;
+    --et-surface-interaction-disabled: 180 180 180;
+  }
+
+  .et-surface--default-dark,
+  .et-surface--dark {
+    --et-surface-background: 23 23 23;
+    --et-surface-color: 250 250 250;
+    --et-surface-color-muted: 161 161 161;
+    --et-surface-color-subtle: 135 135 135;
+    --et-surface-border: 64 64 64;
+    --et-surface-type: dark;
+    --et-surface-elevation: 0;
+    --et-shadow-color-rgb: 0 0 0;
+    --et-surface-interaction: 161 161 161;
+    --et-surface-interaction-hover: 220 220 220;
+    --et-surface-interaction-focus: 220 220 220;
+    --et-surface-interaction-active: 250 250 250;
+    --et-surface-interaction-disabled: 100 100 100;
+  }
+
+  .et-surface--light-elevated {
+    --et-surface-background: 240 240 240;
+    --et-surface-color: 23 23 23;
+    --et-surface-color-muted: 82 82 82;
+    --et-surface-color-subtle: 161 161 161;
+    --et-surface-border: 229 229 229;
+    --et-surface-type: light;
+    --et-surface-elevation: 1;
+    --et-shadow-color-rgb: 23 23 23;
+    --et-surface-interaction: 115 115 115;
+    --et-surface-interaction-hover: 64 64 64;
+    --et-surface-interaction-focus: 64 64 64;
+    --et-surface-interaction-active: 23 23 23;
+    --et-surface-interaction-disabled: 180 180 180;
+  }
+
+  .et-surface--default-dark,
+  .et-surface--dark-elevated {
+    --et-surface-background: 38 38 38;
+    --et-surface-color: 250 250 250;
+    --et-surface-color-muted: 161 161 161;
+    --et-surface-color-subtle: 115 115 115;
+    --et-surface-border: 64 64 64;
+    --et-surface-type: dark;
+    --et-surface-elevation: 1;
+    --et-shadow-color-rgb: 0 0 0;
+    --et-surface-interaction: 161 161 161;
+    --et-surface-interaction-hover: 220 220 220;
+    --et-surface-interaction-focus: 220 220 220;
+    --et-surface-interaction-active: 250 250 250;
+    --et-surface-interaction-disabled: 100 100 100;
+  }
+
+  @media (prefers-color-scheme: light) {
+    :root {
+      --et-surface-background: 255 255 255;
+      --et-surface-color: 23 23 23;
+      --et-surface-color-muted: 82 82 82;
+      --et-surface-color-subtle: 112 112 112;
+      --et-surface-border: 229 229 229;
+      --et-surface-type: light;
+      --et-surface-elevation: 0;
+      --et-shadow-color-rgb: 23 23 23;
+      --et-surface-interaction: 115 115 115;
+      --et-surface-interaction-hover: 64 64 64;
+      --et-surface-interaction-focus: 64 64 64;
+      --et-surface-interaction-active: 23 23 23;
+      --et-surface-interaction-disabled: 180 180 180;
+      color-scheme: light;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --et-surface-background: 23 23 23;
+      --et-surface-color: 250 250 250;
+      --et-surface-color-muted: 161 161 161;
+      --et-surface-color-subtle: 135 135 135;
+      --et-surface-border: 64 64 64;
+      --et-surface-type: dark;
+      --et-surface-elevation: 0;
+      --et-shadow-color-rgb: 0 0 0;
+      --et-surface-interaction: 161 161 161;
+      --et-surface-interaction-hover: 220 220 220;
+      --et-surface-interaction-focus: 220 220 220;
+      --et-surface-interaction-active: 250 250 250;
+      --et-surface-interaction-disabled: 100 100 100;
+      color-scheme: dark;
+    }
+  }
+
+  :root.et-scheme--light {
+    --et-surface-background: 255 255 255;
+    --et-surface-color: 23 23 23;
+    --et-surface-color-muted: 82 82 82;
+    --et-surface-color-subtle: 112 112 112;
+    --et-surface-border: 229 229 229;
+    --et-surface-type: light;
+    --et-surface-elevation: 0;
+    --et-shadow-color-rgb: 23 23 23;
+    --et-surface-interaction: 115 115 115;
+    --et-surface-interaction-hover: 64 64 64;
+    --et-surface-interaction-focus: 64 64 64;
+    --et-surface-interaction-active: 23 23 23;
+    --et-surface-interaction-disabled: 180 180 180;
+    color-scheme: light;
+  }
+
+  :root.et-scheme--dark {
+    --et-surface-background: 23 23 23;
+    --et-surface-color: 250 250 250;
+    --et-surface-color-muted: 161 161 161;
+    --et-surface-color-subtle: 135 135 135;
+    --et-surface-border: 64 64 64;
+    --et-surface-type: dark;
+    --et-surface-elevation: 0;
+    --et-shadow-color-rgb: 0 0 0;
+    --et-surface-interaction: 161 161 161;
+    --et-surface-interaction-hover: 220 220 220;
+    --et-surface-interaction-focus: 220 220 220;
+    --et-surface-interaction-active: 250 250 250;
+    --et-surface-interaction-disabled: 100 100 100;
+    color-scheme: dark;
+  }
+}
+
+/* Convenience aliases (rgb + solid variants) */
+@layer base {
+  :root,
+  :where([class*='et-surface--']) {
+    --et-surface-background-rgb: var(--et-surface-background);
+    --et-surface-background-solid: rgb(var(--et-surface-background-rgb));
+
+    --et-surface-color-rgb: var(--et-surface-color);
+    --et-surface-color-solid: rgb(var(--et-surface-color-rgb));
+
+    --et-surface-color-muted-rgb: var(--et-surface-color-muted);
+    --et-surface-color-muted-solid: rgb(var(--et-surface-color-muted-rgb));
+
+    --et-surface-color-subtle-rgb: var(--et-surface-color-subtle);
+    --et-surface-color-subtle-solid: rgb(var(--et-surface-color-subtle-rgb));
+
+    --et-surface-border-rgb: var(--et-surface-border);
+    --et-surface-border-solid: rgb(var(--et-surface-border-rgb));
+
+    --et-surface-interaction-rgb: var(--et-surface-interaction);
+    --et-surface-interaction-solid: rgb(var(--et-surface-interaction-rgb));
+
+    --et-surface-interaction-hover-rgb: var(--et-surface-interaction-hover);
+    --et-surface-interaction-hover-solid: rgb(var(--et-surface-interaction-hover-rgb));
+
+    --et-surface-interaction-focus-rgb: var(--et-surface-interaction-focus);
+    --et-surface-interaction-focus-solid: rgb(var(--et-surface-interaction-focus-rgb));
+
+    --et-surface-interaction-active-rgb: var(--et-surface-interaction-active);
+    --et-surface-interaction-active-solid: rgb(var(--et-surface-interaction-active-rgb));
+
+    --et-surface-interaction-disabled-rgb: var(--et-surface-interaction-disabled);
+    --et-surface-interaction-disabled-solid: rgb(var(--et-surface-interaction-disabled-rgb));
+  }
+}
+
+/* The reserved `surface` color: resolves the color tokens from the ambient surface's neutral swatch. */
+@layer base {
+  .et-color--surface {
+    --et-color-primary: var(--et-surface-interaction, var(--et-surface-color));
+    --et-color-primary-hover: var(
+      --et-surface-interaction-hover,
+      var(--et-surface-interaction, var(--et-surface-color))
+    );
+    --et-color-primary-focus: var(
+      --et-surface-interaction-focus,
+      var(--et-surface-interaction, var(--et-surface-color))
+    );
+    --et-color-primary-active: var(
+      --et-surface-interaction-active,
+      var(--et-surface-interaction, var(--et-surface-color))
+    );
+    --et-color-primary-disabled: var(
+      --et-surface-interaction-disabled,
+      var(--et-surface-interaction, var(--et-surface-color))
+    );
+
+    --et-color-on-primary: var(--et-surface-on-interaction, var(--et-surface-background));
+    --et-color-on-primary-hover: var(
+      --et-surface-on-interaction-hover,
+      var(--et-surface-on-interaction, var(--et-surface-background))
+    );
+    --et-color-on-primary-focus: var(
+      --et-surface-on-interaction-focus,
+      var(--et-surface-on-interaction, var(--et-surface-background))
+    );
+    --et-color-on-primary-active: var(
+      --et-surface-on-interaction-active,
+      var(--et-surface-on-interaction, var(--et-surface-background))
+    );
+    --et-color-on-primary-disabled: var(
+      --et-surface-on-interaction-disabled,
+      var(--et-surface-on-interaction, var(--et-surface-background))
+    );
+
+    --et-color-primary-ink: var(--et-surface-interaction-ink, var(--et-surface-color));
+    --et-color-primary-ink-hover: var(
+      --et-surface-interaction-ink-hover,
+      var(--et-surface-interaction-ink, var(--et-surface-color))
+    );
+    --et-color-primary-ink-focus: var(
+      --et-surface-interaction-ink-focus,
+      var(--et-surface-interaction-ink, var(--et-surface-color))
+    );
+    --et-color-primary-ink-active: var(
+      --et-surface-interaction-ink-active,
+      var(--et-surface-interaction-ink, var(--et-surface-color))
+    );
+    --et-color-primary-ink-disabled: var(
+      --et-surface-interaction-ink-disabled,
+      var(--et-surface-interaction-ink, var(--et-surface-color))
+    );
+  }
+}
+
+@layer base {
+  :root,
+  .et-color--default,
+  .et-color--brand {
+    --et-color-primary: 0 255 161;
+    --et-color-primary-hover: 76 247 184;
+    --et-color-primary-focus: 76 247 184;
+    --et-color-primary-active: 0 198 126;
+    --et-color-primary-disabled: 0 122 77;
+
+    --et-color-on-primary: 0 0 0;
+    --et-color-on-primary-hover: 0 0 0;
+    --et-color-on-primary-focus: 0 0 0;
+    --et-color-on-primary-active: 0 0 0;
+    --et-color-on-primary-disabled: 0 36 23;
+
+    --et-color-primary-ink: 0 255 161;
+    --et-color-primary-ink-hover: 0 255 161;
+    --et-color-primary-ink-focus: 0 255 161;
+    --et-color-primary-ink-active: 0 255 161;
+    --et-color-primary-ink-disabled: 0 255 161;
+  }
+
+  .et-color--danger {
+    --et-color-primary: 220 38 38;
+    --et-color-primary-hover: 185 28 28;
+    --et-color-primary-focus: 185 28 28;
+    --et-color-primary-active: 153 27 27;
+    --et-color-primary-disabled: 120 52 52;
+
+    --et-color-on-primary: 255 255 255;
+    --et-color-on-primary-hover: 255 255 255;
+    --et-color-on-primary-focus: 255 255 255;
+    --et-color-on-primary-active: 255 255 255;
+    --et-color-on-primary-disabled: 255 220 220;
+
+    --et-color-primary-ink: 248 113 113;
+    --et-color-primary-ink-hover: 252 165 165;
+    --et-color-primary-ink-focus: 252 165 165;
+    --et-color-primary-ink-active: 239 68 68;
+    --et-color-primary-ink-disabled: 153 75 75;
+  }
+
+  .et-color--warning {
+    --et-color-primary: 217 119 6;
+    --et-color-primary-hover: 245 158 11;
+    --et-color-primary-focus: 245 158 11;
+    --et-color-primary-active: 251 191 36;
+    --et-color-primary-disabled: 133 77 14;
+
+    --et-color-on-primary: 23 23 23;
+    --et-color-on-primary-hover: 23 23 23;
+    --et-color-on-primary-focus: 23 23 23;
+    --et-color-on-primary-active: 23 23 23;
+    --et-color-on-primary-disabled: 255 237 213;
+
+    --et-color-primary-ink: 245 158 11;
+    --et-color-primary-ink-hover: 251 191 36;
+    --et-color-primary-ink-focus: 251 191 36;
+    --et-color-primary-ink-active: 217 119 6;
+    --et-color-primary-ink-disabled: 133 77 14;
+  }
+
+  .et-color--brand-on-light {
+    --et-color-primary: 0 255 161;
+    --et-color-primary-hover: 76 247 184;
+    --et-color-primary-focus: 76 247 184;
+    --et-color-primary-active: 0 198 126;
+    --et-color-primary-disabled: 0 122 77;
+
+    --et-color-on-primary: 0 0 0;
+    --et-color-on-primary-hover: 0 0 0;
+    --et-color-on-primary-focus: 0 0 0;
+    --et-color-on-primary-active: 0 0 0;
+    --et-color-on-primary-disabled: 0 36 23;
+
+    --et-color-primary-ink: 4 120 87;
+    --et-color-primary-ink-hover: 6 95 70;
+    --et-color-primary-ink-focus: 6 95 70;
+    --et-color-primary-ink-active: 6 78 59;
+    --et-color-primary-ink-disabled: 130 200 170;
+  }
+
+  .et-color--danger-on-light {
+    --et-color-primary: 220 38 38;
+    --et-color-primary-hover: 185 28 28;
+    --et-color-primary-focus: 185 28 28;
+    --et-color-primary-active: 153 27 27;
+    --et-color-primary-disabled: 120 52 52;
+
+    --et-color-on-primary: 255 255 255;
+    --et-color-on-primary-hover: 255 255 255;
+    --et-color-on-primary-focus: 255 255 255;
+    --et-color-on-primary-active: 255 255 255;
+    --et-color-on-primary-disabled: 255 220 220;
+
+    --et-color-primary-ink: 185 28 28;
+    --et-color-primary-ink-hover: 153 27 27;
+    --et-color-primary-ink-focus: 153 27 27;
+    --et-color-primary-ink-active: 127 29 29;
+    --et-color-primary-ink-disabled: 220 150 150;
+  }
+
+  .et-color--warning-on-light {
+    --et-color-primary: 217 119 6;
+    --et-color-primary-hover: 245 158 11;
+    --et-color-primary-focus: 245 158 11;
+    --et-color-primary-active: 251 191 36;
+    --et-color-primary-disabled: 133 77 14;
+
+    --et-color-on-primary: 23 23 23;
+    --et-color-on-primary-hover: 23 23 23;
+    --et-color-on-primary-focus: 23 23 23;
+    --et-color-on-primary-active: 23 23 23;
+    --et-color-on-primary-disabled: 255 237 213;
+
+    --et-color-primary-ink: 146 64 14;
+    --et-color-primary-ink-hover: 120 53 15;
+    --et-color-primary-ink-focus: 120 53 15;
+    --et-color-primary-ink-active: 69 26 3;
+    --et-color-primary-ink-disabled: 220 170 120;
+  }
+}
+
+/* Convenience aliases (rgb + solid + opacity variants) */
+@layer base {
+  :root,
+  :where([class*='et-color--']) {
+    --et-theme-color-primary-rgb: var(--et-color-primary);
+    --et-theme-color-primary-opacity: 1;
+    --et-theme-color-primary-solid: rgb(var(--et-theme-color-primary-rgb));
+    --et-theme-color-primary: rgb(var(--et-theme-color-primary-rgb) / var(--et-theme-color-primary-opacity));
+
+    --et-theme-color-on-primary-rgb: var(--et-color-on-primary);
+    --et-theme-color-on-primary-opacity: 1;
+    --et-theme-color-on-primary-solid: rgb(
+      var(--et-theme-color-on-primary-rgb) / var(--et-theme-color-on-primary-opacity)
+    );
+    --et-theme-color-on-primary: rgb(var(--et-theme-color-on-primary-rgb) / var(--et-theme-color-on-primary-opacity));
+
+    --et-theme-color-ink-rgb: var(--et-color-primary-ink, var(--et-color-primary));
+    --et-theme-color-ink-opacity: 1;
+    --et-theme-color-ink-solid: rgb(var(--et-theme-color-ink-rgb) / var(--et-theme-color-ink-opacity));
+    --et-theme-color-ink: rgb(var(--et-theme-color-ink-rgb) / var(--et-theme-color-ink-opacity));
+  }
+}
+
+@layer base {
+  @media (prefers-color-scheme: light) {
+    :root {
+      --et-color-primary-ink: 4 120 87;
+      --et-color-primary-ink-hover: 6 95 70;
+      --et-color-primary-ink-focus: 6 95 70;
+      --et-color-primary-ink-active: 6 78 59;
+      --et-color-primary-ink-disabled: 130 200 170;
+    }
+  }
+
+  :root.et-scheme--light {
+    --et-color-primary-ink: 4 120 87;
+    --et-color-primary-ink-hover: 6 95 70;
+    --et-color-primary-ink-focus: 6 95 70;
+    --et-color-primary-ink-active: 6 78 59;
+    --et-color-primary-ink-disabled: 130 200 170;
+  }
+
+  :root.et-scheme--dark {
+    --et-color-primary-ink: 0 255 161;
+    --et-color-primary-ink-hover: 0 255 161;
+    --et-color-primary-ink-focus: 0 255 161;
+    --et-color-primary-ink-active: 0 255 161;
+    --et-color-primary-ink-disabled: 0 255 161;
+  }
+}
+
+@layer base {
+  .et-surface--light[data-et-surface-fill] {
+    --et-surface-background: 240 240 240;
+    --et-surface-color: 23 23 23;
+    --et-surface-color-muted: 82 82 82;
+    --et-surface-color-subtle: 161 161 161;
+    --et-surface-border: 229 229 229;
+    --et-surface-type: light;
+    --et-surface-elevation: 1;
+    --et-shadow-color-rgb: 23 23 23;
+    --et-surface-interaction: 115 115 115;
+    --et-surface-interaction-hover: 64 64 64;
+    --et-surface-interaction-focus: 64 64 64;
+    --et-surface-interaction-active: 23 23 23;
+    --et-surface-interaction-disabled: 180 180 180;
+  }
+
+  .et-surface--dark[data-et-surface-fill] {
+    --et-surface-background: 38 38 38;
+    --et-surface-color: 250 250 250;
+    --et-surface-color-muted: 161 161 161;
+    --et-surface-color-subtle: 115 115 115;
+    --et-surface-border: 64 64 64;
+    --et-surface-type: dark;
+    --et-surface-elevation: 1;
+    --et-shadow-color-rgb: 0 0 0;
+    --et-surface-interaction: 161 161 161;
+    --et-surface-interaction-hover: 220 220 220;
+    --et-surface-interaction-focus: 220 220 220;
+    --et-surface-interaction-active: 250 250 250;
+    --et-surface-interaction-disabled: 100 100 100;
+  }
+
+  @media (prefers-color-scheme: light) {
+    .et-surface--inherited[data-et-surface-fill] {
+      --et-surface-background: 240 240 240;
+      --et-surface-color: 23 23 23;
+      --et-surface-color-muted: 82 82 82;
+      --et-surface-color-subtle: 161 161 161;
+      --et-surface-border: 229 229 229;
+      --et-surface-type: light;
+      --et-surface-elevation: 1;
+      --et-shadow-color-rgb: 23 23 23;
+      --et-surface-interaction: 115 115 115;
+      --et-surface-interaction-hover: 64 64 64;
+      --et-surface-interaction-focus: 64 64 64;
+      --et-surface-interaction-active: 23 23 23;
+      --et-surface-interaction-disabled: 180 180 180;
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .et-surface--inherited[data-et-surface-fill] {
+      --et-surface-background: 38 38 38;
+      --et-surface-color: 250 250 250;
+      --et-surface-color-muted: 161 161 161;
+      --et-surface-color-subtle: 115 115 115;
+      --et-surface-border: 64 64 64;
+      --et-surface-type: dark;
+      --et-surface-elevation: 1;
+      --et-shadow-color-rgb: 0 0 0;
+      --et-surface-interaction: 161 161 161;
+      --et-surface-interaction-hover: 220 220 220;
+      --et-surface-interaction-focus: 220 220 220;
+      --et-surface-interaction-active: 250 250 250;
+      --et-surface-interaction-disabled: 100 100 100;
+    }
+  }
+
+  :root.et-scheme--light .et-surface--inherited[data-et-surface-fill] {
+    --et-surface-background: 240 240 240;
+    --et-surface-color: 23 23 23;
+    --et-surface-color-muted: 82 82 82;
+    --et-surface-color-subtle: 161 161 161;
+    --et-surface-border: 229 229 229;
+    --et-surface-type: light;
+    --et-surface-elevation: 1;
+    --et-shadow-color-rgb: 23 23 23;
+    --et-surface-interaction: 115 115 115;
+    --et-surface-interaction-hover: 64 64 64;
+    --et-surface-interaction-focus: 64 64 64;
+    --et-surface-interaction-active: 23 23 23;
+    --et-surface-interaction-disabled: 180 180 180;
+  }
+
+  :root.et-scheme--dark .et-surface--inherited[data-et-surface-fill] {
+    --et-surface-background: 38 38 38;
+    --et-surface-color: 250 250 250;
+    --et-surface-color-muted: 161 161 161;
+    --et-surface-color-subtle: 115 115 115;
+    --et-surface-border: 64 64 64;
+    --et-surface-type: dark;
+    --et-surface-elevation: 1;
+    --et-shadow-color-rgb: 0 0 0;
+    --et-surface-interaction: 161 161 161;
+    --et-surface-interaction-hover: 220 220 220;
+    --et-surface-interaction-focus: 220 220 220;
+    --et-surface-interaction-active: 250 250 250;
+    --et-surface-interaction-disabled: 100 100 100;
+  }
+}
+
+:root {
+  --et-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --et-font-family-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 62.5%;
+}
+
+body {
+  margin: 0;
+  font-family: var(--et-font-family);
+  font-size: 1.4rem;
+  background: var(--et-surface-background-solid);
+  color: var(--et-surface-color-solid);
+}