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

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @osdk/react-components-styles
 
+## 0.2.0-beta.14
+
+### Minor Changes
+
+- c35231f: add cbac css tokens and create cbac-components package
+
+## 0.2.0-beta.13
+
+### Minor Changes
+
+- 7080b01: Add base form layout with header, footer, field components, and CSS token variables for theming
+- dffac63: Fix styling nits
+- b373588: Styling fix with global border-box
+
 ## 0.2.0-beta.12
 
 ### Minor Changes

package/package.json

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

package/src/index.css

@@ -3,10 +3,15 @@
 
 /* Level 2 tokens */
 @import "./tokens/button.css";
+@import "./tokens/cbac-picker.css";
 @import "./tokens/checkbox.css";
 @import "./tokens/dialog.css";
 @import "./tokens/draggable.css";
 @import "./tokens/filter-list.css";
+@import "./tokens/form.css";
+@import "./tokens/input.css";
 @import "./tokens/table.css";
 @import "./tokens/tooltip.css";
+@import "./tokens/datetime-picker.css";
 @import "./tokens/pdf-viewer.css";
+

package/src/tokens/base.css

@@ -174,7 +174,19 @@
   --osdk-iconography-size-small: var(--osdk-typography-size-body-large);
   --osdk-iconography-color-muted: var(--osdk-intent-default-rest);
 
+  /* Global styling */
   font-family: var(--osdk-typography-family-default);
   color: var(--osdk-typography-color-default-rest);
   font-size: var(--osdk-typography-size-body-medium);
+
+  /* Blueprint icon color override to inherit surrounding text color */
+  .bp6-icon {
+    fill: currentColor;
+  }
+
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
 }

package/src/tokens/cbac-picker.css

@@ -0,0 +1,119 @@
+/* CBAC Picker Styling */
+:root {
+  /* Banner */
+  --osdk-cbac-banner-padding: calc(var(--osdk-surface-spacing) * 1)
+    calc(var(--osdk-surface-spacing) * 2);
+  --osdk-cbac-banner-font-size: var(--osdk-typography-size-body-small);
+  --osdk-cbac-banner-font-weight: var(--osdk-typography-weight-bold);
+  --osdk-cbac-banner-text-align: center;
+  --osdk-cbac-banner-border-radius: var(--osdk-surface-border-radius);
+
+  --osdk-cbac-banner-border-color: var(--osdk-surface-border-color-default);
+
+  /* Marking Button */
+  --osdk-cbac-marking-button-padding: calc(var(--osdk-surface-spacing) * 0.5)
+    calc(var(--osdk-surface-spacing) * 1.5);
+  --osdk-cbac-marking-button-border-radius: 0;
+  --osdk-cbac-marking-button-font-size: var(
+    --osdk-typography-size-body-small
+  );
+  --osdk-cbac-marking-button-gap: var(--osdk-surface-spacing);
+  --osdk-cbac-marking-button-color-default: var(
+    --osdk-typography-color-default-rest
+  );
+  --osdk-cbac-marking-button-bg-default: transparent;
+  --osdk-cbac-marking-button-border-color-default: var(
+    --osdk-surface-border-color-default
+  );
+  --osdk-cbac-marking-button-color-selected: var(
+    --osdk-intent-primary-foreground
+  );
+  --osdk-cbac-marking-button-bg-selected: var(--osdk-intent-primary-rest);
+  --osdk-cbac-marking-button-border-color-selected: var(
+    --osdk-intent-primary-rest
+  );
+  --osdk-cbac-marking-button-color-implied: var(--osdk-intent-primary-rest);
+  --osdk-cbac-marking-button-bg-implied: transparent;
+  --osdk-cbac-marking-button-border-color-implied: var(
+    --osdk-surface-border-color-default
+  );
+  --osdk-cbac-marking-button-color-disallowed: var(
+    --osdk-intent-default-disabled
+  );
+  --osdk-cbac-marking-button-bg-disallowed: transparent;
+  --osdk-cbac-marking-button-border-color-disallowed: var(
+    --osdk-intent-default-disabled
+  );
+
+  /* Picker Layout */
+  --osdk-cbac-picker-padding: calc(var(--osdk-surface-spacing) * 2);
+  --osdk-cbac-picker-category-gap: calc(var(--osdk-surface-spacing) * 3);
+  --osdk-cbac-picker-category-title-font-size: var(
+    --osdk-typography-size-body-small
+  );
+  --osdk-cbac-picker-category-title-font-weight: var(
+    --osdk-typography-weight-default
+  );
+  --osdk-cbac-picker-category-title-color: var(
+    --osdk-typography-color-default-rest
+  );
+  --osdk-cbac-picker-category-title-letter-spacing: normal;
+  --osdk-cbac-picker-marking-grid-columns: 4;
+  --osdk-cbac-picker-marking-grid-border-color: var(
+    --osdk-surface-border-color-default
+  );
+
+  /* Info Banner */
+  --osdk-cbac-info-banner-bg: var(--osdk-intent-primary-subtle);
+  --osdk-cbac-info-banner-color: var(--osdk-intent-primary-rest);
+  --osdk-cbac-info-banner-padding: calc(var(--osdk-surface-spacing) * 1.5)
+    calc(var(--osdk-surface-spacing) * 2);
+  --osdk-cbac-info-banner-font-size: var(--osdk-typography-size-body-small);
+  --osdk-cbac-info-banner-border-radius: var(--osdk-surface-border-radius);
+
+  /* Validation Warning */
+  --osdk-cbac-validation-warning-bg: var(--osdk-intent-warning-subtle);
+  --osdk-cbac-validation-warning-color: var(--osdk-intent-warning-rest);
+  --osdk-cbac-validation-warning-padding: calc(var(--osdk-surface-spacing) * 1.5)
+    calc(var(--osdk-surface-spacing) * 2);
+  --osdk-cbac-validation-warning-font-size: var(
+    --osdk-typography-size-body-small
+  );
+  --osdk-cbac-validation-warning-border-radius: var(
+    --osdk-surface-border-radius
+  );
+  --osdk-cbac-validation-warning-chip-bg: var(--osdk-surface-background-color-default);
+  --osdk-cbac-validation-warning-max-height: 200px;
+  --osdk-cbac-validation-warning-chip-border-color: var(
+    --osdk-surface-border-color-default
+  );
+
+  /* Popover */
+  --osdk-cbac-popover-max-width: 400px;
+  --osdk-cbac-popover-padding: calc(var(--osdk-surface-spacing) * 3);
+  --osdk-cbac-popover-section-gap: calc(var(--osdk-surface-spacing) * 2);
+  --osdk-cbac-popover-pill-padding: calc(var(--osdk-surface-spacing) * 0.5)
+    calc(var(--osdk-surface-spacing) * 1.5);
+  --osdk-cbac-popover-pill-border-radius: var(--osdk-surface-border-radius);
+
+  /* Popover Skeleton */
+  --osdk-cbac-skeleton-bg: var(--osdk-surface-background-color-default-hover);
+  --osdk-cbac-skeleton-border-radius: var(--osdk-surface-border-radius);
+
+  /* Popover Warning Callout */
+  --osdk-cbac-warning-callout-bg: var(--osdk-intent-warning-subtle);
+  --osdk-cbac-warning-callout-color: var(--osdk-intent-warning-rest);
+  --osdk-cbac-warning-callout-padding: calc(var(--osdk-surface-spacing) * 1.5)
+    calc(var(--osdk-surface-spacing) * 2);
+  --osdk-cbac-warning-callout-border-radius: var(--osdk-surface-border-radius);
+  --osdk-cbac-warning-callout-font-size: var(
+    --osdk-typography-size-body-small
+  );
+
+  /* Category Overflow */
+  --osdk-cbac-overflow-button-padding: var(--osdk-cbac-marking-button-padding);
+  --osdk-cbac-overflow-button-font-size: var(
+    --osdk-cbac-marking-button-font-size
+  );
+  --osdk-cbac-overflow-list-max-height: 240px;
+}

package/src/tokens/datetime-picker.css

@@ -0,0 +1,98 @@
+/* Datetime Picker Styling */
+:root {
+  /* Input */
+  --osdk-datetime-input-font-family: var(--osdk-typography-family-default);
+  --osdk-datetime-input-font-size: var(--osdk-typography-size-body-medium);
+  --osdk-datetime-input-padding: var(--osdk-surface-spacing)
+    calc(var(--osdk-surface-spacing) * 2);
+  --osdk-datetime-input-border: var(--osdk-surface-border);
+  --osdk-datetime-input-border-radius: var(--osdk-surface-border-radius);
+  --osdk-datetime-input-bg: var(--osdk-background-primary);
+  --osdk-datetime-input-color: var(--osdk-typography-color-default-rest);
+  --osdk-datetime-input-focus-border-color: var(--osdk-intent-primary-rest);
+  --osdk-datetime-input-focus-outline: var(--osdk-focus-outline);
+  --osdk-datetime-input-focus-outline-offset: var(
+    --osdk-focus-visible-outline-offset
+  );
+  --osdk-datetime-input-error-border-color: var(--osdk-intent-danger-rest);
+  --osdk-datetime-input-error-color: var(--osdk-typography-color-danger-rest);
+
+  /* Popover */
+  --osdk-datetime-popover-bg: var(--osdk-background-primary);
+  --osdk-datetime-popover-border: var(--osdk-surface-border);
+  --osdk-datetime-popover-border-radius: var(--osdk-surface-border-radius);
+  --osdk-datetime-popover-padding: calc(var(--osdk-surface-spacing) * 2);
+  --osdk-datetime-popover-z-index: var(--osdk-surface-z-index-3);
+
+  /* Calendar */
+  --osdk-datetime-calendar-font-family: var(--osdk-typography-family-default);
+  --osdk-datetime-calendar-font-size: var(--osdk-typography-size-body-small);
+  --osdk-datetime-calendar-cell-size: calc(var(--osdk-surface-spacing) * 8);
+  --osdk-datetime-calendar-gap: 2px;
+
+  /* Calendar header */
+  --osdk-datetime-calendar-caption-font-size: var(
+    --osdk-typography-size-body-medium
+  );
+  --osdk-datetime-calendar-caption-font-weight: var(
+    --osdk-typography-weight-bold
+  );
+
+  /* Calendar weekday header */
+  --osdk-datetime-calendar-weekday-color: var(--osdk-typography-color-muted);
+  --osdk-datetime-calendar-weekday-font-size: var(
+    --osdk-typography-size-body-x-small
+  );
+
+  /* Calendar day cells */
+  --osdk-datetime-calendar-day-border-radius: var(--osdk-surface-border-radius);
+  --osdk-datetime-calendar-day-hover-bg: var(
+    --osdk-surface-background-color-default-hover
+  );
+  --osdk-datetime-calendar-day-active-bg: var(
+    --osdk-surface-background-color-default-active
+  );
+
+  /* Calendar selected day */
+  --osdk-datetime-calendar-selected-bg: var(--osdk-intent-primary-rest);
+  --osdk-datetime-calendar-selected-color: var(
+    --osdk-intent-primary-foreground
+  );
+  --osdk-datetime-calendar-selected-hover-bg: var(--osdk-intent-primary-hover);
+
+  /* Calendar today */
+  --osdk-datetime-calendar-today-font-weight: var(
+    --osdk-typography-weight-bold
+  );
+
+  /* Calendar disabled */
+  --osdk-datetime-calendar-disabled-color: var(--osdk-intent-default-disabled);
+
+  /* Calendar outside month */
+  --osdk-datetime-calendar-outside-color: var(--osdk-typography-color-muted);
+
+  /* Calendar nav buttons */
+  --osdk-datetime-calendar-nav-button-size: calc(
+    var(--osdk-surface-spacing) * 7
+  );
+  --osdk-datetime-calendar-nav-button-border-radius: var(
+    --osdk-surface-border-radius
+  );
+  --osdk-datetime-calendar-nav-button-hover-bg: var(
+    --osdk-surface-background-color-default-hover
+  );
+
+  /* Calendar chevron */
+  --osdk-datetime-calendar-chevron-size: calc(var(--osdk-surface-spacing) * 4);
+
+  /* Time input footer */
+  --osdk-datetime-time-padding-top: calc(var(--osdk-surface-spacing) * 2);
+  --osdk-datetime-time-border-top: var(--osdk-surface-border);
+
+  /* Placeholder */
+  --osdk-datetime-input-placeholder-opacity: 0.6;
+
+  /* Calendar fallback / loading */
+  --osdk-datetime-calendar-fallback-width: 280px;
+  --osdk-datetime-calendar-fallback-height: 300px;
+}

package/src/tokens/form.css

@@ -0,0 +1,29 @@
+:root {
+  /* Form layout */
+  --osdk-form-content-padding: calc(var(--osdk-surface-spacing) * 4);
+  --osdk-form-field-gap: calc(var(--osdk-surface-spacing) * 4);
+
+  /* Form header */
+  --osdk-form-header-border-color: var(--osdk-surface-border-color-default);
+  --osdk-form-header-font-size: var(--osdk-typography-size-body-large);
+  --osdk-form-header-font-weight: var(--osdk-typography-weight-bold);
+  --osdk-form-header-color: var(--osdk-typography-color-default-rest);
+  --osdk-form-header-block-padding: calc(var(--osdk-surface-spacing) * 3);
+  --osdk-form-header-inline-padding: var(--osdk-form-content-padding);
+
+  /* Form footer */
+  --osdk-form-footer-border-color: var(--osdk-surface-border-color-default);
+
+  /* Form labels */
+  --osdk-form-label-font-size: var(--osdk-typography-size-body-medium);
+  --osdk-form-label-font-weight: var(--osdk-typography-weight-bold);
+  --osdk-form-label-color: var(--osdk-typography-color-default-rest);
+  --osdk-form-label-field-gap: calc(var(--osdk-surface-spacing) * 1.5);
+
+  /* Required indicator */
+  --osdk-form-required-color: var(--osdk-intent-danger-rest);
+
+  /* Validation errors */
+  --osdk-form-error-font-size: var(--osdk-typography-size-body-small);
+  --osdk-form-error-color: var(--osdk-typography-color-danger-rest);
+}

package/src/tokens/input.css

@@ -0,0 +1,34 @@
+:root {
+  /* Input dimensions */
+  --osdk-input-min-height: 30px;
+  --osdk-input-padding: calc(var(--osdk-surface-spacing) * 1.5)
+    calc(var(--osdk-surface-spacing) * 2.5);
+  --osdk-input-border-radius: var(--osdk-surface-border-radius);
+
+  /* Input borders */
+  --osdk-input-border-width: var(--osdk-surface-border-width);
+  --osdk-input-border-color: var(--osdk-surface-border-color-default);
+  --osdk-input-border-color-focus: var(--osdk-intent-primary-rest);
+
+  /* Input backgrounds */
+  --osdk-input-bg: var(--osdk-surface-background-color-default-rest);
+  --osdk-input-bg-hover: var(--osdk-surface-background-color-default-hover);
+
+  /* Input typography */
+  --osdk-input-color: var(--osdk-typography-color-default-rest);
+  --osdk-input-placeholder-color: var(--osdk-typography-color-muted);
+  --osdk-input-font-size: var(--osdk-typography-size-body-medium);
+  --osdk-input-font-family: var(--osdk-typography-family-default);
+
+  /* Input transitions */
+  --osdk-input-transition-duration: var(--osdk-emphasis-transition-duration);
+  --osdk-input-transition-ease: var(--osdk-emphasis-ease-default);
+
+  /* Input focus ring */
+  --osdk-input-focus-width: var(--osdk-emphasis-focus-width);
+  --osdk-input-focus-color: var(--osdk-emphasis-focus-color);
+  --osdk-input-focus-offset: var(--osdk-emphasis-focus-offset);
+
+  /* Input disabled */
+  --osdk-input-disabled-opacity: 0.5;
+}

package/src/tokens/table.css

@@ -8,8 +8,7 @@
   --osdk-table-header-divider: var(--osdk-table-border);
   --osdk-table-cell-divider: var(--osdk-table-border-width) solid transparent;
   --osdk-table-row-divider: var(--osdk-table-border);
-  --osdk-table-pinned-column-border: calc(var(--osdk-table-border-width) * 2)
-    solid var(--osdk-table-border-color);
+  --osdk-table-pinned-column-border: var(--osdk-table-border);
 
   /* Table Header */
   --osdk-table-header-height: 50px;
@@ -49,6 +48,9 @@
   --osdk-table-header-menu-color-active: var(
     --osdk-typography-color-default-rest
   );
+  --osdk-table-header-menu-icon-color: var(
+    --osdk-table-header-menu-color
+  );
   --osdk-table-header-menu-bg-hover: var(--osdk-custom-color-gray-1);
   --osdk-table-header-menu-bg-active: var(--osdk-custom-color-gray-2);
 
@@ -59,7 +61,6 @@
   /* Table Skeleton loading */
   --osdk-table-skeleton-color-from: var(--osdk-background-skeleton-from);
   --osdk-table-skeleton-color-to: var(--osdk-background-skeleton-to);
-  --osdk-table-skeleton-border-color: var(--osdk-custom-color-light-gray-1);
 
   /* Column Config Dialog */
   --osdk-table-column-config-dialog-min-width: 800px;