@globalart/platform-ui 0.1.0

package/src/styles/theme.css

@@ -0,0 +1,211 @@
+@custom-variant dark {
+  &:where([data-theme='dark'], [data-theme='dark'] *) {
+    @slot;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    &:where(:root:not([data-theme='light']), :root:not([data-theme='light']) *) {
+      @slot;
+    }
+  }
+}
+
+:root {
+  --ds-ground: #ffffff;
+  --ds-ground-sunken: #f8f9fa;
+  --ds-surface: #ffffff;
+  --ds-surface-raised: #ffffff;
+  --ds-surface-hover: #f1f3f4;
+  --ds-surface-active: #e8f0fe;
+
+  --ds-line: #dadce0;
+  --ds-line-strong: #bdc1c6;
+
+  --ds-ink: #202124;
+  --ds-ink-muted: #5f6368;
+  --ds-ink-faint: #80868b;
+  --ds-ink-inverse: #ffffff;
+
+  --ds-signal: #1a73e8;
+  --ds-signal-hover: #1b66c9;
+  --ds-signal-soft: #e8f0fe;
+  --ds-signal-ink: #174ea6;
+
+  --ds-ok: #188038;
+  --ds-ok-soft: #e6f4ea;
+  --ds-ok-ink: #137333;
+
+  --ds-warn: #e37400;
+  --ds-warn-soft: #fef7e0;
+  --ds-warn-ink: #b06000;
+
+  --ds-danger: #d93025;
+  --ds-danger-hover: #c5221f;
+  --ds-danger-soft: #fce8e6;
+  --ds-danger-ink: #a50e0e;
+
+  --ds-info: #1967d2;
+  --ds-info-soft: #e8f0fe;
+  --ds-info-ink: #174ea6;
+
+  --ds-focus: #1a73e8;
+}
+
+[data-theme='dark'] {
+  --ds-ground: #202124;
+  --ds-ground-sunken: #35363a;
+  --ds-surface: #292a2d;
+  --ds-surface-raised: #35363a;
+  --ds-surface-hover: #303134;
+  --ds-surface-active: #1f2a3d;
+
+  --ds-line: #3c4043;
+  --ds-line-strong: #5f6368;
+
+  --ds-ink: #e8eaed;
+  --ds-ink-muted: #9aa0a6;
+  --ds-ink-faint: #80868b;
+  --ds-ink-inverse: #202124;
+
+  --ds-signal: #8ab4f8;
+  --ds-signal-hover: #a5c5fa;
+  --ds-signal-soft: #1f2a3d;
+  --ds-signal-ink: #d2e3fc;
+
+  --ds-ok: #81c995;
+  --ds-ok-soft: #1e3626;
+  --ds-ok-ink: #a8dab5;
+
+  --ds-warn: #fdd663;
+  --ds-warn-soft: #3a3022;
+  --ds-warn-ink: #fde293;
+
+  --ds-danger: #f28b82;
+  --ds-danger-hover: #f6aea9;
+  --ds-danger-soft: #3c2320;
+  --ds-danger-ink: #f6aea9;
+
+  --ds-info: #8ab4f8;
+  --ds-info-soft: #1f2a3d;
+  --ds-info-ink: #d2e3fc;
+
+  --ds-focus: #8ab4f8;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    --ds-ground: #202124;
+    --ds-ground-sunken: #35363a;
+    --ds-surface: #292a2d;
+    --ds-surface-raised: #35363a;
+    --ds-surface-hover: #303134;
+    --ds-surface-active: #1f2a3d;
+
+    --ds-line: #3c4043;
+    --ds-line-strong: #5f6368;
+
+    --ds-ink: #e8eaed;
+    --ds-ink-muted: #9aa0a6;
+    --ds-ink-faint: #80868b;
+    --ds-ink-inverse: #202124;
+
+    --ds-signal: #8ab4f8;
+    --ds-signal-hover: #a5c5fa;
+    --ds-signal-soft: #1f2a3d;
+    --ds-signal-ink: #d2e3fc;
+
+    --ds-ok: #81c995;
+    --ds-ok-soft: #1e3626;
+    --ds-ok-ink: #a8dab5;
+
+    --ds-warn: #fdd663;
+    --ds-warn-soft: #3a3022;
+    --ds-warn-ink: #fde293;
+
+    --ds-danger: #f28b82;
+    --ds-danger-hover: #f6aea9;
+    --ds-danger-soft: #3c2320;
+    --ds-danger-ink: #f6aea9;
+
+    --ds-info: #8ab4f8;
+    --ds-info-soft: #1f2a3d;
+    --ds-info-ink: #d2e3fc;
+
+    --ds-focus: #8ab4f8;
+  }
+}
+
+@theme inline {
+  --color-ground: var(--ds-ground);
+  --color-ground-sunken: var(--ds-ground-sunken);
+  --color-surface: var(--ds-surface);
+  --color-surface-raised: var(--ds-surface-raised);
+  --color-surface-hover: var(--ds-surface-hover);
+  --color-surface-active: var(--ds-surface-active);
+
+  --color-line: var(--ds-line);
+  --color-line-strong: var(--ds-line-strong);
+
+  --color-ink: var(--ds-ink);
+  --color-ink-muted: var(--ds-ink-muted);
+  --color-ink-faint: var(--ds-ink-faint);
+  --color-ink-inverse: var(--ds-ink-inverse);
+
+  --color-signal: var(--ds-signal);
+  --color-signal-hover: var(--ds-signal-hover);
+  --color-signal-soft: var(--ds-signal-soft);
+  --color-signal-ink: var(--ds-signal-ink);
+
+  --color-ok: var(--ds-ok);
+  --color-ok-soft: var(--ds-ok-soft);
+  --color-ok-ink: var(--ds-ok-ink);
+
+  --color-warn: var(--ds-warn);
+  --color-warn-soft: var(--ds-warn-soft);
+  --color-warn-ink: var(--ds-warn-ink);
+
+  --color-danger: var(--ds-danger);
+  --color-danger-hover: var(--ds-danger-hover);
+  --color-danger-soft: var(--ds-danger-soft);
+  --color-danger-ink: var(--ds-danger-ink);
+
+  --color-info: var(--ds-info);
+  --color-info-soft: var(--ds-info-soft);
+  --color-info-ink: var(--ds-info-ink);
+
+  --font-sans: 'Roboto', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-mono: 'Roboto Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', monospace;
+
+  --text-eyebrow: 0.6875rem;
+  --text-eyebrow--line-height: 1rem;
+  --text-eyebrow--letter-spacing: 0.08em;
+  --text-eyebrow--font-weight: 500;
+
+  --text-xs: 0.75rem;
+  --text-xs--line-height: 1rem;
+  --text-sm: 0.8125rem;
+  --text-sm--line-height: 1.125rem;
+  --text-base: 0.875rem;
+  --text-base--line-height: 1.25rem;
+  --text-lg: 1rem;
+  --text-lg--line-height: 1.5rem;
+  --text-xl: 1.125rem;
+  --text-xl--line-height: 1.75rem;
+  --text-2xl: 1.375rem;
+  --text-2xl--line-height: 1.75rem;
+  --text-3xl: 1.5rem;
+  --text-3xl--line-height: 2rem;
+  --text-metric: 2rem;
+  --text-metric--line-height: 2.5rem;
+  --text-metric--letter-spacing: 0em;
+
+  --radius-control: 4px;
+  --radius-panel: 8px;
+
+  --spacing-rail: 3px;
+  --spacing-sidebar: 256px;
+  --spacing-sidebar-rail: 72px;
+  --spacing-topbar: 64px;
+
+  --shadow-overlay: 0 1px 3px rgb(60 64 67 / 0.3), 0 4px 8px 3px rgb(60 64 67 / 0.15);
+}

package/styles.css

@@ -0,0 +1,2 @@
+@import './src/styles/theme.css';
+@import './src/styles/base.css';