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