@primer/primitives 11.4.0-rc.7bb41c84 → 11.4.0-rc.ac67c881

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.
Files changed (35) hide show
  1. package/dist/build/platforms/css.js +2 -2
  2. package/dist/css/functional/size/viewport.css +1 -1
  3. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +2 -5
  4. package/dist/css/functional/themes/dark-colorblind.css +2 -5
  5. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +2 -5
  6. package/dist/css/functional/themes/dark-dimmed.css +2 -5
  7. package/dist/css/functional/themes/dark-high-contrast.css +2 -5
  8. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +2 -5
  9. package/dist/css/functional/themes/dark-tritanopia.css +2 -5
  10. package/dist/css/functional/themes/dark.css +2 -5
  11. package/dist/css/functional/themes/light-colorblind-high-contrast.css +2 -5
  12. package/dist/css/functional/themes/light-colorblind.css +2 -5
  13. package/dist/css/functional/themes/light-high-contrast.css +2 -5
  14. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +2 -5
  15. package/dist/css/functional/themes/light-tritanopia.css +2 -5
  16. package/dist/css/functional/themes/light.css +2 -5
  17. package/dist/docs/functional/size/viewport.json +2 -2
  18. package/dist/fallbacks/functional/size/viewport.json +1 -1
  19. package/dist/internalCss/dark-colorblind-high-contrast.css +2 -5
  20. package/dist/internalCss/dark-colorblind.css +2 -5
  21. package/dist/internalCss/dark-dimmed-high-contrast.css +2 -5
  22. package/dist/internalCss/dark-dimmed.css +2 -5
  23. package/dist/internalCss/dark-high-contrast.css +2 -5
  24. package/dist/internalCss/dark-tritanopia-high-contrast.css +2 -5
  25. package/dist/internalCss/dark-tritanopia.css +2 -5
  26. package/dist/internalCss/dark.css +2 -5
  27. package/dist/internalCss/light-colorblind-high-contrast.css +2 -5
  28. package/dist/internalCss/light-colorblind.css +2 -5
  29. package/dist/internalCss/light-high-contrast.css +2 -5
  30. package/dist/internalCss/light-tritanopia-high-contrast.css +2 -5
  31. package/dist/internalCss/light-tritanopia.css +2 -5
  32. package/dist/internalCss/light.css +2 -5
  33. package/dist/styleLint/functional/size/viewport.json +2 -2
  34. package/package.json +1 -1
  35. package/src/tokens/functional/size/viewport.json5 +1 -1
package/dist/build/platforms/css.js CHANGED
@@ -8,12 +8,12 @@ const getCssSelectors = (outputFile) => {
8
8
  const mode = outputBasename.substring(0, 4) === 'dark' ? 'dark' : 'light';
9
9
  return [
10
10
  {
11
- selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="${mode}"][data-${mode}-theme="${themeName}"] ::backdrop, [data-color-mode="auto"][data-light-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"] ::backdrop`,
11
+ selector: `[data-color-mode="${mode}"][data-${mode}-theme="${themeName}"], [data-color-mode="auto"][data-light-theme="${themeName}"]`,
12
12
  },
13
13
  {
14
14
  query: '@media (prefers-color-scheme: dark)',
15
15
  // [data-color-mode] here is duplicated to increase the specificity so that light mode can't override it when prefers-color-scheme: dark is enabled
16
- selector: `[data-color-mode][data-color-mode="auto"][data-dark-theme="${themeName}"], [data-color-mode][data-color-mode="auto"][data-dark-theme="${themeName}"] ::backdrop`,
16
+ selector: `[data-color-mode][data-color-mode="auto"][data-dark-theme="${themeName}"]`,
17
17
  },
18
18
  ];
19
19
  };
package/dist/css/functional/size/viewport.css CHANGED
@@ -1,6 +1,6 @@
1
1
  @custom-media --viewportRange-landscape (orientation: landscape);
2
2
  @custom-media --viewportRange-narrow (max-width: calc(48rem - 0.02px));
3
- @custom-media --viewportRange-narrowLandscape (max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape));
3
+ @custom-media --viewportRange-narrowLandscape ((max-width: calc(63.25rem - 0.02px)) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape));
4
4
  @custom-media --viewportRange-portrait (orientation: portrait);
5
5
  @custom-media --viewportRange-regular (min-width: 48rem);
6
6
  @custom-media --viewportRange-wide (min-width: 87.5rem);
package/dist/css/functional/themes/dark-colorblind-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_colorblind_high_contrast"],
2
- [data-color-mode="dark"][data-dark-theme="dark_colorblind_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"] {
5
3
  --button-primary-bgColor-active: #3685f3;
6
4
  --button-primary-bgColor-hover: #2a7aef;
7
5
  --button-primary-borderColor-disabled: #1158c7;
@@ -898,8 +896,7 @@
898
896
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind_high_contrast"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind_high_contrast"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind_high_contrast"] {
903
900
  --button-primary-bgColor-active: #3685f3;
904
901
  --button-primary-bgColor-hover: #2a7aef;
905
902
  --button-primary-borderColor-disabled: #1158c7;
package/dist/css/functional/themes/dark-colorblind.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_colorblind"],
2
- [data-color-mode="dark"][data-dark-theme="dark_colorblind"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_colorblind"],
4
- [data-color-mode="auto"][data-light-theme="dark_colorblind"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_colorblind"] {
5
3
  --button-primary-bgColor-active: #3685f3;
6
4
  --button-primary-bgColor-hover: #2a7aef;
7
5
  --button-primary-borderColor-disabled: #1158c7;
@@ -898,8 +896,7 @@
898
896
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"] {
903
900
  --button-primary-bgColor-active: #3685f3;
904
901
  --button-primary-bgColor-hover: #2a7aef;
905
902
  --button-primary-borderColor-disabled: #1158c7;
package/dist/css/functional/themes/dark-dimmed-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_dimmed_high_contrast"],
2
- [data-color-mode="dark"][data-dark-theme="dark_dimmed_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"] {
5
3
  --button-danger-fgColor-active: #ffffff;
6
4
  --button-danger-fgColor-hover: #ffffff;
7
5
  --button-danger-iconColor-hover: #ffffff;
@@ -898,8 +896,7 @@
898
896
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed_high_contrast"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed_high_contrast"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed_high_contrast"] {
903
900
  --button-danger-fgColor-active: #ffffff;
904
901
  --button-danger-fgColor-hover: #ffffff;
905
902
  --button-danger-iconColor-hover: #ffffff;
package/dist/css/functional/themes/dark-dimmed.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_dimmed"],
2
- [data-color-mode="dark"][data-dark-theme="dark_dimmed"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_dimmed"],
4
- [data-color-mode="auto"][data-light-theme="dark_dimmed"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_dimmed"] {
5
3
  --button-danger-fgColor-active: #ffffff;
6
4
  --button-danger-fgColor-hover: #ffffff;
7
5
  --button-danger-fgColor-rest: #ea5c53;
@@ -898,8 +896,7 @@
898
896
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"] {
903
900
  --button-danger-fgColor-active: #ffffff;
904
901
  --button-danger-fgColor-hover: #ffffff;
905
902
  --button-danger-fgColor-rest: #ea5c53;
package/dist/css/functional/themes/dark-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_high_contrast"],
2
- [data-color-mode="dark"][data-dark-theme="dark_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="dark_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_high_contrast"] {
5
3
  --button-primary-bgColor-active: #109135;
6
4
  --button-primary-bgColor-disabled: #048f2f;
7
5
  --button-primary-bgColor-hover: #08792b;
@@ -898,8 +896,7 @@
898
896
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"] {
903
900
  --button-primary-bgColor-active: #109135;
904
901
  --button-primary-bgColor-disabled: #048f2f;
905
902
  --button-primary-bgColor-hover: #08792b;
package/dist/css/functional/themes/dark-tritanopia-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_tritanopia_high_contrast"],
2
- [data-color-mode="dark"][data-dark-theme="dark_tritanopia_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"] {
5
3
  --button-outline-bgColor-active: #0d419d;
6
4
  --button-primary-bgColor-active: #3685f3;
7
5
  --button-primary-bgColor-disabled: #5fabfe;
@@ -898,8 +896,7 @@
898
896
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia_high_contrast"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia_high_contrast"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia_high_contrast"] {
903
900
  --button-outline-bgColor-active: #0d419d;
904
901
  --button-primary-bgColor-active: #3685f3;
905
902
  --button-primary-bgColor-disabled: #5fabfe;
package/dist/css/functional/themes/dark-tritanopia.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_tritanopia"],
2
- [data-color-mode="dark"][data-dark-theme="dark_tritanopia"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_tritanopia"],
4
- [data-color-mode="auto"][data-light-theme="dark_tritanopia"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_tritanopia"] {
5
3
  --bgColor-sponsors-muted: #db61a21a;
6
4
  --button-danger-fgColor-rest: #fa5e55;
7
5
  --button-outline-bgColor-active: #0d419d;
@@ -898,8 +896,7 @@
898
896
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"] {
903
900
  --bgColor-sponsors-muted: #db61a21a;
904
901
  --button-danger-fgColor-rest: #fa5e55;
905
902
  --button-outline-bgColor-active: #0d419d;
package/dist/css/functional/themes/dark.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark"],
2
- [data-color-mode="dark"][data-dark-theme="dark"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark"],
4
- [data-color-mode="auto"][data-light-theme="dark"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark"] {
5
3
  --button-danger-fgColor-rest: #fa5e55;
6
4
  --button-primary-bgColor-active: #2e9a40;
7
5
  --button-primary-bgColor-disabled: #105823;
@@ -898,8 +896,7 @@
898
896
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"] {
903
900
  --button-danger-fgColor-rest: #fa5e55;
904
901
  --button-primary-bgColor-active: #2e9a40;
905
902
  --button-primary-bgColor-disabled: #105823;
package/dist/css/functional/themes/light-colorblind-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="light"][data-light-theme="light_colorblind_high_contrast"],
2
- [data-color-mode="light"][data-light-theme="light_colorblind_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"] {
5
3
  --button-outline-bgColor-active: #033f9d;
6
4
  --button-primary-bgColor-active: #075fc8;
7
5
  --button-primary-bgColor-disabled: #92caff;
@@ -898,8 +896,7 @@
898
896
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind_high_contrast"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind_high_contrast"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind_high_contrast"] {
903
900
  --button-outline-bgColor-active: #033f9d;
904
901
  --button-primary-bgColor-active: #075fc8;
905
902
  --button-primary-bgColor-disabled: #92caff;
package/dist/css/functional/themes/light-colorblind.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="light"][data-light-theme="light_colorblind"],
2
- [data-color-mode="light"][data-light-theme="light_colorblind"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="light_colorblind"],
4
- [data-color-mode="auto"][data-light-theme="light_colorblind"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="light_colorblind"] {
5
3
  --button-outline-bgColor-active: #0757ba;
6
4
  --button-primary-bgColor-active: #075fc8;
7
5
  --button-primary-bgColor-disabled: #92caff;
@@ -898,8 +896,7 @@
898
896
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind"] {
903
900
  --button-outline-bgColor-active: #0757ba;
904
901
  --button-primary-bgColor-active: #075fc8;
905
902
  --button-primary-bgColor-disabled: #92caff;
package/dist/css/functional/themes/light-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="light"][data-light-theme="light_high_contrast"],
2
- [data-color-mode="light"][data-light-theme="light_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="light_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="light_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="light_high_contrast"] {
5
3
  --button-outline-bgColor-active: #033f9d;
6
4
  --button-primary-bgColor-active: #03501b;
7
5
  --button-primary-bgColor-disabled: #85cb97;
@@ -898,8 +896,7 @@
898
896
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"] {
903
900
  --button-outline-bgColor-active: #033f9d;
904
901
  --button-primary-bgColor-active: #03501b;
905
902
  --button-primary-bgColor-disabled: #85cb97;
package/dist/css/functional/themes/light-tritanopia-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="light"][data-light-theme="light_tritanopia_high_contrast"],
2
- [data-color-mode="light"][data-light-theme="light_tritanopia_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"] {
5
3
  --button-outline-bgColor-active: #033f9d;
6
4
  --button-primary-bgColor-active: #075fc8;
7
5
  --button-primary-bgColor-disabled: #92caff;
@@ -898,8 +896,7 @@
898
896
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia_high_contrast"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia_high_contrast"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia_high_contrast"] {
903
900
  --button-outline-bgColor-active: #033f9d;
904
901
  --button-primary-bgColor-active: #075fc8;
905
902
  --button-primary-bgColor-disabled: #92caff;
package/dist/css/functional/themes/light-tritanopia.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="light"][data-light-theme="light_tritanopia"],
2
- [data-color-mode="light"][data-light-theme="light_tritanopia"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="light_tritanopia"],
4
- [data-color-mode="auto"][data-light-theme="light_tritanopia"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="light_tritanopia"] {
5
3
  --button-outline-bgColor-active: #0757ba;
6
4
  --button-primary-bgColor-active: #075fc8;
7
5
  --button-primary-bgColor-disabled: #92caff;
@@ -898,8 +896,7 @@
898
896
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia"] {
903
900
  --button-outline-bgColor-active: #0757ba;
904
901
  --button-primary-bgColor-active: #075fc8;
905
902
  --button-primary-bgColor-disabled: #92caff;
package/dist/css/functional/themes/light.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="light"][data-light-theme="light"],
2
- [data-color-mode="light"][data-light-theme="light"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="light"],
4
- [data-color-mode="auto"][data-light-theme="light"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="light"] {
5
3
  --bgColor-success-emphasis: #1f883d;
6
4
  --button-outline-bgColor-active: #0757ba;
7
5
  --button-primary-bgColor-active: #197935;
@@ -898,8 +896,7 @@
898
896
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
899
897
  }
900
898
  @media (prefers-color-scheme: dark) {
901
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light"],
902
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light"] ::backdrop {
899
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="light"] {
903
900
  --bgColor-success-emphasis: #1f883d;
904
901
  --button-outline-bgColor-active: #0757ba;
905
902
  --button-primary-bgColor-active: #197935;
package/dist/docs/functional/size/viewport.json CHANGED
@@ -34,14 +34,14 @@
34
34
  "filePath": "src/tokens/functional/size/viewport.json5",
35
35
  "isSource": true,
36
36
  "original": {
37
- "$value": "(max-width: calc({breakpoint.large} - 0.02px) and (max-height: calc({breakpoint.small} - 0.02px)) and (orientation: landscape))",
37
+ "$value": "((max-width: calc({breakpoint.large} - 0.02px)) and (max-height: calc({breakpoint.small} - 0.02px)) and (orientation: landscape))",
38
38
  "$type": "custom-viewportRange",
39
39
  "key": "{viewportRange.narrowLandscape}"
40
40
  },
41
41
  "name": "viewportRange-narrowLandscape",
42
42
  "attributes": {},
43
43
  "path": ["viewportRange", "narrowLandscape"],
44
- "value": "(max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))",
44
+ "value": "((max-width: calc(63.25rem - 0.02px)) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))",
45
45
  "type": "custom-viewportRange"
46
46
  },
47
47
  "viewportRange-portrait": {
package/dist/fallbacks/functional/size/viewport.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "--viewportRange-narrow": "(max-width: calc(48rem - 0.02px))",
3
- "--viewportRange-narrowLandscape": "(max-width: calc(63.25rem - 0.02px) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))",
3
+ "--viewportRange-narrowLandscape": "((max-width: calc(63.25rem - 0.02px)) and (max-height: calc(34rem - 0.02px)) and (orientation: landscape))",
4
4
  "--viewportRange-regular": "(min-width: 48rem)",
5
5
  "--viewportRange-wide": "(min-width: 87.5rem)",
6
6
  "--viewportRange-portrait": "(orientation: portrait)",
package/dist/internalCss/dark-colorblind-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_colorblind_high_contrast"],
2
- [data-color-mode="dark"][data-dark-theme="dark_colorblind_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_colorblind_high_contrast"] {
5
3
  --base-color-black: #010409;
6
4
  --base-color-blue-0: #caeaff;
7
5
  --base-color-blue-1: #addcff;
@@ -1202,8 +1200,7 @@
1202
1200
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind_high_contrast"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind_high_contrast"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind_high_contrast"] {
1207
1204
  --base-color-black: #010409;
1208
1205
  --base-color-blue-0: #caeaff;
1209
1206
  --base-color-blue-1: #addcff;
package/dist/internalCss/dark-colorblind.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_colorblind"],
2
- [data-color-mode="dark"][data-dark-theme="dark_colorblind"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_colorblind"],
4
- [data-color-mode="auto"][data-light-theme="dark_colorblind"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_colorblind"] {
5
3
  --base-color-black: #010409;
6
4
  --base-color-blue-0: #cae8ff;
7
5
  --base-color-blue-1: #a5d6ff;
@@ -1202,8 +1200,7 @@
1202
1200
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_colorblind"] {
1207
1204
  --base-color-black: #010409;
1208
1205
  --base-color-blue-0: #cae8ff;
1209
1206
  --base-color-blue-1: #a5d6ff;
package/dist/internalCss/dark-dimmed-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_dimmed_high_contrast"],
2
- [data-color-mode="dark"][data-dark-theme="dark_dimmed_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_dimmed_high_contrast"] {
5
3
  --base-color-black: #010409;
6
4
  --base-color-blue-0: #c6e6ff;
7
5
  --base-color-blue-1: #96d0ff;
@@ -1202,8 +1200,7 @@
1202
1200
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed_high_contrast"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed_high_contrast"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed_high_contrast"] {
1207
1204
  --base-color-black: #010409;
1208
1205
  --base-color-blue-0: #c6e6ff;
1209
1206
  --base-color-blue-1: #96d0ff;
package/dist/internalCss/dark-dimmed.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_dimmed"],
2
- [data-color-mode="dark"][data-dark-theme="dark_dimmed"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_dimmed"],
4
- [data-color-mode="auto"][data-light-theme="dark_dimmed"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_dimmed"] {
5
3
  --base-color-black: #010409;
6
4
  --base-color-blue-0: #c6e6ff;
7
5
  --base-color-blue-1: #96d0ff;
@@ -1202,8 +1200,7 @@
1202
1200
  --button-danger-borderColor-active: var(--button-danger-borderColor-hover);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_dimmed"] {
1207
1204
  --base-color-black: #010409;
1208
1205
  --base-color-blue-0: #c6e6ff;
1209
1206
  --base-color-blue-1: #96d0ff;
package/dist/internalCss/dark-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_high_contrast"],
2
- [data-color-mode="dark"][data-dark-theme="dark_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="dark_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_high_contrast"] {
5
3
  --base-color-black: #010409;
6
4
  --base-color-blue-0: #caeaff;
7
5
  --base-color-blue-1: #addcff;
@@ -1202,8 +1200,7 @@
1202
1200
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_high_contrast"] {
1207
1204
  --base-color-black: #010409;
1208
1205
  --base-color-blue-0: #caeaff;
1209
1206
  --base-color-blue-1: #addcff;
package/dist/internalCss/dark-tritanopia-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_tritanopia_high_contrast"],
2
- [data-color-mode="dark"][data-dark-theme="dark_tritanopia_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_tritanopia_high_contrast"] {
5
3
  --base-color-black: #010409;
6
4
  --base-color-blue-0: #caeaff;
7
5
  --base-color-blue-1: #addcff;
@@ -1202,8 +1200,7 @@
1202
1200
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia_high_contrast"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia_high_contrast"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia_high_contrast"] {
1207
1204
  --base-color-black: #010409;
1208
1205
  --base-color-blue-0: #caeaff;
1209
1206
  --base-color-blue-1: #addcff;
package/dist/internalCss/dark-tritanopia.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark_tritanopia"],
2
- [data-color-mode="dark"][data-dark-theme="dark_tritanopia"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark_tritanopia"],
4
- [data-color-mode="auto"][data-light-theme="dark_tritanopia"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark_tritanopia"] {
5
3
  --base-color-black: #010409;
6
4
  --base-color-blue-0: #cae8ff;
7
5
  --base-color-blue-1: #a5d6ff;
@@ -1202,8 +1200,7 @@
1202
1200
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark_tritanopia"] {
1207
1204
  --base-color-black: #010409;
1208
1205
  --base-color-blue-0: #cae8ff;
1209
1206
  --base-color-blue-1: #a5d6ff;
package/dist/internalCss/dark.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="dark"][data-dark-theme="dark"],
2
- [data-color-mode="dark"][data-dark-theme="dark"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="dark"],
4
- [data-color-mode="auto"][data-light-theme="dark"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="dark"] {
5
3
  --base-color-black: #010409;
6
4
  --base-color-blue-0: #cae8ff;
7
5
  --base-color-blue-1: #a5d6ff;
@@ -1202,8 +1200,7 @@
1202
1200
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="dark"] {
1207
1204
  --base-color-black: #010409;
1208
1205
  --base-color-blue-0: #cae8ff;
1209
1206
  --base-color-blue-1: #a5d6ff;
package/dist/internalCss/light-colorblind-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="light"][data-light-theme="light_colorblind_high_contrast"],
2
- [data-color-mode="light"][data-light-theme="light_colorblind_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="light_colorblind_high_contrast"] {
5
3
  --base-color-black: #010409;
6
4
  --base-color-blue-0: #dff7ff;
7
5
  --base-color-blue-1: #9cd7ff;
@@ -1202,8 +1200,7 @@
1202
1200
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind_high_contrast"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind_high_contrast"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind_high_contrast"] {
1207
1204
  --base-color-black: #010409;
1208
1205
  --base-color-blue-0: #dff7ff;
1209
1206
  --base-color-blue-1: #9cd7ff;
package/dist/internalCss/light-colorblind.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="light"][data-light-theme="light_colorblind"],
2
- [data-color-mode="light"][data-light-theme="light_colorblind"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="light_colorblind"],
4
- [data-color-mode="auto"][data-light-theme="light_colorblind"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="light_colorblind"] {
5
3
  --base-color-black: #1f2328;
6
4
  --base-color-blue-0: #ddf4ff;
7
5
  --base-color-blue-1: #b6e3ff;
@@ -1202,8 +1200,7 @@
1202
1200
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="light_colorblind"] {
1207
1204
  --base-color-black: #1f2328;
1208
1205
  --base-color-blue-0: #ddf4ff;
1209
1206
  --base-color-blue-1: #b6e3ff;
package/dist/internalCss/light-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="light"][data-light-theme="light_high_contrast"],
2
- [data-color-mode="light"][data-light-theme="light_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="light_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="light_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="light_high_contrast"] {
5
3
  --base-color-black: #010409;
6
4
  --base-color-blue-0: #dff7ff;
7
5
  --base-color-blue-1: #9cd7ff;
@@ -1202,8 +1200,7 @@
1202
1200
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="light_high_contrast"] {
1207
1204
  --base-color-black: #010409;
1208
1205
  --base-color-blue-0: #dff7ff;
1209
1206
  --base-color-blue-1: #9cd7ff;
package/dist/internalCss/light-tritanopia-high-contrast.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="light"][data-light-theme="light_tritanopia_high_contrast"],
2
- [data-color-mode="light"][data-light-theme="light_tritanopia_high_contrast"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"],
4
- [data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="light_tritanopia_high_contrast"] {
5
3
  --base-color-black: #010409;
6
4
  --base-color-blue-0: #dff7ff;
7
5
  --base-color-blue-1: #9cd7ff;
@@ -1202,8 +1200,7 @@
1202
1200
  --controlKnob-borderColor-rest: var(--control-borderColor-emphasis);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia_high_contrast"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia_high_contrast"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia_high_contrast"] {
1207
1204
  --base-color-black: #010409;
1208
1205
  --base-color-blue-0: #dff7ff;
1209
1206
  --base-color-blue-1: #9cd7ff;
package/dist/internalCss/light-tritanopia.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="light"][data-light-theme="light_tritanopia"],
2
- [data-color-mode="light"][data-light-theme="light_tritanopia"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="light_tritanopia"],
4
- [data-color-mode="auto"][data-light-theme="light_tritanopia"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="light_tritanopia"] {
5
3
  --base-color-black: #1f2328;
6
4
  --base-color-blue-0: #ddf4ff;
7
5
  --base-color-blue-1: #b6e3ff;
@@ -1202,8 +1200,7 @@
1202
1200
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="light_tritanopia"] {
1207
1204
  --base-color-black: #1f2328;
1208
1205
  --base-color-blue-0: #ddf4ff;
1209
1206
  --base-color-blue-1: #b6e3ff;
package/dist/internalCss/light.css CHANGED
@@ -1,7 +1,5 @@
1
1
  [data-color-mode="light"][data-light-theme="light"],
2
- [data-color-mode="light"][data-light-theme="light"] ::backdrop,
3
- [data-color-mode="auto"][data-light-theme="light"],
4
- [data-color-mode="auto"][data-light-theme="light"] ::backdrop {
2
+ [data-color-mode="auto"][data-light-theme="light"] {
5
3
  --base-color-black: #1f2328;
6
4
  --base-color-blue-0: #ddf4ff;
7
5
  --base-color-blue-1: #b6e3ff;
@@ -1202,8 +1200,7 @@
1202
1200
  --button-outline-borderColor-active: var(--button-outline-borderColor-hover);
1203
1201
  }
1204
1202
  @media (prefers-color-scheme: dark) {
1205
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light"],
1206
- [data-color-mode][data-color-mode="auto"][data-dark-theme="light"] ::backdrop {
1203
+ [data-color-mode][data-color-mode="auto"][data-dark-theme="light"] {
1207
1204
  --base-color-black: #1f2328;
1208
1205
  --base-color-blue-0: #ddf4ff;
1209
1206
  --base-color-blue-1: #b6e3ff;
package/dist/styleLint/functional/size/viewport.json CHANGED
@@ -31,12 +31,12 @@
31
31
  },
32
32
  "viewportRange-narrowLandscape": {
33
33
  "key": "{viewportRange.narrowLandscape}",
34
- "$value": "(max-width: calc(63.25rem,1012px - 0.02px) and (max-height: calc(34rem,544px - 0.02px)) and (orientation: landscape))",
34
+ "$value": "((max-width: calc(63.25rem,1012px - 0.02px)) and (max-height: calc(34rem,544px - 0.02px)) and (orientation: landscape))",
35
35
  "$type": "custom-viewportRange",
36
36
  "filePath": "src/tokens/functional/size/viewport.json5",
37
37
  "isSource": true,
38
38
  "original": {
39
- "$value": "(max-width: calc({breakpoint.large} - 0.02px) and (max-height: calc({breakpoint.small} - 0.02px)) and (orientation: landscape))",
39
+ "$value": "((max-width: calc({breakpoint.large} - 0.02px)) and (max-height: calc({breakpoint.small} - 0.02px)) and (orientation: landscape))",
40
40
  "$type": "custom-viewportRange",
41
41
  "key": "{viewportRange.narrowLandscape}"
42
42
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@primer/primitives",
3
- "version": "11.4.0-rc.7bb41c84",
3
+ "version": "11.4.0-rc.ac67c881",
4
4
  "description": "Typography, spacing, and color primitives for Primer design system",
5
5
  "type": "module",
6
6
  "files": [
package/src/tokens/functional/size/viewport.json5 CHANGED
@@ -5,7 +5,7 @@
5
5
  "$type": "custom-viewportRange"
6
6
  },
7
7
  "narrowLandscape": {
8
- "$value": "(max-width: calc({breakpoint.large} - 0.02px) and (max-height: calc({breakpoint.small} - 0.02px)) and (orientation: landscape))",
8
+ "$value": "((max-width: calc({breakpoint.large} - 0.02px)) and (max-height: calc({breakpoint.small} - 0.02px)) and (orientation: landscape))",
9
9
  "$type": "custom-viewportRange"
10
10
  },
11
11
  "regular": {