@databricks/design-system 2.0.3 → 2.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +42 -0
- package/dist/RHFControlledTypeaheadComboboxV2-DsH-nIEk.js +172 -0
- package/dist/RHFControlledTypeaheadComboboxV2-DsH-nIEk.js.map +1 -0
- package/dist/{WizardStepContentWrapper-DsAS2ZAT.js → WizardStepContentWrapper-Bq1wm0V7.js} +669 -435
- package/dist/WizardStepContentWrapper-Bq1wm0V7.js.map +1 -0
- package/dist/index-BRAVZg-S.js +8308 -0
- package/dist/index-BRAVZg-S.js.map +1 -0
- package/dist/index-dark.css +395 -128
- package/dist/index-dark.mitigated.css +398 -131
- package/dist/index.css +844 -277
- package/dist/index.js +25 -8119
- package/dist/index.js.map +1 -1
- package/dist/index.mitigated.css +848 -281
- package/dist/patterns.js +1 -1
- package/dist/test-utils/rtl.js +1 -1
- package/dist/test-utils/rtl.js.map +1 -1
- package/dist-types/design-system/Alert/Alert.d.ts +1 -1
- package/dist-types/design-system/Breadcrumb/Breadcrumb.d.ts +10 -3
- package/dist-types/design-system/Button/AntDButtonInternal.d.ts +21 -0
- package/dist-types/design-system/Button/Button.d.ts +3 -19
- package/dist-types/design-system/Button/NativeButton.d.ts +3 -0
- package/dist-types/design-system/Button/getBtnClassName.d.ts +17 -0
- package/dist-types/design-system/Button/index.d.ts +1 -0
- package/dist-types/design-system/DesignSystemProvider/DesignSystemProvider.d.ts +28 -6
- package/dist-types/design-system/DesignSystemProvider/DesignTokenScopeWithEmotionTheme.d.ts +23 -0
- package/dist-types/design-system/DesignSystemProvider/index.d.ts +1 -0
- package/dist-types/design-system/FormV2/RHFAdapters.d.ts +8 -0
- package/dist-types/design-system/FormV2/RHFControlledTypeaheadComboboxV2.d.ts +58 -0
- package/dist-types/design-system/Icon/Icon.d.ts +2 -2
- package/dist-types/design-system/Icon/__generated/icons/ColorMappingEditIcon.d.ts +4 -0
- package/dist-types/design-system/Icon/__generated/icons/ColorMappingIcon.d.ts +4 -0
- package/dist-types/design-system/Icon/__generated/icons/MicrophoneIcon.d.ts +4 -0
- package/dist-types/design-system/Icon/__generated/icons/MicrophoneOffIcon.d.ts +4 -0
- package/dist-types/design-system/Icon/__generated/icons/OperatorIcon.d.ts +4 -0
- package/dist-types/design-system/Icon/__generated/icons/VoiceModeIcon.d.ts +4 -0
- package/dist-types/design-system/Icon/__generated/icons/index.d.ts +6 -0
- package/dist-types/design-system/Overflow/Overflow.d.ts +3 -1
- package/dist-types/design-system/Overflow/OverflowPopover.d.ts +2 -1
- package/dist-types/design-system/TypeaheadComboboxV2/TypeaheadComboboxMenu.d.ts +2 -0
- package/dist-types/design-system/shape-tokens.d.ts +1 -1
- package/dist-types/test-utils/rtl/buttonVariants.d.ts +11 -0
- package/dist-types/~patterns/Wizard/WizardStepNavigation.d.ts +9 -0
- package/dist-types/~patterns/Wizard/index.d.ts +1 -0
- package/package.json +12 -4
- package/dist/WizardStepContentWrapper-DsAS2ZAT.js.map +0 -1
package/dist/index.css
CHANGED
|
@@ -15980,27 +15980,27 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
15980
15980
|
Use this for any layout where items are laid out vertically.
|
|
15981
15981
|
|
|
15982
15982
|
\3c !-- Basic: default gap between each child -->
|
|
15983
|
-
<div class="
|
|
15983
|
+
<div class="db-stack">
|
|
15984
15984
|
<h2>Title</h2>
|
|
15985
15985
|
<p>Body</p>
|
|
15986
15986
|
<button>Action</button>
|
|
15987
15987
|
</div>
|
|
15988
15988
|
|
|
15989
15989
|
\3c !-- Wider gap for this instance -->
|
|
15990
|
-
<div class="
|
|
15990
|
+
<div class="db-stack" style="--db-stack-gap: var(--db-spacing-lg)">…</div>
|
|
15991
15991
|
|
|
15992
15992
|
\3c !-- Don't stretch children to full width (e.g. left-aligned buttons) -->
|
|
15993
|
-
<div class="
|
|
15993
|
+
<div class="db-stack" style="--db-stack-align: flex-start">…</div>
|
|
15994
15994
|
*/
|
|
15995
|
-
.
|
|
15995
|
+
.db-stack {
|
|
15996
15996
|
/* These variables act as the *parameters* for the stack instance. */
|
|
15997
|
-
--
|
|
15998
|
-
--
|
|
15997
|
+
--db-stack-gap: var(--db-space-4);
|
|
15998
|
+
--db-stack-align: stretch;
|
|
15999
15999
|
|
|
16000
16000
|
display: flex;
|
|
16001
16001
|
flex-direction: column;
|
|
16002
|
-
align-items: var(--
|
|
16003
|
-
gap: var(--
|
|
16002
|
+
align-items: var(--db-stack-align);
|
|
16003
|
+
gap: var(--db-stack-gap);
|
|
16004
16004
|
}
|
|
16005
16005
|
|
|
16006
16006
|
/**
|
|
@@ -16008,108 +16008,128 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16008
16008
|
Use this for any layout where items are laid out horizontally and should wrap on smaller viewport sizes.
|
|
16009
16009
|
|
|
16010
16010
|
\3c !-- Basic: items wrap as needed -->
|
|
16011
|
-
<div class="
|
|
16011
|
+
<div class="db-cluster">
|
|
16012
16012
|
<span>one</span>
|
|
16013
16013
|
<span>two</span>
|
|
16014
16014
|
<span>three</span>
|
|
16015
16015
|
</div>
|
|
16016
16016
|
|
|
16017
16017
|
\3c !-- Push children apart (e.g. title left, actions right) -->
|
|
16018
|
-
<div class="
|
|
16018
|
+
<div class="db-cluster" style="--db-cluster-justify: space-between">…</div>
|
|
16019
16019
|
|
|
16020
16020
|
\3c !-- Looser gap for this instance -->
|
|
16021
|
-
<div class="
|
|
16021
|
+
<div class="db-cluster" style="--db-cluster-gap: var(--db-spacing-sm)">…</div>
|
|
16022
16022
|
*/
|
|
16023
|
-
.
|
|
16023
|
+
.db-cluster {
|
|
16024
16024
|
/* These variables act as the *parameters* for the cluster instance. */
|
|
16025
|
-
--
|
|
16026
|
-
--
|
|
16027
|
-
--
|
|
16025
|
+
--db-cluster-gap: var(--db-space-2);
|
|
16026
|
+
--db-cluster-align: center;
|
|
16027
|
+
--db-cluster-justify: flex-start;
|
|
16028
16028
|
|
|
16029
16029
|
display: flex;
|
|
16030
16030
|
flex-wrap: wrap;
|
|
16031
|
-
align-items: var(--
|
|
16032
|
-
justify-content: var(--
|
|
16033
|
-
gap: var(--
|
|
16031
|
+
align-items: var(--db-cluster-align);
|
|
16032
|
+
justify-content: var(--db-cluster-justify);
|
|
16033
|
+
gap: var(--db-cluster-gap);
|
|
16034
16034
|
}
|
|
16035
16035
|
|
|
16036
16036
|
:where(:root), :where(.du-bois-light) {
|
|
16037
16037
|
/* Neutral */
|
|
16038
|
-
--db-
|
|
16039
|
-
--db-subtle
|
|
16040
|
-
--db-strong
|
|
16038
|
+
--db-surface-base: var(--db-color-background-primary);
|
|
16039
|
+
--db-surface-subtle: var(--db-color-background-secondary);
|
|
16040
|
+
--db-surface-strong: initial; /* TODO */
|
|
16041
16041
|
|
|
16042
|
-
--db-
|
|
16043
|
-
--db-
|
|
16044
|
-
--db-
|
|
16042
|
+
--db-surface-inverse: initial; /* TODO */
|
|
16043
|
+
--db-surface-active: var(--db-color-table-background-selected-default);
|
|
16044
|
+
--db-surface-hover: var(--db-color-table-background-unselected-hover);
|
|
16045
|
+
--db-surface-disabled: var(--db-color-action-disabled-background);
|
|
16045
16046
|
|
|
16046
|
-
--db-
|
|
16047
|
-
--db-
|
|
16048
|
-
--db-
|
|
16047
|
+
--db-surface-selected: var(--db-color-table-background-selected-hover);
|
|
16048
|
+
--db-surface-selected-hover: initial; /* TODO */;
|
|
16049
|
+
--db-surface-selected-active: initial; /* TODO */;
|
|
16049
16050
|
|
|
16050
|
-
|
|
16051
|
-
--db-
|
|
16052
|
-
|
|
16053
|
-
--db-neutral-surface-disabled: var(--db-color-action-disabled-background);
|
|
16054
|
-
--db-text-on-neutral-surface-disabled: var(--db-color-action-disabled-text);
|
|
16051
|
+
/* Surface alpha-blending modifiers */
|
|
16052
|
+
--db-surface-backdrop: initial; /* TODO */;
|
|
16053
|
+
/* TODO: surface-tint for containers that distinguish some content */
|
|
16055
16054
|
|
|
16056
|
-
|
|
16057
|
-
--db-
|
|
16058
|
-
--db-
|
|
16059
|
-
--db-
|
|
16055
|
+
--db-text-base: var(--db-color-text-primary);
|
|
16056
|
+
--db-text-subtle: var(--db-color-text-secondary);
|
|
16057
|
+
--db-text-strong: initial; /* TODO */
|
|
16058
|
+
--db-text-disabled: var(--db-color-action-disabled-text);
|
|
16059
|
+
--db-text-suggestion: initial; /* TODO - e.g. input placeholder, loading text */
|
|
16060
|
+
--db-text-inverse: initial; /* TODO, stark contrast e.g. tooltip text */
|
|
16060
16061
|
|
|
16061
|
-
--db-
|
|
16062
|
-
--db-
|
|
16063
|
-
--db-
|
|
16064
|
-
--db-
|
|
16062
|
+
--db-border-base: var(--db-color-border);
|
|
16063
|
+
--db-border-subtle: initial; /* TODO */
|
|
16064
|
+
--db-border-strong: var(--db-color-border-accessible);
|
|
16065
|
+
--db-border-hover: initial; /* TODO */
|
|
16066
|
+
--db-border-active: initial; /* TODO */
|
|
16067
|
+
--db-border-disabled: initial; /* TODO */
|
|
16065
16068
|
|
|
16066
|
-
|
|
16067
|
-
--db-
|
|
16068
|
-
--db-
|
|
16069
|
+
/* Accent */
|
|
16070
|
+
--db-accent-surface: var(--db-color-action-primary-background-default);
|
|
16071
|
+
--db-accent-surface-subtle: var(--db-color-action-default-background-hover);
|
|
16072
|
+
--db-accent-surface-strong: var(--db-color-action-primary-background-hover);
|
|
16069
16073
|
|
|
16070
|
-
--db-
|
|
16071
|
-
--db-
|
|
16072
|
-
--db-
|
|
16073
|
-
--db-primary-surface-disabled: var(--db-color-action-disabled-background);
|
|
16074
|
-
--db-text-on-primary-surface-disabled: var(--db-color-action-disabled-text);
|
|
16074
|
+
--db-accent-surface-hover: var(--db-color-action-primary-background-hover);
|
|
16075
|
+
--db-accent-surface-active: initial; /* TODO */
|
|
16076
|
+
--db-accent-surface-selected: var(--db-color-action-primary-background-press);
|
|
16075
16077
|
|
|
16076
|
-
/*
|
|
16077
|
-
--db-
|
|
16078
|
-
--db-
|
|
16079
|
-
--db-strong-error-surface: var(--db-color-action-danger-primary-background-hover);
|
|
16078
|
+
/* In the current design, the text color for an accent surface does not change with hover, active, etc. */
|
|
16079
|
+
--db-accent-text: var(--db-color-action-link-default);
|
|
16080
|
+
--db-text-on-accent-surface: var(--db-color-action-primary-text-default);
|
|
16080
16081
|
|
|
16081
|
-
--db-
|
|
16082
|
-
--db-
|
|
16083
|
-
--db-
|
|
16084
|
-
--db-strong-text-on-error-surface: var(--db-color-action-danger-primary-text);
|
|
16082
|
+
--db-accent-border: var(--db-color-action-primary-background-default);
|
|
16083
|
+
--db-accent-border-hover: var(--db-color-action-primary-background-press);
|
|
16084
|
+
--db-accent-border-active: initial; /* TODO */;
|
|
16085
16085
|
|
|
16086
|
-
|
|
16087
|
-
--db-
|
|
16088
|
-
--db-
|
|
16086
|
+
/* Negative */
|
|
16087
|
+
--db-negative-surface: var(--db-color-action-danger-primary-background-default);
|
|
16088
|
+
--db-negative-surface-subtle: var(--db-color-background-danger);
|
|
16089
|
+
--db-negative-surface-strong: var(--db-color-action-danger-primary-background-hover);
|
|
16089
16090
|
|
|
16090
|
-
--db-
|
|
16091
|
-
--db-
|
|
16092
|
-
--db-
|
|
16093
|
-
--db-error-surface-disabled: var(--db-color-action-disabled-background);
|
|
16094
|
-
--db-text-on-error-surface-disabled: var(--db-color-action-disabled-text);
|
|
16091
|
+
--db-negative-surface-hover: var(--db-color-action-danger-primary-background-hover);
|
|
16092
|
+
--db-negative-surface-active: initial; /* TODO */
|
|
16093
|
+
--db-negative-surface-selected: var(--db-color-action-danger-primary-background-press);
|
|
16095
16094
|
|
|
16096
|
-
|
|
16097
|
-
--db-
|
|
16098
|
-
--db-subtle-warning-surface: var(--db-color-background-warning);
|
|
16095
|
+
--db-negative-text: var(--db-color-text-validation-danger);
|
|
16096
|
+
--db-text-on-negative-surface: var(--db-color-action-danger-primary-text);
|
|
16099
16097
|
|
|
16100
|
-
--db-
|
|
16101
|
-
--db-
|
|
16098
|
+
--db-negative-border: var(--db-color-action-danger-default-border-default);
|
|
16099
|
+
--db-negative-border-hover: initial; /* TODO */
|
|
16100
|
+
--db-negative-border-active: initial; /* TODO */
|
|
16102
16101
|
|
|
16103
|
-
|
|
16102
|
+
/* Caution */
|
|
16103
|
+
--db-caution-surface: initial; /* TODO */
|
|
16104
|
+
--db-caution-surface-subtle: var(--db-color-background-warning);
|
|
16105
|
+
--db-caution-surface-strong: initial; /* TODO */
|
|
16104
16106
|
|
|
16105
|
-
/*
|
|
16106
|
-
--db-
|
|
16107
|
-
--db-
|
|
16107
|
+
--db-caution-surface-hover: initial; /* TODO */
|
|
16108
|
+
--db-caution-surface-active: initial; /* TODO */
|
|
16109
|
+
--db-caution-surface-selected: initial; /* TODO */
|
|
16108
16110
|
|
|
16109
|
-
--db-text-
|
|
16110
|
-
--db-
|
|
16111
|
+
--db-caution-text: var(--db-color-text-validation-warning);
|
|
16112
|
+
--db-text-on-caution-surface: initial; /* TODO */
|
|
16111
16113
|
|
|
16112
|
-
--db-
|
|
16114
|
+
--db-caution-border: var(--db-color-border-warning);
|
|
16115
|
+
--db-caution-border-hover: initial; /* TODO */
|
|
16116
|
+
--db-caution-border-active: initial; /* TODO */
|
|
16117
|
+
|
|
16118
|
+
/* Positive */
|
|
16119
|
+
--db-positive-surface: initial; /* TODO */
|
|
16120
|
+
--db-positive-surface-subtle: var(--db-color-background-success);
|
|
16121
|
+
--db-positive-surface-strong: initial; /* TODO */
|
|
16122
|
+
|
|
16123
|
+
--db-positive-surface-hover: initial; /* TODO */
|
|
16124
|
+
--db-positive-surface-active: initial; /* TODO */
|
|
16125
|
+
--db-positive-surface-selected: initial; /* TODO */
|
|
16126
|
+
|
|
16127
|
+
--db-positive-text: var(--db-color-text-validation-success);
|
|
16128
|
+
--db-text-on-positive-surface: initial; /* TODO */
|
|
16129
|
+
|
|
16130
|
+
--db-positive-border: initial; /* TODO */
|
|
16131
|
+
--db-positive-border-hover: initial; /* TODO */
|
|
16132
|
+
--db-positive-border-active: initial; /* TODO */
|
|
16113
16133
|
}
|
|
16114
16134
|
|
|
16115
16135
|
|
|
@@ -16118,32 +16138,39 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16118
16138
|
--db-layout-unit: 0.25rem; /* 4px */
|
|
16119
16139
|
--db-density-scalar: 1;
|
|
16120
16140
|
--db-size-scalar: 1;
|
|
16121
|
-
--db-
|
|
16141
|
+
--db-space-scalar: 1;
|
|
16122
16142
|
|
|
16123
16143
|
/* Size and spacing are the same steps, but with their own scalars included in the calc. */
|
|
16124
16144
|
|
|
16125
|
-
--db-size-
|
|
16126
|
-
--db-size-
|
|
16127
|
-
--db-size-
|
|
16128
|
-
--db-size-
|
|
16129
|
-
--db-size-
|
|
16130
|
-
--db-size-
|
|
16145
|
+
--db-size-1: calc(var(--db-layout-unit) * 1 * var(--db-density-scalar) * var(--db-size-scalar)); /* 4px */
|
|
16146
|
+
--db-size-2: calc(var(--db-layout-unit) * 2 * var(--db-density-scalar) * var(--db-size-scalar)); /* 8px */
|
|
16147
|
+
--db-size-3: calc(var(--db-layout-unit) * 3 * var(--db-density-scalar) * var(--db-size-scalar)); /* 12px */
|
|
16148
|
+
--db-size-4: calc(var(--db-layout-unit) * 4 * var(--db-density-scalar) * var(--db-size-scalar)); /* 16px */
|
|
16149
|
+
--db-size-5: calc(var(--db-layout-unit) * 5 * var(--db-density-scalar) * var(--db-size-scalar)); /* 20px */
|
|
16150
|
+
--db-size-6: calc(var(--db-layout-unit) * 6 * var(--db-density-scalar) * var(--db-size-scalar)); /* 24px */
|
|
16151
|
+
--db-size-7: calc(var(--db-layout-unit) * 7 * var(--db-density-scalar) * var(--db-size-scalar)); /* 28px */
|
|
16152
|
+
--db-size-8: calc(var(--db-layout-unit) * 8 * var(--db-density-scalar) * var(--db-size-scalar)); /* 32px */
|
|
16153
|
+
--db-size-10: calc(var(--db-layout-unit) * 10 * var(--db-density-scalar) * var(--db-size-scalar)); /* 40px */
|
|
16154
|
+
--db-size-12: calc(var(--db-layout-unit) * 12 * var(--db-density-scalar) * var(--db-size-scalar)); /* 48px */
|
|
16131
16155
|
|
|
16132
|
-
--db-
|
|
16133
|
-
--db-
|
|
16134
|
-
--db-
|
|
16135
|
-
--db-
|
|
16136
|
-
--db-
|
|
16137
|
-
--db-
|
|
16156
|
+
--db-space-0-5: calc(var(--db-layout-unit) * 0.5 * var(--db-density-scalar) * var(--db-space-scalar)); /* 2px */
|
|
16157
|
+
--db-space-1: calc(var(--db-layout-unit) * 1 * var(--db-density-scalar) * var(--db-space-scalar)); /* 4px */
|
|
16158
|
+
--db-space-2: calc(var(--db-layout-unit) * 2 * var(--db-density-scalar) * var(--db-space-scalar)); /* 8px */
|
|
16159
|
+
--db-space-3: calc(var(--db-layout-unit) * 3 * var(--db-density-scalar) * var(--db-space-scalar)); /* 12px */
|
|
16160
|
+
--db-space-4: calc(var(--db-layout-unit) * 4 * var(--db-density-scalar) * var(--db-space-scalar)); /* 16px */
|
|
16161
|
+
--db-space-6: calc(var(--db-layout-unit) * 6 * var(--db-density-scalar) * var(--db-space-scalar)); /* 24px */
|
|
16162
|
+
--db-space-8: calc(var(--db-layout-unit) * 8 * var(--db-density-scalar) * var(--db-space-scalar)); /* 32px */
|
|
16163
|
+
--db-space-10: calc(var(--db-layout-unit) * 10 * var(--db-density-scalar) * var(--db-space-scalar)); /* 40px */
|
|
16138
16164
|
}
|
|
16139
16165
|
|
|
16140
16166
|
:where(:root), :where(.du-bois-light) {
|
|
16141
16167
|
--db-font-family:
|
|
16142
16168
|
"DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
16169
|
+
--db-numeric-font-family: var(--db-font-family);
|
|
16143
16170
|
--db-mono-font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
|
|
16144
16171
|
|
|
16145
|
-
--db-font-size-
|
|
16146
|
-
--db-font-size-
|
|
16172
|
+
--db-font-size-xs: 0.6875rem; /* 11px */
|
|
16173
|
+
--db-font-size-sm: 0.75rem; /* 12px */
|
|
16147
16174
|
--db-font-size-base: 0.8125rem; /* 13px */
|
|
16148
16175
|
--db-font-size-md: 0.875rem; /* 14px */
|
|
16149
16176
|
--db-font-size-lg: 0.9375rem; /* 15px */
|
|
@@ -16152,6 +16179,8 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16152
16179
|
--db-font-size-3xl: 1.5rem; /* 24px */
|
|
16153
16180
|
--db-font-size-4xl: 2rem; /* 32px */
|
|
16154
16181
|
|
|
16182
|
+
/* TODO: media query for mobile font sizes */
|
|
16183
|
+
|
|
16155
16184
|
/* Du Bois v1 ships 400 and 600 only */
|
|
16156
16185
|
--db-font-weight-normal: 400;
|
|
16157
16186
|
--db-font-weight-medium: initial; /* TODO */
|
|
@@ -16169,6 +16198,16 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16169
16198
|
:where(:root), :where(.du-bois-light) {
|
|
16170
16199
|
--db-focus-ring-color: var(--db-color-action-default-border-focus);
|
|
16171
16200
|
--db-focus-ring-width: 2px;
|
|
16201
|
+
--db-focus-ring-offset: 2px;
|
|
16202
|
+
}
|
|
16203
|
+
|
|
16204
|
+
:where(:root), :where(.du-bois-light) {
|
|
16205
|
+
--db-shape-control: 4px;
|
|
16206
|
+
--db-shape-control-large: 999px;
|
|
16207
|
+
--db-shape-container-small: 8px;
|
|
16208
|
+
--db-shape-container-medium: 12px;
|
|
16209
|
+
--db-shape-container-large: 16px;
|
|
16210
|
+
--db-shape-pill: 999px;
|
|
16172
16211
|
}
|
|
16173
16212
|
|
|
16174
16213
|
:where(:root), :where(.du-bois-light) {
|
|
@@ -16176,31 +16215,31 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16176
16215
|
--db-selection-toggle-border-radius: 4px;
|
|
16177
16216
|
|
|
16178
16217
|
/* Color */
|
|
16179
|
-
--db-selection-toggle-surface: var(--db-
|
|
16180
|
-
--db-selection-toggle-mark: var(--db-text-on-
|
|
16181
|
-
--db-selection-toggle-text: var(--db-text-
|
|
16182
|
-
--db-selection-toggle-border: var(--db-strong
|
|
16218
|
+
--db-selection-toggle-surface: var(--db-surface-base);
|
|
16219
|
+
--db-selection-toggle-mark: var(--db-text-on-accent-surface);
|
|
16220
|
+
--db-selection-toggle-text: var(--db-text-base);
|
|
16221
|
+
--db-selection-toggle-border: var(--db-border-strong);
|
|
16183
16222
|
|
|
16184
|
-
--db-selection-toggle-surface-hover: var(--db-
|
|
16185
|
-
--db-selection-toggle-surface-press: var(--db-
|
|
16186
|
-
--db-selection-toggle-surface-checked: var(--db-
|
|
16187
|
-
--db-selection-toggle-surface-checked-hover: var(--db-
|
|
16188
|
-
--db-selection-toggle-surface-checked-press: var(--db-
|
|
16189
|
-
--db-selection-toggle-surface-disabled: var(--db-
|
|
16190
|
-
--db-selection-toggle-surface-checked-disabled: var(--db-
|
|
16223
|
+
--db-selection-toggle-surface-hover: var(--db-surface-hover);
|
|
16224
|
+
--db-selection-toggle-surface-press: var(--db-surface-selected);
|
|
16225
|
+
--db-selection-toggle-surface-checked: var(--db-accent-surface);
|
|
16226
|
+
--db-selection-toggle-surface-checked-hover: var(--db-accent-surface-hover);
|
|
16227
|
+
--db-selection-toggle-surface-checked-press: var(--db-accent-surface-selected);
|
|
16228
|
+
--db-selection-toggle-surface-disabled: var(--db-surface-disabled);
|
|
16229
|
+
--db-selection-toggle-surface-checked-disabled: var(--db-surface-disabled);
|
|
16191
16230
|
|
|
16192
|
-
--db-selection-toggle-border-hover: var(--db-
|
|
16193
|
-
--db-selection-toggle-border-press: var(--db-
|
|
16194
|
-
--db-selection-toggle-border-disabled: var(--db-
|
|
16231
|
+
--db-selection-toggle-border-hover: var(--db-accent-surface-hover);
|
|
16232
|
+
--db-selection-toggle-border-press: var(--db-accent-surface-selected);
|
|
16233
|
+
--db-selection-toggle-border-disabled: var(--db-border-base);
|
|
16195
16234
|
|
|
16196
|
-
--db-selection-toggle-mark-disabled: var(--db-text-
|
|
16197
|
-
--db-selection-toggle-text-disabled: var(--db-text-
|
|
16235
|
+
--db-selection-toggle-mark-disabled: var(--db-text-disabled);
|
|
16236
|
+
--db-selection-toggle-text-disabled: var(--db-text-disabled);
|
|
16198
16237
|
|
|
16199
16238
|
--db-selection-toggle-shadow-checked: 0 0 0 1px var(--db-color-action-primary-background-default);
|
|
16200
16239
|
|
|
16201
16240
|
/* Density */
|
|
16202
|
-
--db-selection-toggle-size: var(--db-size-
|
|
16203
|
-
--db-selection-toggle-label-spacing: var(--db-
|
|
16241
|
+
--db-selection-toggle-size: var(--db-size-4);
|
|
16242
|
+
--db-selection-toggle-label-spacing: var(--db-space-2);
|
|
16204
16243
|
|
|
16205
16244
|
/* Motion */
|
|
16206
16245
|
--db-selection-toggle-transition-duration: 120ms;
|
|
@@ -16237,8 +16276,8 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16237
16276
|
--db-checkbox-size: var(--db-selection-toggle-size);
|
|
16238
16277
|
--db-checkbox-label-spacing: var(--db-selection-toggle-label-spacing);
|
|
16239
16278
|
--db-checkbox-focus-ring-width: var(--db-focus-ring-width);
|
|
16240
|
-
--db-checkbox-indeterminate-mark-width: var(--db-size-
|
|
16241
|
-
--db-checkbox-indeterminate-mark-height: calc(var(--db-size-
|
|
16279
|
+
--db-checkbox-indeterminate-mark-width: var(--db-size-2); /* 8px */
|
|
16280
|
+
--db-checkbox-indeterminate-mark-height: calc(var(--db-size-1) * 0.75); /* 3px */
|
|
16242
16281
|
|
|
16243
16282
|
/* Motion */
|
|
16244
16283
|
--db-checkbox-transition-duration: var(--db-selection-toggle-transition-duration);
|
|
@@ -16252,21 +16291,21 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16252
16291
|
*
|
|
16253
16292
|
* Structure (assumed by the React component):
|
|
16254
16293
|
*
|
|
16255
|
-
* <label class="
|
|
16256
|
-
* <input type="checkbox" class="
|
|
16257
|
-
* <span class="
|
|
16258
|
-
* <svg class="
|
|
16259
|
-
* <span class="
|
|
16294
|
+
* <label class="db-checkbox">
|
|
16295
|
+
* <input type="checkbox" class="db-checkbox-input" />
|
|
16296
|
+
* <span class="db-checkbox-indicator"> ← border + fill react to state
|
|
16297
|
+
* <svg class="db-checkbox-checkmark" .../> ← visible when :checked
|
|
16298
|
+
* <span class="db-checkbox-dash" /> ← visible when :indeterminate
|
|
16260
16299
|
* </span>
|
|
16261
|
-
* <span class="
|
|
16300
|
+
* <span class="db-checkbox-label">{children}</span>
|
|
16262
16301
|
* </label>
|
|
16263
16302
|
*
|
|
16264
|
-
* State and hiding rules target `.
|
|
16303
|
+
* State and hiding rules target `.db-checkbox-input` — the checkbox's OWN input —
|
|
16265
16304
|
* never a bare `input`: consumers may render an inline <input> (e.g. a number
|
|
16266
16305
|
* field) inside the label children, and a descendant `input` selector would hide
|
|
16267
16306
|
* / absolutely-position that field and mis-drive the `:has(…)` state rules. */
|
|
16268
16307
|
|
|
16269
|
-
.
|
|
16308
|
+
.db-checkbox {
|
|
16270
16309
|
/* `display: flex` (block-level), NOT `inline-flex`: an inline-flex root puts
|
|
16271
16310
|
* the label inside an inline-line-box whose leading pushes block-level siblings
|
|
16272
16311
|
* (e.g. `<FormMessage>`) down by a few pixels — making validation messages sit
|
|
@@ -16282,7 +16321,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16282
16321
|
user-select: none;
|
|
16283
16322
|
/* No `gap` here — spacing between indicator and label, plus the trailing
|
|
16284
16323
|
* whitespace that gives sibling checkboxes their visual separation, lives
|
|
16285
|
-
* on `.
|
|
16324
|
+
* on `.db-checkbox-label` as padding-inline. Matches AntD's `.{prefix}-checkbox + span`
|
|
16286
16325
|
* rule and the prior Emotion-based NativeCheckbox implementation. */
|
|
16287
16326
|
min-height: var(--db-line-height-base, 20px);
|
|
16288
16327
|
width: fit-content;
|
|
@@ -16292,43 +16331,43 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16292
16331
|
* visually hidden (opacity:0), so an `input:hover` rule wouldn't be visible
|
|
16293
16332
|
* anyway. Putting `:hover` on the root also makes the entire label area
|
|
16294
16333
|
* — not just the indicator square — drive the visual feedback. */
|
|
16295
|
-
.
|
|
16334
|
+
.db-checkbox:hover:has(.db-checkbox-input:not(:disabled, :checked, :indeterminate)) .db-checkbox-indicator {
|
|
16296
16335
|
background-color: var(--db-checkbox-surface-hover);
|
|
16297
16336
|
border-color: var(--db-checkbox-border-hover);
|
|
16298
16337
|
}
|
|
16299
16338
|
|
|
16300
|
-
.
|
|
16339
|
+
.db-checkbox:active:has(.db-checkbox-input:not(:disabled, :checked, :indeterminate)) .db-checkbox-indicator {
|
|
16301
16340
|
background-color: var(--db-checkbox-surface-press);
|
|
16302
16341
|
border-color: var(--db-checkbox-border-press);
|
|
16303
16342
|
}
|
|
16304
16343
|
|
|
16305
16344
|
/* Selected fill — checked and indeterminate share the same surface. */
|
|
16306
|
-
.
|
|
16345
|
+
.db-checkbox:has(.db-checkbox-input:is(:checked, :indeterminate)) .db-checkbox-indicator {
|
|
16307
16346
|
background-color: var(--db-checkbox-surface-checked);
|
|
16308
16347
|
border-color: var(--db-checkbox-surface-checked);
|
|
16309
16348
|
}
|
|
16310
16349
|
|
|
16311
|
-
.
|
|
16350
|
+
.db-checkbox:hover:has(.db-checkbox-input:is(:checked, :indeterminate):not(:disabled)) .db-checkbox-indicator {
|
|
16312
16351
|
background-color: var(--db-checkbox-surface-checked-hover);
|
|
16313
16352
|
border-color: var(--db-checkbox-surface-checked-hover);
|
|
16314
16353
|
}
|
|
16315
16354
|
|
|
16316
|
-
.
|
|
16355
|
+
.db-checkbox:active:has(.db-checkbox-input:is(:checked, :indeterminate):not(:disabled)) .db-checkbox-indicator {
|
|
16317
16356
|
background-color: var(--db-checkbox-surface-checked-press);
|
|
16318
16357
|
border-color: var(--db-checkbox-surface-checked-press);
|
|
16319
16358
|
}
|
|
16320
16359
|
|
|
16321
16360
|
/* Mark visibility. */
|
|
16322
|
-
.
|
|
16361
|
+
.db-checkbox:has(.db-checkbox-input:checked) .db-checkbox-checkmark {
|
|
16323
16362
|
opacity: 1;
|
|
16324
16363
|
}
|
|
16325
16364
|
|
|
16326
|
-
.
|
|
16365
|
+
.db-checkbox:has(.db-checkbox-input:indeterminate) .db-checkbox-dash {
|
|
16327
16366
|
opacity: 1;
|
|
16328
16367
|
}
|
|
16329
16368
|
|
|
16330
16369
|
/* Focus-visible (keyboard only). */
|
|
16331
|
-
.
|
|
16370
|
+
.db-checkbox:has(.db-checkbox-input:focus-visible) .db-checkbox-indicator {
|
|
16332
16371
|
outline: var(--db-checkbox-focus-ring-width) solid var(--db-checkbox-focus-ring);
|
|
16333
16372
|
outline-offset: 4px;
|
|
16334
16373
|
}
|
|
@@ -16336,25 +16375,25 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16336
16375
|
/* Disabled (covers unchecked, checked, indeterminate). Sourced from
|
|
16337
16376
|
* `input:disabled` so the standalone-disabled and group-disabled paths both
|
|
16338
16377
|
* land here without needing a separate root modifier class. */
|
|
16339
|
-
.
|
|
16378
|
+
.db-checkbox:has(.db-checkbox-input:disabled) {
|
|
16340
16379
|
cursor: not-allowed;
|
|
16341
16380
|
}
|
|
16342
16381
|
|
|
16343
|
-
.
|
|
16382
|
+
.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-label {
|
|
16344
16383
|
color: var(--db-checkbox-text-disabled);
|
|
16345
16384
|
}
|
|
16346
16385
|
|
|
16347
|
-
.
|
|
16386
|
+
.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-indicator {
|
|
16348
16387
|
background-color: var(--db-checkbox-surface-disabled);
|
|
16349
16388
|
border-color: var(--db-checkbox-border-disabled);
|
|
16350
16389
|
box-shadow: none;
|
|
16351
16390
|
}
|
|
16352
16391
|
|
|
16353
|
-
.
|
|
16392
|
+
.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-checkmark {
|
|
16354
16393
|
color: var(--db-checkbox-mark-disabled);
|
|
16355
16394
|
}
|
|
16356
16395
|
|
|
16357
|
-
.
|
|
16396
|
+
.db-checkbox:has(.db-checkbox-input:disabled) .db-checkbox-dash {
|
|
16358
16397
|
background-color: var(--db-checkbox-mark-disabled);
|
|
16359
16398
|
}
|
|
16360
16399
|
|
|
@@ -16367,7 +16406,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16367
16406
|
* `pointer-events: none` (the prior native-only behavior) is what regressed
|
|
16368
16407
|
* interaction tests vs. the AntD variant. `cursor: inherit` tracks the label's
|
|
16369
16408
|
* pointer / disabled `not-allowed` cursor so the box keeps AntD's cursor too. */
|
|
16370
|
-
.
|
|
16409
|
+
.db-checkbox .db-checkbox-input {
|
|
16371
16410
|
position: absolute;
|
|
16372
16411
|
inset: 0;
|
|
16373
16412
|
inline-size: var(--db-checkbox-size);
|
|
@@ -16381,7 +16420,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16381
16420
|
* Vertical math: aligns the indicator to the cap-height of the first text
|
|
16382
16421
|
* line so checkbox + label sit on the same visual baseline even when the
|
|
16383
16422
|
* label wraps. */
|
|
16384
|
-
.
|
|
16423
|
+
.db-checkbox .db-checkbox-indicator {
|
|
16385
16424
|
display: grid;
|
|
16386
16425
|
place-items: center;
|
|
16387
16426
|
flex-shrink: 0;
|
|
@@ -16404,7 +16443,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16404
16443
|
box-shadow var(--db-checkbox-transition-duration) ease;
|
|
16405
16444
|
}
|
|
16406
16445
|
|
|
16407
|
-
.
|
|
16446
|
+
.db-checkbox .db-checkbox-indicator > .db-checkbox-checkmark {
|
|
16408
16447
|
grid-area: 1 / 1;
|
|
16409
16448
|
inline-size: 100%;
|
|
16410
16449
|
block-size: 100%;
|
|
@@ -16413,7 +16452,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16413
16452
|
transition: opacity var(--db-checkbox-transition-duration) ease;
|
|
16414
16453
|
}
|
|
16415
16454
|
|
|
16416
|
-
.
|
|
16455
|
+
.db-checkbox .db-checkbox-indicator > .db-checkbox-checkmark path {
|
|
16417
16456
|
fill: none;
|
|
16418
16457
|
stroke: currentColor;
|
|
16419
16458
|
stroke-width: 2;
|
|
@@ -16421,7 +16460,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16421
16460
|
stroke-linejoin: round;
|
|
16422
16461
|
}
|
|
16423
16462
|
|
|
16424
|
-
.
|
|
16463
|
+
.db-checkbox .db-checkbox-indicator > .db-checkbox-dash {
|
|
16425
16464
|
grid-area: 1 / 1;
|
|
16426
16465
|
inline-size: var(--db-checkbox-indeterminate-mark-width);
|
|
16427
16466
|
block-size: var(--db-checkbox-indeterminate-mark-height);
|
|
@@ -16438,7 +16477,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16438
16477
|
* `padding-right` extends the checkbox's bounding box so adjacent checkboxes in a
|
|
16439
16478
|
* flex row sit ~16px apart (8px trailing + 8px group `gap`) — same visual rhythm
|
|
16440
16479
|
* as the AntD variant. */
|
|
16441
|
-
.
|
|
16480
|
+
.db-checkbox .db-checkbox-label {
|
|
16442
16481
|
color: var(--db-checkbox-text);
|
|
16443
16482
|
padding-inline: var(--db-checkbox-label-spacing);
|
|
16444
16483
|
word-break: break-word;
|
|
@@ -16451,7 +16490,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16451
16490
|
*
|
|
16452
16491
|
* Each helper-text class is listed once per theme (`du-bois-light-*` /
|
|
16453
16492
|
* `du-bois-dark-*`). The selectors deliberately repeat the root/group class
|
|
16454
|
-
* (`.
|
|
16493
|
+
* (`.db-checkbox.db-checkbox`) to push specificity to (0,3,0). That
|
|
16455
16494
|
* overrides `FormMessage`'s own `&&`-doubled `margin-top: 8px` declared with
|
|
16456
16495
|
* Emotion at runtime — without doubling we'd lose on the specificity tie and
|
|
16457
16496
|
* the validation message would keep an 8px gap below the checkbox. */
|
|
@@ -16459,46 +16498,46 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16459
16498
|
/* Single checkbox followed by Hint and/or FormMessage. Indents the helper text
|
|
16460
16499
|
* by 24px so it aligns with the start of the label, and removes the default
|
|
16461
16500
|
* vertical margin Hint/FormMessage carry. */
|
|
16462
|
-
.
|
|
16463
|
-
.
|
|
16464
|
-
.
|
|
16465
|
-
.
|
|
16466
|
-
.
|
|
16467
|
-
.
|
|
16468
|
-
padding-left: var(--db-
|
|
16501
|
+
.db-checkbox.db-checkbox + .du-bois-light-hint,
|
|
16502
|
+
.db-checkbox.db-checkbox + .du-bois-dark-hint,
|
|
16503
|
+
.db-checkbox.db-checkbox + .du-bois-light-form-message,
|
|
16504
|
+
.db-checkbox.db-checkbox + .du-bois-dark-form-message,
|
|
16505
|
+
.db-checkbox.db-checkbox + .du-bois-light-hint + .du-bois-light-form-message,
|
|
16506
|
+
.db-checkbox.db-checkbox + .du-bois-dark-hint + .du-bois-dark-form-message {
|
|
16507
|
+
padding-left: var(--db-space-6);
|
|
16469
16508
|
margin-top: 0;
|
|
16470
16509
|
}
|
|
16471
16510
|
|
|
16472
16511
|
/* Group spacing against sibling form text — 8px gap above the group when it
|
|
16473
16512
|
* follows a Hint, 8px gap above a FormMessage when it follows the group.
|
|
16474
16513
|
* Doubled class on the group side beats FormMessage's `&&` for the same reason. */
|
|
16475
|
-
.du-bois-light-hint + .
|
|
16476
|
-
.du-bois-dark-hint + .
|
|
16477
|
-
.
|
|
16478
|
-
.
|
|
16479
|
-
margin-top: var(--db-
|
|
16514
|
+
.du-bois-light-hint + .db-checkbox-group.db-checkbox-group,
|
|
16515
|
+
.du-bois-dark-hint + .db-checkbox-group.db-checkbox-group,
|
|
16516
|
+
.db-checkbox-group.db-checkbox-group + .du-bois-light-form-message,
|
|
16517
|
+
.db-checkbox-group.db-checkbox-group + .du-bois-dark-form-message {
|
|
16518
|
+
margin-top: var(--db-space-2);
|
|
16480
16519
|
}
|
|
16481
16520
|
|
|
16482
|
-
/* CheckboxGroup layout. Vertical delegates to the `.
|
|
16521
|
+
/* CheckboxGroup layout. Vertical delegates to the `.db-stack` primitive; the
|
|
16483
16522
|
* horizontal default stays bespoke because it must NOT wrap (a long row of
|
|
16484
16523
|
* checkboxes overflows horizontally rather than reflowing onto multiple lines),
|
|
16485
|
-
* which is the one thing `.
|
|
16524
|
+
* which is the one thing `.db-cluster` won't do. Both wire their gap to the
|
|
16486
16525
|
* checkbox spacing token so a retheme moves with the rest of the component. */
|
|
16487
|
-
.
|
|
16526
|
+
.db-checkbox-group {
|
|
16488
16527
|
display: flex;
|
|
16489
16528
|
}
|
|
16490
16529
|
|
|
16491
|
-
/* Horizontal (default): single non-wrapping row. `:not(.
|
|
16530
|
+
/* Horizontal (default): single non-wrapping row. `:not(.db-stack)` keeps this
|
|
16492
16531
|
* off the vertical element so it never fights the stack primitive's gap. */
|
|
16493
|
-
.
|
|
16532
|
+
.db-checkbox-group:not(.db-stack) {
|
|
16494
16533
|
flex-wrap: nowrap;
|
|
16495
16534
|
column-gap: var(--db-checkbox-label-spacing);
|
|
16496
16535
|
row-gap: 0;
|
|
16497
16536
|
}
|
|
16498
16537
|
|
|
16499
|
-
/* Vertical: .
|
|
16500
|
-
.
|
|
16501
|
-
--
|
|
16538
|
+
/* Vertical: .db-stack supplies flex-direction + gap; we only retarget the knob. */
|
|
16539
|
+
.db-checkbox-group.db-stack {
|
|
16540
|
+
--db-stack-gap: var(--db-checkbox-label-spacing);
|
|
16502
16541
|
}
|
|
16503
16542
|
|
|
16504
16543
|
:where(:root), :where(.du-bois-light) {
|
|
@@ -16533,7 +16572,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16533
16572
|
/* Density */
|
|
16534
16573
|
--db-radio-size: var(--db-selection-toggle-size);
|
|
16535
16574
|
--db-radio-label-spacing: var(--db-selection-toggle-label-spacing);
|
|
16536
|
-
--db-radio-mark-size: var(--db-size-
|
|
16575
|
+
--db-radio-mark-size: var(--db-size-1);
|
|
16537
16576
|
|
|
16538
16577
|
/* Motion */
|
|
16539
16578
|
--db-radio-transition-duration: var(--db-selection-toggle-transition-duration);
|
|
@@ -16547,12 +16586,12 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16547
16586
|
*
|
|
16548
16587
|
* Structure (assumed by the React component):
|
|
16549
16588
|
*
|
|
16550
|
-
* <label class="
|
|
16589
|
+
* <label class="db-radio">
|
|
16551
16590
|
* <input type="radio" />
|
|
16552
|
-
* <span class="
|
|
16553
|
-
* <span class="
|
|
16591
|
+
* <span class="db-radio-indicator"> ← circle border + fill react to state
|
|
16592
|
+
* <span class="db-radio-dot" /> ← visible when :checked
|
|
16554
16593
|
* </span>
|
|
16555
|
-
* <span class="
|
|
16594
|
+
* <span class="db-radio-label">{children}</span>
|
|
16556
16595
|
* </label>
|
|
16557
16596
|
*
|
|
16558
16597
|
* The root only ever has one <input> descendant, so a bare `input` selector is
|
|
@@ -16561,9 +16600,9 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16561
16600
|
* checkmark/dash, and there is no indeterminate state.
|
|
16562
16601
|
*
|
|
16563
16602
|
* TODO(DUBOIS-452): the indicator/dot state styles below are identical to
|
|
16564
|
-
* NativeCheckbox.css — consolidate them into a shared `.
|
|
16603
|
+
* NativeCheckbox.css — consolidate them into a shared `.db-selection-toggle` class. */
|
|
16565
16604
|
|
|
16566
|
-
.
|
|
16605
|
+
.db-radio {
|
|
16567
16606
|
/* `display: flex` (block-level), NOT `inline-flex`: see NativeCheckbox.css for
|
|
16568
16607
|
* the line-box / sibling-spacing rationale. */
|
|
16569
16608
|
display: flex;
|
|
@@ -16578,38 +16617,38 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16578
16617
|
/* Hover/press live on the root (label), not on the input: the input is
|
|
16579
16618
|
* visually hidden (opacity:0), so an `input:hover` rule wouldn't be visible
|
|
16580
16619
|
* anyway, and the whole label area should drive the feedback. */
|
|
16581
|
-
.
|
|
16620
|
+
.db-radio:hover:has(input:not(:disabled, :checked)) .db-radio-indicator {
|
|
16582
16621
|
background-color: var(--db-radio-surface-hover);
|
|
16583
16622
|
border-color: var(--db-radio-border-hover);
|
|
16584
16623
|
}
|
|
16585
16624
|
|
|
16586
|
-
.
|
|
16625
|
+
.db-radio:active:has(input:not(:disabled, :checked)) .db-radio-indicator {
|
|
16587
16626
|
background-color: var(--db-radio-surface-press);
|
|
16588
16627
|
border-color: var(--db-radio-border-press);
|
|
16589
16628
|
}
|
|
16590
16629
|
|
|
16591
16630
|
/* Selected fill. */
|
|
16592
|
-
.
|
|
16631
|
+
.db-radio:has(input:checked) .db-radio-indicator {
|
|
16593
16632
|
background-color: var(--db-radio-surface-checked);
|
|
16594
16633
|
border-color: var(--db-radio-surface-checked);
|
|
16595
16634
|
}
|
|
16596
16635
|
|
|
16597
16636
|
/* AntD getRadioInputStyles checked hover: background = actionPrimaryBackgroundHover,
|
|
16598
16637
|
* borderColor = actionPrimaryBackgroundPress (a darker ring than the fill). */
|
|
16599
|
-
.
|
|
16638
|
+
.db-radio:hover:has(input:checked:not(:disabled)) .db-radio-indicator {
|
|
16600
16639
|
background-color: var(--db-radio-surface-checked-hover);
|
|
16601
16640
|
border-color: var(--db-radio-border-checked-hover);
|
|
16602
16641
|
}
|
|
16603
16642
|
|
|
16604
16643
|
/* AntD getRadioInputStyles checked active: background = actionDefaultBackgroundPress,
|
|
16605
16644
|
* borderColor = actionDefaultBorderPress (two-tone, not flat). */
|
|
16606
|
-
.
|
|
16645
|
+
.db-radio:active:has(input:checked:not(:disabled)) .db-radio-indicator {
|
|
16607
16646
|
background-color: var(--db-radio-surface-checked-press);
|
|
16608
16647
|
border-color: var(--db-radio-border-checked-press);
|
|
16609
16648
|
}
|
|
16610
16649
|
|
|
16611
16650
|
/* Dot visibility. */
|
|
16612
|
-
.
|
|
16651
|
+
.db-radio:has(input:checked) .db-radio-dot {
|
|
16613
16652
|
opacity: 1;
|
|
16614
16653
|
}
|
|
16615
16654
|
|
|
@@ -16618,14 +16657,14 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16618
16657
|
*
|
|
16619
16658
|
* UNCHECKED focus (AntD `&:not(disabled) > input:focus + inner`): only the border
|
|
16620
16659
|
* color changes to actionPrimaryBackgroundDefault — NO outline ring. */
|
|
16621
|
-
.
|
|
16660
|
+
.db-radio:has(input:focus-visible:not(:checked)) .db-radio-indicator {
|
|
16622
16661
|
border-color: var(--db-radio-border-unchecked-focus);
|
|
16623
16662
|
}
|
|
16624
16663
|
|
|
16625
16664
|
/* CHECKED focus-visible (AntD `&.checked &:not(disabled) > input:focus-visible + inner`):
|
|
16626
16665
|
* background = actionPrimaryBackgroundDefault, borderColor = actionDefaultBorderFocus,
|
|
16627
16666
|
* outline = 1px solid actionPrimaryBackgroundDefault, outlineOffset = 1. */
|
|
16628
|
-
.
|
|
16667
|
+
.db-radio:has(input:focus-visible:checked) .db-radio-indicator {
|
|
16629
16668
|
background-color: var(--db-radio-surface-checked);
|
|
16630
16669
|
border-color: var(--db-radio-border-focus);
|
|
16631
16670
|
outline: 1px solid var(--db-radio-outline-checked-focus);
|
|
@@ -16634,21 +16673,21 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16634
16673
|
|
|
16635
16674
|
/* Disabled (covers checked and unchecked). Sourced from `input:disabled` so the
|
|
16636
16675
|
* standalone-disabled and group-disabled paths both land here. */
|
|
16637
|
-
.
|
|
16676
|
+
.db-radio:has(input:disabled) {
|
|
16638
16677
|
cursor: not-allowed;
|
|
16639
16678
|
}
|
|
16640
16679
|
|
|
16641
|
-
.
|
|
16680
|
+
.db-radio:has(input:disabled) .db-radio-label {
|
|
16642
16681
|
color: var(--db-radio-text-disabled);
|
|
16643
16682
|
}
|
|
16644
16683
|
|
|
16645
|
-
.
|
|
16684
|
+
.db-radio:has(input:disabled) .db-radio-indicator {
|
|
16646
16685
|
background-color: var(--db-radio-surface-disabled);
|
|
16647
16686
|
border-color: var(--db-radio-border-disabled);
|
|
16648
16687
|
box-shadow: none;
|
|
16649
16688
|
}
|
|
16650
16689
|
|
|
16651
|
-
.
|
|
16690
|
+
.db-radio:has(input:disabled) .db-radio-dot {
|
|
16652
16691
|
background-color: var(--db-radio-mark-disabled);
|
|
16653
16692
|
}
|
|
16654
16693
|
|
|
@@ -16661,7 +16700,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16661
16700
|
* `pointer-events: none` (the prior native-only behavior) is what regressed
|
|
16662
16701
|
* interaction tests vs. the AntD variant. `cursor: inherit` tracks the label's
|
|
16663
16702
|
* pointer / disabled `not-allowed` cursor so the circle keeps AntD's cursor too. */
|
|
16664
|
-
.
|
|
16703
|
+
.db-radio input {
|
|
16665
16704
|
position: absolute;
|
|
16666
16705
|
inset: 0;
|
|
16667
16706
|
inline-size: var(--db-radio-size);
|
|
@@ -16674,7 +16713,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16674
16713
|
/* Indicator — circle with the border/fill that responds to state above.
|
|
16675
16714
|
* Vertical math aligns the indicator to the cap-height of the first text line
|
|
16676
16715
|
* so radio + label sit on the same visual baseline even when the label wraps. */
|
|
16677
|
-
.
|
|
16716
|
+
.db-radio .db-radio-indicator {
|
|
16678
16717
|
display: grid;
|
|
16679
16718
|
place-items: center;
|
|
16680
16719
|
flex-shrink: 0;
|
|
@@ -16696,7 +16735,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16696
16735
|
box-shadow var(--db-radio-transition-duration) ease;
|
|
16697
16736
|
}
|
|
16698
16737
|
|
|
16699
|
-
.
|
|
16738
|
+
.db-radio .db-radio-indicator > .db-radio-dot {
|
|
16700
16739
|
grid-area: 1 / 1;
|
|
16701
16740
|
inline-size: var(--db-radio-mark-size);
|
|
16702
16741
|
block-size: var(--db-radio-mark-size);
|
|
@@ -16709,15 +16748,15 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16709
16748
|
/* Honour the user's reduced-motion preference: drop the state-change
|
|
16710
16749
|
* transitions on the indicator and dot so checking/hovering is instant. */
|
|
16711
16750
|
@media (prefers-reduced-motion: reduce) {
|
|
16712
|
-
.
|
|
16713
|
-
.
|
|
16751
|
+
.db-radio .db-radio-indicator,
|
|
16752
|
+
.db-radio .db-radio-indicator > .db-radio-dot {
|
|
16714
16753
|
transition: none;
|
|
16715
16754
|
}
|
|
16716
16755
|
}
|
|
16717
16756
|
|
|
16718
16757
|
/* Padding-inline replicates the AntD `.{prefix} + span` label gap and the
|
|
16719
16758
|
* trailing whitespace that separates adjacent radios in a row. */
|
|
16720
|
-
.
|
|
16759
|
+
.db-radio .db-radio-label {
|
|
16721
16760
|
color: var(--db-radio-text);
|
|
16722
16761
|
padding-inline: var(--db-radio-label-spacing);
|
|
16723
16762
|
word-break: break-word;
|
|
@@ -16727,13 +16766,13 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16727
16766
|
* indent comes from AntD's getCommonRadioGroupStyles (`& > label + hint`) and applies
|
|
16728
16767
|
* to BOTH layouts. The doubled root class pushes specificity to (0,3,0) to beat
|
|
16729
16768
|
* FormMessage's runtime `&&` margin. */
|
|
16730
|
-
.
|
|
16731
|
-
.
|
|
16732
|
-
.
|
|
16733
|
-
.
|
|
16734
|
-
.
|
|
16735
|
-
.
|
|
16736
|
-
padding-inline-start: var(--db-
|
|
16769
|
+
.db-radio.db-radio + .du-bois-light-hint,
|
|
16770
|
+
.db-radio.db-radio + .du-bois-dark-hint,
|
|
16771
|
+
.db-radio.db-radio + .du-bois-light-form-message,
|
|
16772
|
+
.db-radio.db-radio + .du-bois-dark-form-message,
|
|
16773
|
+
.db-radio.db-radio + .du-bois-light-hint + .du-bois-light-form-message,
|
|
16774
|
+
.db-radio.db-radio + .du-bois-dark-hint + .du-bois-dark-form-message {
|
|
16775
|
+
padding-inline-start: var(--db-space-6);
|
|
16737
16776
|
margin-top: 0;
|
|
16738
16777
|
}
|
|
16739
16778
|
|
|
@@ -16741,71 +16780,71 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16741
16780
|
* after a radio gets `marginTop: -sm` (cancels the preceding radio's
|
|
16742
16781
|
* `paddingBottom: sm` so the hint tucks directly under its label) and
|
|
16743
16782
|
* `marginBottom: sm` (gap before the next radio). The negative top margin relies on
|
|
16744
|
-
* the .
|
|
16783
|
+
* the .db-stack gap being 0 (set below). Scoped to .db-stack so it never perturbs
|
|
16745
16784
|
* the horizontal grid, where hints are positioned by grid-row instead. */
|
|
16746
|
-
.
|
|
16747
|
-
.
|
|
16748
|
-
.
|
|
16749
|
-
.
|
|
16750
|
-
.
|
|
16751
|
-
.
|
|
16752
|
-
margin-top: calc(-1 * var(--db-
|
|
16753
|
-
margin-bottom: var(--db-
|
|
16785
|
+
.db-radio-group.db-stack > .db-radio.db-radio + .du-bois-light-hint,
|
|
16786
|
+
.db-radio-group.db-stack > .db-radio.db-radio + .du-bois-dark-hint,
|
|
16787
|
+
.db-radio-group.db-stack > .db-radio.db-radio + .du-bois-light-form-message,
|
|
16788
|
+
.db-radio-group.db-stack > .db-radio.db-radio + .du-bois-dark-form-message,
|
|
16789
|
+
.db-radio-group.db-stack > .db-radio.db-radio + .du-bois-light-hint + .du-bois-light-form-message,
|
|
16790
|
+
.db-radio-group.db-stack > .db-radio.db-radio + .du-bois-dark-hint + .du-bois-dark-form-message {
|
|
16791
|
+
margin-top: calc(-1 * var(--db-space-2));
|
|
16792
|
+
margin-bottom: var(--db-space-2);
|
|
16754
16793
|
}
|
|
16755
16794
|
|
|
16756
16795
|
/* AntD `& > label:last-of-type + hint { marginTop: 0 }`: the last radio has no
|
|
16757
16796
|
* `paddingBottom` to cancel, so its trailing hint keeps its natural top position. */
|
|
16758
|
-
.
|
|
16759
|
-
.
|
|
16760
|
-
.
|
|
16761
|
-
.
|
|
16762
|
-
.
|
|
16763
|
-
.
|
|
16797
|
+
.db-radio-group.db-stack > .db-radio.db-radio:last-of-type + .du-bois-light-hint,
|
|
16798
|
+
.db-radio-group.db-stack > .db-radio.db-radio:last-of-type + .du-bois-dark-hint,
|
|
16799
|
+
.db-radio-group.db-stack > .db-radio.db-radio:last-of-type + .du-bois-light-form-message,
|
|
16800
|
+
.db-radio-group.db-stack > .db-radio.db-radio:last-of-type + .du-bois-dark-form-message,
|
|
16801
|
+
.db-radio-group.db-stack > .db-radio.db-radio:last-of-type + .du-bois-light-hint + .du-bois-light-form-message,
|
|
16802
|
+
.db-radio-group.db-stack > .db-radio.db-radio:last-of-type + .du-bois-dark-hint + .du-bois-dark-form-message {
|
|
16764
16803
|
margin-top: 0;
|
|
16765
16804
|
}
|
|
16766
16805
|
|
|
16767
|
-
.du-bois-light-hint + .
|
|
16768
|
-
.du-bois-dark-hint + .
|
|
16769
|
-
.
|
|
16770
|
-
.
|
|
16771
|
-
margin-top: var(--db-
|
|
16806
|
+
.du-bois-light-hint + .db-radio-group.db-radio-group,
|
|
16807
|
+
.du-bois-dark-hint + .db-radio-group.db-radio-group,
|
|
16808
|
+
.db-radio-group.db-radio-group + .du-bois-light-form-message,
|
|
16809
|
+
.db-radio-group.db-radio-group + .du-bois-dark-form-message {
|
|
16810
|
+
margin-top: var(--db-space-2);
|
|
16772
16811
|
}
|
|
16773
16812
|
|
|
16774
16813
|
/* RadioGroup layout. Vertical (the default) delegates flex-direction to the
|
|
16775
|
-
* .
|
|
16776
|
-
.
|
|
16814
|
+
* .db-stack primitive; horizontal is a two-row grid (mirroring AntD). */
|
|
16815
|
+
.db-radio-group {
|
|
16777
16816
|
display: flex;
|
|
16778
16817
|
}
|
|
16779
16818
|
|
|
16780
|
-
/* Vertical: .
|
|
16819
|
+
/* Vertical: .db-stack supplies flex-direction: column. AntD's vertical helper
|
|
16781
16820
|
* (getVerticalRadioGroupStyles) produces its item rhythm purely from
|
|
16782
16821
|
* `& > label { paddingBottom: sm }` plus the negative-margin hint trick above — it
|
|
16783
16822
|
* uses NO flex gap. The negative `marginTop` on hints only works if the stack adds
|
|
16784
16823
|
* no gap of its own, so we zero out the gap and reproduce the rhythm via
|
|
16785
16824
|
* padding-bottom on each radio. */
|
|
16786
|
-
.
|
|
16787
|
-
--
|
|
16825
|
+
.db-radio-group.db-stack {
|
|
16826
|
+
--db-stack-gap: 0;
|
|
16788
16827
|
}
|
|
16789
16828
|
|
|
16790
16829
|
/* AntD `& > label { paddingBottom: sm }`. */
|
|
16791
|
-
.
|
|
16792
|
-
padding-bottom: var(--db-
|
|
16830
|
+
.db-radio-group.db-stack > .db-radio {
|
|
16831
|
+
padding-bottom: var(--db-space-2);
|
|
16793
16832
|
}
|
|
16794
16833
|
|
|
16795
16834
|
/* AntD `& > label:last-of-type { paddingBottom: 0 }`. */
|
|
16796
|
-
.
|
|
16835
|
+
.db-radio-group.db-stack > .db-radio:last-of-type {
|
|
16797
16836
|
padding-bottom: 0;
|
|
16798
16837
|
}
|
|
16799
16838
|
|
|
16800
16839
|
/* AntD getVerticalRadioGroupStyles `.${prefix}-radio-tile + .${prefix}-radio-tile {
|
|
16801
|
-
* marginTop: md }`: RadioTiles are not matched by the `.
|
|
16840
|
+
* marginTop: md }`: RadioTiles are not matched by the `.db-radio` padding-bottom
|
|
16802
16841
|
* rhythm above (the tile's own class is du-bois-{light,dark}-radio-tile), so space
|
|
16803
|
-
* consecutive tiles explicitly. The .
|
|
16804
|
-
.
|
|
16805
|
-
.
|
|
16806
|
-
.
|
|
16807
|
-
.
|
|
16808
|
-
margin-top: var(--db-
|
|
16842
|
+
* consecutive tiles explicitly. The .db-stack gap is 0, so this margin is the spacing. */
|
|
16843
|
+
.db-radio-group.db-stack > .du-bois-light-radio-tile + .du-bois-light-radio-tile,
|
|
16844
|
+
.db-radio-group.db-stack > .du-bois-light-radio-tile + .du-bois-dark-radio-tile,
|
|
16845
|
+
.db-radio-group.db-stack > .du-bois-dark-radio-tile + .du-bois-light-radio-tile,
|
|
16846
|
+
.db-radio-group.db-stack > .du-bois-dark-radio-tile + .du-bois-dark-radio-tile {
|
|
16847
|
+
margin-top: var(--db-space-4);
|
|
16809
16848
|
}
|
|
16810
16849
|
|
|
16811
16850
|
/* Horizontal: AntD `getHorizontalRadioGroupStyles` is a TWO-ROW grid (NOT a flex
|
|
@@ -16814,51 +16853,51 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16814
16853
|
* group class here matches that.
|
|
16815
16854
|
* AntD: `display: grid; gridTemplateRows: [label] auto [hint] auto;
|
|
16816
16855
|
* gridAutoColumns: max-content; gridColumnGap: md`. */
|
|
16817
|
-
.
|
|
16856
|
+
.db-radio-group--horizontal.db-radio-group--horizontal {
|
|
16818
16857
|
display: grid;
|
|
16819
16858
|
grid-template-rows: [label] auto [hint] auto;
|
|
16820
16859
|
grid-auto-columns: max-content;
|
|
16821
|
-
column-gap: var(--db-
|
|
16860
|
+
column-gap: var(--db-space-4);
|
|
16822
16861
|
}
|
|
16823
16862
|
|
|
16824
16863
|
/* Equal column widths: AntD `gridAutoColumns: minmax(0, 1fr)`. */
|
|
16825
|
-
.
|
|
16864
|
+
.db-radio-group--horizontal.db-radio-group--equal-width {
|
|
16826
16865
|
grid-auto-columns: minmax(0, 1fr);
|
|
16827
16866
|
}
|
|
16828
16867
|
|
|
16829
16868
|
/* AntD `& > label, & > .${prefix}-radio-tile { gridRow: label / label; marginRight: 0 }`:
|
|
16830
16869
|
* every radio (and every RadioTile button, whose own class is
|
|
16831
|
-
* du-bois-{light,dark}-radio-tile and is NOT matched by `> .
|
|
16870
|
+
* du-bois-{light,dark}-radio-tile and is NOT matched by `> .db-radio`) lives in the
|
|
16832
16871
|
* label row. grid-auto-flow defaults to row, so successive items advance the implicit
|
|
16833
16872
|
* column. */
|
|
16834
|
-
.
|
|
16835
|
-
.
|
|
16836
|
-
.
|
|
16873
|
+
.db-radio-group--horizontal > .db-radio,
|
|
16874
|
+
.db-radio-group--horizontal > .du-bois-light-radio-tile,
|
|
16875
|
+
.db-radio-group--horizontal > .du-bois-dark-radio-tile {
|
|
16837
16876
|
grid-row: label / label;
|
|
16838
16877
|
margin-inline-end: 0;
|
|
16839
16878
|
}
|
|
16840
16879
|
|
|
16841
16880
|
/* AntD `& > label + hint { display: inline-block; gridRow: hint / hint }`: a hint
|
|
16842
16881
|
* following a radio drops into the hint row of the column its radio occupies. The
|
|
16843
|
-
* vertical negative-margin rules are scoped to .
|
|
16844
|
-
.
|
|
16845
|
-
.
|
|
16882
|
+
* vertical negative-margin rules are scoped to .db-stack, so nothing to reset here. */
|
|
16883
|
+
.db-radio-group--horizontal > .du-bois-light-hint,
|
|
16884
|
+
.db-radio-group--horizontal > .du-bois-dark-hint {
|
|
16846
16885
|
display: inline-block;
|
|
16847
16886
|
grid-row: hint / hint;
|
|
16848
16887
|
}
|
|
16849
16888
|
|
|
16850
16889
|
/* AntD `:has(> hint) { marginTop: sm }`: when the horizontal group contains a hint,
|
|
16851
16890
|
* the group itself gets a top margin (room above the two-row grid). */
|
|
16852
|
-
.
|
|
16853
|
-
.
|
|
16854
|
-
margin-top: var(--db-
|
|
16891
|
+
.db-radio-group--horizontal:has(> .du-bois-light-hint),
|
|
16892
|
+
.db-radio-group--horizontal:has(> .du-bois-dark-hint) {
|
|
16893
|
+
margin-top: var(--db-space-2);
|
|
16855
16894
|
}
|
|
16856
16895
|
|
|
16857
16896
|
/* AntD `&& + form-message { marginTop: sm }` (horizontal): a form-message following
|
|
16858
16897
|
* the whole group is separated by sm. */
|
|
16859
|
-
.
|
|
16860
|
-
.
|
|
16861
|
-
margin-top: var(--db-
|
|
16898
|
+
.db-radio-group--horizontal + .du-bois-light-form-message,
|
|
16899
|
+
.db-radio-group--horizontal + .du-bois-dark-form-message {
|
|
16900
|
+
margin-top: var(--db-space-2);
|
|
16862
16901
|
}
|
|
16863
16902
|
|
|
16864
16903
|
:where(:root), :where(.du-bois-light) {
|
|
@@ -16891,8 +16930,8 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16891
16930
|
--db-switch-text-disabled: var(--db-selection-toggle-text-disabled);
|
|
16892
16931
|
|
|
16893
16932
|
/* Density */
|
|
16894
|
-
--db-switch-track-width: calc(var(--db-size-
|
|
16895
|
-
--db-switch-track-height: var(--db-size-
|
|
16933
|
+
--db-switch-track-width: calc(var(--db-size-4) * 1.75); /* 28px */
|
|
16934
|
+
--db-switch-track-height: var(--db-size-4); /* 16px */
|
|
16896
16935
|
--db-switch-thumb-size: var(--db-switch-track-height);
|
|
16897
16936
|
--db-switch-label-spacing: var(--db-selection-toggle-label-spacing);
|
|
16898
16937
|
|
|
@@ -16900,7 +16939,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16900
16939
|
--db-switch-transition-duration: var(--db-selection-toggle-transition-duration);
|
|
16901
16940
|
}
|
|
16902
16941
|
|
|
16903
|
-
.
|
|
16942
|
+
.db-switch {
|
|
16904
16943
|
/* flex, not inline-flex: an inline-flex root's line-box leading pushes block siblings
|
|
16905
16944
|
* (e.g. a following FormMessage) down a few px, breaking the form-flow spacing. */
|
|
16906
16945
|
display: flex;
|
|
@@ -16911,12 +16950,12 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16911
16950
|
margin-inline-end: var(--db-switch-label-spacing);
|
|
16912
16951
|
}
|
|
16913
16952
|
|
|
16914
|
-
.
|
|
16953
|
+
.db-switch:has(input:disabled) {
|
|
16915
16954
|
cursor: not-allowed;
|
|
16916
16955
|
}
|
|
16917
16956
|
|
|
16918
16957
|
/* The track. `appearance: none` strips the native checkbox rendering so the input itself can be styled. */
|
|
16919
|
-
.
|
|
16958
|
+
.db-switch input {
|
|
16920
16959
|
appearance: none;
|
|
16921
16960
|
position: relative;
|
|
16922
16961
|
flex-shrink: 0;
|
|
@@ -16935,7 +16974,7 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16935
16974
|
|
|
16936
16975
|
/* The thumb. A pseudo-element keeps the input the switch's only element, so nothing can overlay it
|
|
16937
16976
|
* and intercept clicks. Offset left by the border width to sit flush with the track's outer edge. */
|
|
16938
|
-
.
|
|
16977
|
+
.db-switch input::before {
|
|
16939
16978
|
content: '';
|
|
16940
16979
|
position: absolute;
|
|
16941
16980
|
top: 50%;
|
|
@@ -16952,32 +16991,32 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16952
16991
|
}
|
|
16953
16992
|
|
|
16954
16993
|
/* `<label for>` propagates `:hover` to the input, so scope hover/press to the control, not `input:hover`. */
|
|
16955
|
-
.
|
|
16994
|
+
.db-switch:hover input:not(:disabled):not(:checked) {
|
|
16956
16995
|
background-color: var(--db-switch-surface-hover);
|
|
16957
16996
|
border-color: var(--db-switch-border-hover);
|
|
16958
16997
|
}
|
|
16959
16998
|
|
|
16960
|
-
.
|
|
16999
|
+
.db-switch:active input:not(:disabled):not(:checked) {
|
|
16961
17000
|
background-color: var(--db-switch-surface-press);
|
|
16962
17001
|
border-color: var(--db-switch-border-press);
|
|
16963
17002
|
}
|
|
16964
17003
|
|
|
16965
|
-
.
|
|
17004
|
+
.db-switch input:checked {
|
|
16966
17005
|
background-color: var(--db-switch-surface-checked);
|
|
16967
17006
|
border-color: var(--db-switch-border-checked);
|
|
16968
17007
|
}
|
|
16969
17008
|
|
|
16970
|
-
.
|
|
17009
|
+
.db-switch:hover input:checked:not(:disabled) {
|
|
16971
17010
|
background-color: var(--db-switch-surface-checked-hover);
|
|
16972
17011
|
border-color: var(--db-switch-border-checked-hover);
|
|
16973
17012
|
}
|
|
16974
17013
|
|
|
16975
|
-
.
|
|
17014
|
+
.db-switch:active input:checked:not(:disabled) {
|
|
16976
17015
|
background-color: var(--db-switch-surface-checked-press);
|
|
16977
17016
|
border-color: var(--db-switch-border-checked-press);
|
|
16978
17017
|
}
|
|
16979
17018
|
|
|
16980
|
-
.
|
|
17019
|
+
.db-switch input:checked::before {
|
|
16981
17020
|
transform: translateY(-50%) translateX(calc(var(--db-switch-track-width) - var(--db-switch-thumb-size)));
|
|
16982
17021
|
}
|
|
16983
17022
|
|
|
@@ -16985,73 +17024,601 @@ span.du-bois-light-typography-ellipsis-single-line {
|
|
|
16985
17024
|
* the ring sits flush when off and gains a 1px offset when checked.
|
|
16986
17025
|
* TODO: width/offset are hardcoded 1px to preserve the AntD look; adopt the system 2px focus ring
|
|
16987
17026
|
* (var(--db-focus-ring-width)) in a separate change. */
|
|
16988
|
-
.
|
|
17027
|
+
.db-switch input:focus-visible {
|
|
16989
17028
|
border-color: var(--db-switch-border-focus);
|
|
16990
17029
|
outline: 1px solid var(--db-focus-ring-color);
|
|
16991
17030
|
outline-offset: 0;
|
|
16992
17031
|
}
|
|
16993
17032
|
|
|
16994
|
-
.
|
|
17033
|
+
.db-switch input:checked:focus-visible {
|
|
16995
17034
|
outline-offset: 1px;
|
|
16996
17035
|
}
|
|
16997
17036
|
|
|
16998
|
-
.
|
|
17037
|
+
.db-switch input:disabled {
|
|
16999
17038
|
cursor: not-allowed;
|
|
17000
17039
|
background-color: var(--db-switch-surface-disabled);
|
|
17001
17040
|
border-color: var(--db-switch-border-disabled);
|
|
17002
17041
|
}
|
|
17003
17042
|
|
|
17004
17043
|
/* Disabled + on: more specific than the plain disabled rule, so it wins regardless of source order. */
|
|
17005
|
-
.
|
|
17044
|
+
.db-switch input:checked:disabled {
|
|
17006
17045
|
background-color: var(--db-switch-surface-checked-disabled);
|
|
17007
17046
|
border-color: var(--db-switch-surface-checked-disabled);
|
|
17008
17047
|
}
|
|
17009
17048
|
|
|
17010
17049
|
@media (prefers-reduced-motion: reduce) {
|
|
17011
|
-
.
|
|
17012
|
-
.
|
|
17050
|
+
.db-switch input,
|
|
17051
|
+
.db-switch input::before {
|
|
17013
17052
|
transition: none;
|
|
17014
17053
|
}
|
|
17015
17054
|
}
|
|
17016
17055
|
|
|
17017
|
-
.
|
|
17056
|
+
.db-switch-wrapper {
|
|
17018
17057
|
display: flex;
|
|
17019
17058
|
align-items: center;
|
|
17020
17059
|
}
|
|
17021
17060
|
|
|
17022
|
-
.
|
|
17061
|
+
.db-switch-wrapper .db-switch-state-message {
|
|
17023
17062
|
margin-inline-start: auto;
|
|
17024
17063
|
margin-inline-end: var(--db-switch-label-spacing);
|
|
17025
17064
|
}
|
|
17026
17065
|
|
|
17027
17066
|
/* `:first-child` scopes this to the label-first layout; the plain layout renders the label last. */
|
|
17028
|
-
.
|
|
17029
|
-
.
|
|
17067
|
+
.db-switch-wrapper > .du-bois-light-label:first-child,
|
|
17068
|
+
.db-switch-wrapper > .du-bois-dark-label:first-child {
|
|
17030
17069
|
margin-inline-end: var(--db-switch-label-spacing);
|
|
17031
17070
|
}
|
|
17032
17071
|
|
|
17033
|
-
.
|
|
17072
|
+
.db-switch-state-message {
|
|
17034
17073
|
color: var(--db-switch-text);
|
|
17035
17074
|
}
|
|
17036
17075
|
|
|
17037
|
-
/* Target the <Label>'s class, not a bare `label` — that would also match the .
|
|
17038
|
-
.
|
|
17039
|
-
.
|
|
17076
|
+
/* Target the <Label>'s class, not a bare `label` — that would also match the .db-switch root <label>. */
|
|
17077
|
+
.db-switch-wrapper:has(input:disabled) .du-bois-light-label,
|
|
17078
|
+
.db-switch-wrapper:has(input:disabled) .du-bois-dark-label {
|
|
17040
17079
|
color: var(--db-switch-text-disabled);
|
|
17041
17080
|
}
|
|
17042
17081
|
|
|
17043
17082
|
/* Indent a following hint/message past the track. The class is doubled to out-specify FormMessage's
|
|
17044
|
-
* own margin rule.
|
|
17045
|
-
|
|
17046
|
-
|
|
17083
|
+
* own margin rule. Each rule's key (rightmost) selector is a single class, not a multi-item :is(),
|
|
17084
|
+
* so Chromium can hash-reject it instead of attempting the match against every element on every
|
|
17085
|
+
* recalc (the leading/middle :is() groups aren't the key selector, so they're left as-is). */
|
|
17086
|
+
:is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-light-hint, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-dark-hint, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-dark-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
|
|
17087
|
+
+ :is(.du-bois-light-hint, .du-bois-dark-hint)
|
|
17088
|
+
+ .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
|
|
17047
17089
|
+ :is(.du-bois-light-hint, .du-bois-dark-hint)
|
|
17048
|
-
+
|
|
17049
|
-
padding-inline-start: calc(var(--db-
|
|
17090
|
+
+ .du-bois-dark-form-message {
|
|
17091
|
+
padding-inline-start: calc(var(--db-space-2) + var(--db-switch-track-width));
|
|
17050
17092
|
}
|
|
17051
17093
|
|
|
17052
|
-
:is(.
|
|
17053
|
-
+ :is(.du-bois-light-form-message, .du-bois-dark-form-message), :is(.ds-switch.ds-switch, .ds-switch-wrapper.ds-switch-wrapper)
|
|
17094
|
+
:is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper) + .du-bois-dark-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
|
|
17054
17095
|
+ :is(.du-bois-light-hint, .du-bois-dark-hint)
|
|
17055
|
-
+
|
|
17096
|
+
+ .du-bois-light-form-message, :is(.db-switch.db-switch, .db-switch-wrapper.db-switch-wrapper)
|
|
17097
|
+
+ :is(.du-bois-light-hint, .du-bois-dark-hint)
|
|
17098
|
+
+ .du-bois-dark-form-message {
|
|
17056
17099
|
margin-top: 0;
|
|
17057
17100
|
}
|
|
17101
|
+
|
|
17102
|
+
/* Component-tier tokens for the native <Button>, grouped by area (density, shape, typography, color).
|
|
17103
|
+
* Colors alias the action-* system tokens; sizes alias the system density scale.
|
|
17104
|
+
*
|
|
17105
|
+
* Follows the mortar/action.css pattern: one semantic set (surface / border / text, each with
|
|
17106
|
+
* -hover / -press / -disabled) whose defaults are the secondary variant. The variant classes that
|
|
17107
|
+
* re-set these tokens per variant live in NativeButton.css; this file declares only tokens. */
|
|
17108
|
+
|
|
17109
|
+
/* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
|
|
17110
|
+
* `.du-bois-dark` subtree (or a portal that re-applies the theme class) instead of freezing at the root values. */
|
|
17111
|
+
:where(:root), :where(.du-bois-light) {
|
|
17112
|
+
/* ── Density ──────────────────────────────────────────────────────────── */
|
|
17113
|
+
--db-btn-height: var(--db-size-8);
|
|
17114
|
+
--db-btn-height-small: var(--db-size-6);
|
|
17115
|
+
--db-btn-icon-size: var(--db-size-4);
|
|
17116
|
+
--db-btn-border-width: 1px;
|
|
17117
|
+
--db-btn-padding-vertical: var(--db-space-1);
|
|
17118
|
+
--db-btn-padding-horizontal: var(--db-space-3);
|
|
17119
|
+
--db-btn-padding-horizontal-small: var(--db-space-2);
|
|
17120
|
+
/* Icon/force-icon horizontal padding: half the standard horizontal padding. */
|
|
17121
|
+
--db-btn-padding-horizontal-icon: calc(var(--db-space-3) / 2); /* 6px */
|
|
17122
|
+
--db-btn-gap: var(--db-space-1);
|
|
17123
|
+
--db-btn-end-icon-gap: var(--db-space-2);
|
|
17124
|
+
--db-btn-end-icon-gap-small: var(--db-space-1);
|
|
17125
|
+
/* Width of a content-less button while loading, so the standalone spinner has room. */
|
|
17126
|
+
--db-btn-loading-empty-width: var(--db-size-10);
|
|
17127
|
+
|
|
17128
|
+
/* ── Shape ────────────────────────────────────────────────────────────── */
|
|
17129
|
+
--db-btn-border-radius: var(--db-shape-control);
|
|
17130
|
+
|
|
17131
|
+
/* ── Typography ───────────────────────────────────────────────────────── */
|
|
17132
|
+
--db-btn-font-size: var(--db-font-size-base);
|
|
17133
|
+
--db-btn-icon-only-font-size: var(--db-font-size-lg); /* 15px */
|
|
17134
|
+
--db-btn-font-weight: var(--db-font-weight-normal);
|
|
17135
|
+
/* Line heights are hard-coded until the typography scale ships computed per-level line-height tokens. */
|
|
17136
|
+
--db-btn-line-height: 1.25rem; /* 20px */
|
|
17137
|
+
--db-btn-line-height-small: 1rem; /* 16px */
|
|
17138
|
+
|
|
17139
|
+
/* ── Color: semantic set (defaults = secondary variant) ───────────────── */
|
|
17140
|
+
--db-btn-surface: var(--db-color-action-default-background-default);
|
|
17141
|
+
--db-btn-surface-hover: var(--db-color-action-default-background-hover);
|
|
17142
|
+
--db-btn-surface-press: var(--db-color-action-default-background-press);
|
|
17143
|
+
--db-btn-surface-disabled: transparent;
|
|
17144
|
+
--db-btn-border: var(--db-color-action-default-border-default);
|
|
17145
|
+
--db-btn-border-hover: var(--db-color-action-default-border-hover);
|
|
17146
|
+
--db-btn-border-press: var(--db-color-action-default-border-press);
|
|
17147
|
+
--db-btn-border-disabled: var(--db-color-action-disabled-border);
|
|
17148
|
+
--db-btn-text: var(--db-color-action-default-text-default);
|
|
17149
|
+
--db-btn-text-hover: var(--db-color-action-default-text-hover);
|
|
17150
|
+
--db-btn-text-press: var(--db-color-action-default-text-press);
|
|
17151
|
+
--db-btn-text-disabled: var(--db-color-action-disabled-text);
|
|
17152
|
+
|
|
17153
|
+
/* ── Focus & icon ─────────────────────────────────────────────────────── */
|
|
17154
|
+
--db-btn-focus-ring: var(--db-color-action-default-border-focus);
|
|
17155
|
+
--db-btn-danger-focus-ring: var(--db-color-action-danger-primary-background-default);
|
|
17156
|
+
--db-btn-icon-glyph: var(--db-color-text-secondary);
|
|
17157
|
+
}
|
|
17158
|
+
|
|
17159
|
+
/* Native <Button> visual styles. Consumes the component-tier `--db-btn-*` tokens (see tokens.css);
|
|
17160
|
+
* the variant classes below re-set those tokens per variant and the rules that follow paint them.
|
|
17161
|
+
* Shipped via mortar.css. */
|
|
17162
|
+
|
|
17163
|
+
/* ── 0. Variant token re-sets ──────────────────────────────────────────────
|
|
17164
|
+
* Each variant class re-sets the semantic tokens declared in tokens.css; combined classes win by
|
|
17165
|
+
* specificity, which beats the `:where(:root)` (specificity 0) defaults regardless of file order. */
|
|
17166
|
+
.db-btn-primary {
|
|
17167
|
+
--db-btn-surface: var(--db-color-action-primary-background-default);
|
|
17168
|
+
--db-btn-surface-hover: var(--db-color-action-primary-background-hover);
|
|
17169
|
+
--db-btn-surface-press: var(--db-color-action-primary-background-press);
|
|
17170
|
+
--db-btn-surface-disabled: var(--db-color-action-disabled-border);
|
|
17171
|
+
--db-btn-border: transparent;
|
|
17172
|
+
--db-btn-border-hover: transparent;
|
|
17173
|
+
--db-btn-border-press: transparent;
|
|
17174
|
+
--db-btn-border-disabled: transparent;
|
|
17175
|
+
--db-btn-text: var(--db-color-action-primary-text-default);
|
|
17176
|
+
--db-btn-text-hover: var(--db-color-action-primary-text-hover);
|
|
17177
|
+
--db-btn-text-press: var(--db-color-action-primary-text-press);
|
|
17178
|
+
--db-btn-text-disabled: var(--db-color-action-primary-text-default);
|
|
17179
|
+
}
|
|
17180
|
+
.db-btn-tertiary,
|
|
17181
|
+
.db-btn-link {
|
|
17182
|
+
--db-btn-surface: var(--db-color-action-tertiary-background-default);
|
|
17183
|
+
--db-btn-surface-disabled: var(--db-color-action-tertiary-background-default);
|
|
17184
|
+
--db-btn-border: var(--db-color-action-tertiary-background-default);
|
|
17185
|
+
--db-btn-border-hover: transparent;
|
|
17186
|
+
--db-btn-border-press: transparent;
|
|
17187
|
+
--db-btn-border-disabled: transparent;
|
|
17188
|
+
--db-btn-text: var(--db-color-action-tertiary-text-default);
|
|
17189
|
+
--db-btn-text-hover: var(--db-color-action-tertiary-text-hover);
|
|
17190
|
+
--db-btn-text-press: var(--db-color-action-tertiary-text-press);
|
|
17191
|
+
--db-btn-text-disabled: var(--db-color-action-disabled-text);
|
|
17192
|
+
}
|
|
17193
|
+
.db-btn-tertiary {
|
|
17194
|
+
--db-btn-surface-hover: var(--db-color-action-tertiary-background-hover);
|
|
17195
|
+
--db-btn-surface-press: var(--db-color-action-tertiary-background-press);
|
|
17196
|
+
}
|
|
17197
|
+
/* Link is borderless and text-only, so its hover/press surface stays transparent. */
|
|
17198
|
+
.db-btn-link {
|
|
17199
|
+
--db-btn-surface-hover: transparent;
|
|
17200
|
+
--db-btn-surface-press: transparent;
|
|
17201
|
+
}
|
|
17202
|
+
/* Every danger button (icon included) disables to the filled treatment. */
|
|
17203
|
+
.db-btn-danger {
|
|
17204
|
+
--db-btn-surface-disabled: var(--db-color-action-disabled-border);
|
|
17205
|
+
--db-btn-border-disabled: transparent;
|
|
17206
|
+
--db-btn-text-disabled: var(--db-color-action-primary-text-default);
|
|
17207
|
+
}
|
|
17208
|
+
/* Danger, filled (primary): re-set only the surface; text/transparent border come from primary. */
|
|
17209
|
+
.db-btn-primary.db-btn-danger:not(.db-btn-icon-only) {
|
|
17210
|
+
--db-btn-surface: var(--db-color-action-danger-primary-background-default);
|
|
17211
|
+
--db-btn-surface-hover: var(--db-color-action-danger-primary-background-hover);
|
|
17212
|
+
--db-btn-surface-press: var(--db-color-action-danger-primary-background-press);
|
|
17213
|
+
}
|
|
17214
|
+
/* Danger, secondary/outlined. */
|
|
17215
|
+
.db-btn-danger:not(.db-btn-primary):not(.db-btn-tertiary):not(.db-btn-link):not(.db-btn-icon-only) {
|
|
17216
|
+
--db-btn-surface: var(--db-color-action-danger-default-background-default);
|
|
17217
|
+
--db-btn-surface-hover: var(--db-color-action-danger-default-background-hover);
|
|
17218
|
+
--db-btn-surface-press: var(--db-color-action-danger-default-background-press);
|
|
17219
|
+
--db-btn-border: var(--db-color-action-danger-default-border-default);
|
|
17220
|
+
--db-btn-border-hover: var(--db-color-action-danger-default-border-hover);
|
|
17221
|
+
--db-btn-border-press: var(--db-color-action-danger-default-border-press);
|
|
17222
|
+
--db-btn-text: var(--db-color-action-danger-default-text-default);
|
|
17223
|
+
--db-btn-text-hover: var(--db-color-action-danger-default-text-hover);
|
|
17224
|
+
--db-btn-text-press: var(--db-color-action-danger-default-text-press);
|
|
17225
|
+
}
|
|
17226
|
+
/* Danger, tertiary/link: danger text everywhere, danger surface on hover/press; resting/disabled
|
|
17227
|
+
* surface stay the tertiary ghost (override the filled danger-disabled set above). */
|
|
17228
|
+
.db-btn-tertiary.db-btn-danger,
|
|
17229
|
+
.db-btn-link.db-btn-danger {
|
|
17230
|
+
--db-btn-surface-hover: var(--db-color-action-danger-default-background-hover);
|
|
17231
|
+
--db-btn-surface-press: var(--db-color-action-danger-default-background-press);
|
|
17232
|
+
--db-btn-surface-disabled: var(--db-color-action-tertiary-background-default);
|
|
17233
|
+
--db-btn-text: var(--db-color-action-danger-default-text-default);
|
|
17234
|
+
--db-btn-text-hover: var(--db-color-action-danger-default-text-hover);
|
|
17235
|
+
--db-btn-text-press: var(--db-color-action-danger-default-text-press);
|
|
17236
|
+
--db-btn-text-disabled: var(--db-color-action-disabled-text);
|
|
17237
|
+
}
|
|
17238
|
+
/* Icon-only renders as the ghost (tertiary) treatment regardless of variant; re-set the semantic set
|
|
17239
|
+
* so the icon-only rules paint from these component tokens. */
|
|
17240
|
+
.db-btn-icon-only {
|
|
17241
|
+
--db-btn-surface: var(--db-color-action-tertiary-background-default);
|
|
17242
|
+
--db-btn-surface-hover: var(--db-color-action-tertiary-background-hover);
|
|
17243
|
+
--db-btn-surface-press: var(--db-color-action-tertiary-background-press);
|
|
17244
|
+
--db-btn-text: var(--db-color-action-tertiary-text-default);
|
|
17245
|
+
--db-btn-text-hover: var(--db-color-action-tertiary-text-hover);
|
|
17246
|
+
--db-btn-text-press: var(--db-color-action-tertiary-text-press);
|
|
17247
|
+
}
|
|
17248
|
+
/* Danger icon-only keeps the ghost resting surface (inherited above) but uses danger text and a
|
|
17249
|
+
* danger hover/press surface. */
|
|
17250
|
+
.db-btn-icon-only.db-btn-danger {
|
|
17251
|
+
--db-btn-surface-hover: var(--db-color-action-danger-default-background-hover);
|
|
17252
|
+
--db-btn-surface-press: var(--db-color-action-danger-default-background-press);
|
|
17253
|
+
--db-btn-text: var(--db-color-action-danger-default-text-default);
|
|
17254
|
+
--db-btn-text-hover: var(--db-color-action-danger-default-text-hover);
|
|
17255
|
+
--db-btn-text-press: var(--db-color-action-danger-default-text-press);
|
|
17256
|
+
}
|
|
17257
|
+
|
|
17258
|
+
/* ── 1. Base — paints the default (secondary) variant ────────────────────── */
|
|
17259
|
+
.db-btn {
|
|
17260
|
+
appearance: none;
|
|
17261
|
+
box-sizing: border-box;
|
|
17262
|
+
position: relative; /* anchors the loading spinner */
|
|
17263
|
+
display: inline-flex !important;
|
|
17264
|
+
align-items: center !important;
|
|
17265
|
+
justify-content: center !important;
|
|
17266
|
+
vertical-align: middle;
|
|
17267
|
+
white-space: nowrap;
|
|
17268
|
+
user-select: none;
|
|
17269
|
+
cursor: pointer;
|
|
17270
|
+
height: var(--db-btn-height) !important;
|
|
17271
|
+
font-family: inherit;
|
|
17272
|
+
font-size: var(--db-btn-font-size);
|
|
17273
|
+
font-weight: var(--db-btn-font-weight);
|
|
17274
|
+
line-height: var(--db-btn-line-height) !important;
|
|
17275
|
+
text-decoration: none !important;
|
|
17276
|
+
border: var(--db-btn-border-width) solid var(--db-btn-border);
|
|
17277
|
+
border-color: var(--db-btn-border) !important;
|
|
17278
|
+
border-radius: var(--db-btn-border-radius) !important;
|
|
17279
|
+
box-shadow: none !important;
|
|
17280
|
+
background-color: var(--db-btn-surface) !important;
|
|
17281
|
+
color: var(--db-btn-text) !important;
|
|
17282
|
+
}
|
|
17283
|
+
|
|
17284
|
+
/* ── 2. Padding ──────────────────────────────────────────────────────────── */
|
|
17285
|
+
.db-btn.db-btn:where(:not(.db-btn-icon-only, .db-btn-force-icon, .db-btn-link)) {
|
|
17286
|
+
padding: var(--db-btn-padding-vertical) var(--db-btn-padding-horizontal) !important;
|
|
17287
|
+
}
|
|
17288
|
+
.db-btn.db-btn-small:where(:not(.db-btn-icon-only, .db-btn-force-icon, .db-btn-link)) {
|
|
17289
|
+
padding: 0 var(--db-btn-padding-horizontal-small) !important;
|
|
17290
|
+
}
|
|
17291
|
+
.db-btn.db-btn-link {
|
|
17292
|
+
padding: 0 !important;
|
|
17293
|
+
}
|
|
17294
|
+
.db-btn.db-btn-force-icon {
|
|
17295
|
+
padding: 0 var(--db-btn-padding-horizontal-icon) !important;
|
|
17296
|
+
}
|
|
17297
|
+
|
|
17298
|
+
/* ── 3. Interactive states ───────────────────────────────────────────────── */
|
|
17299
|
+
.db-btn:hover:not(:disabled, .db-btn-loading) {
|
|
17300
|
+
background-color: var(--db-btn-surface-hover) !important;
|
|
17301
|
+
border-color: var(--db-btn-border-hover) !important;
|
|
17302
|
+
color: var(--db-btn-text-hover) !important;
|
|
17303
|
+
}
|
|
17304
|
+
.db-btn:active:not(:disabled, .db-btn-loading) {
|
|
17305
|
+
background-color: var(--db-btn-surface-press) !important;
|
|
17306
|
+
border-color: var(--db-btn-border-press) !important;
|
|
17307
|
+
color: var(--db-btn-text-press) !important;
|
|
17308
|
+
}
|
|
17309
|
+
|
|
17310
|
+
/* ── 4. Focus ────────────────────────────────────────────────────────────── */
|
|
17311
|
+
.db-btn:focus-visible {
|
|
17312
|
+
outline: 2px solid var(--db-btn-focus-ring);
|
|
17313
|
+
outline-offset: -2px;
|
|
17314
|
+
}
|
|
17315
|
+
.db-btn-primary:focus-visible {
|
|
17316
|
+
outline-offset: 1px;
|
|
17317
|
+
}
|
|
17318
|
+
.db-btn-use-focus-pseudo-class:focus {
|
|
17319
|
+
outline: 2px solid var(--db-btn-focus-ring);
|
|
17320
|
+
outline-offset: 1px;
|
|
17321
|
+
}
|
|
17322
|
+
|
|
17323
|
+
/* ── 5. Small / full-width / empty ────────────────────────────────────────── */
|
|
17324
|
+
.db-btn-small {
|
|
17325
|
+
height: var(--db-btn-height-small) !important;
|
|
17326
|
+
}
|
|
17327
|
+
.db-btn-full-width {
|
|
17328
|
+
width: 100%;
|
|
17329
|
+
}
|
|
17330
|
+
.db-btn-empty {
|
|
17331
|
+
background-color: transparent !important;
|
|
17332
|
+
border-color: transparent !important;
|
|
17333
|
+
}
|
|
17334
|
+
.db-btn-default.db-btn-empty {
|
|
17335
|
+
color: var(--db-btn-icon-glyph) !important;
|
|
17336
|
+
}
|
|
17337
|
+
.db-btn-empty.db-btn-loading {
|
|
17338
|
+
width: var(--db-btn-loading-empty-width);
|
|
17339
|
+
}
|
|
17340
|
+
|
|
17341
|
+
/* ── 6. Tertiary & link ──────────────────────────────────────────────────── */
|
|
17342
|
+
.db-btn-link {
|
|
17343
|
+
height: auto !important;
|
|
17344
|
+
border: none !important;
|
|
17345
|
+
}
|
|
17346
|
+
/* Re-declare the text color for a non-icon-only tertiary/link at two-class weight so a plain
|
|
17347
|
+
* call-site `color` override loses; an icon-only glyph stays at base weight so its override wins. */
|
|
17348
|
+
.db-btn-tertiary:not(.db-btn-icon-only),
|
|
17349
|
+
.db-btn-link:not(.db-btn-icon-only) {
|
|
17350
|
+
color: var(--db-btn-text) !important;
|
|
17351
|
+
}
|
|
17352
|
+
/* Keep the resting border at two-class weight (parity with the shielded border-color). */
|
|
17353
|
+
.db-btn.db-btn-tertiary,
|
|
17354
|
+
.db-btn.db-btn-link {
|
|
17355
|
+
border-color: var(--db-btn-border) !important;
|
|
17356
|
+
}
|
|
17357
|
+
|
|
17358
|
+
/* ── 7. Danger ───────────────────────────────────────────────────────────── */
|
|
17359
|
+
.db-btn-danger:focus-visible {
|
|
17360
|
+
outline-color: var(--db-btn-danger-focus-ring);
|
|
17361
|
+
}
|
|
17362
|
+
|
|
17363
|
+
/* ── 8. Icon-only ────────────────────────────────────────────────────────── */
|
|
17364
|
+
.db-btn-icon-only {
|
|
17365
|
+
padding: 0;
|
|
17366
|
+
border: none !important;
|
|
17367
|
+
background-color: var(--db-btn-surface) !important;
|
|
17368
|
+
font-size: var(--db-btn-icon-only-font-size);
|
|
17369
|
+
}
|
|
17370
|
+
/* `:where()` keeps this at (0,1,0) so a call-site `css` width override wins, as it does for `height`. */
|
|
17371
|
+
.db-btn-icon-only:where(:not(.db-btn-small)) {
|
|
17372
|
+
width: var(--db-btn-height) !important;
|
|
17373
|
+
}
|
|
17374
|
+
.db-btn-icon-only:not(.db-btn-link, .db-btn-tertiary, [href], :hover, :active, :disabled) {
|
|
17375
|
+
color: var(--db-btn-icon-glyph) !important;
|
|
17376
|
+
}
|
|
17377
|
+
/* `:where()` on the exclusion holds this at (0,2,0): enough to tint an un-overridden icon-only link
|
|
17378
|
+
* over the base color, while still letting a consumer's own icon-color override win on source order. */
|
|
17379
|
+
.db-btn-icon-only[href]:where(:not(.db-btn-tertiary, .db-btn-link, .db-btn-danger, :disabled)) {
|
|
17380
|
+
color: var(--db-btn-text) !important;
|
|
17381
|
+
}
|
|
17382
|
+
.db-btn-icon-only:where(.db-btn-small) {
|
|
17383
|
+
width: var(--db-btn-height-small);
|
|
17384
|
+
}
|
|
17385
|
+
.db-btn-icon-only.db-btn-small {
|
|
17386
|
+
line-height: var(--db-btn-line-height-small) !important;
|
|
17387
|
+
}
|
|
17388
|
+
.db-btn-icon-only:hover:not(:disabled, .db-btn-loading) {
|
|
17389
|
+
background-color: var(--db-btn-surface-hover) !important;
|
|
17390
|
+
color: var(--db-btn-text-hover) !important;
|
|
17391
|
+
}
|
|
17392
|
+
.db-btn-icon-only:active:not(:disabled, .db-btn-loading) {
|
|
17393
|
+
background-color: var(--db-btn-surface-press) !important;
|
|
17394
|
+
color: var(--db-btn-text-press) !important;
|
|
17395
|
+
}
|
|
17396
|
+
.db-btn-icon-only:enabled:not(.db-btn-primary, .db-btn-tertiary, .db-btn-link, .db-btn-danger, :hover, :active)
|
|
17397
|
+
> .anticon {
|
|
17398
|
+
color: var(--db-btn-icon-glyph);
|
|
17399
|
+
}
|
|
17400
|
+
.db-btn-icon-only.db-btn-danger:not(:hover, :active) > .anticon {
|
|
17401
|
+
color: var(--db-btn-text);
|
|
17402
|
+
}
|
|
17403
|
+
.db-btn-icon-only.db-btn-danger:hover:not(:disabled, .db-btn-loading) {
|
|
17404
|
+
background-color: var(--db-btn-surface-hover) !important;
|
|
17405
|
+
color: var(--db-btn-text-hover) !important;
|
|
17406
|
+
}
|
|
17407
|
+
.db-btn-icon-only.db-btn-danger:active:not(:disabled, .db-btn-loading) {
|
|
17408
|
+
background-color: var(--db-btn-surface-press) !important;
|
|
17409
|
+
color: var(--db-btn-text-press) !important;
|
|
17410
|
+
}
|
|
17411
|
+
|
|
17412
|
+
/* ── 9. Disabled — base rules paint the per-variant `*-disabled` tokens (see tokens.css) ──────── */
|
|
17413
|
+
.db-btn:disabled {
|
|
17414
|
+
cursor: not-allowed;
|
|
17415
|
+
background-color: var(--db-btn-surface-disabled) !important;
|
|
17416
|
+
color: var(--db-btn-text-disabled) !important;
|
|
17417
|
+
}
|
|
17418
|
+
/* Empty and loading disabled buttons keep a transparent border (set elsewhere), so exclude them.
|
|
17419
|
+
* `:where()` on the exclusion holds this at (0,2,0): enough to beat the base border, while still
|
|
17420
|
+
* letting a consumer's own `[disabled]` border override win on source order. */
|
|
17421
|
+
.db-btn:disabled:where(:not(.db-btn-empty, .db-btn-loading)) {
|
|
17422
|
+
border-color: var(--db-btn-border-disabled) !important;
|
|
17423
|
+
}
|
|
17424
|
+
.db-btn-icon-only:disabled {
|
|
17425
|
+
border: none;
|
|
17426
|
+
}
|
|
17427
|
+
.db-btn-icon-only:disabled:hover {
|
|
17428
|
+
background-color: transparent !important;
|
|
17429
|
+
}
|
|
17430
|
+
.db-btn:disabled > .anticon {
|
|
17431
|
+
color: inherit !important;
|
|
17432
|
+
}
|
|
17433
|
+
|
|
17434
|
+
/* ── 10. Icon & content layout ───────────────────────────────────────────── */
|
|
17435
|
+
/* The leading icon renders unwrapped as the button's direct `.anticon` child (see NativeButton.tsx),
|
|
17436
|
+
* so `> .anticon` targets only a real icon glyph — a non-glyph `icon` (e.g. a Spinner) keeps its own
|
|
17437
|
+
* sizing — and out-specifies AntD's runtime-injected global `.anticon` rule. */
|
|
17438
|
+
.db-btn > .anticon,
|
|
17439
|
+
.db-btn-end-icon,
|
|
17440
|
+
.db-btn-end-icon > .anticon {
|
|
17441
|
+
display: inline-flex;
|
|
17442
|
+
align-items: center;
|
|
17443
|
+
font-size: var(--db-btn-icon-size) !important;
|
|
17444
|
+
line-height: 0;
|
|
17445
|
+
}
|
|
17446
|
+
.db-btn-small > .anticon .anticon {
|
|
17447
|
+
line-height: 0;
|
|
17448
|
+
}
|
|
17449
|
+
.db-btn > .db-btn-content > .anticon {
|
|
17450
|
+
display: inline-flex;
|
|
17451
|
+
align-items: center;
|
|
17452
|
+
line-height: 0;
|
|
17453
|
+
}
|
|
17454
|
+
.db-btn-content {
|
|
17455
|
+
display: inline-flex;
|
|
17456
|
+
align-items: center;
|
|
17457
|
+
}
|
|
17458
|
+
.db-btn > .anticon + .db-btn-content {
|
|
17459
|
+
margin-inline-start: var(--db-btn-gap) !important;
|
|
17460
|
+
}
|
|
17461
|
+
.db-btn-end-icon {
|
|
17462
|
+
margin-inline-start: var(--db-btn-end-icon-gap) !important;
|
|
17463
|
+
}
|
|
17464
|
+
.db-btn-small .db-btn-end-icon {
|
|
17465
|
+
margin-inline-start: var(--db-btn-end-icon-gap-small) !important;
|
|
17466
|
+
}
|
|
17467
|
+
.db-btn-default:not(.db-btn-danger, [href], :hover, :active, :disabled) > .anticon {
|
|
17468
|
+
color: var(--db-btn-icon-glyph);
|
|
17469
|
+
}
|
|
17470
|
+
.db-btn-default[href]:not(.db-btn-danger, :hover, :active, :disabled) .db-btn-end-icon {
|
|
17471
|
+
color: var(--db-btn-icon-glyph);
|
|
17472
|
+
}
|
|
17473
|
+
.db-btn-default:not([href], .db-btn-danger, :hover, :active, :disabled)
|
|
17474
|
+
> .db-btn-content
|
|
17475
|
+
> .db-btn-end-icon
|
|
17476
|
+
> .anticon {
|
|
17477
|
+
color: var(--db-btn-icon-glyph);
|
|
17478
|
+
}
|
|
17479
|
+
|
|
17480
|
+
/* ── 11. Loading ─────────────────────────────────────────────────────────── */
|
|
17481
|
+
.db-btn-loading {
|
|
17482
|
+
cursor: default;
|
|
17483
|
+
}
|
|
17484
|
+
.db-btn-loading:disabled {
|
|
17485
|
+
border-color: transparent !important;
|
|
17486
|
+
}
|
|
17487
|
+
.db-btn-spinner {
|
|
17488
|
+
color: inherit !important;
|
|
17489
|
+
pointer-events: none;
|
|
17490
|
+
}
|
|
17491
|
+
.db-btn-loading-with-icon .db-btn-content {
|
|
17492
|
+
padding-inline-start: calc(var(--db-btn-icon-size) + var(--db-btn-gap));
|
|
17493
|
+
}
|
|
17494
|
+
.db-btn-loading .db-btn-spinner {
|
|
17495
|
+
position: absolute;
|
|
17496
|
+
left: 50%;
|
|
17497
|
+
top: 50%;
|
|
17498
|
+
transform: translate(-50%, -50%);
|
|
17499
|
+
}
|
|
17500
|
+
.db-btn-loading.db-btn-icon-only .db-btn-spinner {
|
|
17501
|
+
position: static;
|
|
17502
|
+
transform: none;
|
|
17503
|
+
}
|
|
17504
|
+
|
|
17505
|
+
/* ── 12. dangerouslySetForceIconStyles ───────────────────────────────────── */
|
|
17506
|
+
.db-btn-force-icon {
|
|
17507
|
+
width: var(--db-btn-height) !important;
|
|
17508
|
+
color: var(--db-btn-icon-glyph) !important;
|
|
17509
|
+
}
|
|
17510
|
+
.db-btn-force-icon.db-btn-small {
|
|
17511
|
+
width: var(--db-btn-height-small) !important;
|
|
17512
|
+
}
|
|
17513
|
+
|
|
17514
|
+
:where(:root), :where(.du-bois-light) {
|
|
17515
|
+
/* Shape */
|
|
17516
|
+
/* Must not scale with density; no non-scaling system token holds it. TODO(FEINF-6505): adopt a v2 system token when one is added. */
|
|
17517
|
+
--db-navigation-menu-indicator-thickness: 4px;
|
|
17518
|
+
/* No system token holds this control-specific inset. TODO(FEINF-6505): adopt a v2 system token when one is added. */
|
|
17519
|
+
--db-navigation-menu-focus-ring-offset: -1px;
|
|
17520
|
+
|
|
17521
|
+
/* Color */
|
|
17522
|
+
--db-navigation-menu-indicator: var(--db-accent-surface);
|
|
17523
|
+
--db-navigation-menu-focus-ring: var(--db-focus-ring-color);
|
|
17524
|
+
--db-navigation-menu-text: var(--db-text-subtle);
|
|
17525
|
+
--db-navigation-menu-text-active: var(--db-text-base);
|
|
17526
|
+
/* No v2 semantic for default-action link text yet; bridges on the v1 --db-color-* token. */
|
|
17527
|
+
--db-navigation-menu-text-hover: var(--db-color-action-default-text-hover);
|
|
17528
|
+
--db-navigation-menu-text-press: var(--db-color-action-default-text-press);
|
|
17529
|
+
|
|
17530
|
+
/* Density */
|
|
17531
|
+
--db-navigation-menu-item-height: var(--db-size-8);
|
|
17532
|
+
--db-navigation-menu-item-min-width: var(--db-size-6);
|
|
17533
|
+
--db-navigation-menu-link-padding-top: var(--db-space-1);
|
|
17534
|
+
--db-navigation-menu-link-padding-bottom: var(--db-space-2);
|
|
17535
|
+
--db-navigation-menu-focus-ring-width: var(--db-focus-ring-width);
|
|
17536
|
+
}
|
|
17537
|
+
|
|
17538
|
+
:where(:root), :where(.du-bois-light) {
|
|
17539
|
+
/* Shape */
|
|
17540
|
+
/* TODO(FEINF-6505): adopt --db-shape-container-* once a 4px container radius exists; kept on --db-radius-sm to preserve 4px. */
|
|
17541
|
+
--db-snackbar-border-radius: var(--db-radius-sm);
|
|
17542
|
+
|
|
17543
|
+
/* Density */
|
|
17544
|
+
--db-snackbar-spacing-vertical: var(--db-space-3);
|
|
17545
|
+
--db-snackbar-spacing-horizontal: var(--db-space-4);
|
|
17546
|
+
--db-snackbar-close-button-spacing: var(--db-space-2);
|
|
17547
|
+
|
|
17548
|
+
/* Color */
|
|
17549
|
+
/* No v1/v2 system token holds this theme-invariant white. TODO(FEINF-6505): adopt a v2 system token when one is added. */
|
|
17550
|
+
--db-snackbar-text: #ffffff;
|
|
17551
|
+
/* No v1/v2 system token holds these theme-invariant close-icon colors. TODO(FEINF-6505): adopt a v2 system token when one is added. */
|
|
17552
|
+
--db-snackbar-close-icon: #e8ecf0;
|
|
17553
|
+
--db-snackbar-close-icon-hover: #8acaff;
|
|
17554
|
+
--db-snackbar-close-icon-press: #bae1fc;
|
|
17555
|
+
}
|
|
17556
|
+
|
|
17557
|
+
:where(:root), :where(.du-bois-light) {
|
|
17558
|
+
/* Color */
|
|
17559
|
+
/* No v1/v2 system token holds this light/dark surface pair. TODO(FEINF-6505): adopt a v2 system token when one is added. */
|
|
17560
|
+
--db-snackbar-surface: #11171c;
|
|
17561
|
+
|
|
17562
|
+
/* Elevation */
|
|
17563
|
+
--db-snackbar-shadow: var(--db-elevation-med);
|
|
17564
|
+
}
|
|
17565
|
+
|
|
17566
|
+
/* Tooltip renders an inverted surface (dark chip in light mode, light chip in dark mode), so it does
|
|
17567
|
+
* not draw from the popover family's neutral surface. Surface/text reference the v1 tooltip
|
|
17568
|
+
* primitives from tokens-groups until a v2 semantic exists. */
|
|
17569
|
+
|
|
17570
|
+
:where(:root), :where(.du-bois-light) {
|
|
17571
|
+
/* Shape */
|
|
17572
|
+
--db-tooltip-border-radius: var(--db-radius-sm);
|
|
17573
|
+
|
|
17574
|
+
/* Density */
|
|
17575
|
+
--db-tooltip-spacing-vertical: var(--db-space-1);
|
|
17576
|
+
--db-tooltip-spacing-horizontal: var(--db-space-2);
|
|
17577
|
+
|
|
17578
|
+
/* Typography */
|
|
17579
|
+
--db-tooltip-font-size: var(--db-font-size-base);
|
|
17580
|
+
--db-tooltip-font-weight: var(--db-font-weight-normal);
|
|
17581
|
+
}
|
|
17582
|
+
|
|
17583
|
+
:where(:root), :where(.du-bois-light) {
|
|
17584
|
+
/* Color */
|
|
17585
|
+
--db-tooltip-surface: var(--db-color-tooltip-background-tooltip);
|
|
17586
|
+
--db-tooltip-text: var(--db-color-tooltip-text-tooltip);
|
|
17587
|
+
/* v1 blue primitives, held as literals until a v2 link-on-tooltip semantic exists. */
|
|
17588
|
+
--db-tooltip-link-text: #4299e0; /* blue500 */
|
|
17589
|
+
--db-tooltip-link-text-hover: #8acaff; /* blue400 */
|
|
17590
|
+
--db-tooltip-link-text-press: #bae1fc; /* blue300 */
|
|
17591
|
+
|
|
17592
|
+
/* Elevation */
|
|
17593
|
+
--db-tooltip-shadow: var(--db-elevation-med);
|
|
17594
|
+
}
|
|
17595
|
+
|
|
17596
|
+
/* Declared under the theme classes too (not just :root) so the var() chain re-resolves inside a
|
|
17597
|
+
* `.du-bois-dark` subtree instead of freezing at the light values. */
|
|
17598
|
+
:where(:root), :where(.du-bois-light) {
|
|
17599
|
+
/* Shape */
|
|
17600
|
+
--db-progress-border-radius: var(--db-shape-pill);
|
|
17601
|
+
|
|
17602
|
+
/* Color */
|
|
17603
|
+
--db-progress-track: var(--db-color-progress-track);
|
|
17604
|
+
--db-progress-fill: var(--db-color-progress-fill);
|
|
17605
|
+
|
|
17606
|
+
/* Density */
|
|
17607
|
+
--db-progress-size: var(--db-size-2);
|
|
17608
|
+
|
|
17609
|
+
/* Motion */
|
|
17610
|
+
/* No v2 motion token holds this duration. TODO(FEINF-6505): adopt a v2 motion token when one is added. */
|
|
17611
|
+
--db-progress-transition-duration: 300ms;
|
|
17612
|
+
}
|
|
17613
|
+
|
|
17614
|
+
:where(:root), :where(.du-bois-light) {
|
|
17615
|
+
/* Color */
|
|
17616
|
+
/* No v2 token holds tertiary action-text states yet. TODO(FEINF-6505): adopt a v2 token when one lands. */
|
|
17617
|
+
--db-overflow-trigger-text: var(--db-color-action-tertiary-text-default);
|
|
17618
|
+
--db-overflow-trigger-text-hover: var(--db-color-action-tertiary-text-hover);
|
|
17619
|
+
--db-overflow-trigger-text-press: var(--db-color-action-tertiary-text-press);
|
|
17620
|
+
|
|
17621
|
+
/* Density */
|
|
17622
|
+
--db-overflow-spacing: var(--db-space-2);
|
|
17623
|
+
--db-overflow-menu-spacing: var(--db-space-1);
|
|
17624
|
+
}
|