@servicetitan/hammer-token 0.0.0-rc-1.48.0-20251104214834 → 0.0.0-rc-3.0.0-20260114215531

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 (76) hide show
  1. package/CHANGELOG.md +29 -1
  2. package/README.md +222 -0
  3. package/build/web/core/component-variables.scss +114 -130
  4. package/build/web/core/component.d.ts +65 -0
  5. package/build/web/core/component.js +248 -267
  6. package/build/web/core/component.scss +63 -69
  7. package/build/web/core/css-utils/a2-border.css +39 -41
  8. package/build/web/core/css-utils/a2-color.css +351 -227
  9. package/build/web/core/css-utils/a2-font.css +0 -2
  10. package/build/web/core/css-utils/a2-spacing.css +0 -2
  11. package/build/web/core/css-utils/a2-utils.css +418 -292
  12. package/build/web/core/css-utils/border.css +39 -41
  13. package/build/web/core/css-utils/color.css +351 -227
  14. package/build/web/core/css-utils/font.css +0 -2
  15. package/build/web/core/css-utils/spacing.css +0 -2
  16. package/build/web/core/css-utils/utils.css +418 -292
  17. package/build/web/core/index.d.ts +6 -0
  18. package/build/web/core/index.js +1 -1
  19. package/build/web/core/primitive-variables.scss +130 -71
  20. package/build/web/core/primitive.d.ts +185 -0
  21. package/build/web/core/primitive.js +328 -72
  22. package/build/web/core/primitive.scss +183 -124
  23. package/build/web/core/semantic-variables.scss +287 -220
  24. package/build/web/core/semantic.d.ts +194 -0
  25. package/build/web/core/semantic.js +875 -347
  26. package/build/web/core/semantic.scss +192 -140
  27. package/build/web/index.d.ts +3 -4
  28. package/build/web/index.js +0 -1
  29. package/build/web/types.d.ts +17 -0
  30. package/config.js +121 -496
  31. package/package.json +5 -4
  32. package/src/global/primitive/breakpoint.tokens.json +39 -0
  33. package/src/global/primitive/color.tokens.json +536 -0
  34. package/src/global/primitive/duration.tokens.json +32 -0
  35. package/src/global/primitive/font.tokens.json +103 -0
  36. package/src/global/primitive/radius.tokens.json +67 -0
  37. package/src/global/primitive/size.tokens.json +123 -0
  38. package/src/global/primitive/transition.tokens.json +20 -0
  39. package/src/theme/core/background.tokens.json +981 -0
  40. package/src/theme/core/border.tokens.json +148 -0
  41. package/src/theme/core/charts.tokens.json +802 -0
  42. package/src/theme/core/component/button.tokens.json +752 -0
  43. package/src/theme/core/component/checkbox.tokens.json +292 -0
  44. package/src/theme/core/focus.tokens.json +48 -0
  45. package/src/theme/core/foreground.tokens.json +288 -0
  46. package/src/theme/core/shadow.tokens.json +43 -0
  47. package/src/theme/core/status.tokens.json +70 -0
  48. package/src/theme/core/typography.tokens.json +100 -0
  49. package/src/utils/copy-css-utils-cli.js +13 -0
  50. package/src/utils/css-utils-format-utils.js +98 -1
  51. package/src/utils/sd-build-configs.js +372 -0
  52. package/src/utils/sd-formats.js +752 -0
  53. package/src/utils/sd-transforms.js +126 -0
  54. package/src/utils/token-helpers.js +555 -0
  55. package/tsconfig.json +18 -0
  56. package/.turbo/turbo-build.log +0 -37
  57. package/build/web/core/raw.js +0 -234
  58. package/src/global/primitive/breakpoint.js +0 -19
  59. package/src/global/primitive/color.js +0 -231
  60. package/src/global/primitive/duration.js +0 -16
  61. package/src/global/primitive/font.js +0 -60
  62. package/src/global/primitive/radius.js +0 -31
  63. package/src/global/primitive/size.js +0 -55
  64. package/src/global/primitive/transition.js +0 -16
  65. package/src/theme/core/background.js +0 -170
  66. package/src/theme/core/border.js +0 -103
  67. package/src/theme/core/charts.js +0 -464
  68. package/src/theme/core/component/button.js +0 -708
  69. package/src/theme/core/component/checkbox.js +0 -405
  70. package/src/theme/core/focus.js +0 -35
  71. package/src/theme/core/foreground.js +0 -148
  72. package/src/theme/core/overlay.js +0 -137
  73. package/src/theme/core/shadow.js +0 -29
  74. package/src/theme/core/status.js +0 -49
  75. package/src/theme/core/typography.js +0 -82
  76. package/type/types.ts +0 -344
package/build/web/core/component.scss CHANGED
@@ -1,69 +1,63 @@
1
- $button-primary-foreground-color: var(--button-primary-foreground-color, #ffffff);
2
- $button-primary-foreground-color-hover: var(--button-primary-foreground-color-hover, #ffffff);
3
- $button-primary-foreground-color-active: var(--button-primary-foreground-color-active, #ffffff);
4
- $button-primary-background-color: var(--button-primary-background-color, #0265DC);
5
- $button-primary-background-color-hover: var(--button-primary-background-color-hover, #0655b4ff);
6
- $button-primary-background-color-active: var(--button-primary-background-color-active, #09458cff);
7
- $button-primary-border-color: var(--button-primary-border-color, transparent);
8
- $button-primary-border-radius: 0.375rem;
9
- $button-primary-focus-ring-color: var(--button-primary-focus-ring-color, #0265DC);
10
- $button-secondary-foreground-color: var(--button-secondary-foreground-color, #141414);
11
- $button-secondary-foreground-color-hover: var(--button-secondary-foreground-color-hover, #141414);
12
- $button-secondary-foreground-color-active: var(--button-secondary-foreground-color-active, #141414);
13
- $button-secondary-background-color: var(--button-secondary-background-color, #0404040f);
14
- $button-secondary-background-color-hover: var(--button-secondary-background-color-hover, #05050522);
15
- $button-secondary-background-color-active: var(--button-secondary-background-color-active, #07070735);
16
- $button-secondary-border-color: var(--button-secondary-border-color, transparent);
17
- $button-secondary-border-radius: 0.375rem;
18
- $button-secondary-focus-ring-color: var(--button-secondary-focus-ring-color, #0265DC);
19
- $button-ghost-foreground-color: var(--button-ghost-foreground-color, #141414);
20
- $button-ghost-foreground-color-hover: var(--button-ghost-foreground-color-hover, #141414);
21
- $button-ghost-foreground-color-active: var(--button-ghost-foreground-color-active, #141414);
22
- $button-ghost-background-color: var(--button-ghost-background-color, transparent);
23
- $button-ghost-background-color-hover: var(--button-ghost-background-color-hover, #14141414);
24
- $button-ghost-background-color-active: var(--button-ghost-background-color-active, #14141429);
25
- $button-ghost-border-color: var(--button-ghost-border-color, transparent);
26
- $button-ghost-border-radius: 0.375rem;
27
- $button-ghost-focus-ring-color: var(--button-ghost-focus-ring-color, #0265DC);
28
- $button-danger-primary-foreground-color: var(--button-danger-primary-foreground-color, #ffffff);
29
- $button-danger-primary-foreground-color-hover: var(--button-danger-primary-foreground-color-hover, #ffffff);
30
- $button-danger-primary-foreground-color-active: var(--button-danger-primary-foreground-color-active, #ffffff);
31
- $button-danger-primary-background-color: var(--button-danger-primary-background-color, #e13212);
32
- $button-danger-primary-background-color-hover: var(--button-danger-primary-background-color-hover, #b82c12ff);
33
- $button-danger-primary-background-color-active: var(--button-danger-primary-background-color-active, #8f2613ff);
34
- $button-danger-primary-border-color: var(--button-danger-primary-border-color, transparent);
35
- $button-danger-primary-border-radius: 0.375rem;
36
- $button-danger-primary-focus-ring-color: var(--button-danger-primary-focus-ring-color, #e13212);
37
- $button-danger-secondary-foreground-color: var(--button-danger-secondary-foreground-color, #bf2a00);
38
- $button-danger-secondary-foreground-color-hover: var(--button-danger-secondary-foreground-color-hover, #bf2a00);
39
- $button-danger-secondary-foreground-color-active: var(--button-danger-secondary-foreground-color-active, #bf2a00);
40
- $button-danger-secondary-background-color: var(--button-danger-secondary-background-color, #ffece9);
41
- $button-danger-secondary-background-color-hover: var(--button-danger-secondary-background-color-hover, #fcd9d4ff);
42
- $button-danger-secondary-background-color-active: var(--button-danger-secondary-background-color-active, #f6b4a9ff);
43
- $button-danger-secondary-border-color: var(--button-danger-secondary-border-color, transparent);
44
- $button-danger-secondary-border-radius: 0.375rem;
45
- $button-danger-secondary-focus-ring-color: var(--button-danger-secondary-focus-ring-color, #e13212);
46
- $checkbox-unchecked-fill-color-default: var(--checkbox-unchecked-fill-color-default, #141414);
47
- $checkbox-unchecked-fill-color-hover: var(--checkbox-unchecked-fill-color-hover, #141414);
48
- $checkbox-unchecked-fill-color-active: var(--checkbox-unchecked-fill-color-active, #141414);
49
- $checkbox-unchecked-background-color-default: var(--checkbox-unchecked-background-color-default, transparent);
50
- $checkbox-unchecked-background-color-hover: var(--checkbox-unchecked-background-color-hover, #14141414);
51
- $checkbox-unchecked-background-color-active: var(--checkbox-unchecked-background-color-active, #14141429);
52
- $checkbox-checked-fill-color-default: var(--checkbox-checked-fill-color-default, #0265DC);
53
- $checkbox-checked-fill-color-hover: var(--checkbox-checked-fill-color-hover, #004ba0d1);
54
- $checkbox-checked-fill-color-active: var(--checkbox-checked-fill-color-active, #0151afb8);
55
- $checkbox-checked-background-color-default: var(--checkbox-checked-background-color-default, transparent);
56
- $checkbox-checked-background-color-hover: var(--checkbox-checked-background-color-hover, #0265dc14);
57
- $checkbox-checked-background-color-active: var(--checkbox-checked-background-color-active, #0265dc29);
58
- $checkbox-unchecked-error-fill-color-default: var(--checkbox-unchecked-error-fill-color-default, #e13212);
59
- $checkbox-unchecked-error-fill-color-hover: var(--checkbox-unchecked-error-fill-color-hover, #bf2a00);
60
- $checkbox-unchecked-error-fill-color-active: var(--checkbox-unchecked-error-fill-color-active, #bf2a00);
61
- $checkbox-unchecked-error-background-color-default: var(--checkbox-unchecked-error-background-color-default, transparent);
62
- $checkbox-unchecked-error-background-color-hover: var(--checkbox-unchecked-error-background-color-hover, #e132120f);
63
- $checkbox-unchecked-error-background-color-active: var(--checkbox-unchecked-error-background-color-active, #e132122e);
64
- $checkbox-checked-error-fill-color-default: var(--checkbox-checked-error-fill-color-default, #e13212);
65
- $checkbox-checked-error-fill-color-hover: var(--checkbox-checked-error-fill-color-hover, #bf2a00);
66
- $checkbox-checked-error-fill-color-active: var(--checkbox-checked-error-fill-color-active, #bf2a00);
67
- $checkbox-checked-error-background-color-default: var(--checkbox-checked-error-background-color-default, transparent);
68
- $checkbox-checked-error-background-color-hover: var(--checkbox-checked-error-background-color-hover, #e132120f);
69
- $checkbox-checked-error-background-color-active: var(--checkbox-checked-error-background-color-active, #e132122e);
1
+ $button-primary-foreground-color: var(--a2-button-primary-foreground-color, var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
2
+ $button-primary-foreground-color-hover: var(--a2-button-primary-foreground-color-hover, var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
3
+ $button-primary-foreground-color-active: var(--a2-button-primary-foreground-color-active, var(--a2-foreground-color-on-primary, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
4
+ $button-primary-background-color: var(--a2-button-primary-background-color, var(--a2-background-color-primary, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-300, #70b1ff))));
5
+ $button-primary-background-color-hover: var(--a2-button-primary-background-color-hover, var(--a2-background-color-primary-hover, light-dark(var(--a2-color-blue-600, #0065de), var(--a2-color-blue-200, #9ecaff))));
6
+ $button-primary-background-color-active: var(--a2-button-primary-background-color-active, var(--a2-background-color-primary-active, light-dark(var(--a2-color-blue-700, #004da9), var(--a2-color-blue-100, #cce3ff))));
7
+ $button-primary-border-color: var(--a2-button-primary-border-color, rgba(0, 0, 0, 0));
8
+ $button-primary-border-radius: var(--a2-button-primary-border-radius, var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem)));
9
+ $button-primary-focus-ring-color: var(--a2-button-primary-focus-ring-color, var(--a2-focus-ring-color-default, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-300, #70b1ff))));
10
+ $button-secondary-foreground-color: var(--a2-button-secondary-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
11
+ $button-secondary-foreground-color-hover: var(--a2-button-secondary-foreground-color-hover, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
12
+ $button-secondary-foreground-color-active: var(--a2-button-secondary-foreground-color-active, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
13
+ $button-secondary-background-color: var(--a2-button-secondary-background-color, var(--a2-background-color-secondary, light-dark(#0404040F, #ffffff0F)));
14
+ $button-secondary-background-color-hover: var(--a2-button-secondary-background-color-hover, var(--a2-background-color-secondary-hover, light-dark(#04040414, #ffffff14)));
15
+ $button-secondary-background-color-active: var(--a2-button-secondary-background-color-active, var(--a2-background-color-secondary-active, light-dark(#04040429, #ffffff29)));
16
+ $button-secondary-border-color: var(--a2-button-secondary-border-color, rgba(0, 0, 0, 0));
17
+ $button-secondary-border-radius: var(--a2-button-secondary-border-radius, var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem)));
18
+ $button-secondary-focus-ring-color: var(--a2-button-secondary-focus-ring-color, var(--a2-focus-ring-color-default, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-300, #70b1ff))));
19
+ $button-ghost-foreground-color: var(--a2-button-ghost-foreground-color, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
20
+ $button-ghost-foreground-color-hover: var(--a2-button-ghost-foreground-color-hover, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
21
+ $button-ghost-foreground-color-active: var(--a2-button-ghost-foreground-color-active, var(--a2-foreground-color-default, light-dark(var(--a2-color-neutral-950, #040404), var(--a2-color-neutral-0, #ffffff))));
22
+ $button-ghost-background-color: var(--a2-button-ghost-background-color, rgba(0, 0, 0, 0));
23
+ $button-ghost-background-color-hover: var(--a2-button-ghost-background-color-hover, light-dark(#8b8b8b14, #ffffff14));
24
+ $button-ghost-background-color-active: var(--a2-button-ghost-background-color-active, light-dark(#8b8b8b29, #ffffff29));
25
+ $button-ghost-border-color: var(--a2-button-ghost-border-color, rgba(0, 0, 0, 0));
26
+ $button-ghost-border-radius: var(--a2-button-ghost-border-radius, var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem)));
27
+ $button-ghost-focus-ring-color: var(--a2-button-ghost-focus-ring-color, var(--a2-focus-ring-color-default, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-300, #70b1ff))));
28
+ $button-danger-primary-foreground-color: var(--a2-button-danger-primary-foreground-color, var(--a2-foreground-color-on-danger, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
29
+ $button-danger-primary-foreground-color-hover: var(--a2-button-danger-primary-foreground-color-hover, var(--a2-foreground-color-on-danger, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
30
+ $button-danger-primary-foreground-color-active: var(--a2-button-danger-primary-foreground-color-active, var(--a2-foreground-color-on-danger, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-950, #040404))));
31
+ $button-danger-primary-background-color: var(--a2-button-danger-primary-background-color, var(--a2-background-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-100, #ffd4cc)))));
32
+ $button-danger-primary-background-color-hover: var(--a2-button-danger-primary-background-color-hover, var(--a2-background-color-danger-hover, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-red-200, #ffac9e))));
33
+ $button-danger-primary-background-color-active: var(--a2-button-danger-primary-background-color-active, var(--a2-background-color-danger-active, light-dark(var(--a2-color-red-700, #a31900), var(--a2-color-red-100, #ffd4cc))));
34
+ $button-danger-primary-border-color: var(--a2-button-danger-primary-border-color, rgba(0, 0, 0, 0));
35
+ $button-danger-primary-border-radius: var(--a2-button-danger-primary-border-radius, var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem)));
36
+ $button-danger-primary-focus-ring-color: var(--a2-button-danger-primary-focus-ring-color, var(--a2-focus-ring-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-300, #ff8974))));
37
+ $button-danger-secondary-foreground-color: var(--a2-button-danger-secondary-foreground-color, var(--a2-foreground-color-on-danger-subdued, light-dark(var(--a2-color-red-600, #d62100), var(--a2-color-neutral-0, #ffffff))));
38
+ $button-danger-secondary-foreground-color-hover: var(--a2-button-danger-secondary-foreground-color-hover, var(--a2-foreground-color-danger-hover, light-dark(var(--a2-color-red-600, #d62100), var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)))));
39
+ $button-danger-secondary-foreground-color-active: var(--a2-button-danger-secondary-foreground-color-active, var(--a2-foreground-color-danger-active, light-dark(var(--a2-color-red-600, #d62100), var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)))));
40
+ $button-danger-secondary-background-color: var(--a2-button-danger-secondary-background-color, var(--a2-background-color-danger-subdued, light-dark(var(--a2-color-red-100, #ffd4cc), #ff897433)));
41
+ $button-danger-secondary-background-color-hover: var(--a2-button-danger-secondary-background-color-hover, var(--a2-background-color-danger-subdued-hover, light-dark(var(--a2-color-red-200, #ffac9e), var(--a2-color-red-600, #d62100))));
42
+ $button-danger-secondary-background-color-active: var(--a2-button-danger-secondary-background-color-active, var(--a2-background-color-danger-subdued-active, light-dark(var(--a2-color-red-300, #ff8974), var(--a2-color-red-800, #731100))));
43
+ $button-danger-secondary-border-color: var(--a2-button-danger-secondary-border-color, rgba(0, 0, 0, 0));
44
+ $button-danger-secondary-border-radius: var(--a2-button-danger-secondary-border-radius, var(--a2-border-radius-medium, var(--a2-radius-2, 0.375rem)));
45
+ $button-danger-secondary-focus-ring-color: var(--a2-button-danger-secondary-focus-ring-color, var(--a2-focus-ring-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-300, #ff8974))));
46
+ $checkbox-checked-foreground-color: var(--a2-checkbox-checked-foreground-color, var(--a2-foreground-color-primary, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-300, #70b1ff))));
47
+ $checkbox-checked-foreground-color-hover: var(--a2-checkbox-checked-foreground-color-hover, var(--a2-foreground-color-primary-hover, light-dark(var(--a2-color-blue-600, #0065de), var(--a2-color-blue-200, #9ecaff))));
48
+ $checkbox-checked-foreground-color-active: var(--a2-checkbox-checked-foreground-color-active, var(--a2-foreground-color-primary-active, light-dark(var(--a2-color-blue-600, #0065de), var(--a2-color-blue-200, #9ecaff))));
49
+ $checkbox-checked-background-color-hover: var(--a2-checkbox-checked-background-color-hover, var(--a2-background-color-transparent-primary-hover, light-dark(#1a82ff1A, #70b1ff1A)));
50
+ $checkbox-checked-border-radius: var(--a2-checkbox-checked-border-radius, var(--a2-border-radius-small, var(--a2-radius-1, 0.1875rem)));
51
+ $checkbox-checked-focus-ring-color: var(--a2-checkbox-checked-focus-ring-color, var(--a2-focus-ring-color-default, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-300, #70b1ff))));
52
+ $checkbox-unchecked-background-color-hover: var(--a2-checkbox-unchecked-background-color-hover, var(--a2-background-color-transparent-default-hover, light-dark(#8b8b8b14, #ffffff14)));
53
+ $checkbox-unchecked-border-radius: var(--a2-checkbox-unchecked-border-radius, var(--a2-border-radius-small, var(--a2-radius-1, 0.1875rem)));
54
+ $checkbox-unchecked-focus-ring-color: var(--a2-checkbox-unchecked-focus-ring-color, var(--a2-focus-ring-color-default, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-300, #70b1ff))));
55
+ $checkbox-checked-error-foreground-color: var(--a2-checkbox-checked-error-foreground-color, var(--a2-foreground-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-100, #ffd4cc)))));
56
+ $checkbox-checked-error-foreground-color-hover: var(--a2-checkbox-checked-error-foreground-color-hover, var(--a2-foreground-color-danger-hover, light-dark(var(--a2-color-red-600, #d62100), var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)))));
57
+ $checkbox-checked-error-foreground-color-active: var(--a2-checkbox-checked-error-foreground-color-active, var(--a2-foreground-color-danger-active, light-dark(var(--a2-color-red-600, #d62100), var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)))));
58
+ $checkbox-checked-error-background-color-hover: var(--a2-checkbox-checked-error-background-color-hover, var(--a2-background-color-transparent-danger-hover, light-dark(#ff39141A, #ff89741A)));
59
+ $checkbox-checked-error-border-radius: var(--a2-checkbox-checked-error-border-radius, var(--a2-border-radius-small, var(--a2-radius-1, 0.1875rem)));
60
+ $checkbox-checked-error-focus-ring-color: var(--a2-checkbox-checked-error-focus-ring-color, var(--a2-focus-ring-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-300, #ff8974))));
61
+ $checkbox-unchecked-error-background-color-hover: var(--a2-checkbox-unchecked-error-background-color-hover, var(--a2-background-color-transparent-danger-hover, light-dark(#ff39141A, #ff89741A)));
62
+ $checkbox-unchecked-error-border-radius: var(--a2-checkbox-unchecked-error-border-radius, var(--a2-border-radius-small, var(--a2-radius-1, 0.1875rem)));
63
+ $checkbox-unchecked-error-focus-ring-color: var(--a2-checkbox-unchecked-error-focus-ring-color, var(--a2-focus-ring-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-300, #ff8974))));
package/build/web/core/css-utils/a2-border.css CHANGED
@@ -1,53 +1,51 @@
1
1
  @layer starter, reset, base, state, application;
2
2
 
3
- .a2-border-color-danger {border-color: var(--border-color-danger, #e13212)}
4
- .a2-border-color-default {border-color: var(--border-color, #949596)}
5
- .a2-border-color-primary {border-color: var(--border-color-primary, #0265DC)}
6
- .a2-border-color-strong {border-color: var(--border-color-strong, #444445)}
7
- .a2-border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
8
- .a2-border-color-success {border-color: var(--border-color-success, #007A4D)}
3
+ .a2-border-color-danger {border-color: var(--border-color-danger, var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)))}
4
+ .a2-border-color-default {border-color: var(--border-color, var(--a2-color-neutral-80, #e5e5e5))}
5
+ .a2-border-color-primary {border-color: var(--border-color-primary, var(--a2-status-color-info, var(--a2-color-blue-500, #1a82ff)))}
6
+ .a2-border-color-strong {border-color: var(--border-color-strong, var(--a2-color-neutral-200, #c4c4c4))}
7
+ .a2-border-color-subdued {border-color: var(--border-color-subdued, var(--a2-color-neutral-60, #ebebeb))}
8
+ .a2-border-color-success {border-color: var(--border-color-success, var(--a2-status-color-success, var(--a2-color-green-500, #09a569)))}
9
9
  .a2-border-radius-circular {border-radius: var(--border-radius-circular, 100%)}
10
- .a2-border-radius-large {border-radius: var(--border-radius-large, 0.75rem)}
11
- .a2-border-radius-medium {border-radius: var(--border-radius-medium, 0.375rem)}
12
- .a2-border-radius-none {border-radius: var(--border-radius-none, 0)}
13
- .a2-border-radius-small {border-radius: var(--border-radius-small, 0.1875rem)}
14
- .a2-border-radius-xlarge {border-radius: var(--border-radius-xlarge, 1.5rem)}
15
- .a2-border-width-default {border-width: var(--border-width, 0.0625rem)}
10
+ .a2-border-radius-large {border-radius: var(--border-radius-large, var(--a2-radius-4, 0.75rem))}
11
+ .a2-border-radius-medium {border-radius: var(--border-radius-medium, var(--a2-radius-2, 0.375rem))}
12
+ .a2-border-radius-none {border-radius: var(--border-radius-none, 0rem)}
13
+ .a2-border-radius-small {border-radius: var(--border-radius-small, var(--a2-radius-1, 0.1875rem))}
14
+ .a2-border-radius-xlarge {border-radius: var(--border-radius-xlarge, var(--a2-radius-8, 1.5rem))}
15
+ .a2-border-width-default {border-width: var(--border-width, var(--a2-size-quarter, 0.0625rem))}
16
16
  .a2-border-width-none {border-width: var(--border-width-none, 0rem)}
17
- .a2-border-width-strong {border-width: var(--border-width-strong, 0.125rem)}
18
-
17
+ .a2-border-width-strong {border-width: var(--border-width-strong, var(--a2-size-half, 0.125rem))}
19
18
  @supports (color: light-dark(#fff, #000)) {
20
- .a2-border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
21
- .a2-border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
22
- .a2-border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
23
- .a2-border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
24
- .a2-border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
25
- .a2-border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
19
+ .a2-border-color-danger {border-color: var(--border-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-100, #ffd4cc))))}
20
+ .a2-border-color-default {border-color: var(--border-color, light-dark(var(--a2-color-neutral-80, #e5e5e5), var(--a2-color-neutral-100, #dfdfdf)))}
21
+ .a2-border-color-primary {border-color: var(--border-color-primary, var(--a2-status-color-info, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-100, #cce3ff))))}
22
+ .a2-border-color-strong {border-color: var(--border-color-strong, light-dark(var(--a2-color-neutral-200, #c4c4c4), var(--a2-color-neutral-60, #ebebeb)))}
23
+ .a2-border-color-subdued {border-color: var(--border-color-subdued, light-dark(var(--a2-color-neutral-60, #ebebeb), var(--a2-color-neutral-200, #c4c4c4)))}
24
+ .a2-border-color-success {border-color: var(--border-color-success, var(--a2-status-color-success, light-dark(var(--a2-color-green-500, #09a569), var(--a2-color-green-100, #b8f5dd))))}
26
25
  }
27
-
26
+
28
27
  @layer application {
29
- .a2-border-color-danger {border-color: var(--border-color-danger, #e13212)}
30
- .a2-border-color-default {border-color: var(--border-color, #949596)}
31
- .a2-border-color-primary {border-color: var(--border-color-primary, #0265DC)}
32
- .a2-border-color-strong {border-color: var(--border-color-strong, #444445)}
33
- .a2-border-color-subdued {border-color: var(--border-color-subdued, #dfe0e1)}
34
- .a2-border-color-success {border-color: var(--border-color-success, #007A4D)}
28
+ .a2-border-color-danger {border-color: var(--border-color-danger, var(--a2-status-color-danger, var(--a2-color-red-500, #ff3914)))}
29
+ .a2-border-color-default {border-color: var(--border-color, var(--a2-color-neutral-80, #e5e5e5))}
30
+ .a2-border-color-primary {border-color: var(--border-color-primary, var(--a2-status-color-info, var(--a2-color-blue-500, #1a82ff)))}
31
+ .a2-border-color-strong {border-color: var(--border-color-strong, var(--a2-color-neutral-200, #c4c4c4))}
32
+ .a2-border-color-subdued {border-color: var(--border-color-subdued, var(--a2-color-neutral-60, #ebebeb))}
33
+ .a2-border-color-success {border-color: var(--border-color-success, var(--a2-status-color-success, var(--a2-color-green-500, #09a569)))}
35
34
  .a2-border-radius-circular {border-radius: var(--border-radius-circular, 100%)}
36
- .a2-border-radius-large {border-radius: var(--border-radius-large, 0.75rem)}
37
- .a2-border-radius-medium {border-radius: var(--border-radius-medium, 0.375rem)}
38
- .a2-border-radius-none {border-radius: var(--border-radius-none, 0)}
39
- .a2-border-radius-small {border-radius: var(--border-radius-small, 0.1875rem)}
40
- .a2-border-radius-xlarge {border-radius: var(--border-radius-xlarge, 1.5rem)}
41
- .a2-border-width-default {border-width: var(--border-width, 0.0625rem)}
35
+ .a2-border-radius-large {border-radius: var(--border-radius-large, var(--a2-radius-4, 0.75rem))}
36
+ .a2-border-radius-medium {border-radius: var(--border-radius-medium, var(--a2-radius-2, 0.375rem))}
37
+ .a2-border-radius-none {border-radius: var(--border-radius-none, 0rem)}
38
+ .a2-border-radius-small {border-radius: var(--border-radius-small, var(--a2-radius-1, 0.1875rem))}
39
+ .a2-border-radius-xlarge {border-radius: var(--border-radius-xlarge, var(--a2-radius-8, 1.5rem))}
40
+ .a2-border-width-default {border-width: var(--border-width, var(--a2-size-quarter, 0.0625rem))}
42
41
  .a2-border-width-none {border-width: var(--border-width-none, 0rem)}
43
- .a2-border-width-strong {border-width: var(--border-width-strong, 0.125rem)}
44
-
42
+ .a2-border-width-strong {border-width: var(--border-width-strong, var(--a2-size-half, 0.125rem))}
45
43
  @supports (color: light-dark(#fff, #000)) {
46
- .a2-border-color-danger {border-color: var(--border-color-danger, light-dark(#e13212, #ff745f))}
47
- .a2-border-color-default {border-color: var(--border-color, light-dark(#949596, #606162))}
48
- .a2-border-color-primary {border-color: var(--border-color-primary, light-dark(#0265DC, #78BBFA))}
49
- .a2-border-color-strong {border-color: var(--border-color-strong, light-dark(#444445, #dfe0e1))}
50
- .a2-border-color-subdued {border-color: var(--border-color-subdued, light-dark(#dfe0e1, #444445))}
51
- .a2-border-color-success {border-color: var(--border-color-success, light-dark(#007A4D, #49CC93))}
44
+ .a2-border-color-danger {border-color: var(--border-color-danger, var(--a2-status-color-danger, light-dark(var(--a2-color-red-500, #ff3914), var(--a2-color-red-100, #ffd4cc))))}
45
+ .a2-border-color-default {border-color: var(--border-color, light-dark(var(--a2-color-neutral-80, #e5e5e5), var(--a2-color-neutral-100, #dfdfdf)))}
46
+ .a2-border-color-primary {border-color: var(--border-color-primary, var(--a2-status-color-info, light-dark(var(--a2-color-blue-500, #1a82ff), var(--a2-color-blue-100, #cce3ff))))}
47
+ .a2-border-color-strong {border-color: var(--border-color-strong, light-dark(var(--a2-color-neutral-200, #c4c4c4), var(--a2-color-neutral-60, #ebebeb)))}
48
+ .a2-border-color-subdued {border-color: var(--border-color-subdued, light-dark(var(--a2-color-neutral-60, #ebebeb), var(--a2-color-neutral-200, #c4c4c4)))}
49
+ .a2-border-color-success {border-color: var(--border-color-success, var(--a2-status-color-success, light-dark(var(--a2-color-green-500, #09a569), var(--a2-color-green-100, #b8f5dd))))}
52
50
  }
53
51
  }