agroptima-design-system 0.2.0 → 0.2.1

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 (12) hide show
  1. package/.github/workflows/design-system-deploy-production.yaml +1 -1
  2. package/.github/workflows/run-linters.yml +10 -10
  3. package/package.json +6 -3
  4. package/src/atoms/Button.scss +49 -23
  5. package/src/atoms/CardsTableList.scss +3 -3
  6. package/src/atoms/Input.scss +17 -8
  7. package/src/atoms/Multiselect.scss +14 -11
  8. package/src/atoms/Select.scss +9 -9
  9. package/src/settings/_typography.scss +2 -2
  10. package/src/stories/Button.stories.ts +7 -0
  11. package/src/stories/Changelog.stories.mdx +4 -0
  12. package/src/stories/Select.stories.ts +3 -3
package/.github/workflows/design-system-deploy-production.yaml CHANGED
@@ -15,7 +15,7 @@ jobs:
15
15
 
16
16
  steps:
17
17
  - name: Checkout repository
18
- uses: actions/checkout@v3
18
+ uses: actions/checkout@v4
19
19
 
20
20
  - name: Install dependencies and build
21
21
  run: |
package/.github/workflows/run-linters.yml CHANGED
@@ -12,16 +12,16 @@ jobs:
12
12
  runs-on: ubuntu-latest
13
13
 
14
14
  steps:
15
- - uses: actions/checkout@v3
15
+ - uses: actions/checkout@v4
16
16
 
17
- - name: Setup Node
18
- uses: actions/setup-node@v3
19
- with:
20
- node-version: 18.x
21
- cache: 'npm'
17
+ - name: Setup Node
18
+ uses: actions/setup-node@v3
19
+ with:
20
+ node-version: 18.x
21
+ cache: 'npm'
22
22
 
23
- - name: Install dependencies
24
- run: npm install
23
+ - name: Install dependencies
24
+ run: npm install
25
25
 
26
- - name: Lint
27
- run: npm run lint
26
+ - name: Lint
27
+ run: npm run lint
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "agroptima-design-system",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "scripts": {
5
5
  "dev": "npm run storybook",
6
6
  "storybook": "storybook dev -p 6006 --ci",
@@ -8,7 +8,8 @@
8
8
  "build-storybook": "storybook build",
9
9
  "lint": "eslint",
10
10
  "lint:fix": "eslint src --fix",
11
- "publish-chromatic": "npx chromatic --exit-zero-on-changes"
11
+ "publish-chromatic": "npx chromatic --exit-zero-on-changes",
12
+ "chromatic": "npx chromatic --exit-zero-on-changes"
12
13
  },
13
14
  "dependencies": {
14
15
  "@storybook/addon-designs": "^7.0.5",
@@ -49,7 +50,9 @@
49
50
  "keywords": [
50
51
  "design-system"
51
52
  ],
52
- "author": "Isagri",
53
+ "author": {
54
+ "name": "Isagri"
55
+ },
53
56
  "license": "MPL-2.0",
54
57
  "bugs": {
55
58
  "url": "https://github.com/agroptima/design-system/issues"
package/src/atoms/Button.scss CHANGED
@@ -6,20 +6,20 @@
6
6
  &.primary,
7
7
  &.primary-outlined,
8
8
  &.primary-ghost {
9
- --color-bg: #{color_alias.$primary-color-1000};
10
- --color-bg-hover: #{color_alias.$primary-color-700};
9
+ --color-bg: #{color_alias.$primary-color-600};
10
+ --color-bg-hover: #{color_alias.$primary-color-1000};
11
11
  --color-bg-hover-outlined: #{color_alias.$primary-color-50};
12
12
  --color-fg: #{color_alias.$neutral-white};
13
- --color-fg-reversed: #{color_alias.$primary-color-1000};
13
+ --color-fg-reversed: #{color_alias.$primary-color-600};
14
14
  }
15
15
  &.error,
16
16
  &.error-outlined,
17
17
  &.error-ghost {
18
- --color-bg: #{color_alias.$error-color-1000};
19
- --color-bg-hover: #{color_alias.$error-color-700};
18
+ --color-bg: #{color_alias.$error-color-600};
19
+ --color-bg-hover: #{color_alias.$error-color-900};
20
20
  --color-bg-hover-outlined: #{color_alias.$error-color-50};
21
21
  --color-fg: #{color_alias.$neutral-white};
22
- --color-fg-reversed: #{color_alias.$error-color-1000};
22
+ --color-fg-reversed: #{color_alias.$error-color-600};
23
23
  }
24
24
  &.success,
25
25
  &.success-outlined,
@@ -27,7 +27,7 @@
27
27
  --color-bg: #{color_alias.$success-color-1000};
28
28
  --color-bg-hover: #{color_alias.$success-color-700};
29
29
  --color-bg-hover-outlined: #{color_alias.$success-color-50};
30
- --color-fg: #{color_alias.$neutral-white};
30
+ --color-fg: #{color_alias.$neutral-color-900};
31
31
  --color-fg-reversed: #{color_alias.$success-color-1000};
32
32
  }
33
33
  &.warning,
@@ -36,17 +36,17 @@
36
36
  --color-bg: #{color_alias.$warning-color-1000};
37
37
  --color-bg-hover: #{color_alias.$warning-color-700};
38
38
  --color-bg-hover-outlined: #{color_alias.$warning-color-50};
39
- --color-fg: #{color_alias.$neutral-white};
39
+ --color-fg: #{color_alias.$neutral-color-900};
40
40
  --color-fg-reversed: #{color_alias.$warning-color-1000};
41
41
  }
42
42
  &.info,
43
43
  &.info-outlined,
44
44
  &.info-ghost {
45
- --color-bg: #{color_alias.$info-color-1000};
46
- --color-bg-hover: #{color_alias.$info-color-700};
45
+ --color-bg: #{color_alias.$info-color-600};
46
+ --color-bg-hover: #{color_alias.$info-color-900};
47
47
  --color-bg-hover-outlined: #{color_alias.$info-color-50};
48
48
  --color-fg: #{color_alias.$neutral-white};
49
- --color-fg-reversed: #{color_alias.$info-color-1000};
49
+ --color-fg-reversed: #{color_alias.$info-color-600};
50
50
  }
51
51
  &.neutral,
52
52
  &.neutral-outlined,
@@ -87,41 +87,67 @@
87
87
  &:not(:disabled):hover,
88
88
  &:not(:disabled):active {
89
89
  background: var(--color-bg-hover);
90
+
91
+ &.success,
92
+ &.warning {
93
+ color: color_alias.$neutral-white;
94
+ svg,
95
+ svg path {
96
+ fill: color_alias.$neutral-white;
97
+ }
98
+ }
90
99
  }
91
100
 
92
101
  &:disabled {
93
- background: color_alias.$neutral-color-200;
94
- color: var(--color-fg-disabled, var(--color-fg));
102
+ background: color_alias.$neutral-color-50;
103
+ color: color_alias.$neutral-color-400;
95
104
  svg,
96
105
  svg path {
97
- fill: var(--color-fg-disabled, var(--color-fg));
106
+ fill: color_alias.$neutral-color-400;
98
107
  }
99
108
  }
100
109
 
101
110
  &.primary-outlined,
102
111
  &.error-outlined,
103
- &.success-outlined,
104
- &.warning-outlined,
105
112
  &.info-outlined,
106
113
  &.neutral-outlined {
107
114
  background: color_alias.$neutral-white;
108
- color: var(--color-fg-reversed);
115
+ color: var(--color-bg);
109
116
  border: 1px solid var(--color-bg);
110
117
  svg,
111
118
  svg path {
112
- fill: var(--color-fg-reversed);
119
+ fill: var(--color-bg);
120
+ }
121
+ }
122
+
123
+ &.success-outlined,
124
+ &.warning-outlined {
125
+ background: color_alias.$neutral-white;
126
+ color: var(--color-fg);
127
+ border: 1px solid var(--color-bg);
128
+ svg,
129
+ svg path {
130
+ fill: var(--color-fg);
113
131
  }
132
+ }
133
+
134
+ &.primary-outlined,
135
+ &.error-outlined,
136
+ &.success-outlined,
137
+ &.warning-outlined,
138
+ &.info-outlined,
139
+ &.neutral-outlined {
114
140
  &:not(:disabled):hover,
115
141
  &:not(:disabled):active {
116
142
  background: var(--color-bg-hover-outlined);
117
143
  }
118
144
  &:disabled {
119
145
  background: color_alias.$neutral-color-50;
120
- border: 1px solid color_alias.$neutral-color-200;
121
- color: color_alias.$neutral-color-300;
146
+ border: 1px solid color_alias.$neutral-color-400;
147
+ color: color_alias.$neutral-color-400;
122
148
  svg,
123
149
  svg path {
124
- fill: color_alias.$neutral-color-300;
150
+ fill: color_alias.$neutral-color-400;
125
151
  }
126
152
  }
127
153
  }
@@ -144,10 +170,10 @@
144
170
  border: 1px solid var(--color-bg);
145
171
  }
146
172
  &:disabled {
147
- color: color_alias.$neutral-color-300;
173
+ color: color_alias.$neutral-color-400;
148
174
  svg,
149
175
  svg path {
150
- fill: color_alias.$neutral-color-300;
176
+ fill: color_alias.$neutral-color-400;
151
177
  }
152
178
  }
153
179
  }
package/src/atoms/CardsTableList.scss CHANGED
@@ -54,7 +54,7 @@
54
54
  }
55
55
 
56
56
  th {
57
- background: color_alias.$primary-color-600;
57
+ background: color_alias.$primary-color-1000;
58
58
 
59
59
  .icon {
60
60
  > svg {
@@ -67,7 +67,7 @@
67
67
  &.ascending {
68
68
  > svg {
69
69
  .sorter_svg__up {
70
- fill: color_alias.$primary-color-1000;
70
+ fill: color_alias.$primary-color-600;
71
71
  }
72
72
  .sorter_svg__down {
73
73
  fill: color_alias.$neutral-white;
@@ -81,7 +81,7 @@
81
81
  fill: color_alias.$neutral-white;
82
82
  }
83
83
  .sorter_svg__down {
84
- fill: color_alias.$primary-color-1000;
84
+ fill: color_alias.$primary-color-600;
85
85
  }
86
86
  }
87
87
  }
package/src/atoms/Input.scss CHANGED
@@ -21,9 +21,18 @@
21
21
  .input-container {
22
22
  .icon {
23
23
  > svg {
24
- fill: color_alias.$neutral-color-300;
24
+ fill: color_alias.$neutral-color-400;
25
25
  path {
26
- fill: color_alias.$neutral-color-300;
26
+ fill: color_alias.$neutral-color-400;
27
+ }
28
+ }
29
+ }
30
+
31
+ .password-icon {
32
+ > svg {
33
+ fill: color_alias.$neutral-color-600;
34
+ path {
35
+ fill: color_alias.$neutral-color-600;
27
36
  }
28
37
  }
29
38
  }
@@ -31,7 +40,7 @@
31
40
 
32
41
  .input {
33
42
  border-radius: config.$corner-radius-m;
34
- border: 1px solid color_alias.$neutral-color-300;
43
+ border: 1px solid color_alias.$neutral-color-400;
35
44
  background: color_alias.$neutral-white;
36
45
 
37
46
  @include typography.input-text;
@@ -41,8 +50,8 @@
41
50
  }
42
51
 
43
52
  &:focus {
44
- outline: color_alias.$primary-color-1000;
45
- border: 1px solid color_alias.$primary-color-1000;
53
+ outline: color_alias.$primary-color-600;
54
+ border: 1px solid color_alias.$primary-color-600;
46
55
  }
47
56
 
48
57
  &.invalid {
@@ -50,12 +59,12 @@
50
59
  }
51
60
 
52
61
  &:disabled {
53
- border: 1px solid color_alias.$neutral-color-200;
62
+ border: 1px solid color_alias.$neutral-color-400;
54
63
  background: color_alias.$neutral-color-50;
55
- color: color_alias.$neutral-color-200;
64
+ color: color_alias.$neutral-color-400;
56
65
 
57
66
  &::placeholder {
58
- color: color_alias.$neutral-color-200;
67
+ color: color_alias.$neutral-color-400;
59
68
  }
60
69
  }
61
70
  }
package/src/atoms/Multiselect.scss CHANGED
@@ -20,15 +20,15 @@
20
20
 
21
21
  .selected-option {
22
22
  border-radius: config.$corner-radius-m;
23
- border: 1px solid color_alias.$neutral-color-300;
23
+ border: 1px solid color_alias.$neutral-color-600;
24
24
  background: color_alias.$neutral-white;
25
25
  @include typography.select-text;
26
26
 
27
27
  > .icon {
28
28
  > svg {
29
- fill: color_alias.$primary-color-1000;
29
+ fill: color_alias.$primary-color-600;
30
30
  path {
31
- fill: color_alias.$primary-color-1000;
31
+ fill: color_alias.$primary-color-600;
32
32
  }
33
33
  }
34
34
  }
@@ -38,8 +38,8 @@
38
38
  }
39
39
 
40
40
  &:focus {
41
- outline: color_alias.$primary-color-1000;
42
- border: 1px solid color_alias.$primary-color-1000;
41
+ outline: color_alias.$primary-color-600;
42
+ border: 1px solid color_alias.$primary-color-600;
43
43
  }
44
44
 
45
45
  &.invalid {
@@ -47,15 +47,15 @@
47
47
  }
48
48
 
49
49
  &.disabled {
50
- border: 1px solid color_alias.$neutral-color-200;
50
+ border: 1px solid color_alias.$neutral-color-400;
51
51
  background: color_alias.$neutral-color-50;
52
- color: color_alias.$neutral-color-200;
52
+ color: color_alias.$neutral-color-400;
53
53
 
54
54
  > .icon {
55
55
  > svg {
56
- fill: color_alias.$neutral-color-200;
56
+ fill: color_alias.$neutral-color-400;
57
57
  path {
58
- fill: color_alias.$neutral-color-200;
58
+ fill: color_alias.$neutral-color-400;
59
59
  }
60
60
  }
61
61
  }
@@ -82,10 +82,13 @@
82
82
  > svg {
83
83
  border-radius: config.$corner-radius-xxs;
84
84
  .checkbox-active_svg__border {
85
- fill: color_alias.$primary-color-1000;
85
+ fill: color_alias.$primary-color-600;
86
+ }
87
+ .checkbox-active_svg__background {
88
+ fill: color_alias.$primary-color-600;
86
89
  }
87
90
  .checkbox-inactive_svg__border {
88
- fill: color_alias.$neutral-color-300;
91
+ fill: color_alias.$neutral-color-600;
89
92
  }
90
93
  }
91
94
  }
package/src/atoms/Select.scss CHANGED
@@ -20,15 +20,15 @@
20
20
 
21
21
  .selected-option {
22
22
  border-radius: config.$corner-radius-m;
23
- border: 1px solid color_alias.$neutral-color-300;
23
+ border: 1px solid color_alias.$neutral-color-600;
24
24
  background: color_alias.$neutral-white;
25
25
  @include typography.select-text;
26
26
 
27
27
  > .icon {
28
28
  > svg {
29
- fill: color_alias.$primary-color-1000;
29
+ fill: color_alias.$primary-color-600;
30
30
  path {
31
- fill: color_alias.$primary-color-1000;
31
+ fill: color_alias.$primary-color-600;
32
32
  }
33
33
  }
34
34
  }
@@ -38,8 +38,8 @@
38
38
  }
39
39
 
40
40
  &:focus {
41
- outline: color_alias.$primary-color-1000;
42
- border: 1px solid color_alias.$primary-color-1000;
41
+ outline: color_alias.$primary-color-600;
42
+ border: 1px solid color_alias.$primary-color-600;
43
43
  }
44
44
 
45
45
  &.invalid {
@@ -47,15 +47,15 @@
47
47
  }
48
48
 
49
49
  &.disabled {
50
- border: 1px solid color_alias.$neutral-color-200;
50
+ border: 1px solid color_alias.$neutral-color-400;
51
51
  background: color_alias.$neutral-color-50;
52
- color: color_alias.$neutral-color-200;
52
+ color: color_alias.$neutral-color-400;
53
53
 
54
54
  > .icon {
55
55
  > svg {
56
- fill: color_alias.$neutral-color-200;
56
+ fill: color_alias.$neutral-color-400;
57
57
  path {
58
- fill: color_alias.$neutral-color-200;
58
+ fill: color_alias.$neutral-color-400;
59
59
  }
60
60
  }
61
61
  }
package/src/settings/_typography.scss CHANGED
@@ -19,7 +19,7 @@ $font-primary: $font-base-stretch $text-base-style $font-base-weight #{$text-bas
19
19
  font-variant: $text-base-style;
20
20
  font-weight: 300;
21
21
  font-family: $font-base-family;
22
- color: color_alias.$neutral-color-400;
22
+ color: color_alias.$neutral-color-600;
23
23
  // We need to apply a relation between font-size and line-height so the box envoloping the span
24
24
  // is the most accurate in terms of top and bottom blank space.
25
25
  font-size: 0.75rem;
@@ -37,7 +37,7 @@ $font-primary: $font-base-stretch $text-base-style $font-base-weight #{$text-bas
37
37
  font-variant: $text-base-style;
38
38
  font-weight: 400;
39
39
  font-family: $font-base-family;
40
- color: color_alias.$neutral-color-300;
40
+ color: color_alias.$neutral-color-400;
41
41
  // We shouldn't define a font-size for the placeholder: https://stackoverflow.com/questions/30916387/placeholder-font-size-bigger-than-16px
42
42
  }
43
43
  @mixin select-text {
package/src/stories/Button.stories.ts CHANGED
@@ -98,6 +98,7 @@ export const PrimaryWithLeftIcon: Story = {
98
98
  export const PrimaryOutlined: Story = {
99
99
  args: {
100
100
  variant: 'primary-outlined',
101
+ disabled: false,
101
102
  },
102
103
  parameters: figmaPrimaryDesign,
103
104
  }
@@ -105,6 +106,7 @@ export const PrimaryOutlined: Story = {
105
106
  export const PrimaryGhost: Story = {
106
107
  args: {
107
108
  variant: 'primary-ghost',
109
+ disabled: false,
108
110
  },
109
111
  parameters: figmaPrimaryDesign,
110
112
  }
@@ -112,6 +114,7 @@ export const PrimaryGhost: Story = {
112
114
  export const Neutral: Story = {
113
115
  args: {
114
116
  variant: 'neutral',
117
+ disabled: false,
115
118
  },
116
119
  parameters: figmaNeutralDesign,
117
120
  }
@@ -119,6 +122,7 @@ export const Neutral: Story = {
119
122
  export const Error: Story = {
120
123
  args: {
121
124
  variant: 'error',
125
+ disabled: false,
122
126
  },
123
127
  parameters: figmaErrorDesign,
124
128
  }
@@ -126,6 +130,7 @@ export const Error: Story = {
126
130
  export const Success: Story = {
127
131
  args: {
128
132
  variant: 'success',
133
+ disabled: false,
129
134
  },
130
135
  parameters: figmaSuccessDesign,
131
136
  }
@@ -133,6 +138,7 @@ export const Success: Story = {
133
138
  export const Warning: Story = {
134
139
  args: {
135
140
  variant: 'warning',
141
+ disabled: false,
136
142
  },
137
143
  parameters: figmaWarningDesign,
138
144
  }
@@ -140,6 +146,7 @@ export const Warning: Story = {
140
146
  export const Info: Story = {
141
147
  args: {
142
148
  variant: 'info',
149
+ disabled: false,
143
150
  },
144
151
  parameters: figmaInfoDesign,
145
152
  }
package/src/stories/Changelog.stories.mdx CHANGED
@@ -3,6 +3,10 @@ import { Meta } from "@storybook/addon-docs";
3
3
  <Meta title="Changelog" />
4
4
  # Changelog
5
5
 
6
+ ## 0.2.1
7
+
8
+ - Colors have been updated due to accessibility issues.
9
+
6
10
  ## 0.2.0
7
11
 
8
12
  - Sorting has been added to the CardsTableList component.
package/src/stories/Select.stories.ts CHANGED
@@ -15,8 +15,8 @@ const meta = {
15
15
  disabled: {
16
16
  description: 'Is the select in disabled state?',
17
17
  },
18
- required: {
19
- description: 'Is the select in required state?',
18
+ invalid: {
19
+ description: 'Is the select in disabled state?',
20
20
  },
21
21
  helpText: {
22
22
  description: 'Optional help text',
@@ -47,7 +47,7 @@ export const Primary: Story = {
47
47
  args: {
48
48
  variant: 'primary',
49
49
  disabled: false,
50
- required: false,
50
+ invalid: false,
51
51
  helpText: 'This text can help you',
52
52
  name: 'example',
53
53
  label: 'Videogames',