@osdk/react-components-styles 0.2.0-beta.11 → 0.2.0-beta.12

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @osdk/react-components-styles
 
+## 0.2.0-beta.12
+
+### Minor Changes
+
+- bc46400: Add skeleton loading states and polish checkbox list, histogram, and range filter inputs
+- 7a3c43d: feat(pdf): pdf-viewer component
+
 ## 0.2.0-beta.11
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osdk/react-components-styles",
-  "version": "0.2.0-beta.11",
+  "version": "0.2.0-beta.12",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/src/index.css

@@ -9,3 +9,4 @@
 @import "./tokens/filter-list.css";
 @import "./tokens/table.css";
 @import "./tokens/tooltip.css";
+@import "./tokens/pdf-viewer.css";

package/src/tokens/filter-list.css

@@ -48,7 +48,9 @@
   );
   --osdk-filter-header-reset-padding: calc(var(--osdk-surface-spacing) * 0.5)
     calc(var(--osdk-surface-spacing) * 1.5);
-  --osdk-filter-header-collapse-icon-size: 6px;
+  --osdk-filter-header-collapse-icon-size: calc(
+    var(--osdk-surface-spacing) * 1.5
+  );
   --osdk-filter-header-collapse-icon-border-width: var(
     --osdk-surface-border-width
   );
@@ -213,8 +215,8 @@
   --osdk-filter-listogram-label-color: var(
     --osdk-typography-color-default-rest
   );
-  --osdk-filter-listogram-bar-height: 8px;
-  --osdk-filter-listogram-bar-width: 50px;
+  --osdk-filter-listogram-bar-height: calc(var(--osdk-surface-spacing) * 2);
+  --osdk-filter-listogram-bar-width: calc(var(--osdk-surface-spacing) * 12.5);
   --osdk-filter-listogram-bar-bg: var(--osdk-palette-gray-100);
   --osdk-filter-listogram-bar-border-radius: var(
     --osdk-surface-border-radius
@@ -234,9 +236,9 @@
 
   /* Range Input Tokens */
   --osdk-filter-range-gap: calc(var(--osdk-surface-spacing) * 2);
-  --osdk-filter-range-histogram-height: 60px;
-  --osdk-filter-range-histogram-bar-gap: 2px;
-  --osdk-filter-range-histogram-bar-min-width: 4px;
+  --osdk-filter-range-histogram-height: calc(var(--osdk-surface-spacing) * 15);
+  --osdk-filter-range-histogram-bar-gap: calc(var(--osdk-surface-spacing) * 0.5);
+  --osdk-filter-range-histogram-bar-min-width: var(--osdk-surface-spacing);
   --osdk-filter-range-histogram-bar-color: var(--osdk-palette-gray-200);
   --osdk-filter-range-histogram-bar-active-color: var(
     --osdk-intent-primary-rest
@@ -361,7 +363,7 @@
   );
 
   /* Exclude Dropdown Popup */
-  --osdk-filter-item-exclude-dropdown-min-width: 120px;
+  --osdk-filter-item-exclude-dropdown-min-width: calc(var(--osdk-surface-spacing) * 30);
 
   /* Overflow / Dropdown Menu */
   --osdk-filter-item-menu-bg: var(--osdk-background-primary);
@@ -385,10 +387,10 @@
     --osdk-surface-border-radius
   );
   --osdk-filter-item-menu-separator-color: var(--osdk-surface-border-color);
-  --osdk-filter-item-menu-check-size: 12px;
+  --osdk-filter-item-menu-check-size: calc(var(--osdk-surface-spacing) * 3);
 
   /* Collapsed Filter List */
-  --osdk-filter-list-collapsed-width: 40px;
+  --osdk-filter-list-collapsed-width: calc(var(--osdk-surface-spacing) * 10);
   --osdk-filter-list-collapsed-label-font-family: var(
     --osdk-typography-family-default
   );
@@ -400,7 +402,7 @@
   );
 
   /* Color Dot */
-  --osdk-filter-checkbox-color-dot-size: 8px;
+  --osdk-filter-checkbox-color-dot-size: calc(var(--osdk-surface-spacing) * 2);
 
   /* Multi Select Count */
   --osdk-filter-multiselect-count-font-family: var(
@@ -415,6 +417,6 @@
   --osdk-filter-content-fade-duration: var(--osdk-emphasis-transition-duration);
 
   /* Skeleton Loading */
-  --osdk-filter-skeleton-text-height: 12px;
-  --osdk-filter-skeleton-count-width: 20px;
+  --osdk-filter-skeleton-text-height: calc(var(--osdk-surface-spacing) * 1.5);
+  --osdk-filter-skeleton-count-width: calc(var(--osdk-surface-spacing) * 2.5);
 }

package/src/tokens/pdf-viewer.css

@@ -0,0 +1,45 @@
+:root {
+  /* PDF Viewer - Container */
+  --osdk-pdf-viewer-bg: var(--osdk-background-primary);
+  --osdk-pdf-viewer-border: var(--osdk-surface-border);
+
+  /* PDF Viewer - Toolbar */
+  --osdk-pdf-viewer-toolbar-bg: var(--osdk-background-secondary);
+  --osdk-pdf-viewer-toolbar-border: var(--osdk-surface-border);
+  --osdk-pdf-viewer-toolbar-color: var(--osdk-typography-color-default-rest);
+  --osdk-pdf-viewer-toolbar-gap: var(--osdk-surface-spacing);
+
+  /* PDF Viewer - Search */
+  --osdk-pdf-viewer-search-highlight: color-mix(
+    in srgb,
+    var(--osdk-intent-warning-rest) 40%,
+    transparent
+  );
+  --osdk-pdf-viewer-search-active: color-mix(
+    in srgb,
+    var(--osdk-intent-warning-rest) 70%,
+    transparent
+  );
+  --osdk-pdf-viewer-search-bar-bg: var(--osdk-background-primary);
+
+  /* PDF Viewer - Annotations */
+  --osdk-pdf-viewer-annotation-highlight: color-mix(
+    in srgb,
+    var(--osdk-intent-primary-rest) 30%,
+    transparent
+  );
+  --osdk-pdf-viewer-annotation-underline: var(--osdk-intent-primary-rest);
+  --osdk-pdf-viewer-annotation-comment: var(--osdk-intent-warning-rest);
+  --osdk-pdf-viewer-annotation-pin: var(--osdk-intent-danger-rest);
+
+  /* PDF Viewer - Page */
+  --osdk-pdf-viewer-page-shadow: var(--osdk-surface-shadow-2);
+  --osdk-pdf-viewer-page-gap: var(--osdk-surface-spacing);
+
+  /* PDF Viewer - Sidebar */
+  --osdk-pdf-viewer-sidebar-width: 200px;
+  --osdk-pdf-viewer-sidebar-bg: var(--osdk-background-secondary);
+  --osdk-pdf-viewer-sidebar-border: var(--osdk-surface-border);
+  --osdk-pdf-viewer-sidebar-active-border: var(--osdk-intent-primary-rest);
+  --osdk-pdf-viewer-sidebar-thumbnail-gap: var(--osdk-surface-spacing);
+}