Skip to content

Commit

Permalink
feat: update btn colors
Browse files Browse the repository at this point in the history
  • Loading branch information
caro3801 committed Jul 2, 2024
1 parent 3fb0099 commit 6ab7aa0
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 10 deletions.
12 changes: 12 additions & 0 deletions src/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,18 @@
@import '~node_modules/bootstrap-vue-next/dist/bootstrap-vue-next.css';
// @TODO bundle Murmur so the import is easier
@import '~node_modules/@icij/murmur-next/dist/lib/murmur.css';
.btn-outline-secondary {
--#{$prefix}btn-color: var(--bs-body-color);
--#{$prefix}btn-hover-bg: #{tint-color($secondary, 90%)};
--#{$prefix}btn-hover-color: var(--bs-body-color);
--#{$prefix}btn-active-bg: #{tint-color($secondary, 90%)};
}
.btn-outline-tertiary {
--#{$prefix}btn-color: var(--bs-body-color);
--#{$prefix}btn-hover-bg: #{tint-color($tertiary, 60%)};
--#{$prefix}btn-hover-color: var(--bs-body-color);
--#{$prefix}btn-active-bg: #{tint-color($tertiary, 60%)};
}


html {
Expand Down
18 changes: 9 additions & 9 deletions src/stories/basics/Button.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export default {
size: { control: { type: 'select' }, options: ['sm', 'md', 'lg'] },
variant: {
control: { type: 'select' },
options: ['primary', 'secondary', 'outline-secondary', 'tertiary', 'light']
options: ['primary', 'secondary', 'outline-secondary', 'outline-tertiary', 'light']
}
},
render: (args) => ({
Expand Down Expand Up @@ -42,56 +42,56 @@ export default {
<td><b-button v-bind="args" >{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" >{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" >{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="tertiary" >{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" >{{args.label}}</b-button></td>
</tr>
<tr>
<td>Hover </td>
<td><b-button v-bind="args" id="hover" >{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" id="hover">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" id="hover">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="tertiary" id="hover">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" id="hover">{{args.label}}</b-button></td>
</tr>
<tr>
<td>Focus </td>
<td><b-button v-bind="args" id="focus">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" id="focus">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" id="focus">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="tertiary" id="focus">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" id="focus">{{args.label}}</b-button></td>
</tr>
<tr>
<td>Active </td>
<td><b-button v-bind="args" id="active">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" id="active">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" id="active">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="tertiary" id="active">{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" id="active">{{args.label}}</b-button></td>
</tr>
<tr>
<td>Pressed </td>
<td><b-button v-bind="args" pressed>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" pressed>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" pressed>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="tertiary" pressed>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" pressed>{{args.label}}</b-button></td>
</tr>
<tr>
<td>Disabled </td>
<td><b-button v-bind="args" disabled>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" disabled>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" disabled>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="tertiary" disabled>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" disabled>{{args.label}}</b-button></td>
</tr>
<tr>
<td>Loading </td>
<td><b-button v-bind="args" loading>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="primary" loading>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-secondary" loading>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="tertiary" loading>{{args.label}}</b-button></td>
<td><b-button v-bind="args" variant="outline-tertiary" loading>{{args.label}}</b-button></td>
</tr>
<tr>
<td>BCloseButton </td>
<td><BCloseButton v-bind="args">{{args.label}}</BCloseButton></td>
<td><BCloseButton v-bind="args" variant="primary">{{args.label}}</BCloseButton></td>
<td><BCloseButton v-bind="args" variant="outline-secondary">{{args.label}}</BCloseButton></td>
<td><BCloseButton v-bind="args" variant="tertiary">{{args.label}}</BCloseButton></td>
<td><BCloseButton v-bind="args" variant="outline-tertiary">{{args.label}}</BCloseButton></td>
</tr>
</tbody>
</table>
Expand Down
2 changes: 1 addition & 1 deletion src/utils/settings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ $prefix: bs-;

$primary: #112A5C;
$secondary: #FA4070;
$tertiary: #FFBF57;
$tertiary: #C7C7C7;
$danger: #dc3545;

$warning: #FFBF57;
Expand Down

0 comments on commit 6ab7aa0

Please sign in to comment.