trace-css 0.0.0-stage → 0.1.0

package/src/foundation.css

@@ -0,0 +1,35 @@
+@import "./variables.css";
+
+@layer trace.foundation {
+  :where(*, *::before, *::after) {
+    box-sizing: border-box;
+  }
+
+  :where(body) {
+    margin: 0;
+    font-family: var(--trace-font-body);
+    background-color: var(--trace-bg);
+    color: var(--trace-text);
+  }
+
+  :where(button, input, select, textarea) {
+    font: inherit;
+  }
+
+  :where(:root) {
+    color-scheme: light dark;
+  }
+
+  :where([data-mode="light"], [data-mode="dark"]) {
+    background-color: var(--trace-bg);
+    color: var(--trace-text);
+  }
+
+  :where([data-mode="light"]) {
+    color-scheme: light;
+  }
+
+  :where([data-mode="dark"]) {
+    color-scheme: dark;
+  }
+}

package/src/index.css

@@ -0,0 +1,14 @@
+@layer trace.foundation, trace.elements, trace.extensions;
+
+@import "./classless.css";
+@import "./elements/icon.extensions.css";
+@import "./elements/loader.extensions.css";
+@import "./content/table.extensions.css";
+@import "./elements/button.extensions.css";
+@import "./forms/switch.extensions.css";
+@import "./forms/radio.extensions.css";
+@import "./forms/input.extensions.css";
+@import "./forms/textarea.extensions.css";
+@import "./forms/checkbox.extensions.css";
+@import "./forms/select.extensions.css";
+@import "./forms/range.extensions.css";

package/src/variables.css

@@ -0,0 +1,112 @@
+@layer trace.foundation {
+  :where(:root) {
+    /* ┌─┐┌─┐┬  ┌─┐┌┬┐┌┬┐┌─┐ */
+    /* ├─┘├─┤│  ├┤  │  │ ├┤ */
+    /* ┴  ┴ ┴┴─┘└─┘ ┴  ┴ └─┘ */
+
+    /* background colors: #f0f3f5 / #0d171d */
+    --trace-bg-light: oklch(0.96244084 0.00418752 236.497272);
+    --trace-bg-dark: oklch(0.19790244 0.01898627 235.356673);
+
+    /* neutral colors: base and derived shades */
+    --trace-neutral: oklch(0.5 0 0);
+    --trace-neutral-lighter: oklch(from var(--trace-neutral) calc(l + 0.5) c h);
+    --trace-neutral-light: oklch(from var(--trace-neutral) calc(l + 0.25) c h);
+    --trace-neutral-dark: oklch(from var(--trace-neutral) calc(l - 0.25) c h);
+    --trace-neutral-darker: oklch(from var(--trace-neutral) calc(l - 0.5) c h);
+
+    /* text colors: #000018 / #e6e6e6 */
+    --trace-text-light: oklch(0.09448718 0.06547311 264.052021);
+    --trace-text-dark: oklch(0.92493953 0 0);
+
+    /* brand colors: base colors for both lightness scales */
+    --trace-primary: oklch(0.37661954 0.06820135 228.502841);
+    --trace-secondary: oklch(0.87959172 0.17036545 81.323506);
+
+    /* primary scale: lighter <- light <- base -> dark -> darker */
+    --trace-primary-lighter: oklch(
+      from var(--trace-primary) calc(l + (1 - l) * 0.6) c h
+    );
+    --trace-primary-light: oklch(
+      from var(--trace-primary) calc(l + (1 - l) * 0.3) c h
+    );
+    --trace-primary-dark: oklch(from var(--trace-primary) calc(l * 0.7) c h);
+    --trace-primary-darker: oklch(from var(--trace-primary) calc(l * 0.4) c h);
+
+    /* secondary scale: lighter <- light <- base -> dark -> darker */
+    --trace-secondary-lighter: oklch(
+      from var(--trace-secondary) calc(l + (1 - l) * 0.6) c h
+    );
+    --trace-secondary-light: oklch(
+      from var(--trace-secondary) calc(l + (1 - l) * 0.3) c h
+    );
+    --trace-secondary-dark: oklch(
+      from var(--trace-secondary) calc(l * 0.7) c h
+    );
+    --trace-secondary-darker: oklch(
+      from var(--trace-secondary) calc(l * 0.4) c h
+    );
+
+    /* danger color: #c22000 */
+    --trace-danger: oklch(0.52335823 0.19856372 31.958358);
+
+    /* success color: #32b67a */
+    --trace-success: oklch(0.69130035 0.14353044 158.707562);
+
+    /* ┌─┐┌─┐┌┐┌┌┬┐┌─┐ */
+    /* ├┤ │ ││││ │ └─┐ */
+    /* └  └─┘┘└┘ ┴ └─┘ */
+
+    --trace-font-family-emoji:
+      "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
+
+    --trace-font-family-sans:
+      system-ui, sans-serif, var(--trace-font-family-emoji);
+
+    --trace-font-family-mono:
+      ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono",
+      monospace, var(--trace-font-family-emoji);
+
+    --trace-font-body: var(--trace-font-family-sans);
+    --trace-font-heading: var(--trace-font-body);
+    --trace-font-code: var(--trace-font-family-mono);
+
+    /* ┬─┐┌─┐┌┬┐┬┬ ┬┌─┐ */
+    /* ├┬┘├─┤ ││││ │└─┐ */
+    /* ┴└─┴ ┴─┴┘┴└─┘└─┘ */
+
+    --trace-radius-none: 0;
+    --trace-radius-sm: 4px;
+    --trace-radius-full: 50%;
+
+    --trace-radius-control: var(--trace-radius-sm);
+
+    /* ┌─┐┌─┐┌─┐┌─┐┬┌┐┌┌─┐ */
+    /* └─┐├─┘├─┤│  │││││ ┬ */
+    /* └─┘┴  ┴ ┴└─┘┴┘└┘└─┘ */
+
+    --trace-control-padding-block: 0.625rem;
+    --trace-control-padding-inline: 1rem;
+
+    /* ┌─┐┬ ┬┌─┐┌┬┐┌─┐┬ ┬┌─┐ */
+    /* └─┐├─┤├─┤ │││ ││││└─┐ */
+    /* └─┘┴ ┴┴ ┴─┴┘└─┘└┴┘└─┘ */
+
+    --trace-shadow-color: light-dark(
+      oklch(from var(--trace-neutral-darker) l c h / 25%),
+      oklch(from var(--trace-neutral-lighter) l c h / 25%)
+    );
+    --trace-shadow: 5px 5px 0 0 var(--trace-shadow-color);
+
+    /* ┌┬┐┬ ┬┌─┐┌┬┐┌─┐ */
+    /*  │ ├─┤├┤ │││├┤ */
+    /*  ┴ ┴ ┴└─┘┴ ┴└─┘ */
+
+    --trace-bg: light-dark(var(--trace-bg-light), var(--trace-bg-dark));
+    --trace-text: light-dark(var(--trace-text-light), var(--trace-text-dark));
+    --trace-control-bg: light-dark(
+      var(--trace-neutral-lighter),
+      var(--trace-bg-dark)
+    );
+  }
+}