@databricks/design-system 2.0.8 → 2.0.10

package/dist/design-tokens/system-tokens/colors-light-tokens.css

@@ -0,0 +1,103 @@
+:where(:root), :where(.du-bois-light) {
+  /* Neutral */
+  --db-surface-base: var(--db-color-background-primary);
+  --db-surface-subtle: var(--db-color-background-secondary);
+  --db-surface-strong: #f5f5f5;
+
+  --db-surface-inverse: var(--db-color-tooltip-background-tooltip);
+  --db-surface-active: var(--db-color-table-background-selected-default);
+  --db-surface-hover: var(--db-color-table-background-unselected-hover);
+  --db-surface-disabled: var(--db-color-action-disabled-background);
+
+  --db-surface-selected: var(--db-color-table-background-selected-hover);
+  --db-surface-selected-hover: var(--db-color-table-background-selected-hover);
+  --db-surface-selected-active: var(--db-color-table-background-selected-hover); /* no distinct active value */
+
+  /* Surface alpha-blending modifiers */
+  --db-surface-backdrop: var(--db-color-overlay-overlay);
+  /* TODO: surface-tint for containers that distinguish some content */
+
+  --db-text-base: var(--db-color-text-primary);
+  --db-text-subtle: var(--db-color-text-secondary);
+  --db-text-strong: var(--db-color-text-primary);
+  --db-text-disabled: var(--db-color-action-disabled-text);
+  --db-text-suggestion: var(--db-color-text-placeholder);
+  --db-text-inverse: var(--db-color-tooltip-text-tooltip);
+
+  --db-border-base: var(--db-color-border);
+  --db-border-subtle: #f5f5f5;
+  --db-border-strong: var(--db-color-border-accessible);
+  --db-border-hover: #737373;
+  --db-border-active: #a3a3a3;
+  --db-border-disabled: var(--db-color-action-disabled-border);
+
+  /* Accent */
+  --db-accent-surface: var(--db-color-action-primary-background-default);
+  --db-accent-surface-subtle: var(--db-color-action-default-background-hover);
+  --db-accent-surface-strong: var(--db-color-action-primary-background-default);
+
+  --db-accent-surface-hover: var(--db-color-action-primary-background-hover);
+  --db-accent-surface-active: var(--db-color-action-primary-background-press); /* no distinct active value */
+  --db-accent-surface-selected: var(--db-color-action-primary-background-press);
+
+  /* In the current design, the text color for an accent surface does not change with hover, active, etc. */
+  --db-accent-text: var(--db-color-action-link-default);
+  --db-text-on-accent-surface: var(--db-color-action-primary-text-default);
+
+  --db-accent-border: var(--db-color-action-primary-background-default);
+  --db-accent-border-hover: var(--db-color-action-primary-background-hover);
+  --db-accent-border-active: var(--db-color-action-primary-background-press);
+
+  /* Negative */
+  --db-negative-surface: var(--db-color-action-danger-primary-background-default);
+  --db-negative-surface-subtle: var(--db-color-background-danger);
+  --db-negative-surface-strong: var(--db-color-action-danger-primary-background-default);
+
+  --db-negative-surface-hover: var(--db-color-action-danger-primary-background-hover);
+  --db-negative-surface-active: var(--db-color-action-danger-primary-background-press); /* no distinct active value */
+  --db-negative-surface-selected: #fbd0d8;
+
+  --db-negative-text: var(--db-color-text-validation-danger);
+  --db-text-on-negative-surface: var(--db-color-action-danger-primary-text);
+
+  --db-negative-border: var(--db-color-action-danger-default-border-default);
+  --db-negative-border-hover: var(--db-color-action-danger-default-border-hover);
+  --db-negative-border-active: var(--db-color-action-danger-default-border-press);
+
+  /* Caution */
+  --db-caution-surface: #fceaca;
+  --db-caution-surface-subtle: var(--db-color-background-warning);
+  --db-caution-surface-strong: #de7921;
+
+  --db-caution-surface-hover: #be501e;
+  --db-caution-surface-active: #93320b;
+  --db-caution-surface-selected: #f2be88;
+
+  --db-caution-text: var(--db-color-text-validation-warning);
+  --db-text-on-caution-surface: #141414;
+
+  --db-caution-border: var(--db-color-border-warning);
+  --db-caution-border-hover: #be501e;
+  --db-caution-border-active: #93320b;
+
+  /* Positive */
+  --db-positive-surface: #d4f7df;
+  --db-positive-surface-subtle: var(--db-color-background-success);
+  --db-positive-surface-strong: #277c43;
+
+  --db-positive-surface-hover: #115026;
+  --db-positive-surface-active: #093919;
+  --db-positive-surface-selected: #b1ecc5;
+
+  --db-positive-text: var(--db-color-text-validation-success);
+  --db-text-on-positive-surface: #ffffff;
+
+  --db-positive-border: #3ba65e;
+  --db-positive-border-hover: #277c43;
+  --db-positive-border-active: #115026;
+
+  /* Branded */
+  --db-ai-gradient-start: #4299e0;
+  --db-ai-gradient-mid: #ca42e0;
+  --db-ai-gradient-end: #ff5f46;
+}

package/dist/design-tokens/system-tokens/density-tokens.css

@@ -0,0 +1,28 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  --db-layout-unit: 0.25rem; /* 4px */
+  --db-density-scalar: 1;
+  --db-size-scalar: 1;
+  --db-space-scalar: 1;
+
+  /* Size and spacing are the same steps, but with their own scalars included in the calc. */
+
+  --db-size-1: calc(var(--db-layout-unit) * 1 * var(--db-density-scalar) * var(--db-size-scalar)); /* 4px */
+  --db-size-2: calc(var(--db-layout-unit) * 2 * var(--db-density-scalar) * var(--db-size-scalar)); /* 8px */
+  --db-size-3: calc(var(--db-layout-unit) * 3 * var(--db-density-scalar) * var(--db-size-scalar)); /* 12px */
+  --db-size-4: calc(var(--db-layout-unit) * 4 * var(--db-density-scalar) * var(--db-size-scalar)); /* 16px */
+  --db-size-5: calc(var(--db-layout-unit) * 5 * var(--db-density-scalar) * var(--db-size-scalar)); /* 20px */
+  --db-size-6: calc(var(--db-layout-unit) * 6 * var(--db-density-scalar) * var(--db-size-scalar)); /* 24px */
+  --db-size-7: calc(var(--db-layout-unit) * 7 * var(--db-density-scalar) * var(--db-size-scalar)); /* 28px */
+  --db-size-8: calc(var(--db-layout-unit) * 8 * var(--db-density-scalar) * var(--db-size-scalar)); /* 32px */
+  --db-size-10: calc(var(--db-layout-unit) * 10 * var(--db-density-scalar) * var(--db-size-scalar)); /* 40px */
+  --db-size-12: calc(var(--db-layout-unit) * 12 * var(--db-density-scalar) * var(--db-size-scalar)); /* 48px */
+
+  --db-space-0-5: calc(var(--db-layout-unit) * 0.5 * var(--db-density-scalar) * var(--db-space-scalar)); /* 2px */
+  --db-space-1: calc(var(--db-layout-unit) * 1 * var(--db-density-scalar) * var(--db-space-scalar)); /* 4px */
+  --db-space-2: calc(var(--db-layout-unit) * 2 * var(--db-density-scalar) * var(--db-space-scalar)); /* 8px */
+  --db-space-3: calc(var(--db-layout-unit) * 3 * var(--db-density-scalar) * var(--db-space-scalar)); /* 12px */
+  --db-space-4: calc(var(--db-layout-unit) * 4 * var(--db-density-scalar) * var(--db-space-scalar)); /* 16px */
+  --db-space-6: calc(var(--db-layout-unit) * 6 * var(--db-density-scalar) * var(--db-space-scalar)); /* 24px */
+  --db-space-8: calc(var(--db-layout-unit) * 8 * var(--db-density-scalar) * var(--db-space-scalar)); /* 32px */
+  --db-space-10: calc(var(--db-layout-unit) * 10 * var(--db-density-scalar) * var(--db-space-scalar)); /* 40px */
+}

package/dist/design-tokens/system-tokens/elevation-tokens.css

@@ -0,0 +1,6 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  --db-elevation-inset: initial; /*  TODO */
+  --db-elevation-low: 0px 2px 3px -1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(0, 0, 0, 0.02);
+  --db-elevation-med: 0px 2px 16px 0px rgba(0, 0, 0, 0.08);
+  --db-elevation-high: 0px 8px 40px 0px rgba(0, 0, 0, 0.13);
+}

package/dist/design-tokens/system-tokens/focus-ring-tokens.css

@@ -0,0 +1,5 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  --db-focus-ring-color: var(--db-color-action-default-border-focus);
+  --db-focus-ring-width: 2px;
+  --db-focus-ring-offset: 2px;
+}

package/dist/design-tokens/system-tokens/shape-tokens.css

@@ -0,0 +1,8 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  --db-shape-control: 4px;
+  --db-shape-control-large: 999px;
+  --db-shape-container-small: 8px;
+  --db-shape-container-medium: 12px;
+  --db-shape-container-large: 16px;
+  --db-shape-pill: 999px;
+}

package/dist/design-tokens/system-tokens/typography-tokens.css

@@ -0,0 +1,24 @@
+:where(:root), :where(.du-bois-light), :where(.du-bois-dark) {
+  --db-font-family:
+    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --db-numeric-font-family: var(--db-font-family);
+  --db-mono-font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+
+  --db-font-size-xs: 0.6875rem; /* 11px */
+  --db-font-size-sm: 0.75rem; /* 12px */
+  --db-font-size-base: 0.8125rem; /* 13px */
+  --db-font-size-md: 0.875rem; /* 14px */
+  --db-font-size-lg: 0.9375rem; /* 15px */
+  --db-font-size-xl: 1rem; /* 16px */
+  --db-font-size-2xl: 1.25rem; /* 20px */
+  --db-font-size-3xl: 1.5rem; /* 24px */
+  --db-font-size-4xl: 2rem; /* 32px */
+
+  /* TODO: media query for mobile font sizes */
+
+  /* dbui v1 ships 400 and 600 only */
+  --db-font-weight-normal: 400;
+  --db-font-weight-medium: initial; /*  TODO */
+  --db-font-weight-semibold: 600;
+  --db-font-weight-bold: initial; /*  TODO */
+}

package/dist/dubois-colors.less

@@ -154,6 +154,7 @@
 @dubois-light-borderAccessible: #6F6F6F;
 @dubois-light-borderDanger: #FBD0D8;
 @dubois-light-borderWarning: #F8D4A5;
+@dubois-light-certified: #2272B4;
 @dubois-light-codeBackground: rgba(82, 82, 82, 0.0800);
 @dubois-light-composerBackground: #FFFFFF;
 @dubois-light-iconTrending: #FF3621;
@@ -263,6 +264,7 @@
 @dubois-dark-borderAccessible: #C0CDD8;
 @dubois-dark-borderDanger: #E65B77;
 @dubois-dark-borderWarning: #DE7921;
+@dubois-dark-certified: #4299E0;
 @dubois-dark-codeBackground: #37444F;
 @dubois-dark-composerBackground: #1F272D;
 @dubois-dark-iconTrending: #FF3621;

package/dist/icon-metadata.json

@@ -19,6 +19,14 @@
     "classification": "Action",
     "description": "Open, external link, pop out, new tab"
   },
+  "ChatNewTabIcon": {
+    "classification": "Indicator",
+    "description": "Chat opens in a new tab or window"
+  },
+  "ChatSpinnerIcon": {
+    "classification": "Indicator",
+    "description": "Chat loading, conversation in progress"
+  },
   "CloseIcon": {
     "classification": "Component",
     "description": "Close, dismiss, x, cancel, remove"