@meteo28093/equinox-ui 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meteo28093/equinox-ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A collection of Web Components for building modern UIs",
   "main": "dist/equinox-ui.esm.js",
   "module": "dist/equinox-ui.esm.js",
@@ -11,6 +11,8 @@
     "dist/equinox-ui.global.js",
     "dist/equinox-ui.*.js",
     "equinox.css",
+    "tokens.css",
+    "reset.css",
     "src/styles/tokens.css",
     "README.md"
   ],
@@ -22,7 +24,8 @@
     },
     "./global": "./dist/equinox-ui.global.js",
     "./equinox.css": "./equinox.css",
-    "./tokens.css": "./src/styles/tokens.css"
+    "./tokens.css": "./tokens.css",
+    "./reset.css": "./reset.css"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/reset.css

@@ -0,0 +1,96 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  padding: 0;
+  margin: 0;
+}
+
+body {
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;
+  font-size: var(--font-size);
+  color: var(--text);
+  max-width: var(--max-width-body);
+  margin: 0 auto;
+  background-color: var(--background);
+  padding: var(--padding-md);
+  line-height: 1.5;
+}
+
+a {
+  color: var(--links);
+  text-decoration: none;
+  border-bottom: 2px dashed var(--links);
+  transition: all 0.2s ease;
+}
+
+a:hover {
+  border-bottom-style: solid;
+}
+
+button {
+  background: var(--background-alt);
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  padding: 0.5em 1em;
+  border: none;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  transition: filter 0.2s ease;
+}
+
+button:hover,
+.button:hover {
+  filter: brightness(1.3);
+}
+
+code,
+pre {
+  background: var(--background-alt);
+  color: var(--code);
+  font-family: "Courier New", Courier, monospace;
+  padding: 0.2em 0.4em;
+  border-radius: 0.25rem;
+  overflow-x: scroll;
+}
+
+input,
+textarea {
+  padding: var(--padding-sm);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xs);
+  font-size: inherit;
+  display: block;
+  width: 100%;
+  margin: 0.1rem 0;
+}
+
+input:focus,
+textarea:focus {
+  outline: none;
+  border-color: var(--links);
+}
+
+input::placeholder {
+  color: var(--text-muted);
+}
+
+label {
+  display: block;
+  margin-bottom: 0.2rem;
+}

package/src/styles/tokens.css

@@ -1,21 +1,39 @@
 :root {
-  --ee-color-text: #1f2937;
-  --ee-color-text-strong: #111827;
-  --ee-color-muted: #6b7280;
+  /* Core Base Custom Properties */
+  color-scheme: light dark;
+  --primary: light-dark(#e2e2e2, #1d1d1d);
+  --radius: 5px;
+  --radius-xs: 3px;
+  --max-width-body: 1000px;
+  --background: light-dark(#fefefe, #121212);
+  --font-size: 18px;
+  --border: light-dark(#e2e2e2, #303030);
+  --links: light-dark(#840023, #ff1755);
+  --padding-md: 1.2rem;
+  --code: light-dark(#158002, #ff1755);
+  --padding-sm: 0.5rem;
+  --background-alt: light-dark(#e2e2e2, #1d1d1d);
+  --text: light-dark(#1b1b1b, #e9e9e9);
+  --text-muted: light-dark(#1b1b1bb9, #e9e9e9cf);
+
+  /* Namespaced Tokens linked to Base Properties for Unified Theming */
+  --ee-color-text: var(--text);
+  --ee-color-text-strong: light-dark(#000000, #ffffff);
+  --ee-color-muted: var(--text-muted);
   --ee-color-surface: transparent;
-  --ee-color-surface-alt: #f3f4f6;
-  --ee-color-border: #d1d5db;
-  --ee-color-accent: #2563eb;
+  --ee-color-surface-alt: var(--background-alt);
+  --ee-color-border: var(--border);
+  --ee-color-accent: var(--links);
   --ee-color-accent-contrast: #ffffff;
   --ee-color-success: #2e7d32;
   --ee-color-danger: #b00020;
 
-  --ee-radius-xs: 3px;
+  --ee-radius-xs: var(--radius-xs);
   --ee-radius-sm: 4px;
-  --ee-radius-md: 6px;
+  --ee-radius-md: var(--radius);
 
-  --ee-space-2: 0.4rem;
-  --ee-space-4: 1rem;
+  --ee-space-2: var(--padding-sm);
+  --ee-space-4: var(--padding-md);
 
   --ee-font-size-xs: 0.8rem;
   --ee-font-size-sm: 0.9rem;

package/tokens.css

@@ -0,0 +1,43 @@
+:root {
+  /* Core Base Custom Properties */
+  color-scheme: light dark;
+  --primary: light-dark(#e2e2e2, #1d1d1d);
+  --radius: 5px;
+  --radius-xs: 3px;
+  --max-width-body: 1000px;
+  --background: light-dark(#fefefe, #121212);
+  --font-size: 18px;
+  --border: light-dark(#e2e2e2, #303030);
+  --links: light-dark(#840023, #ff1755);
+  --padding-md: 1.2rem;
+  --code: light-dark(#158002, #ff1755);
+  --padding-sm: 0.5rem;
+  --background-alt: light-dark(#e2e2e2, #1d1d1d);
+  --text: light-dark(#1b1b1b, #e9e9e9);
+  --text-muted: light-dark(#1b1b1bb9, #e9e9e9cf);
+
+  /* Namespaced Tokens linked to Base Properties for Unified Theming */
+  --ee-color-text: var(--text);
+  --ee-color-text-strong: light-dark(#000000, #ffffff);
+  --ee-color-muted: var(--text-muted);
+  --ee-color-surface: transparent;
+  --ee-color-surface-alt: var(--background-alt);
+  --ee-color-border: var(--border);
+  --ee-color-accent: var(--links);
+  --ee-color-accent-contrast: #ffffff;
+  --ee-color-success: #2e7d32;
+  --ee-color-danger: #b00020;
+
+  --ee-radius-xs: var(--radius-xs);
+  --ee-radius-sm: 4px;
+  --ee-radius-md: var(--radius);
+
+  --ee-space-2: var(--padding-sm);
+  --ee-space-4: var(--padding-md);
+
+  --ee-font-size-xs: 0.8rem;
+  --ee-font-size-sm: 0.9rem;
+  --ee-font-size-md: 1.1rem;
+
+  --ee-transition-fast: 0.1s;
+}