@lmfaole/basics 0.3.0 → 0.5.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,11 @@
+@import "./components/basic-alert.css";
+@import "./components/basic-accordion.css";
+@import "./components/basic-carousel.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";
+@import "./interaction.css";

package/basic-styling/forms.css

@@ -0,0 +1,55 @@
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]) {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: var(--basic-space-3);
+    align-items: start;
+    padding: var(--basic-space-4);
+    border: var(--basic-border-width) solid var(--basic-color-border);
+    background: var(--basic-color-surface);
+    color: inherit;
+    cursor: pointer;
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]:enabled):where(:hover) {
+    border-color: var(--basic-color-border-hover);
+    background: var(--basic-color-surface-hover);
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]:checked) {
+    border-color: var(--basic-color-border-selected);
+    background: var(--basic-color-surface-selected);
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]:disabled) {
+    opacity: 0.7;
+    cursor: not-allowed;
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]:focus-visible) {
+    outline: 3px solid var(--basic-color-focus);
+    outline-offset: 2px;
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]) > input:is([type="checkbox"], [type="radio"])[data-panel] {
+    width: auto;
+    margin-top: 0.15rem;
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]) > :not(input:is([type="checkbox"], [type="radio"])[data-panel]) {
+    min-width: 0;
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]) > :not(input:is([type="checkbox"], [type="radio"])[data-panel]):where(span, div) {
+    display: grid;
+    gap: var(--basic-space-1);
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]) strong {
+    display: block;
+    color: var(--basic-color-text);
+}
+
+:where(label):has(> input:is([type="checkbox"], [type="radio"])[data-panel]) :is(p, small) {
+    margin: 0;
+    color: var(--basic-color-text-muted);
+}

package/basic-styling/global.css

@@ -0,0 +1,62 @@
+@import "./tokens/base.css";
+@import "./tokens/palette.css";
+@import "./forms.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/interaction.css

@@ -0,0 +1,90 @@
+:where(
+    basic-alert [data-alert-close],
+    basic-dialog :is([data-dialog-open], [data-dialog-close]),
+    basic-popover :is([data-popover-open], [data-popover-close]),
+    basic-toast :is([data-toast-open], [data-toast-close]),
+    basic-tabs [data-tab],
+    basic-accordion > details > summary
+) {
+    --basic-interaction-state: rest;
+    --basic-interaction-surface-rest: var(--basic-color-surface);
+    --basic-interaction-surface-hover: var(--basic-color-surface-hover);
+    --basic-interaction-surface-active: var(--basic-color-surface-active);
+    --basic-interaction-surface-selected: var(--basic-color-surface-selected);
+    --basic-interaction-surface-checked: var(--basic-color-surface-checked);
+    --basic-interaction-border-rest: var(--basic-color-border);
+    --basic-interaction-border-hover: var(--basic-color-border-hover);
+    --basic-interaction-border-active: var(--basic-color-border-active);
+    --basic-interaction-border-selected: var(--basic-color-border-selected);
+    --basic-interaction-border-checked: var(--basic-color-border-checked);
+    --basic-interaction-text-rest: inherit;
+    --basic-interaction-text-hover: var(--basic-interaction-text-rest);
+    --basic-interaction-text-active: var(--basic-interaction-text-hover);
+    --basic-interaction-text-selected: var(--basic-interaction-text-rest);
+    --basic-interaction-text-checked: var(--basic-interaction-text-rest);
+
+    position: relative;
+    isolation: isolate;
+    container-type: normal;
+    background: transparent;
+    border-color: transparent;
+    color: var(--basic-interaction-text-rest);
+
+    &::before {
+        content: "";
+        position: absolute;
+        inset: 0;
+        z-index: -1;
+        border-radius: inherit;
+        background: var(--basic-interaction-surface-rest);
+        box-shadow: 0 0 0 var(--basic-border-width) var(--basic-interaction-border-rest);
+        pointer-events: none;
+    }
+
+    &:where(:hover, :focus-visible) {
+        --basic-interaction-state: hover;
+        color: var(--basic-interaction-text-hover);
+    }
+
+    &:active {
+        --basic-interaction-state: active;
+        color: var(--basic-interaction-text-active);
+    }
+
+    @container style(--basic-interaction-state: hover) {
+        &::before {
+            background: var(--basic-interaction-surface-hover);
+            box-shadow: 0 0 0 var(--basic-border-width) var(--basic-interaction-border-hover);
+        }
+    }
+
+    @container style(--basic-interaction-state: active) {
+        &::before {
+            background: var(--basic-interaction-surface-active);
+            box-shadow: 0 0 0 var(--basic-border-width) var(--basic-interaction-border-active);
+        }
+    }
+
+    @container style(--basic-interaction-state: selected) {
+        &::before {
+            background: var(--basic-interaction-surface-selected);
+            box-shadow: 0 0 0 var(--basic-border-width) var(--basic-interaction-border-selected);
+        }
+    }
+
+    @container style(--basic-interaction-state: checked) {
+        &::before {
+            background: var(--basic-interaction-surface-checked);
+            box-shadow: 0 0 0 var(--basic-border-width) var(--basic-interaction-border-checked);
+        }
+    }
+}
+
+:where(
+    basic-accordion > details[open] > summary,
+    basic-popover [data-popover-open][aria-expanded="true"],
+    basic-tabs [data-tab][aria-selected="true"]
+) {
+    --basic-interaction-state: selected;
+    color: var(--basic-interaction-text-selected);
+}

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,229 @@
+: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-surface-hover-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 12%,
+        var(--basic-palette-surface-light)
+    );
+    --basic-palette-surface-hover-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 20%,
+        var(--basic-palette-surface-dark)
+    );
+    --basic-palette-surface-active-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 16%,
+        var(--basic-palette-surface-light)
+    );
+    --basic-palette-surface-active-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 26%,
+        var(--basic-palette-surface-dark)
+    );
+    --basic-palette-surface-selected-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 14%,
+        var(--basic-palette-surface-light)
+    );
+    --basic-palette-surface-selected-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 24%,
+        var(--basic-palette-surface-dark)
+    );
+    --basic-palette-surface-checked-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 18%,
+        var(--basic-palette-surface-light)
+    );
+    --basic-palette-surface-checked-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 30%,
+        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-border-hover-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 18%,
+        var(--basic-palette-border-light)
+    );
+    --basic-palette-border-hover-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 28%,
+        var(--basic-palette-border-dark)
+    );
+    --basic-palette-border-active-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 24%,
+        var(--basic-palette-border-light)
+    );
+    --basic-palette-border-active-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 36%,
+        var(--basic-palette-border-dark)
+    );
+    --basic-palette-border-selected-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 22%,
+        var(--basic-palette-border-light)
+    );
+    --basic-palette-border-selected-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 34%,
+        var(--basic-palette-border-dark)
+    );
+    --basic-palette-border-checked-light: color-mix(
+        in oklch,
+        var(--basic-palette-accent-light) 28%,
+        var(--basic-palette-border-light)
+    );
+    --basic-palette-border-checked-dark: color-mix(
+        in oklch,
+        var(--basic-palette-accent-dark) 40%,
+        var(--basic-palette-border-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-surface-hover: light-dark(
+        var(--basic-palette-surface-hover-light),
+        var(--basic-palette-surface-hover-dark)
+    );
+    --basic-color-surface-active: light-dark(
+        var(--basic-palette-surface-active-light),
+        var(--basic-palette-surface-active-dark)
+    );
+    --basic-color-surface-selected: light-dark(
+        var(--basic-palette-surface-selected-light),
+        var(--basic-palette-surface-selected-dark)
+    );
+    --basic-color-surface-checked: light-dark(
+        var(--basic-palette-surface-checked-light),
+        var(--basic-palette-surface-checked-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-border-hover: light-dark(
+        var(--basic-palette-border-hover-light),
+        var(--basic-palette-border-hover-dark)
+    );
+    --basic-color-border-active: light-dark(
+        var(--basic-palette-border-active-light),
+        var(--basic-palette-border-active-dark)
+    );
+    --basic-color-border-selected: light-dark(
+        var(--basic-palette-border-selected-light),
+        var(--basic-palette-border-selected-dark)
+    );
+    --basic-color-border-checked: light-dark(
+        var(--basic-palette-border-checked-light),
+        var(--basic-palette-border-checked-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));
+}