@lmfaole/basics 0.3.0 → 0.4.0

package/basic-styling/components/basic-toast.css

@@ -0,0 +1,102 @@
+basic-toast {
+    --basic-toast-offset: var(--basic-space-4);
+}
+
+basic-toast [data-toast-open],
+basic-toast [data-toast-close] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--basic-control-padding-block) var(--basic-control-padding-inline);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius-pill);
+    background: var(--basic-color-surface);
+    color: inherit;
+    cursor: pointer;
+}
+
+basic-toast [data-toast-panel] {
+    position: fixed;
+    inset-block-start: auto;
+    inset-inline-start: auto;
+    inset-inline-end: var(--basic-toast-offset);
+    inset-block-end: var(--basic-toast-offset);
+    width: min(
+        var(--basic-toast-width, 20rem),
+        var(--basic-toast-max-width, calc(100vw - (var(--basic-toast-offset) * 2)))
+    );
+    padding: var(--basic-panel-padding);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius);
+    background: var(--basic-color-surface);
+    transform: translate(0, 0);
+}
+
+basic-toast[data-toast-position="top-left"] [data-toast-panel] {
+    inset-block-start: var(--basic-toast-offset);
+    inset-inline-start: var(--basic-toast-offset);
+    inset-inline-end: auto;
+    inset-block-end: auto;
+}
+
+basic-toast[data-toast-position="top-center"] [data-toast-panel] {
+    inset-block-start: var(--basic-toast-offset);
+    inset-inline-start: 50%;
+    inset-inline-end: auto;
+    inset-block-end: auto;
+    transform: translateX(-50%);
+}
+
+basic-toast[data-toast-position="top-right"] [data-toast-panel] {
+    inset-block-start: var(--basic-toast-offset);
+    inset-inline-start: auto;
+    inset-inline-end: var(--basic-toast-offset);
+    inset-block-end: auto;
+}
+
+basic-toast[data-toast-position="center-left"] [data-toast-panel] {
+    inset-block-start: 50%;
+    inset-inline-start: var(--basic-toast-offset);
+    inset-inline-end: auto;
+    inset-block-end: auto;
+    transform: translateY(-50%);
+}
+
+basic-toast[data-toast-position="center"] [data-toast-panel] {
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inset-inline-end: auto;
+    inset-block-end: auto;
+    transform: translate(-50%, -50%);
+}
+
+basic-toast[data-toast-position="center-right"] [data-toast-panel] {
+    inset-block-start: 50%;
+    inset-inline-start: auto;
+    inset-inline-end: var(--basic-toast-offset);
+    inset-block-end: auto;
+    transform: translateY(-50%);
+}
+
+basic-toast[data-toast-position="bottom-left"] [data-toast-panel] {
+    inset-block-start: auto;
+    inset-inline-start: var(--basic-toast-offset);
+    inset-inline-end: auto;
+    inset-block-end: var(--basic-toast-offset);
+}
+
+basic-toast[data-toast-position="bottom-center"] [data-toast-panel] {
+    inset-block-start: auto;
+    inset-inline-start: 50%;
+    inset-inline-end: auto;
+    inset-block-end: var(--basic-toast-offset);
+    transform: translateX(-50%);
+}
+
+basic-toast [data-toast-panel] > :where(*) {
+    margin-block: 0;
+}
+
+basic-toast [data-toast-panel] > :where(* + *) {
+    margin-block-start: var(--basic-flow-space);
+}

package/basic-styling/components/basic-toc.css

@@ -0,0 +1,30 @@
+basic-toc {
+    --basic-toc-panel-padding: var(--basic-panel-padding);
+    display: block;
+}
+
+basic-toc [data-page-toc-nav] {
+    padding: var(--basic-toc-panel-padding);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    border-radius: var(--basic-radius);
+    background: var(--basic-color-surface);
+}
+
+basic-toc [data-page-toc-nav] ol {
+    margin: 0;
+    padding-left: var(--basic-toc-list-indent, 1.25rem);
+}
+
+basic-toc [data-page-toc-nav] li + li {
+    margin-top: var(--basic-space-2);
+}
+
+basic-toc [data-page-toc-nav] ol ol {
+    margin-top: var(--basic-space-2);
+    padding-left: var(--basic-space-4);
+    border-left: var(--basic-border-width) solid var(--basic-color-border);
+}
+
+basic-toc [data-page-toc-nav] a {
+    color: inherit;
+}

package/basic-styling/components.css

@@ -0,0 +1,9 @@
+@import "./components/basic-alert.css";
+@import "./components/basic-accordion.css";
+@import "./components/basic-dialog.css";
+@import "./components/basic-popover.css";
+@import "./components/basic-table.css";
+@import "./components/basic-summary-table.css";
+@import "./components/basic-tabs.css";
+@import "./components/basic-toc.css";
+@import "./components/basic-toast.css";

package/basic-styling/global.css

@@ -0,0 +1,61 @@
+@import "./tokens/base.css";
+@import "./tokens/palette.css";
+
+html {
+    color-scheme: light dark;
+}
+
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+}
+
+body {
+    margin: 0;
+    background: var(--basic-color-background);
+    color: var(--basic-color-text);
+    font-family: var(--basic-font-family);
+    font-size: var(--basic-font-size);
+    line-height: var(--basic-line-height);
+}
+
+img,
+svg,
+video {
+    display: block;
+    max-width: 100%;
+}
+
+button,
+input,
+select,
+textarea {
+    font: inherit;
+}
+
+a {
+    color: inherit;
+    text-underline-offset: 0.16em;
+}
+
+a:hover {
+    color: inherit;
+}
+
+:focus-visible {
+    outline: 3px solid var(--basic-color-focus);
+    outline-offset: 2px;
+}
+
+dialog {
+    color: inherit;
+}
+
+dialog::backdrop {
+    background: var(--basic-color-overlay);
+}
+
+[hidden] {
+    display: none !important;
+}

package/basic-styling/index.css

@@ -0,0 +1,2 @@
+@import "./global.css";
+@import "./components.css";

package/basic-styling/tokens/base.css

@@ -0,0 +1,19 @@
+:root {
+    --basic-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --basic-font-size: 1rem;
+    --basic-font-size-title: 1.125rem;
+    --basic-line-height: 1.5;
+    --basic-border-width: 1px;
+    --basic-radius: 0.5rem;
+    --basic-radius-pill: 999px;
+    --basic-space-1: 0.25rem;
+    --basic-space-2: 0.5rem;
+    --basic-space-3: 0.75rem;
+    --basic-space-4: 1rem;
+    --basic-space-5: 1.5rem;
+    --basic-flow-space: var(--basic-space-3);
+    --basic-stack-gap: var(--basic-space-3);
+    --basic-panel-padding: var(--basic-space-4);
+    --basic-control-padding-block: 0.625rem;
+    --basic-control-padding-inline: var(--basic-space-4);
+}

package/basic-styling/tokens/palette.css

@@ -0,0 +1,117 @@
+:root {
+    --basic-palette-surface-light: oklch(98.6% 0.004 255);
+    --basic-palette-surface-dark: oklch(27.8% 0.033 256.848);
+    --basic-palette-text-light: oklch(21% 0.034 264.665);
+    --basic-palette-text-dark: oklch(98.5% 0.002 247.839);
+    --basic-palette-accent-light: oklch(54.6% 0.245 262.881);
+    --basic-palette-accent-dark: oklch(70.7% 0.165 254.624);
+}
+
+[data-basic-palette="sand"] {
+    --basic-palette-surface-light: oklch(97.8% 0.012 85);
+    --basic-palette-surface-dark: oklch(30.5% 0.022 75);
+    --basic-palette-text-light: oklch(29% 0.028 65);
+    --basic-palette-text-dark: oklch(96.4% 0.01 85);
+    --basic-palette-accent-light: oklch(63% 0.18 58);
+    --basic-palette-accent-dark: oklch(76% 0.14 72);
+}
+
+[data-basic-palette="ocean"] {
+    --basic-palette-surface-light: oklch(97.4% 0.01 225);
+    --basic-palette-surface-dark: oklch(30% 0.04 245);
+    --basic-palette-text-light: oklch(28% 0.05 250);
+    --basic-palette-text-dark: oklch(95.2% 0.01 225);
+    --basic-palette-accent-light: oklch(62% 0.14 222);
+    --basic-palette-accent-dark: oklch(77% 0.11 210);
+}
+
+[data-basic-palette="berry"] {
+    --basic-palette-surface-light: oklch(97.2% 0.012 10);
+    --basic-palette-surface-dark: oklch(30.2% 0.05 5);
+    --basic-palette-text-light: oklch(27.5% 0.06 8);
+    --basic-palette-text-dark: oklch(95.8% 0.012 8);
+    --basic-palette-accent-light: oklch(60% 0.2 12);
+    --basic-palette-accent-dark: oklch(73% 0.16 8);
+}
+
+:root,
+[data-basic-palette] {
+    --basic-palette-background-light: color-mix(in oklch, var(--basic-palette-surface-light) 92%, oklch(100% 0 0));
+    --basic-palette-background-dark: color-mix(in oklch, var(--basic-palette-surface-dark) 82%, oklch(0% 0 0));
+    --basic-palette-surface-light-computed: color-mix(
+        in oklch,
+        var(--basic-palette-surface-light) 96%,
+        oklch(100% 0 0)
+    );
+    --basic-palette-surface-dark-computed: color-mix(
+        in oklch,
+        var(--basic-palette-surface-dark) 94%,
+        oklch(0% 0 0)
+    );
+    --basic-palette-surface-muted-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 10%,
+        var(--basic-palette-surface-light)
+    );
+    --basic-palette-surface-muted-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 18%,
+        var(--basic-palette-surface-dark)
+    );
+    --basic-palette-text-muted-light: color-mix(
+        in oklch,
+        var(--basic-palette-text-light) 68%,
+        var(--basic-palette-surface-light)
+    );
+    --basic-palette-text-muted-dark: color-mix(
+        in oklch,
+        var(--basic-palette-text-dark) 78%,
+        var(--basic-palette-surface-dark)
+    );
+    --basic-palette-border-light: color-mix(
+        in oklch,
+        var(--basic-palette-text-light) 16%,
+        var(--basic-palette-surface-light)
+    );
+    --basic-palette-border-dark: color-mix(
+        in oklch,
+        var(--basic-palette-text-dark) 24%,
+        var(--basic-palette-surface-dark)
+    );
+    --basic-palette-overlay-light: color-mix(
+        in oklch,
+        var(--basic-palette-text-light) 24%,
+        oklch(0% 0 0 / 0)
+    );
+    --basic-palette-overlay-dark: color-mix(in oklch, oklch(0% 0 0) 56%, oklch(0% 0 0 / 0));
+    --basic-palette-focus-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 28%,
+        oklch(0% 0 0 / 0)
+    );
+    --basic-palette-focus-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 38%,
+        oklch(0% 0 0 / 0)
+    );
+    --basic-color-background: light-dark(
+        var(--basic-palette-background-light),
+        var(--basic-palette-background-dark)
+    );
+    --basic-color-surface: light-dark(
+        var(--basic-palette-surface-light-computed),
+        var(--basic-palette-surface-dark-computed)
+    );
+    --basic-color-surface-muted: light-dark(
+        var(--basic-palette-surface-muted-light),
+        var(--basic-palette-surface-muted-dark)
+    );
+    --basic-color-text: light-dark(var(--basic-palette-text-light), var(--basic-palette-text-dark));
+    --basic-color-text-muted: light-dark(
+        var(--basic-palette-text-muted-light),
+        var(--basic-palette-text-muted-dark)
+    );
+    --basic-color-border: light-dark(var(--basic-palette-border-light), var(--basic-palette-border-dark));
+    --basic-color-overlay: light-dark(var(--basic-palette-overlay-light), var(--basic-palette-overlay-dark));
+    --basic-color-focus: light-dark(var(--basic-palette-focus-light), var(--basic-palette-focus-dark));
+}