@refine-studio/ui 0.2.0 → 0.3.0

package/dist/styles.css

@@ -210,6 +210,30 @@
   --violet-ink: oklch(0.48 0.18 295);
   --violet-foreground: oklch(0.985 0.01 295);
 
+  --status-todo: oklch(0.55 0.014 286);
+  --status-todo-soft: var(--muted);
+  --status-todo-ink: oklch(0.45 0.014 286);
+  --status-todo-foreground: oklch(0.985 0 0);
+  --status-doing: var(--info);
+  --status-doing-soft: var(--info-soft);
+  --status-doing-ink: var(--info-ink);
+  --status-doing-foreground: var(--info-foreground);
+  --status-done: var(--success);
+  --status-done-soft: var(--success-soft);
+  --status-done-ink: var(--success-ink);
+  --status-done-foreground: var(--success-foreground);
+  --status-ended: oklch(0.72 0.006 286);
+  --status-ended-soft: oklch(0.975 0.001 286);
+  --status-ended-ink: oklch(0.54 0.006 286);
+  --status-ended-foreground: oklch(0.141 0.005 286);
+
+  --chart-1: oklch(0.66 0.115 182);
+  --chart-2: oklch(0.58 0.085 182);
+  --chart-3: oklch(0.5 0.06 182);
+  --chart-4: oklch(0.42 0.035 182);
+  --chart-other: oklch(0.86 0.004 286);
+  --chart-other-line: oklch(0.74 0.006 286);
+
   --shadow-color: oklch(0.141 0.005 286);
   --shadow-strength: 1;
 }
@@ -268,6 +292,30 @@
   --violet-ink: oklch(0.83 0.1 300);
   --violet-foreground: oklch(0.18 0.05 295);
 
+  --status-todo: oklch(0.68 0.014 286);
+  --status-todo-soft: oklch(0.27 0.008 286);
+  --status-todo-ink: oklch(0.82 0.012 286);
+  --status-todo-foreground: oklch(0.141 0.005 286);
+  --status-doing: var(--info);
+  --status-doing-soft: var(--info-soft);
+  --status-doing-ink: var(--info-ink);
+  --status-doing-foreground: var(--info-foreground);
+  --status-done: var(--success);
+  --status-done-soft: var(--success-soft);
+  --status-done-ink: var(--success-ink);
+  --status-done-foreground: var(--success-foreground);
+  --status-ended: oklch(0.42 0.006 286);
+  --status-ended-soft: oklch(0.2 0.004 286);
+  --status-ended-ink: oklch(0.66 0.006 286);
+  --status-ended-foreground: oklch(0.985 0 0);
+
+  --chart-1: oklch(0.8 0.13 182);
+  --chart-2: oklch(0.7 0.1 182);
+  --chart-3: oklch(0.61 0.075 182);
+  --chart-4: oklch(0.53 0.05 182);
+  --chart-other: oklch(0.36 0.006 286);
+  --chart-other-line: oklch(0.46 0.006 286);
+
   --shadow-color: oklch(0 0 0);
   --shadow-strength: 4;
 }
@@ -354,6 +402,22 @@
   --color-info-soft: var(--info-soft);
   --color-info-ink: var(--info-ink);
   --color-info-foreground: var(--info-foreground);
+  --color-status-todo: var(--status-todo);
+  --color-status-todo-soft: var(--status-todo-soft);
+  --color-status-todo-ink: var(--status-todo-ink);
+  --color-status-todo-foreground: var(--status-todo-foreground);
+  --color-status-doing: var(--status-doing);
+  --color-status-doing-soft: var(--status-doing-soft);
+  --color-status-doing-ink: var(--status-doing-ink);
+  --color-status-doing-foreground: var(--status-doing-foreground);
+  --color-status-done: var(--status-done);
+  --color-status-done-soft: var(--status-done-soft);
+  --color-status-done-ink: var(--status-done-ink);
+  --color-status-done-foreground: var(--status-done-foreground);
+  --color-status-ended: var(--status-ended);
+  --color-status-ended-soft: var(--status-ended-soft);
+  --color-status-ended-ink: var(--status-ended-ink);
+  --color-status-ended-foreground: var(--status-ended-foreground);
   --color-violet: var(--violet);
   --color-violet-soft: var(--violet-soft);
   --color-violet-ink: var(--violet-ink);
@@ -441,6 +505,7 @@
   --animate-marquee: marquee var(--marquee-duration, 30s) linear infinite;
   --animate-rise: rise 0.5s var(--ease-out-expo) both;
   --animate-indeterminate: indeterminate 1.4s var(--ease-out-expo) infinite;
+  --animate-in-progress: in-progress 2.4s linear infinite;
 
   @keyframes shimmer {
     from {
@@ -492,6 +557,15 @@
     }
   }
 
+  @keyframes in-progress {
+    from {
+      background-position: 0 0;
+    }
+    to {
+      background-position: 1.5rem 0;
+    }
+  }
+
   @keyframes indeterminate {
     from {
       transform: translateX(-100%) scaleX(0.4);
@@ -514,32 +588,25 @@
 }
 
 /*
- * Chart colours: categorical series, used in order from chart-1.
- * Tailwind's 500 step, the same in light and dark. Neighbours in the order
- * stay apart under protanopia, deuteranopia and tritanopia. The fills reach
- * 2:1 on white, not 3:1, so every chart carries a legend or direct labels.
+ * Chart colours: one ramp of the gem hue, ordered by emphasis. chart-1 is
+ * vivid and the default for a single series. Each later step moves at
+ * least 0.08 in lightness and loses chroma. Light mode steps get darker.
+ * Dark mode has its own, brighter steps, so the tail stays apart from the
+ * near-black card.
+ * chart-other is the quietest band, a neutral for "Others": lighter than
+ * chart-4 in light mode and dimmer in dark mode.
+ * chart-other-line is a step stronger, for the context lines of a line
+ * chart, where a thin stroke needs more contrast than a band. The values
+ * sit in the colour-mode blocks above.
  */
 
-:root {
-  --chart-1: oklch(0.704 0.14 182.503);
-  --chart-2: oklch(0.667 0.295 322.15);
-  --chart-3: oklch(0.723 0.219 149.579);
-  --chart-4: oklch(0.606 0.25 292.717);
-  --chart-5: oklch(0.637 0.237 25.331);
-  --chart-6: oklch(0.685 0.169 237.323);
-  --chart-7: oklch(0.656 0.241 354.308);
-  --chart-8: oklch(0.769 0.188 70.08);
-}
-
 @theme inline {
   --color-chart-1: var(--chart-1);
   --color-chart-2: var(--chart-2);
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-  --color-chart-6: var(--chart-6);
-  --color-chart-7: var(--chart-7);
-  --color-chart-8: var(--chart-8);
+  --color-chart-other: var(--chart-other);
+  --color-chart-other-line: var(--chart-other-line);
 }
 
 /* Utilities that carry the brand. */
@@ -659,6 +726,27 @@
   background-size: 200% 100%;
 }
 
+/*
+ * A calm stripe that drifts across an in-progress fill, such as a bar in
+ * `bg-status-doing`. It keeps the fill's own colour and stops under
+ * `prefers-reduced-motion: reduce`, where the static stripes still mark it.
+ */
+@utility in-progress {
+  background-image: linear-gradient(
+    45deg,
+    oklch(1 0 0 / 0.2) 25%,
+    transparent 25% 50%,
+    oklch(1 0 0 / 0.2) 50% 75%,
+    transparent 75%
+  );
+  background-size: 1.5rem 1.5rem;
+  animation: var(--animate-in-progress);
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
 @layer base {
   *,
   ::before,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refine-studio/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Refine UI: the design system the Diamonds use to build internal tools.",
   "license": "MIT",
   "homepage": "https://ui.refine.studio",