@pgcorp/ui-kit 0.1.0

package/src/styles/style.css

@@ -0,0 +1,151 @@
+@import "./tokens.css";
+
+:root {
+  color-scheme: light;
+  -webkit-text-size-adjust: 100%;
+}
+
+:root[data-theme="dark"],
+:root[data-theme="pink-dark"],
+:root[data-theme="green-dark"] {
+  color-scheme: dark;
+}
+
+html,
+body,
+#app {
+  min-height: 100%;
+  background-color: var(--color-bg);
+}
+
+body {
+  margin: 0;
+  font-family: var(--font-sans);
+  background-color: var(--color-bg);
+  color: var(--color-text);
+}
+
+@layer components {
+  :where([data-s-field-surface]) {
+    transition-property: color, background-color, border-color, box-shadow;
+    transition-duration: var(--s-motion-standard);
+  }
+
+  :where([data-s-field-surface])::placeholder {
+    color: var(--s-field-placeholder-foreground);
+    opacity: 1;
+  }
+
+  :where([data-s-field-surface]):focus-visible {
+    outline: var(--s-focus-ring-width) solid var(--s-focus-ring-color);
+    outline-offset: var(--s-focus-ring-offset);
+  }
+
+  :where([data-s-field-surface][data-s-field-disabled="true"]) {
+    cursor: not-allowed;
+  }
+
+  :where([data-s-field-surface][data-s-field-invalid="true"]):focus-visible {
+    outline-color: var(--s-field-invalid-border);
+  }
+
+  :where([data-s-field-surface][data-s-field-appearance="field"]) {
+    box-sizing: border-box;
+    border: 1px solid var(--s-field-border);
+    border-radius: var(--s-field-radius);
+    background-color: var(--s-field-surface);
+    color: var(--s-field-foreground);
+    box-shadow: var(--s-field-shadow);
+  }
+
+  :where([data-s-field-surface][data-s-field-appearance="field"]):hover:not(:disabled, [data-s-field-disabled="true"]) {
+    background-color: var(--s-field-surface-hover);
+  }
+
+  :where([data-s-field-surface][data-s-field-appearance="field"]):focus-visible {
+    border-color: var(--s-field-border-focus);
+  }
+
+  :where([data-s-field-surface][data-s-field-appearance="field"][data-s-field-disabled="true"]) {
+    border-color: var(--s-field-disabled-border);
+    background-color: var(--s-field-disabled-surface);
+    color: var(--s-field-disabled-foreground);
+  }
+
+  :where([data-s-field-surface][data-s-field-appearance="field"][data-s-field-invalid="true"]) {
+    border-color: var(--s-field-invalid-border);
+  }
+
+  :where([data-s-field-surface][data-s-field-appearance="field"][data-s-field-invalid="true"]):focus-visible {
+    border-color: var(--s-field-invalid-border);
+  }
+}
+
+@layer utilities {
+  .bg-background {
+    background-color: var(--color-bg);
+  }
+
+  .text-content-wrap {
+    @apply min-w-0;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .text-content-pre-wrap {
+    @apply min-w-0;
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+
+  .text-nav-truncate {
+    @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
+  }
+
+  .text-meta-clamp-2 {
+    @apply min-w-0 overflow-hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+  }
+}
+
+@layer base {
+  :root {
+    --scrollbar-thumb: rgba(100, 116, 139, 0.6);
+    --scrollbar-thumb-hover: rgba(100, 116, 139, 0.8);
+    --scrollbar-track: transparent;
+  }
+
+  .dark {
+    --scrollbar-thumb: rgba(148, 163, 184, 0.5);
+    --scrollbar-thumb-hover: rgba(148, 163, 184, 0.7);
+    --scrollbar-track: transparent;
+  }
+
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  }
+
+  *::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: var(--scrollbar-track);
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    border-radius: var(--radius-sm);
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover);
+  }
+}