@spectrum-web-components/styles 1.1.0-beta.8 → 1.1.0

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 (141) hide show
  1. package/package.json +19 -23
  2. package/src/body-overrides.css +1 -1
  3. package/src/code-overrides.css +1 -1
  4. package/src/detail-overrides.css +1 -1
  5. package/src/heading-overrides.css +1 -1
  6. package/tokens/express/custom-dark-vars.css +1 -0
  7. package/tokens/express/custom-darkest-vars.css +1 -0
  8. package/tokens/express/custom-large-vars.css +1 -0
  9. package/tokens/express/custom-light-vars.css +1 -0
  10. package/tokens/express/custom-medium-vars.css +1 -0
  11. package/tokens/express/custom-vars.css +1 -0
  12. package/tokens/express/dark-vars.css +0 -1
  13. package/tokens/express/darkest-vars.css +0 -1
  14. package/tokens/express/global-vars.css +0 -7235
  15. package/tokens/express/index.css +213 -0
  16. package/tokens/express/large-vars.css +0 -3
  17. package/tokens/express/light-vars.css +0 -1
  18. package/tokens/express/medium-vars.css +0 -3
  19. package/tokens/express/system-theme-bridge.css +6904 -0
  20. package/tokens/global-vars.css +2 -2
  21. package/tokens/index.css +2266 -1248
  22. package/tokens/spectrum/custom-dark-vars.css +1 -0
  23. package/tokens/spectrum/custom-darkest-vars.css +1 -0
  24. package/tokens/spectrum/custom-large-vars.css +1 -0
  25. package/tokens/spectrum/custom-light-vars.css +1 -0
  26. package/tokens/spectrum/custom-medium-vars.css +1 -0
  27. package/tokens/spectrum/custom-vars.css +1 -0
  28. package/tokens/spectrum/dark-vars.css +13 -10
  29. package/tokens/spectrum/darkest-vars.css +13 -10
  30. package/tokens/spectrum/global-vars.css +24 -7258
  31. package/tokens/spectrum/index.css +708 -0
  32. package/tokens/spectrum/large-vars.css +1 -20
  33. package/tokens/spectrum/light-vars.css +14 -11
  34. package/tokens/spectrum/medium-vars.css +1 -19
  35. package/tokens/spectrum/system-theme-bridge.css +6910 -0
  36. package/tokens-v2/dark-vars.css +0 -10
  37. package/tokens-v2/global-vars.css +16 -24
  38. package/tokens-v2/index.css +16 -88
  39. package/tokens-v2/large-vars.css +0 -20
  40. package/tokens-v2/light-vars.css +0 -10
  41. package/tokens-v2/medium-vars.css +0 -20
  42. package/tokens-v2/spectrum/custom-dark-vars.css +1 -0
  43. package/tokens-v2/spectrum/custom-darkest-vars.css +1 -0
  44. package/tokens-v2/spectrum/custom-large-vars.css +1 -0
  45. package/tokens-v2/spectrum/custom-light-vars.css +1 -0
  46. package/tokens-v2/spectrum/custom-medium-vars.css +1 -0
  47. package/tokens-v2/spectrum/custom-vars.css +1 -0
  48. package/tokens-v2/{spectrum/global-vars.css → system-theme-bridge.css} +348 -672
  49. package/body.d.ts +0 -2
  50. package/body.dev.js +0 -17
  51. package/body.dev.js.map +0 -7
  52. package/body.js +0 -8
  53. package/body.js.map +0 -7
  54. package/code.d.ts +0 -2
  55. package/code.dev.js +0 -17
  56. package/code.dev.js.map +0 -7
  57. package/code.js +0 -8
  58. package/code.js.map +0 -7
  59. package/detail.d.ts +0 -2
  60. package/detail.dev.js +0 -17
  61. package/detail.dev.js.map +0 -7
  62. package/detail.js +0 -8
  63. package/detail.js.map +0 -7
  64. package/heading.d.ts +0 -2
  65. package/heading.dev.js +0 -17
  66. package/heading.dev.js.map +0 -7
  67. package/heading.js +0 -8
  68. package/heading.js.map +0 -7
  69. package/spectrum-two/themes.dev.js +0 -6
  70. package/spectrum-two/themes.dev.js.map +0 -7
  71. package/spectrum-two/themes.js +0 -2
  72. package/spectrum-two/themes.js.map +0 -7
  73. package/src/body-overrides.css.d.ts +0 -2
  74. package/src/body-overrides.css.dev.js +0 -7
  75. package/src/body-overrides.css.dev.js.map +0 -7
  76. package/src/body-overrides.css.js +0 -4
  77. package/src/body-overrides.css.js.map +0 -7
  78. package/src/code-overrides.css.d.ts +0 -2
  79. package/src/code-overrides.css.dev.js +0 -7
  80. package/src/code-overrides.css.dev.js.map +0 -7
  81. package/src/code-overrides.css.js +0 -4
  82. package/src/code-overrides.css.js.map +0 -7
  83. package/src/detail-overrides.css.d.ts +0 -2
  84. package/src/detail-overrides.css.dev.js +0 -7
  85. package/src/detail-overrides.css.dev.js.map +0 -7
  86. package/src/detail-overrides.css.js +0 -4
  87. package/src/detail-overrides.css.js.map +0 -7
  88. package/src/heading-overrides.css.d.ts +0 -2
  89. package/src/heading-overrides.css.dev.js +0 -7
  90. package/src/heading-overrides.css.dev.js.map +0 -7
  91. package/src/heading-overrides.css.js +0 -4
  92. package/src/heading-overrides.css.js.map +0 -7
  93. package/src/lang-overrides.css.d.ts +0 -2
  94. package/src/lang-overrides.css.dev.js +0 -7
  95. package/src/lang-overrides.css.dev.js.map +0 -7
  96. package/src/lang-overrides.css.js +0 -4
  97. package/src/lang-overrides.css.js.map +0 -7
  98. package/src/spectrum-base.css.d.ts +0 -2
  99. package/src/spectrum-base.css.dev.js +0 -7
  100. package/src/spectrum-base.css.dev.js.map +0 -7
  101. package/src/spectrum-base.css.js +0 -4
  102. package/src/spectrum-base.css.js.map +0 -7
  103. package/src/spectrum-body.css.d.ts +0 -2
  104. package/src/spectrum-body.css.dev.js +0 -7
  105. package/src/spectrum-body.css.dev.js.map +0 -7
  106. package/src/spectrum-body.css.js +0 -4
  107. package/src/spectrum-body.css.js.map +0 -7
  108. package/src/spectrum-code.css.d.ts +0 -2
  109. package/src/spectrum-code.css.dev.js +0 -7
  110. package/src/spectrum-code.css.dev.js.map +0 -7
  111. package/src/spectrum-code.css.js +0 -4
  112. package/src/spectrum-code.css.js.map +0 -7
  113. package/src/spectrum-detail.css.d.ts +0 -2
  114. package/src/spectrum-detail.css.dev.js +0 -7
  115. package/src/spectrum-detail.css.dev.js.map +0 -7
  116. package/src/spectrum-detail.css.js +0 -4
  117. package/src/spectrum-detail.css.js.map +0 -7
  118. package/src/spectrum-heading.css.d.ts +0 -2
  119. package/src/spectrum-heading.css.dev.js +0 -7
  120. package/src/spectrum-heading.css.dev.js.map +0 -7
  121. package/src/spectrum-heading.css.js +0 -4
  122. package/src/spectrum-heading.css.js.map +0 -7
  123. package/src/spectrum-lang.css.d.ts +0 -2
  124. package/src/spectrum-lang.css.dev.js +0 -7
  125. package/src/spectrum-lang.css.dev.js.map +0 -7
  126. package/src/spectrum-lang.css.js +0 -4
  127. package/src/spectrum-lang.css.js.map +0 -7
  128. package/src/spectrum-typography.css.d.ts +0 -2
  129. package/src/spectrum-typography.css.dev.js +0 -7
  130. package/src/spectrum-typography.css.dev.js.map +0 -7
  131. package/src/spectrum-typography.css.js +0 -4
  132. package/src/spectrum-typography.css.js.map +0 -7
  133. package/stories/styles.stories.js +0 -45
  134. package/stories/styles.stories.js.map +0 -7
  135. package/test/styles.test-vrt.js +0 -5
  136. package/test/styles.test-vrt.js.map +0 -7
  137. package/typography.d.ts +0 -2
  138. package/typography.dev.js +0 -4
  139. package/typography.dev.js.map +0 -7
  140. package/typography.js +0 -2
  141. package/typography.js.map +0 -7
package/tokens/spectrum/custom-dark-vars.css CHANGED
@@ -1,3 +1,4 @@
1
+ /* @deprecated these assets should not be used; the custom override values exist in spectrum/dark-vars.css */
1
2
  :host,
2
3
  :root {
3
4
  --spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
package/tokens/spectrum/custom-darkest-vars.css CHANGED
@@ -1,3 +1,4 @@
1
+ /* @deprecated these assets should not be used; the custom override values exist in spectrum/darkest-vars.css */
1
2
  :host,
2
3
  :root {
3
4
  --spectrum-menu-item-background-color-default-rgb: 255, 255, 255;
package/tokens/spectrum/custom-large-vars.css CHANGED
@@ -1,3 +1,4 @@
1
+ /* @deprecated these assets should not be used; the custom override values exist in spectrum/large-vars.css */
1
2
  :host,
2
3
  :root {
3
4
  --spectrum-slider-tick-mark-height: 13px;
package/tokens/spectrum/custom-light-vars.css CHANGED
@@ -1,3 +1,4 @@
1
+ /* @deprecated these assets should not be used; the custom override values exist in spectrum/light-vars.css */
1
2
  :host,
2
3
  :root {
3
4
  --spectrum-menu-item-background-color-default-rgb: 0, 0, 0;
package/tokens/spectrum/custom-medium-vars.css CHANGED
@@ -1,3 +1,4 @@
1
+ /* @deprecated these assets should not be used; the custom override values exist in spectrum/medium-vars.css */
1
2
  :host,
2
3
  :root {
3
4
  --spectrum-slider-tick-mark-height: 10px;
package/tokens/spectrum/custom-vars.css CHANGED
@@ -1,3 +1,4 @@
1
+ /* @deprecated these assets should not be used; the custom override values exist in spectrum/global-vars.css */
1
2
  :host,
2
3
  :root {
3
4
  --system: spectrum;
package/tokens/spectrum/dark-vars.css CHANGED
@@ -17,7 +17,6 @@
17
17
  );
18
18
  --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
19
19
  --spectrum-dropindicator-color: var(--spectrum-blue-700);
20
-
21
20
  --spectrum-calendar-day-background-color-selected: rgba(
22
21
  var(--spectrum-blue-800-rgb),
23
22
  0.15
@@ -46,19 +45,15 @@
46
45
  0.07
47
46
  );
48
47
  --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
49
-
48
+ --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-500-rgb);
50
49
  --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
51
-
52
50
  --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
53
51
  --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
54
52
  --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
55
-
56
53
  --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
57
-
58
54
  --spectrum-steplist-current-marker-color-key-focus: var(
59
55
  --spectrum-blue-700
60
56
  );
61
-
62
57
  --spectrum-treeview-item-background-color-quiet-selected: rgba(
63
58
  var(--spectrum-gray-900-rgb),
64
59
  0.07
@@ -67,21 +62,18 @@
67
62
  var(--spectrum-blue-800-rgb),
68
63
  0.15
69
64
  );
70
-
71
65
  --spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
72
66
  --spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
73
67
  --spectrum-logic-button-and-background-color-hover: var(
74
68
  --spectrum-blue-1000
75
69
  );
76
70
  --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
77
-
78
71
  --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
79
72
  --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
80
73
  --spectrum-logic-button-or-background-color-hover: var(
81
74
  --spectrum-magenta-900
82
75
  );
83
76
  --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
84
-
85
77
  --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
86
78
  --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
87
79
  --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
@@ -89,7 +81,6 @@
89
81
  --spectrum-blue-800
90
82
  );
91
83
  --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
92
-
93
84
  --spectrum-assetlist-item-background-color-selected-hover: rgba(
94
85
  var(--spectrum-blue-800-rgb),
95
86
  0.25
@@ -99,4 +90,16 @@
99
90
  0.15
100
91
  );
101
92
  --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
93
+ --spectrum-swatch-border-color-rgb: 255, 255, 255;
94
+ --spectrum-swatch-border-color-opacity: 0.51;
95
+ --spectrum-swatch-border-color: rgba(
96
+ var(--spectrum-swatch-border-color-rgb),
97
+ var(--spectrum-swatch-border-color-opacity)
98
+ );
99
+ --spectrum-swatch-border-color-light-rgb: 255, 255, 255;
100
+ --spectrum-swatch-border-color-light-opacity: 0.2;
101
+ --spectrum-swatch-border-color-light: rgba(
102
+ var(--spectrum-swatch-border-color-light-rgb),
103
+ var(--spectrum-swatch-border-color-light-opacity)
104
+ );
102
105
  }
package/tokens/spectrum/darkest-vars.css CHANGED
@@ -17,7 +17,6 @@
17
17
  );
18
18
  --spectrum-drop-zone-background-color-rgb: var(--spectrum-blue-900-rgb);
19
19
  --spectrum-dropindicator-color: var(--spectrum-blue-700);
20
-
21
20
  --spectrum-calendar-day-background-color-selected: rgba(
22
21
  var(--spectrum-blue-800-rgb),
23
22
  0.2
@@ -47,19 +46,15 @@
47
46
  0.08
48
47
  );
49
48
  --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
50
-
49
+ --spectrum-card-selected-background-color-rgb: var(--spectrum-blue-600-rgb);
51
50
  --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
52
-
53
51
  --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
54
52
  --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
55
53
  --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
56
-
57
54
  --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
58
-
59
55
  --spectrum-steplist-current-marker-color-key-focus: var(
60
56
  --spectrum-blue-700
61
57
  );
62
-
63
58
  --spectrum-treeview-item-background-color-quiet-selected: rgba(
64
59
  var(--spectrum-gray-900-rgb),
65
60
  0.08
@@ -68,21 +63,18 @@
68
63
  var(--spectrum-blue-800-rgb),
69
64
  0.2
70
65
  );
71
-
72
66
  --spectrum-logic-button-and-background-color: var(--spectrum-blue-800);
73
67
  --spectrum-logic-button-and-border-color: var(--spectrum-blue-800);
74
68
  --spectrum-logic-button-and-background-color-hover: var(
75
69
  --spectrum-blue-1000
76
70
  );
77
71
  --spectrum-logic-button-and-border-color-hover: var(--spectrum-blue-1000);
78
-
79
72
  --spectrum-logic-button-or-background-color: var(--spectrum-magenta-700);
80
73
  --spectrum-logic-button-or-border-color: var(--spectrum-magenta-700);
81
74
  --spectrum-logic-button-or-background-color-hover: var(
82
75
  --spectrum-magenta-900
83
76
  );
84
77
  --spectrum-logic-button-or-border-color-hover: var(--spectrum-magenta-900);
85
-
86
78
  --spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
87
79
  --spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
88
80
  --spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
@@ -90,7 +82,6 @@
90
82
  --spectrum-blue-800
91
83
  );
92
84
  --spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
93
-
94
85
  --spectrum-assetlist-item-background-color-selected-hover: rgba(
95
86
  var(--spectrum-blue-800-rgb),
96
87
  0.3
@@ -100,4 +91,16 @@
100
91
  0.2
101
92
  );
102
93
  --spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
94
+ --spectrum-swatch-border-color-rgb: 255, 255, 255;
95
+ --spectrum-swatch-border-color-opacity: 0.51;
96
+ --spectrum-swatch-border-color: rgba(
97
+ var(--spectrum-swatch-border-color-rgb),
98
+ var(--spectrum-swatch-border-color-opacity)
99
+ );
100
+ --spectrum-swatch-border-color-light-rgb: 255, 255, 255;
101
+ --spectrum-swatch-border-color-light-opacity: 0.2;
102
+ --spectrum-swatch-border-color-light: rgba(
103
+ var(--spectrum-swatch-border-color-light-rgb),
104
+ var(--spectrum-swatch-border-color-light-opacity)
105
+ );
103
106
  }