[base] Update core CSS

packages/@sanity/base/src/styles/shadows.css

@@ -9,8 +9,8 @@
 }
 
 .shadow-1dp {
-  box-shadow: 0 0 0 1px var(--hairline-color), 0 2px 2px 0 var(--shadow-color-umbra),
-    0 3px 1px -2px var(--shadow-color-penumbra), 0 1px 5px 0 var(--shadow-color-ambient);
+  box-shadow: 0 0 0 1px var(--hairline-color), 0 1px 2px 0 var(--shadow-color-umbra),
+    0 2px 1px -2px var(--shadow-color-penumbra), 0 1px 3px 0 var(--shadow-color-ambient);
 }
 
 /* .shadow-2dp {

packages/@sanity/base/src/styles/variables/brand-colors.css

@@ -1,5 +1,5 @@
 :root {
-  --black: #000;
+  --black: #121923;
   --white: #fff;
   --brand-darkest: var(--black);
   --brand-darkest--inverted: color(var(--brand-darkest) contrast(80%));

packages/@sanity/base/src/styles/variables/code.css

@@ -6,12 +6,11 @@
   --code-color: var(--gray-darker);
 
   /* KBD */
-  --kbd-bg: var(--gray-lighter);
+  --kbd-bg: color(var(--gray) alpha(10%));
   --kbd-color: var(--gray-darker);
 
   /* Pre */
-  --pre-bg: var(--gray-lightest);
+  --pre-bg: color(var(--gray) alpha(10%));
   --pre-color: var(--gray-darker);
-  --pre-border-color: var(--gray-lighter);
-  --pre-scrollable-max-height: 20em;
+  --pre-border-color: transparent;
 }

packages/@sanity/base/src/styles/variables/globals.css

@@ -86,6 +86,43 @@
   --block-extras-border-color: var(--hairline-color);
   --block-extras-background-color: color(var(--gray-lightest) alpha(50%));
 
+  /* Timeline event */
+  --timeline-event-enabled-bg: var(--component-bg);
+  --timeline-event-enabled-fg: var(--text-muted);
+  --timeline-event-enabled-border: color(var(--timeline-event-enabled-bg) blend(var(--gray) 30%));
+  --timeline-event-enabled-hover-bg: var(--selectable-item-color-hover);
+  --timeline-event-enabled-hover-fg: var(--text-color-secondary);
+  --timeline-event-enabled-icon-created-bg: var(--brand-primary);
+  --timeline-event-enabled-icon-created-fg: var(--component-bg);
+  --timeline-event-enabled-icon-deleted-bg: var(--state-danger-color);
+  --timeline-event-enabled-icon-deleted-fg: var(--component-bg);
+  --timeline-event-enabled-icon-discarded-draft-bg: var(--state-danger-color);
+  --timeline-event-enabled-icon-discarded-draft-fg: var(--component-bg);
+  --timeline-event-enabled-icon-edited-bg: color(
+    var(--component-bg) blend(var(--state-warning-color) 10%)
+  );
+  --timeline-event-enabled-icon-edited-fg: var(--state-warning-color);
+  --timeline-event-enabled-icon-published-bg: var(--state-success-color);
+  --timeline-event-enabled-icon-published-fg: var(--component-bg);
+  --timeline-event-enabled-icon-unpublished-bg: var(--state-danger-color);
+  --timeline-event-enabled-icon-unpublished-fg: var(--component-bg);
+  --timeline-event-within-selection-bg: color(
+    var(--component-bg) blend(var(--selectable-item-base) 10%)
+  );
+  --timeline-event-within-selection-fg: var(--selectable-item-base);
+  --timeline-event-within-selection-border: var(--selectable-item-base);
+  --timeline-event-within-selection-icon-bg: var(--component-bg);
+  --timeline-event-within-selection-icon-fg: var(--selectable-item-base);
+  --timeline-event-selected-bg: var(--selectable-item-base);
+  --timeline-event-selected-fg: var(--component-bg);
+  --timeline-event-selected-border: var(--component-bg);
+  --timeline-event-selected-icon-bg: var(--component-bg);
+  --timeline-event-selected-icon-fg: var(--selectable-item-base);
+  --timeline-event-disabled-bg: var(--component-bg);
+  --timeline-event-disabled-fg: color(var(--component-bg) blend(var(--gray) 50%));
+  --timeline-event-disabled-icon-bg: color(var(--component-bg) blend(var(--gray) 30%));
+  --timeline-event-disabled-icon-fg: var(--component-bg);
+
   /* Others */
   --pane-header-height: 3.4375rem; /* 55px */
   --avatar-height: 23px;

packages/@sanity/base/src/styles/variables/override.css

@@ -1,41 +1,51 @@
-/*
-  This needs to be empty.
-  It is used to override variables externally via a part
-*/
-
 :root {
-  /* Base */
-  --black: #121923;
-  --white: #fff;
-  --gray-base: #7b8ca8;
+  --sanity-color-black: #121923;
+  --sanity-color-white: #fff;
+  --sanity-color-blue-500: #2276fc;
+  --sanity-color-red-500: #f03e2f;
+  --sanity-color-yellow-100: #fdefb6;
+  --sanity-color-gray-50: #f1f3f6;
+  --sanity-color-gray-100: #e4e8ed;
+  --sanity-color-gray-200: #cad1dc;
+  --sanity-color-gray-400: #95a3b9;
+  --sanity-color-gray-500: #7b8ca8;
+  --sanity-color-gray-600: #66758d;
+  --sanity-color-gray-800: #3c4758;
+  --sanity-color-gray-900: #262f3d;
+
+  /* Base theme colors */
+  --black: var(--sanity-color-black);
+  --white: var(--sanity-color-white);
+  --gray-base: var(--sanity-color-gray-500);
+
+  /* Gray */
+  --gray-darkest: var(--sanity-color-gray-900);
+  --gray-darker: var(--sanity-color-gray-800);
+  --gray-dark: var(--sanity-color-gray-600);
+  --gray: var(--sanity-color-gray-500);
+  --gray-light: var(--sanity-color-gray-400);
+  --gray-lighter: var(--sanity-color-gray-200);
+  --gray-lightest: var(--sanity-color-gray-100);
 
   /* Brand */
-  --brand-primary: #2276fc;
-  --brand-primary--inverted: #fff;
-  --brand-secondary: #f03e2f;
-  --brand-secondary--inverted: #fff;
+  --brand-primary: var(--sanity-color-blue-500);
+  --brand-primary--inverted: var(--sanity-color-white);
+  --brand-secondary: var(--sanity-color-red-500);
+  --brand-secondary--inverted: var(--sanity-color-white);
 
   /* Focus */
-  --focus-color: #2276fc;
-
-  /* Gray */
-  --gray-darkest: #262f3d;
-  --gray-darker: #3c4758;
-  --gray-dark: #66758d;
-  --gray: #7b8ca8;
-  --gray-light: #95a3b9;
-  /* @todo: deprecate */
-  --gray-ligther: #cad1dc;
-  --gray-lighter: #cad1dc;
-  --gray-lightest: #e4e8ed;
+  --focus-color: var(--sanity-color-blue-500);
 
   /* Navbar */
-  --main-navigation-color: #121923;
-  --main-navigation-color--inverted: #fff;
+  --main-navigation-color: var(--sanity-color-black);
+  --main-navigation-color--inverted: var(--sanity-color-white);
 
   /* Selectable item */
-  --selectable-item-color-hover: #f1f3f6;
-  --selectable-item-color-focus: #e4e8ed;
-  --selectable-item-color-active: #f1f3f6;
-  --selectable-item-color-highlighted: #e4e8ed;
+  --selectable-item-color-hover: var(--sanity-color-gray-50);
+  --selectable-item-color-focus: var(--sanity-color-gray-100);
+  --selectable-item-color-active: var(--sanity-color-gray-50);
+  --selectable-item-color-highlighted: var(--sanity-color-gray-100);
+
+  /* Timeline event */
+  --timeline-event-enabled-icon-edited-bg: var(--sanity-color-yellow-100);
 }

packages/@sanity/base/src/styles/variables/selectable-item.css

@@ -2,25 +2,23 @@
 @import 'part:@sanity/base/theme/variables/gray-colors-style';
 
 :root {
-  /*
-    Selectable item
-  */
+  /* Selectable item */
   --selectable-item-base: var(--brand-primary);
-  --selectable-item-color: color(var(--selectable-item-base) a(0%));
+  --selectable-item-color: var(--component-bg);
   --selectable-item-color--inverted: var(--text-color);
-  --selectable-item-color-hover: color(var(--selectable-item-base) a(15%));
+  --selectable-item-color-hover: color(var(--component-bg) blend(var(--selectable-item-base) 10%));
   --selectable-item-color-hover--inverted: var(--selectable-item-color--inverted);
-  --selectable-item-color-focus: color(var(--selectable-item-base) a(25%));
+  --selectable-item-color-focus: color(var(--component-bg) blend(var(--selectable-item-base) 25%));
   --selectable-item-color-focus--inverted: var(--selectable-item-color--inverted);
-  --selectable-item-color-active: color(var(--selectable-item-base) a(25%));
+  --selectable-item-color-active: color(var(--component-bg) blend(var(--selectable-item-base) 25%));
   --selectable-item-color-active--inverted: var(--selectable-item-color--inverted);
-  --selectable-item-color-highlighted: color(var(--selectable-item-base) a(30%));
+  --selectable-item-color-highlighted: color(
+    var(--component-bg) blend(var(--selectable-item-base) 30%)
+  );
 
-  /*
-    Selected Item
-  */
+  /* Selected Item */
   --selected-item-color: var(--selectable-item-base);
   --selected-item-color--inverted: color(var(--selectable-item-base) contrast(80%));
-  --selected-item-color-hover: var(--selectable-item-base);
-  --selected-item-color-hover--inverted: color(var(--selectable-item-base) contrast(80%));
+  --selected-item-color-hover: var(--selected-item-color);
+  --selected-item-color-hover--inverted: var(--selected-item-color--inverted);
 }