@epilot/spark-ui 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/styles/index.css

@@ -0,0 +1,260 @@
+/* Solid Light */
+@import '@radix-ui/colors/green.css' layer(base);
+@import '@radix-ui/colors/blue.css' layer(base);
+@import '@radix-ui/colors/red.css' layer(base);
+@import '@radix-ui/colors/orange.css' layer(base);
+@import '@radix-ui/colors/pink.css' layer(base);
+@import '@radix-ui/colors/cyan.css' layer(base);
+@import '@radix-ui/colors/tomato.css' layer(base);
+@import '@radix-ui/colors/amber.css' layer(base);
+
+/* Solid Light Alpha */
+@import '@radix-ui/colors/green-alpha.css' layer(base);
+@import '@radix-ui/colors/blue-alpha.css' layer(base);
+@import '@radix-ui/colors/red-alpha.css' layer(base);
+@import '@radix-ui/colors/orange-alpha.css' layer(base);
+@import '@radix-ui/colors/pink-alpha.css' layer(base);
+@import '@radix-ui/colors/cyan-alpha.css' layer(base);
+@import '@radix-ui/colors/tomato-alpha.css' layer(base);
+@import '@radix-ui/colors/amber-alpha.css' layer(base);
+
+/* Solid Dark */
+@import '@radix-ui/colors/green-dark.css' layer(base);
+@import '@radix-ui/colors/blue-dark.css' layer(base);
+@import '@radix-ui/colors/red-dark.css' layer(base);
+@import '@radix-ui/colors/orange-dark.css' layer(base);
+@import '@radix-ui/colors/pink-dark.css' layer(base);
+@import '@radix-ui/colors/cyan-dark.css' layer(base);
+@import '@radix-ui/colors/tomato-dark.css' layer(base);
+@import '@radix-ui/colors/amber-dark.css' layer(base);
+
+/* Solid Dark Alpha */
+@import '@radix-ui/colors/green-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/blue-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/red-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/orange-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/pink-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/cyan-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/tomato-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/amber-dark-alpha.css' layer(base);
+
+/* Grays Light */
+@import '@radix-ui/colors/gray.css' layer(base);
+@import '@radix-ui/colors/mauve.css' layer(base);
+@import '@radix-ui/colors/slate.css' layer(base);
+@import '@radix-ui/colors/sage.css' layer(base);
+@import '@radix-ui/colors/olive.css' layer(base);
+@import '@radix-ui/colors/sand.css' layer(base);
+
+/* Grays Light Alpha */
+@import '@radix-ui/colors/gray-alpha.css' layer(base);
+@import '@radix-ui/colors/mauve-alpha.css' layer(base);
+@import '@radix-ui/colors/slate-alpha.css' layer(base);
+@import '@radix-ui/colors/sage-alpha.css' layer(base);
+@import '@radix-ui/colors/olive-alpha.css' layer(base);
+@import '@radix-ui/colors/sand-alpha.css' layer(base);
+
+/* Grays Dark */
+@import '@radix-ui/colors/gray-dark.css' layer(base);
+@import '@radix-ui/colors/mauve-dark.css' layer(base);
+@import '@radix-ui/colors/slate-dark.css' layer(base);
+@import '@radix-ui/colors/sage-dark.css' layer(base);
+@import '@radix-ui/colors/olive-dark.css' layer(base);
+@import '@radix-ui/colors/sand-dark.css' layer(base);
+
+/* Grays Dark Alpha */
+@import '@radix-ui/colors/gray-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/mauve-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/slate-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/sage-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/olive-dark-alpha.css' layer(base);
+@import '@radix-ui/colors/sand-dark-alpha.css' layer(base);
+
+/* White & Black Alpha */
+@import '@radix-ui/colors/white-alpha.css' layer(base);
+@import '@radix-ui/colors/black-alpha.css' layer(base);
+
+/* Default Spark brand scale */
+@import './spark-default.css' layer(base);
+
+@import './material-symbol.css' layer(base);
+
+/* Tailwind v4 theme: scales, semantic tokens, dark variant, safelist */
+@import './theme.css';
+@import './utilities.css';
+
+/* Tailwind animate plugin */
+@import 'tw-animate-css';
+
+/*
+ * Portal parity: ECP ships a contrast-fixed light green-a11 (opaque, darker
+ * than Radix stock #00713fde) for readable success-light text. Declared here
+ * (after the imports, directly in layer base) -- inside spark-default.css it
+ * would land in the nested base.base sub-layer and lose to Radix's direct
+ * base rules (a layer's direct rules act as its implicit final sub-layer).
+ */
+@layer base {
+  :root,
+  .light,
+  .light-theme {
+    --green-a11: #06784c;
+  }
+
+  @supports (color: color(display-p3 1 1 1)) {
+    @media (color-gamut: p3) {
+      :root,
+      .light,
+      .light-theme {
+        --green-a11: color(display-p3 0.21 0.46 0.31);
+      }
+    }
+  }
+}
+
+/* Hit area utilities — Kian Bazarjani <https://bazza.dev> */
+@utility hit-area-debug {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+    @apply border border-dashed border-blue-9;
+    @apply bg-blue-9/10;
+  }
+  &:hover::before {
+    @apply border border-dashed border-green-9;
+    @apply bg-green-9/10;
+  }
+}
+
+@utility hit-area {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1);
+  --hit-area-t: calc(--value([*]) * -1);
+  --hit-area-r: --spacing(--value(number) * -1);
+  --hit-area-r: calc(--value([*]) * -1);
+  --hit-area-b: --spacing(--value(number) * -1);
+  --hit-area-b: calc(--value([*]) * -1);
+  --hit-area-l: --spacing(--value(number) * -1);
+  --hit-area-l: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-t-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1);
+  --hit-area-t: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-r-* {
+  position: relative;
+  --hit-area-r: --spacing(--value(number) * -1);
+  --hit-area-r: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-b-* {
+  position: relative;
+  --hit-area-b: --spacing(--value(number) * -1);
+  --hit-area-b: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-l-* {
+  position: relative;
+  --hit-area-l: --spacing(--value(number) * -1);
+  --hit-area-l: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-x-* {
+  position: relative;
+  --hit-area-l: --spacing(--value(number) * -1);
+  --hit-area-l: calc(--value([*]) * -1);
+  --hit-area-r: --spacing(--value(number) * -1);
+  --hit-area-r: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}
+
+@utility hit-area-y-* {
+  position: relative;
+  --hit-area-t: --spacing(--value(number) * -1);
+  --hit-area-t: calc(--value([*]) * -1);
+  --hit-area-b: --spacing(--value(number) * -1);
+  --hit-area-b: calc(--value([*]) * -1);
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--hit-area-t, 0px);
+    right: var(--hit-area-r, 0px);
+    bottom: var(--hit-area-b, 0px);
+    left: var(--hit-area-l, 0px);
+    pointer-events: inherit;
+  }
+}

package/dist/styles/internal.css

@@ -0,0 +1,5 @@
+/* This file is just used for internally developing this package */
+@import 'tailwindcss';
+@import './index.css';
+
+@source '../**/*.{tsx,ts,jsx,js}';

package/dist/styles/material-symbol.css

@@ -0,0 +1,22 @@
+@layer base {
+  .material-symbols-rounded {
+    font-family: 'Material Symbols Rounded';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 1em;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
+    font-variation-settings:
+      'FILL' 0,
+      'wght' 400,
+      'GRAD' 0,
+      'opsz' 20;
+  }
+}