nitro_kit 0.9.0 → 2.0.0.alpha.2

data/src/stylesheets/nitro_kit/components/grid.css

@@ -0,0 +1,308 @@
+@layer nitro-kit.base {
+  :where([data-nk="grid"]) {
+    display: grid;
+    min-width: 0;
+    grid-template-columns: repeat(var(--_nk-grid-columns), minmax(0, 1fr));
+    gap: var(--_nk-layout-gap);
+  }
+}
+
+@layer nitro-kit.variant {
+  :where([data-nk="grid"][data-cols~="1"]) {
+    --_nk-grid-columns: 1;
+  }
+
+  :where([data-nk="grid"][data-cols~="2"]) {
+    --_nk-grid-columns: 2;
+  }
+
+  :where([data-nk="grid"][data-cols~="3"]) {
+    --_nk-grid-columns: 3;
+  }
+
+  :where([data-nk="grid"][data-cols~="4"]) {
+    --_nk-grid-columns: 4;
+  }
+
+  :where([data-nk="grid"][data-cols~="5"]) {
+    --_nk-grid-columns: 5;
+  }
+
+  :where([data-nk="grid"][data-cols~="6"]) {
+    --_nk-grid-columns: 6;
+  }
+
+  :where([data-nk="grid"][data-cols~="7"]) {
+    --_nk-grid-columns: 7;
+  }
+
+  :where([data-nk="grid"][data-cols~="8"]) {
+    --_nk-grid-columns: 8;
+  }
+
+  :where([data-nk="grid"][data-cols~="9"]) {
+    --_nk-grid-columns: 9;
+  }
+
+  :where([data-nk="grid"][data-cols~="10"]) {
+    --_nk-grid-columns: 10;
+  }
+
+  :where([data-nk="grid"][data-cols~="11"]) {
+    --_nk-grid-columns: 11;
+  }
+
+  :where([data-nk="grid"][data-cols~="12"]) {
+    --_nk-grid-columns: 12;
+  }
+
+  @media (min-width: 40rem) {
+    :where([data-nk="grid"][data-cols~="sm:1"]) {
+      --_nk-grid-columns: 1;
+    }
+
+    :where([data-nk="grid"][data-cols~="sm:2"]) {
+      --_nk-grid-columns: 2;
+    }
+
+    :where([data-nk="grid"][data-cols~="sm:3"]) {
+      --_nk-grid-columns: 3;
+    }
+
+    :where([data-nk="grid"][data-cols~="sm:4"]) {
+      --_nk-grid-columns: 4;
+    }
+
+    :where([data-nk="grid"][data-cols~="sm:5"]) {
+      --_nk-grid-columns: 5;
+    }
+
+    :where([data-nk="grid"][data-cols~="sm:6"]) {
+      --_nk-grid-columns: 6;
+    }
+
+    :where([data-nk="grid"][data-cols~="sm:7"]) {
+      --_nk-grid-columns: 7;
+    }
+
+    :where([data-nk="grid"][data-cols~="sm:8"]) {
+      --_nk-grid-columns: 8;
+    }
+
+    :where([data-nk="grid"][data-cols~="sm:9"]) {
+      --_nk-grid-columns: 9;
+    }
+
+    :where([data-nk="grid"][data-cols~="sm:10"]) {
+      --_nk-grid-columns: 10;
+    }
+
+    :where([data-nk="grid"][data-cols~="sm:11"]) {
+      --_nk-grid-columns: 11;
+    }
+
+    :where([data-nk="grid"][data-cols~="sm:12"]) {
+      --_nk-grid-columns: 12;
+    }
+  }
+
+  @media (min-width: 48rem) {
+    :where([data-nk="grid"][data-cols~="md:1"]) {
+      --_nk-grid-columns: 1;
+    }
+
+    :where([data-nk="grid"][data-cols~="md:2"]) {
+      --_nk-grid-columns: 2;
+    }
+
+    :where([data-nk="grid"][data-cols~="md:3"]) {
+      --_nk-grid-columns: 3;
+    }
+
+    :where([data-nk="grid"][data-cols~="md:4"]) {
+      --_nk-grid-columns: 4;
+    }
+
+    :where([data-nk="grid"][data-cols~="md:5"]) {
+      --_nk-grid-columns: 5;
+    }
+
+    :where([data-nk="grid"][data-cols~="md:6"]) {
+      --_nk-grid-columns: 6;
+    }
+
+    :where([data-nk="grid"][data-cols~="md:7"]) {
+      --_nk-grid-columns: 7;
+    }
+
+    :where([data-nk="grid"][data-cols~="md:8"]) {
+      --_nk-grid-columns: 8;
+    }
+
+    :where([data-nk="grid"][data-cols~="md:9"]) {
+      --_nk-grid-columns: 9;
+    }
+
+    :where([data-nk="grid"][data-cols~="md:10"]) {
+      --_nk-grid-columns: 10;
+    }
+
+    :where([data-nk="grid"][data-cols~="md:11"]) {
+      --_nk-grid-columns: 11;
+    }
+
+    :where([data-nk="grid"][data-cols~="md:12"]) {
+      --_nk-grid-columns: 12;
+    }
+  }
+
+  @media (min-width: 64rem) {
+    :where([data-nk="grid"][data-cols~="lg:1"]) {
+      --_nk-grid-columns: 1;
+    }
+
+    :where([data-nk="grid"][data-cols~="lg:2"]) {
+      --_nk-grid-columns: 2;
+    }
+
+    :where([data-nk="grid"][data-cols~="lg:3"]) {
+      --_nk-grid-columns: 3;
+    }
+
+    :where([data-nk="grid"][data-cols~="lg:4"]) {
+      --_nk-grid-columns: 4;
+    }
+
+    :where([data-nk="grid"][data-cols~="lg:5"]) {
+      --_nk-grid-columns: 5;
+    }
+
+    :where([data-nk="grid"][data-cols~="lg:6"]) {
+      --_nk-grid-columns: 6;
+    }
+
+    :where([data-nk="grid"][data-cols~="lg:7"]) {
+      --_nk-grid-columns: 7;
+    }
+
+    :where([data-nk="grid"][data-cols~="lg:8"]) {
+      --_nk-grid-columns: 8;
+    }
+
+    :where([data-nk="grid"][data-cols~="lg:9"]) {
+      --_nk-grid-columns: 9;
+    }
+
+    :where([data-nk="grid"][data-cols~="lg:10"]) {
+      --_nk-grid-columns: 10;
+    }
+
+    :where([data-nk="grid"][data-cols~="lg:11"]) {
+      --_nk-grid-columns: 11;
+    }
+
+    :where([data-nk="grid"][data-cols~="lg:12"]) {
+      --_nk-grid-columns: 12;
+    }
+  }
+
+  @media (min-width: 80rem) {
+    :where([data-nk="grid"][data-cols~="xl:1"]) {
+      --_nk-grid-columns: 1;
+    }
+
+    :where([data-nk="grid"][data-cols~="xl:2"]) {
+      --_nk-grid-columns: 2;
+    }
+
+    :where([data-nk="grid"][data-cols~="xl:3"]) {
+      --_nk-grid-columns: 3;
+    }
+
+    :where([data-nk="grid"][data-cols~="xl:4"]) {
+      --_nk-grid-columns: 4;
+    }
+
+    :where([data-nk="grid"][data-cols~="xl:5"]) {
+      --_nk-grid-columns: 5;
+    }
+
+    :where([data-nk="grid"][data-cols~="xl:6"]) {
+      --_nk-grid-columns: 6;
+    }
+
+    :where([data-nk="grid"][data-cols~="xl:7"]) {
+      --_nk-grid-columns: 7;
+    }
+
+    :where([data-nk="grid"][data-cols~="xl:8"]) {
+      --_nk-grid-columns: 8;
+    }
+
+    :where([data-nk="grid"][data-cols~="xl:9"]) {
+      --_nk-grid-columns: 9;
+    }
+
+    :where([data-nk="grid"][data-cols~="xl:10"]) {
+      --_nk-grid-columns: 10;
+    }
+
+    :where([data-nk="grid"][data-cols~="xl:11"]) {
+      --_nk-grid-columns: 11;
+    }
+
+    :where([data-nk="grid"][data-cols~="xl:12"]) {
+      --_nk-grid-columns: 12;
+    }
+  }
+
+  @media (min-width: 96rem) {
+    :where([data-nk="grid"][data-cols~="2xl:1"]) {
+      --_nk-grid-columns: 1;
+    }
+
+    :where([data-nk="grid"][data-cols~="2xl:2"]) {
+      --_nk-grid-columns: 2;
+    }
+
+    :where([data-nk="grid"][data-cols~="2xl:3"]) {
+      --_nk-grid-columns: 3;
+    }
+
+    :where([data-nk="grid"][data-cols~="2xl:4"]) {
+      --_nk-grid-columns: 4;
+    }
+
+    :where([data-nk="grid"][data-cols~="2xl:5"]) {
+      --_nk-grid-columns: 5;
+    }
+
+    :where([data-nk="grid"][data-cols~="2xl:6"]) {
+      --_nk-grid-columns: 6;
+    }
+
+    :where([data-nk="grid"][data-cols~="2xl:7"]) {
+      --_nk-grid-columns: 7;
+    }
+
+    :where([data-nk="grid"][data-cols~="2xl:8"]) {
+      --_nk-grid-columns: 8;
+    }
+
+    :where([data-nk="grid"][data-cols~="2xl:9"]) {
+      --_nk-grid-columns: 9;
+    }
+
+    :where([data-nk="grid"][data-cols~="2xl:10"]) {
+      --_nk-grid-columns: 10;
+    }
+
+    :where([data-nk="grid"][data-cols~="2xl:11"]) {
+      --_nk-grid-columns: 11;
+    }
+
+    :where([data-nk="grid"][data-cols~="2xl:12"]) {
+      --_nk-grid-columns: 12;
+    }
+  }
+}

data/src/stylesheets/nitro_kit/components/icon.css

@@ -0,0 +1,26 @@
+@layer nitro-kit.base {
+  :where([data-nk="icon"]) {
+    display: block;
+    flex: none;
+    inline-size: var(--_nk-icon-size);
+    block-size: var(--_nk-icon-size);
+  }
+}
+
+@layer nitro-kit.size {
+  :where([data-nk="icon"][data-size="xs"]) {
+    --_nk-icon-size: 0.75rem;
+  }
+  :where([data-nk="icon"][data-size="sm"]) {
+    --_nk-icon-size: 1rem;
+  }
+  :where([data-nk="icon"][data-size="md"]) {
+    --_nk-icon-size: 1.25rem;
+  }
+  :where([data-nk="icon"][data-size="lg"]) {
+    --_nk-icon-size: 1.75rem;
+  }
+  :where([data-nk="icon"][data-size="xl"]) {
+    --_nk-icon-size: 2.25rem;
+  }
+}

data/src/stylesheets/nitro_kit/components/input.css

@@ -0,0 +1,80 @@
+@layer nitro-kit.base {
+  :where(
+    [data-nk="input"]:not([type="checkbox"], [type="radio"], [type="hidden"])
+  ) {
+    display: block;
+    inline-size: 100%;
+    min-block-size: var(--nk-control-height-md);
+    padding-inline: calc(var(--nk-space) * 3);
+    color: var(--nk-color-foreground);
+    font-size: var(--nk-text-base);
+    background: var(--nk-color-surface);
+    border: var(--nk-border-width) solid var(--nk-color-border);
+    border-radius: var(--nk-radius-md);
+    transition:
+      border-color var(--nk-duration-normal) var(--nk-ease),
+      box-shadow var(--nk-duration-normal) var(--nk-ease);
+  }
+
+  :where([data-nk="input"][type="checkbox"], [data-nk="input"][type="radio"]) {
+    inline-size: 1.125rem;
+    block-size: 1.125rem;
+    accent-color: var(--nk-color-primary);
+  }
+
+  /* Safari lays its date editor out from the top, so the control needs an
+     explicit height and line box instead of the shared min-block-size. */
+  :where([data-nk="input"][type="date"]) {
+    block-size: var(--nk-control-height-md);
+    padding-block: 0;
+    line-height: calc(
+      var(--nk-control-height-md) - (var(--nk-border-width) * 2)
+    );
+  }
+
+  :where([data-nk="input"][type="file"]) {
+    padding-inline-start: 0;
+  }
+
+  :where([data-nk="input"][type="file"])::file-selector-button {
+    min-block-size: calc(
+      var(--nk-control-height-md) - (var(--nk-border-width) * 2)
+    );
+    margin-inline-end: calc(var(--nk-space) * 3);
+    padding-inline: calc(var(--nk-space) * 3);
+    color: var(--nk-button-default-foreground);
+    font-weight: var(--nk-font-weight-medium);
+    background: var(--nk-button-default-background);
+    border-inline-end: var(--nk-border-width) solid
+      var(--nk-button-default-border);
+  }
+}
+
+@layer nitro-kit.state {
+  @media (hover: hover) {
+    :where(
+        [data-nk="input"][type="file"]:not(:disabled)
+      )::file-selector-button:hover {
+      background: var(--nk-button-default-hover-background);
+    }
+  }
+
+  :where([data-nk="input"]:focus-visible) {
+    outline: var(--nk-focus-width) solid var(--nk-color-focus);
+    outline-offset: var(--nk-focus-offset);
+  }
+
+  :where([data-nk="input"][readonly]:not(:disabled)) {
+    color: var(--nk-color-muted-foreground);
+    background: var(--nk-color-muted);
+  }
+
+  :where([data-nk="input"]:disabled) {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
+  :where([data-nk="input"][aria-invalid="true"]) {
+    border-color: var(--nk-color-danger);
+  }
+}

data/src/stylesheets/nitro_kit/components/label.css

@@ -0,0 +1,9 @@
+@layer nitro-kit.base {
+  :where([data-nk="label"]) {
+    color: var(--nk-color-foreground);
+    font-size: var(--nk-text-sm);
+    font-weight: var(--nk-font-weight-medium);
+    line-height: var(--nk-leading-normal);
+    text-wrap: pretty;
+  }
+}