@spectrum-web-components/styles 0.38.0 → 0.39.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 (10) hide show
  1. package/package.json +5 -5
  2. package/tokens/express/custom-dark-vars.css +1 -0
  3. package/tokens/express/custom-darkest-vars.css +1 -0
  4. package/tokens/express/custom-light-vars.css +1 -0
  5. package/tokens/spectrum/custom-dark-vars.css +17 -0
  6. package/tokens/spectrum/custom-darkest-vars.css +17 -0
  7. package/tokens/spectrum/custom-large-vars.css +22 -0
  8. package/tokens/spectrum/custom-light-vars.css +17 -0
  9. package/tokens/spectrum/custom-medium-vars.css +23 -0
  10. package/tokens/spectrum/custom-vars.css +1 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spectrum-web-components/styles",
3
- "version": "0.38.0",
3
+ "version": "0.39.0",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -104,13 +104,13 @@
104
104
  "lit-html"
105
105
  ],
106
106
  "dependencies": {
107
- "@spectrum-web-components/base": "^0.38.0"
107
+ "@spectrum-web-components/base": "^0.39.0"
108
108
  },
109
109
  "devDependencies": {
110
110
  "@spectrum-css/commons": "^8.0.0",
111
111
  "@spectrum-css/expressvars": "^3.0.9",
112
- "@spectrum-css/tokens": "^11.3.1",
113
- "@spectrum-css/typography": "^5.0.37",
112
+ "@spectrum-css/tokens": "^11.3.4",
113
+ "@spectrum-css/typography": "^5.0.40",
114
114
  "@spectrum-css/vars": "^9.0.8"
115
115
  },
116
116
  "customElements": "custom-elements.json",
@@ -118,5 +118,5 @@
118
118
  "./**/*.css"
119
119
  ],
120
120
  "style": "all-medium-lightest.css",
121
- "gitHead": "9a099b7543672f2fd4030833ab813b16c2cad62e"
121
+ "gitHead": "2acc8390ef0ac6cc940958d4da705c9859155c0d"
122
122
  }
package/tokens/express/custom-dark-vars.css CHANGED
@@ -4,4 +4,5 @@
4
4
  --spectrum-drop-zone-background-color-rgb: var(
5
5
  --spectrum-indigo-900-rgb
6
6
  ); /* var(--spectrum-accent-color-900);*/
7
+ --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
7
8
  }
package/tokens/express/custom-darkest-vars.css CHANGED
@@ -4,4 +4,5 @@
4
4
  --spectrum-drop-zone-background-color-rgb: var(
5
5
  --spectrum-indigo-900-rgb
6
6
  ); /* var(--spectrum-accent-color-900);*/
7
+ --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
7
8
  }
package/tokens/express/custom-light-vars.css CHANGED
@@ -4,4 +4,5 @@
4
4
  --spectrum-drop-zone-background-color-rgb: var(
5
5
  --spectrum-indigo-800-rgb
6
6
  ); /* var(--spectrum-accent-color-800);*/
7
+ --spectrum-well-border-color: rgba(var(--spectrum-black-rgb), 0.05);
7
8
  }
package/tokens/spectrum/custom-dark-vars.css CHANGED
@@ -51,4 +51,21 @@
51
51
  --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
52
52
 
53
53
  --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
54
+
55
+ --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
56
+ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
57
+ --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
58
+ --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
59
+ --spectrum-steplist-current-marker-color-key-focus: var(
60
+ --spectrum-blue-700
61
+ );
62
+
63
+ --spectrum-treeview-item-background-color-quiet-selected: rgba(
64
+ var(--spectrum-gray-900-rgb),
65
+ 0.07
66
+ );
67
+ --spectrum-treeview-item-background-color-selected: rgba(
68
+ var(--spectrum-blue-800-rgb),
69
+ 0.15
70
+ );
54
71
  }
package/tokens/spectrum/custom-darkest-vars.css CHANGED
@@ -52,4 +52,21 @@
52
52
  --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-700);
53
53
 
54
54
  --spectrum-badge-label-icon-color-primary: var(--spectrum-black);
55
+
56
+ --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-700);
57
+ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
58
+ --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
59
+ --spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
60
+ --spectrum-steplist-current-marker-color-key-focus: var(
61
+ --spectrum-blue-700
62
+ );
63
+
64
+ --spectrum-treeview-item-background-color-quiet-selected: rgba(
65
+ var(--spectrum-gray-900-rgb),
66
+ 0.08
67
+ );
68
+ --spectrum-treeview-item-background-color-selected: rgba(
69
+ var(--spectrum-blue-800-rgb),
70
+ 0.2
71
+ );
55
72
  }
package/tokens/spectrum/custom-large-vars.css CHANGED
@@ -54,4 +54,26 @@
54
54
 
55
55
  --spectrum-alert-dialog-padding: var(--spectrum-spacing-400);
56
56
  --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-600);
57
+
58
+ --spectrum-coach-indicator-gap: 8px;
59
+ --spectrum-coach-indicator-ring-diameter: 20px;
60
+ --spectrum-coach-indicator-quiet-ring-diameter: 10px;
61
+
62
+ --spectrum-coachmark-buttongroup-display: none;
63
+ --spectrum-coachmark-buttongroup-mobile-display: flex;
64
+ --spectrum-coachmark-menu-display: none;
65
+ --spectrum-coachmark-menu-mobile-display: inline-flex;
66
+
67
+ --spectrum-well-padding: 20px;
68
+ --spectrum-well-margin-top: 5px;
69
+ --spectrum-well-min-width: 300px;
70
+ --spectrum-well-border-radius: 5px;
71
+
72
+ --spectrum-icon-chevron-size-50: 8px;
73
+
74
+ --spectrum-treeview-item-indentation-medium: 20px;
75
+ --spectrum-treeview-item-indentation-small: 15px;
76
+ --spectrum-treeview-item-indentation-large: 25px;
77
+ --spectrum-treeview-item-indentation-extra-large: 30px;
78
+ --spectrum-treeview-indicator-inset-block-start: 6px;
57
79
  }
package/tokens/spectrum/custom-light-vars.css CHANGED
@@ -51,4 +51,21 @@
51
51
  --spectrum-calendar-day-border-color-key-focus: var(--spectrum-blue-800);
52
52
 
53
53
  --spectrum-badge-label-icon-color-primary: var(--spectrum-white);
54
+
55
+ --spectrum-coach-indicator-ring-default-color: var(--spectrum-blue-800);
56
+ --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
57
+ --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
58
+ --spectrum-well-border-color: var(--spectrum-black-rgb);
59
+ --spectrum-steplist-current-marker-color-key-focus: var(
60
+ --spectrum-blue-800
61
+ );
62
+
63
+ --spectrum-treeview-item-background-color-quiet-selected: rgba(
64
+ var(--spectrum-gray-900-rgb),
65
+ 0.06
66
+ );
67
+ --spectrum-treeview-item-background-color-selected: rgba(
68
+ var(--spectrum-blue-900-rgb),
69
+ 0.1
70
+ );
54
71
  }
package/tokens/spectrum/custom-medium-vars.css CHANGED
@@ -54,4 +54,27 @@
54
54
 
55
55
  --spectrum-alert-dialog-padding: var(--spectrum-spacing-500);
56
56
  --spectrum-alert-dialog-description-to-buttons: var(--spectrum-spacing-700);
57
+
58
+ --spectrum-coach-indicator-gap: 6px;
59
+ --spectrum-coach-indicator-ring-diameter: var(--spectrum-spacing-300);
60
+ --spectrum-coach-indicator-quiet-ring-diameter: var(--spectrum-spacing-100);
61
+
62
+ --spectrum-coachmark-buttongroup-display: flex;
63
+ --spectrum-coachmark-buttongroup-mobile-display: none;
64
+ --spectrum-coachmark-menu-display: inline-flex;
65
+ --spectrum-coachmark-menu-mobile-display: none;
66
+ --spectrum-well-padding: var(--spectrum-spacing-300);
67
+ --spectrum-well-margin-top: var(--spectrum-spacing-75);
68
+ --spectrum-well-min-width: 240px;
69
+ --spectrum-well-border-radius: var(--spectrum-spacing-75);
70
+
71
+ --spectrum-icon-chevron-size-50: 6px;
72
+
73
+ --spectrum-treeview-item-indentation-medium: var(--spectrum-spacing-300);
74
+ --spectrum-treeview-item-indentation-small: var(--spectrum-spacing-200);
75
+ --spectrum-treeview-item-indentation-large: 20px;
76
+ --spectrum-treeview-item-indentation-extra-large: var(
77
+ --spectrum-spacing-400
78
+ );
79
+ --spectrum-treeview-indicator-inset-block-start: 5px;
57
80
  }
package/tokens/spectrum/custom-vars.css CHANGED
@@ -15,6 +15,7 @@
15
15
  --spectrum-animation-duration-1000: 500ms;
16
16
  --spectrum-animation-duration-2000: 1000ms;
17
17
  --spectrum-animation-duration-4000: 2000ms;
18
+ --spectrum-animation-duration-6000: 3000ms;
18
19
  --spectrum-animation-ease-in-out: cubic-bezier(0.45, 0, 0.4, 1);
19
20
  --spectrum-animation-ease-in: cubic-bezier(0.5, 0, 1, 1);
20
21
  --spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);