@stealthscale/theme-ember 0.1.0

package/README.md

@@ -0,0 +1,43 @@
+# @stealthscale/theme-ember
+
+A **library**: an app links it, and a Storybook draws it beside the other themes.
+
+Draws a stealth product in a warm orange, packed and quick. It is the theme for an operations
+console: rows matter more than whitespace, the shadows are half the base's so a screen full of
+surfaces does not read as clutter, and everything moves a fifth faster because somebody working
+a queue sees each animation hundreds of times a day.
+
+```ts
+import { extendRecipe } from '@stealthscale/core-theme'
+import { recipe as base } from '@stealthscale/theme-base'
+
+export const recipe = extendRecipe(base, {
+  color: { primary: '#d9480f' },
+  effect: { depth: 0.5 },
+  font: {
+    display: { family: 'Bricolage Grotesque Variable', source: '…/bricolage-grotesque/wght.css' },
+    mono: { family: 'Fira Code Variable', source: '…/fira-code/wght.css' },
+    sans: { family: 'Jost Variable', source: '…/jost/wght.css' },
+  },
+  motion: { speed: 0.8 },
+  size: { density: { default: 'compact' } },
+})
+```
+
+It changes something in four of the five groups, which is what a house style of its own looks
+like. `source` names the stylesheet that loads the face, resolved from this package, so the
+theme brings its own font rather than naming one and hoping something else loaded it. Jost is
+built on circles and sets a smaller x-height than the base's Inter, so a page reads rounder and
+lighter at the same size.
+
+`depth` and `speed` are one number each and reach every table under them: half the ink in every
+box, inset, drop and text shadow, and four fifths of every duration, so the whole vocabulary
+moves together rather than falling out of step.
+
+## Install
+
+```sh
+bun add @stealthscale/theme-ember
+```
+
+Link `@stealthscale/theme-ember/index.css` and nothing else.

package/dist/base.css

@@ -0,0 +1,59 @@
+/* Generated by @stealthscale/core-theme. Do not edit. */
+/* The mode is a class rather than an attribute, because that is what `dark:` keys off. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+@layer base {
+  /*
+   * What a page is before a single component renders: the theme's surface, its text colour,
+   * its family. Without this the tokens exist and nothing reads them, which looks exactly
+   * like a theme that does not work.
+   */
+  html {
+    color-scheme: light dark;
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-sans);
+    -webkit-font-smoothing: antialiased;
+  }
+
+  /* A border with no colour is black, and every component assumes the token. */
+  *,
+  *::before,
+  *::after {
+    border-color: var(--border);
+  }
+
+  /*
+   * Focus is a system decision rather than a component one, and its geometry is the
+   * density's, so the browser's own ring and a component's agree.
+   */
+  :focus-visible {
+    outline: var(--focus-width) solid var(--ring);
+    outline-offset: var(--focus-offset);
+  }
+
+  /* Selected text is still text, so it takes the pair the contract guarantees. */
+  ::selection {
+    background-color: var(--selection);
+    color: var(--selection-foreground);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-display);
+  }
+
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: var(--font-mono);
+  }
+}

package/dist/density.css

@@ -0,0 +1,33 @@
+/* Generated by @stealthscale/core-theme. Do not edit. */
+:root {
+  --focus-width: 2px;
+  --height-xs: 1.5rem;
+  --height-sm: 1.75rem;
+  --height-md: 2rem;
+  --height-lg: 2.25rem;
+  --focus-offset: 0px;
+}
+
+[data-density='comfortable'] {
+  --height-xs: 2rem;
+  --height-sm: 2.25rem;
+  --height-md: 2.5rem;
+  --height-lg: 2.75rem;
+  --focus-offset: 2px;
+}
+
+[data-density='compact'] {
+  --height-xs: 1.5rem;
+  --height-sm: 1.75rem;
+  --height-md: 2rem;
+  --height-lg: 2.25rem;
+  --focus-offset: 0px;
+}
+
+[data-density='touch'] {
+  --height-xs: 2.25rem;
+  --height-sm: 2.5rem;
+  --height-md: 2.75rem;
+  --height-lg: 3rem;
+  --focus-offset: 2px;
+}

package/dist/fonts.css

@@ -0,0 +1,4 @@
+/* Generated by @stealthscale/core-theme. Do not edit. */
+@import '@fontsource-variable/jost/wght.css';
+@import '@fontsource-variable/fira-code/wght.css';
+@import '@fontsource-variable/bricolage-grotesque/wght.css';

package/dist/index.css

@@ -0,0 +1,7 @@
+/* Generated by @stealthscale/core-theme. Do not edit. */
+@import './fonts.css';
+@import './tailwind.css';
+@import './base.css';
+@import './density.css';
+@import './motion.css';
+@import './tokens.css';

package/dist/index.d.mts

@@ -0,0 +1,12 @@
+import { Recipe } from "@stealthscale/core-theme";
+//#region src/recipe.d.ts
+/**
+ * States a warm, dense, quick product: an operations console rather than a marketing page.
+ *
+ * It changes something in four of the five groups, which is what a theme with a house style
+ * of its own does: the colour, the family it reads in, how flat it draws and how fast it
+ * moves.
+ */
+declare const recipe: Recipe;
+//#endregion
+export { recipe };

package/dist/index.mjs

@@ -0,0 +1,57 @@
+import { extendRecipe } from "@stealthscale/core-theme";
+import { recipe as recipe$1 } from "@stealthscale/theme-base";
+//#region src/recipe.ts
+/**
+* @fileoverview States what makes Ember differ from the base theme, and nothing else. Every
+* value it does not name is the base's, so a change to the base reaches this theme without an
+* edit here.
+*/
+/**
+* States a warm, dense, quick product: an operations console rather than a marketing page.
+*
+* It changes something in four of the five groups, which is what a theme with a house style
+* of its own does: the colour, the family it reads in, how flat it draws and how fast it
+* moves.
+*/
+const recipe = extendRecipe(recipe$1, {
+	color: {
+		dark: {
+			cardLift: 5,
+			page: 14,
+			popoverLift: 8
+		},
+		light: {
+			cardLift: 2,
+			page: 96,
+			popoverLift: 3
+		},
+		neutral: {
+			chroma: .014,
+			hue: 70
+		},
+		primary: "#d9480f",
+		surface: {
+			chroma: .02,
+			hue: 75
+		}
+	},
+	effect: { depth: .5 },
+	font: {
+		display: {
+			family: "Bricolage Grotesque Variable",
+			source: "@fontsource-variable/bricolage-grotesque/wght.css"
+		},
+		mono: {
+			family: "Fira Code Variable",
+			source: "@fontsource-variable/fira-code/wght.css"
+		},
+		sans: {
+			family: "Jost Variable",
+			source: "@fontsource-variable/jost/wght.css"
+		}
+	},
+	motion: { speed: .8 },
+	size: { density: { default: "compact" } }
+});
+//#endregion
+export { recipe };

package/dist/motion.css

@@ -0,0 +1,198 @@
+/* Generated by @stealthscale/core-theme. Do not edit. */
+
+@keyframes collapse-down {
+  from {
+    height: 0;
+    opacity: 0;
+  }
+  to {
+    height: var(--collapsible-panel-height, auto);
+    opacity: 1;
+  }
+}
+
+@keyframes collapse-up {
+  from {
+    height: var(--collapsible-panel-height, auto);
+    opacity: 1;
+  }
+  to {
+    height: 0;
+    opacity: 0;
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
+@keyframes ping {
+  75%, 100% {
+    opacity: 0;
+    transform: scale(2);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes shimmer {
+  from {
+    background-position: -200% 0;
+  }
+  to {
+    background-position: 200% 0;
+  }
+}
+
+@keyframes slide-in-from-bottom {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-in-from-left {
+  from {
+    opacity: 0;
+    transform: translateX(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-from-right {
+  from {
+    opacity: 0;
+    transform: translateX(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-in-from-top {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slide-out-to-bottom {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+}
+
+@keyframes slide-out-to-top {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes zoom-in {
+  from {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-out {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --press-scale: 1 !important;
+  }
+
+  *,
+*::before,
+*::after {
+    animation-delay: 0s !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-delay: 0s !important;
+    transition-duration: 0.01ms !important;
+  }
+
+  [data-slot='spinner'] {
+    animation-duration: 2s !important;
+    animation-iteration-count: infinite !important;
+  }
+}
+
+[data-reduced-motion],
+[data-reduced-motion] *,
+[data-reduced-motion] *::before,
+[data-reduced-motion] *::after {
+  --press-scale: 1 !important;
+  animation-delay: 0s !important;
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-delay: 0s !important;
+  transition-duration: 0.01ms !important;
+}
+
+[data-reduced-motion] [data-slot='spinner'] {
+  animation-duration: 2s !important;
+  animation-iteration-count: infinite !important;
+}