@hashicorp/design-system-components 0.0.5 → 0.0.6

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 (5) hide show
  1. package/addon/components/hds/card/container.js +3 -3
  2. package/app/styles/components/badge-count.scss +10 -10
  3. package/app/styles/components/badge.scss +11 -11
  4. package/app/styles/components/card/container.scss +8 -5
  5. package/package.json +2 -2
package/addon/components/hds/card/container.js CHANGED
@@ -2,10 +2,10 @@ import Component from '@glimmer/component';
2
2
  import { assert } from '@ember/debug';
3
3
 
4
4
  export const DEFAULT_LEVEL = 'base';
5
- export const DEFAULT_BACKGROUND = 'neutral-0';
5
+ export const DEFAULT_BACKGROUND = 'neutral-primary';
6
6
  export const DEFAULT_OVERFLOW = 'hidden';
7
7
  export const LEVELS = ['base', 'mid', 'high'];
8
- export const BACKGROUNDS = ['neutral-0', 'neutral-50'];
8
+ export const BACKGROUNDS = ['neutral-primary', 'neutral-secondary'];
9
9
  export const OVERFLOWS = ['hidden', 'visible'];
10
10
 
11
11
  export default class HdsCardContainerComponent extends Component {
@@ -43,7 +43,7 @@ export default class HdsCardContainerComponent extends Component {
43
43
 
44
44
  /**
45
45
  * Sets the background for the component
46
- * Accepted values: neutral-0, neutral-50
46
+ * Accepted values: neutral-primary, neutral-secondary
47
47
  *
48
48
  * @param background
49
49
  * @type {string}
package/app/styles/components/badge-count.scss CHANGED
@@ -62,36 +62,36 @@ $size-props: (
62
62
 
63
63
  .hds-badge-count--color-neutral {
64
64
  &.hds-badge-count--type-filled {
65
- background-color: var(--token-color-neutral-neutral-100);
66
- color: var(--token-color-neutral-neutral-600);
65
+ background-color: var(--token-color-palette-neutral-100);
66
+ color: var(--token-color-palette-neutral-600);
67
67
  }
68
68
 
69
69
  &.hds-badge-count--type-inverted {
70
- background-color: var(--token-color-neutral-neutral-500);
71
- color: var(--token-color-neutral-neutral-0);
70
+ background-color: var(--token-color-palette-neutral-500);
71
+ color: var(--token-color-palette-neutral-0);
72
72
  }
73
73
 
74
74
  &.hds-badge-count--type-outlined {
75
75
  background-color: transparent;
76
76
  border-color: currentColor;
77
- color: var(--token-color-neutral-neutral-500);;
77
+ color: var(--token-color-palette-neutral-500);;
78
78
  }
79
79
  }
80
80
 
81
81
  .hds-badge-count--color-neutral-dark-mode {
82
82
  &.hds-badge-count--type-filled {
83
- background-color: var(--token-color-neutral-neutral-500);
84
- color: var(--token-color-neutral-neutral-0);
83
+ background-color: var(--token-color-palette-neutral-500);
84
+ color: var(--token-color-palette-neutral-0);
85
85
  }
86
86
 
87
87
  &.hds-badge-count--type-inverted {
88
- background-color: var(--token-color-neutral-neutral-50);
89
- color: var(--token-color-neutral-neutral-600);
88
+ background-color: var(--token-color-palette-neutral-50);
89
+ color: var(--token-color-palette-neutral-600);
90
90
  }
91
91
 
92
92
  &.hds-badge-count--type-outlined {
93
93
  background-color: transparent;
94
94
  border-color: currentColor;
95
- color: var(--token-color-neutral-neutral-0);;
95
+ color: var(--token-color-palette-neutral-0);;
96
96
  }
97
97
  }
package/app/styles/components/badge.scss CHANGED
@@ -91,37 +91,37 @@ $size-props: (
91
91
 
92
92
  .hds-badge--color-neutral {
93
93
  &.hds-badge--type-filled {
94
- background-color: var(--token-color-neutral-neutral-100);
95
- color: var(--token-color-neutral-neutral-600);
94
+ background-color: var(--token-color-palette-neutral-100);
95
+ color: var(--token-color-palette-neutral-600);
96
96
  }
97
97
 
98
98
  &.hds-badge--type-inverted {
99
- background-color: var(--token-color-neutral-neutral-500);
100
- color: var(--token-color-neutral-neutral-0);
99
+ background-color: var(--token-color-palette-neutral-500);
100
+ color: var(--token-color-palette-neutral-0);
101
101
  }
102
102
 
103
103
  &.hds-badge--type-outlined {
104
104
  background-color: transparent;
105
105
  border-color: currentColor;
106
- color: var(--token-color-neutral-neutral-500);;
106
+ color: var(--token-color-palette-neutral-500);;
107
107
  }
108
108
  }
109
109
 
110
110
  .hds-badge--color-neutral-dark-mode {
111
111
  &.hds-badge--type-filled {
112
- background-color: var(--token-color-neutral-neutral-500);
113
- color: var(--token-color-neutral-neutral-0);
112
+ background-color: var(--token-color-palette-neutral-500);
113
+ color: var(--token-color-palette-neutral-0);
114
114
  }
115
115
 
116
116
  &.hds-badge--type-inverted {
117
- background-color: var(--token-color-neutral-neutral-50);
118
- color: var(--token-color-neutral-neutral-600);
117
+ background-color: var(--token-color-palette-neutral-50);
118
+ color: var(--token-color-palette-neutral-600);
119
119
  }
120
120
 
121
121
  &.hds-badge--type-outlined {
122
122
  background-color: transparent;
123
123
  border-color: currentColor;
124
- color: var(--token-color-neutral-neutral-0);;
124
+ color: var(--token-color-palette-neutral-0);;
125
125
  }
126
126
  }
127
127
 
@@ -134,7 +134,7 @@ $size-props: (
134
134
 
135
135
  &.hds-badge--type-inverted {
136
136
  background-color: var(--token-color-#{$color}-background-primary);
137
- color: var(--token-color-neutral-neutral-0);
137
+ color: var(--token-color-palette-neutral-0);
138
138
  }
139
139
 
140
140
  &.hds-badge--type-outlined {
package/app/styles/components/card/container.scss CHANGED
@@ -56,7 +56,6 @@
56
56
  }
57
57
 
58
58
  $hds-card-container-levels: ( 'base', 'mid', 'high' );
59
- $hds-card-container-backgrounds: ( 'neutral-0', 'neutral-50' );
60
59
 
61
60
  $hds-card-container-border-radius: 6px;
62
61
 
@@ -78,14 +77,18 @@ $hds-card-container-border-radius: 6px;
78
77
  }
79
78
  }
80
79
 
80
+
81
81
  // BACKGROUND
82
82
 
83
- @each $background-color in $hds-card-container-backgrounds {
84
- .hds-card__container--background-#{$background-color} {
85
- background-color: var(--token-color-neutral-#{$background-color});
86
- }
83
+ .hds-card__container--background-neutral-primary {
84
+ background-color: var(--token-color-neutral-background-primary);
87
85
  }
88
86
 
87
+ .hds-card__container--background-neutral-secondary {
88
+ background-color: var(--token-color-neutral-background-secondary);
89
+ }
90
+
91
+
89
92
  // OVERFLOW
90
93
 
91
94
  .hds-card__container--overflow-hidden {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hashicorp/design-system-components",
3
- "version": "0.0.5",
3
+ "version": "0.0.6",
4
4
  "description": "HashiCorp Design System Components",
5
5
  "keywords": [
6
6
  "hashicorp",
@@ -55,7 +55,7 @@
55
55
  "test:ember-compatibility": "ember try:each"
56
56
  },
57
57
  "dependencies": {
58
- "@hashicorp/design-system-tokens": "^0.0.9",
58
+ "@hashicorp/design-system-tokens": "^0.0.10",
59
59
  "@hashicorp/ember-flight-icons": "^1.2.0",
60
60
  "ember-cli-babel": "^7.26.6",
61
61
  "ember-cli-htmlbars": "^5.7.1",