Skip to content

Commit

Permalink
refactor: refactoring Button styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@PKulkoRaccoonGang
PKulkoRaccoonGang committed Jan 25, 2023
1 parent f19cf9c commit 202a8ca
Show file tree
Hide file tree
Showing 15 changed files with 1,629 additions and 218 deletions.
346 changes: 314 additions & 32 deletions scss/core/css/variables.css
View file

Large diffs are not rendered by default.

479 changes: 364 additions & 115 deletions src/Button/Button.scss
View file

Large diffs are not rendered by default.

5 changes: 4 additions & 1 deletion src/Button/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,15 @@
// ------------------------
// BELOW ARE EDX EXTENSIONS
// ------------------------
@mixin button-focus($ring-color) {
@mixin button-focus($ring-color, $focus-color: $white, $focus-border-color: inherit, $focus-bg: inherit) {
&.focus,
&:focus {
position: relative;
outline: 0;
box-shadow: none;
background: $focus-bg;
border-color: $focus-border-color;
color: $focus-color;

$distance: calc(#{$btn-focus-width} + #{$btn-focus-gap});
$distance-include-btn-border: calc(#{$distance} + #{$btn-border-width});
Expand Down
239 changes: 233 additions & 6 deletions src/Button/_variables.scss
View file

Large diffs are not rendered by default.

82 changes: 76 additions & 6 deletions tokens/src/components/Button/brand.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@
},
"bg": {
"brand": { "value": "{color.brand.base.value}", "source": "$btn-brand-bg" },
"outline-brand": { "value": "inherit", "source": "$btn-brand-outline-bg" },
"inverse-brand": {
"value": "{color.btn.text.inverse-brand.value}",
"source": "$btn-brand-inverse-bg",
"modify": [{ "type": "color-yiq" }]
}
},
"inverse-outline-brand": { "value": "transparent", "source": "$btn-brand-inverse-outline-bg" }
},
"border": {
"brand": { "value": "{color.btn.bg.brand.value}", "source": "$btn-brand-border-color" },
Expand Down Expand Up @@ -84,22 +86,90 @@
"border": {
"brand": { "value": "{color.theme.active.brand.value}", "source": "$btn-brand-active-border-color" },
"outline-brand": { "value": "{color.theme.active.brand.value}", "source": "$btn-brand-outline-active-border-color" },
"inverse-brand": {
"value": "transparent",
"source": "$btn-brand-inverse-active-border-color"
},
"inverse-outline-brand": { "value": "transparent", "source": "$btn-brand-inverse-outline-active-border-color" }
}
},
"focus": {
"text": {
"brand": { "value": "{color.btn.text.brand.value}", "source": "$btn-brand-focus-color" },
"inverse-brand": { "value": "{color.btn.text.inverse-brand.value}", "source": "$btn-brand-inverse-focus-color" },
"outline-brand": { "value": "{color.btn.text.outline-brand.value}", "source": "$btn-brand-outline-focus-color" },
"inverse-outline-brand": {
"value": "{color.btn.text.inverse-outline-brand.value}",
"source": "$btn-brand-inverse-outline-focus-color"
}
},
"border": {
"brand": { "value": "{color.theme.focus.brand.value}", "source": "$btn-brand-focus-border-color" },
"outline-brand": { "value": "{color.theme.focus.brand.value}", "source": "$btn-brand-outline-focus-border-color" },
"brand": { "value": "{color.btn.border.brand.value}", "source": "$btn-brand-focus-border-color" },
"outline-brand": { "value": "inherit", "source": "$btn-brand-outline-focus-border-color" },
"inverse-brand": { "value": "{color.white.value}", "source": "$btn-brand-inverse-focus-border-color" },
"inverse-outline-brand": { "value": "{color.white.value}", "source": "$btn-brand-inverse-outline-focus-border-color" }
"inverse-outline-brand": {
"value": "{color.btn.border.inverse-outline-brand.value}",
"source": "$btn-brand-inverse-outline-focus-border-color"
}
},
"bg": {
"brand": { "value": "{color.btn.bg.brand.value}", "source": "$btn-brand-focus-bg" },
"inverse-brand": { "value": "{color.btn.bg.inverse-brand.value}", "source": "$btn-brand-inverse-focus-bg" },
"outline-brand": { "value": "inherit", "source": "$btn-brand-outline-focus-bg" },
"inverse-outline-brand": { "value": "inherit", "source": "$btn-brand-inverse-outline-focus-bg" }
},
"outline": {
"brand": { "value": "{color.theme.focus.brand.value}", "source": "$btn-brand-focus-outline-color" },
"outline-brand": {
"value": "{color.theme.focus.brand.value}",
"source": "$btn-brand-outline-focus-outline-color"
},
"inverse-brand": {
"value": "{color.btn.focus.border.inverse-brand.value}",
"source": "$btn-brand-inverse-focus-outline-color"
},
"inverse-outline-brand": {
"value": "{color.btn.focus.border.inverse-outline-brand.value}",
"source": "$btn-brand-inverse-outline-focus-outline-color"
}
}
},
"disabled": {
"text": {
"brand": { "value": "{color.btn.text.brand.value}", "source": "$btn-brand-disabled-color" },
"inverse-brand": { "value": "{color.brand.500.value}", "source": "$btn-brand-inverse-disabled-color" },
"outline-brand": {
"value": "{color.btn.hover.text.outline-brand.value}",
"source": "$btn-brand-outline-disabled-color"
},
"inverse-outline-brand": {
"value": "{color.btn.text.inverse-outline-brand.value}",
"source": "$btn-brand-inverse-outline-disabled-color"
}
},
"bg": {
"outline-brand": { "value": "transparent", "source": "$btn-brand-outline-disabled-bg" },
"brand": { "value": "{color.btn.bg.brand.value}", "source": "$btn-brand-disabled-bg" },
"outline-brand": { "value": "inherit", "source": "$btn-brand-outline-disabled-bg" },
"inverse-brand": { "value": "transparent", "source": "$btn-brand-inverse-disabled-bg" },
"inverse-outline-brand": { "value": "transparent", "source": "$btn-brand-inverse-outline-disabled-bg" }
"inverse-outline-brand": {
"value": "{color.btn.bg.inverse-outline-brand.value}",
"source": "$btn-brand-inverse-outline-disabled-bg"
}
},
"border": {
"brand": { "value": "{color.btn.border.brand.value}", "source": "$btn-brand-disabled-border-color" },
"outline-brand": {
"value": "{color.btn.border.outline-brand.value}",
"source": "$btn-brand-outline-disabled-border-color"
},
"inverse-brand": {
"value": "{color.btn.disabled.bg.inverse-brand.value}",
"source": "$btn-brand-inverse-disabled-border-color"
},
"inverse-outline-brand": {
"value": "{color.btn.text.inverse-outline-brand.value}",
"source": "$btn-brand-inverse-outline-disabled-border-color"
}
}
}
}
Expand Down
74 changes: 69 additions & 5 deletions tokens/src/components/Button/danger.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@
},
"bg": {
"danger": { "value": "{color.danger.base.value}", "source": "$btn-danger-bg" },
"outline-danger": { "value": "inherit", "source": "$btn-danger-outline-bg" },
"inverse-danger": {
"value": "{color.btn.text.inverse-danger.value}",
"source": "$btn-danger-inverse-bg",
"modify": [{ "type": "color-yiq" }]
}
},
"inverse-outline-danger": { "value": "transparent", "source": "$btn-danger-inverse-outline-bg" }
},
"border": {
"danger": { "value": "{color.btn.bg.danger.value}", "source": "$btn-danger-border-color" },
Expand Down Expand Up @@ -84,22 +86,84 @@
"border": {
"danger": { "value": "{color.theme.active.danger.value}", "source": "$btn-danger-active-border-color" },
"outline-danger": { "value": "{color.theme.active.danger.value}", "source": "$btn-danger-outline-active-border-color" },
"inverse-danger": { "value": "transparent", "source": "$btn-danger-inverse-active-border-color" },
"inverse-outline-danger": { "value": "transparent", "source": "$btn-danger-inverse-outline-active-border-color" }
}
},
"focus": {
"text": {
"danger": { "value": "{color.btn.text.danger.value}", "source": "$btn-danger-focus-color" },
"inverse-danger": {
"value": "{color.btn.text.inverse-danger.value}",
"source": "$btn-danger-inverse-focus-color"
},
"outline-danger": {
"value": "{color.btn.text.outline-danger.value}",
"source": "$btn-danger-outline-focus-color"
},
"inverse-outline-danger": {
"value": "{color.btn.text.inverse-outline-danger.value}",
"source": "$btn-danger-inverse-outline-focus-color"
}
},
"border": {
"danger": { "value": "{color.theme.focus.danger.value}", "source": "$btn-danger-focus-border-color" },
"outline-danger": { "value": "{color.theme.focus.danger.value}", "source": "$btn-danger-outline-focus-border-color" },
"danger": { "value": "{color.btn.focus.bg.danger.value}", "source": "$btn-danger-focus-border-color" },
"outline-danger": { "value": "inherit", "source": "$btn-danger-outline-focus-border-color" },
"inverse-danger": { "value": "{color.white.value}", "source": "$btn-danger-inverse-focus-border-color" },
"inverse-outline-danger": { "value": "{color.white.value}", "source": "$btn-danger-inverse-outline-focus-border-color" }
},
"bg": {
"danger": { "value": "{color.btn.bg.danger.value}", "source": "$btn-danger-focus-bg" },
"outline-danger": { "value": "inherit", "source": "$btn-danger-outline-focus-bg" },
"inverse-danger": { "value": "{color.btn.bg.inverse-danger.value}", "source": "$btn-danger-inverse-focus-bg" },
"inverse-outline-danger": { "value": "inherit", "source": "$btn-danger-inverse-outline-focus-bg" }
},
"outline": {
"danger": { "value": "{color.theme.focus.danger.value}", "source": "$btn-danger-focus-outline-color" },
"outline-danger": {
"value": "{color.theme.focus.danger.value}",
"source": "$btn-danger-outline-focus-outline-color"
},
"inverse-danger": {
"value": "{color.btn.focus.border.inverse-danger.value}",
"source": "$btn-danger-inverse-focus-outline-color"
},
"inverse-outline-danger": {
"value": "{color.btn.focus.border.inverse-danger.value}",
"source": "$btn-danger-inverse-outline-focus-outline-color"
}
}
},
"disabled": {
"text": {
"danger": { "value": "{color.btn.text.danger.value}", "source": "$btn-danger-disabled-color" },
"outline-danger": {
"value": "{color.btn.hover.text.outline-danger.value}",
"source": "$btn-danger-outline-disabled-color"
},
"inverse-danger": { "value": "{color.danger.base.value}", "source": "$btn-danger-inverse-disabled-color" },
"inverse-outline-danger": {
"value": "{color.btn.text.inverse-outline-danger.value}",
"source": "$btn-danger-inverse-outline-disabled-color"
}
},
"bg": {
"outline-danger": { "value": "transparent", "source": "$btn-danger-outline-disabled-bg" },
"danger": { "value": "{color.btn.bg.danger.value}", "source": "$btn-danger-disabled-bg" },
"outline-danger": { "value": "inherit", "source": "$btn-danger-outline-disabled-bg" },
"inverse-danger": { "value": "transparent", "source": "$btn-danger-inverse-disabled-bg" },
"inverse-outline-danger": { "value": "transparent", "source": "$btn-danger-inverse-outline-disabled-bg" }
"inverse-outline-danger": { "value": "inherit", "source": "$btn-danger-inverse-outline-disabled-bg" }
},
"border": {
"danger": { "value": "{color.btn.border.danger.value}", "source": "$btn-danger-disabled-border-color" },
"outline-danger": {
"value": "{color.btn.border.outline-danger.value}",
"source": "$btn-danger-outline-disabled-border-color"
},
"inverse-danger": { "value": "transparent", "source": "$btn-danger-inverse-disabled-border-color" },
"inverse-outline-danger": {
"value": "{color.btn.border.inverse-outline-danger.value}",
"source": "$btn-danger-inverse-outline-disabled-border-color"
}
}
}
}
Expand Down
70 changes: 64 additions & 6 deletions tokens/src/components/Button/dark.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@
},
"bg": {
"dark": { "value": "{color.dark.base.value}", "source": "$btn-dark-bg" },
"outline-dark": { "value": "inherit", "source": "$btn-dark-outline-bg" },
"inverse-dark": {
"value": "{color.btn.text.inverse-dark.value}",
"source": "$btn-dark-inverse-bg",
"modify": [{ "type": "color-yiq" }]
}
},
"inverse-outline-dark": { "value": "transparent", "source": "$btn-dark-inverse-outline-bg" }
},
"border": {
"dark": { "value": "{color.btn.bg.dark.value}", "source": "$btn-dark-border-color" },
Expand Down Expand Up @@ -84,22 +86,78 @@
"border": {
"dark": { "value": "{color.theme.active.dark.value}", "source": "$btn-dark-active-border-color" },
"outline-dark": { "value": "{color.theme.active.dark.value}", "source": "$btn-dark-outline-active-border-color" },
"inverse-dark": {
"value": "transparent",
"source": "$btn-dark-inverse-active-border-color"
},
"inverse-outline-dark": { "value": "transparent", "source": "$btn-dark-inverse-outline-active-border-color" }
}
},
"focus": {
"text": {
"dark": { "value": "{color.btn.text.dark.value}", "source": "$btn-dark-focus-color" },
"inverse-dark": { "value": "{color.btn.text.inverse-dark.value}", "source": "$btn-dark-inverse-focus-color" },
"outline-dark": { "value": "inherit", "source": "$btn-dark-outline-focus-color" },
"inverse-outline-dark": {
"value": "{color.btn.text.inverse-outline-dark.value}",
"source": "$btn-dark-inverse-outline-focus-color"
}
},
"border": {
"dark": { "value": "{color.theme.focus.dark.value}", "source": "$btn-dark-focus-border-color" },
"outline-dark": { "value": "{color.theme.focus.dark.value}", "source": "$btn-dark-outline-focus-border-color" },
"dark": { "value": "{color.btn.focus.bg.dark.value}", "source": "$btn-dark-focus-border-color" },
"outline-dark": {
"value": "{color.btn.border.outline-dark.value}",
"source": "$btn-dark-outline-focus-border-color"
},
"inverse-dark": { "value": "{color.white.value}", "source": "$btn-dark-inverse-focus-border-color" },
"inverse-outline-dark": { "value": "{color.white.value}", "source": "$btn-dark-inverse-outline-focus-border-color" }
},
"bg": {
"dark": { "value": "{color.btn.bg.dark.value}", "source": "$btn-dark-focus-bg" },
"outline-dark": { "value": "inherit", "source": "$btn-dark-outline-focus-bg" },
"inverse-dark": { "value": "{color.btn.bg.inverse-dark.value}", "source": "$btn-dark-inverse-focus-bg" },
"inverse-outline-dark": { "value": "inherit", "source": "$btn-dark-inverse-outline-focus-bg" }
},
"outline": {
"dark": { "value": "{color.theme.focus.dark.value}", "source": "$btn-dark-focus-outline-color" },
"outline-dark": { "value": "{color.theme.focus.dark.value}", "source": "$btn-dark-outline-focus-outline-color" },
"inverse-dark": {
"value": "{color.btn.focus.border.inverse-dark.value}",
"source": "$btn-dark-inverse-focus-outline-color"
},
"inverse-outline-dark": {
"value": "{color.btn.focus.border.inverse-outline-dark.value}",
"source": "$btn-dark-inverse-outline-focus-border-color"
}
}
},
"disabled": {
"text": {
"dark": { "value": "{color.btn.text.dark.value}", "source": "$btn-dark-disabled-color" },
"outline-dark": { "value": "inherit", "source": "$btn-dark-outline-disabled-color" },
"inverse-dark": { "value": "{color.btn.text.inverse-dark.value}", "source": "$btn-dark-inverse-disabled-color" },
"inverse-outline-dark": {
"value": "{color.btn.text.inverse-outline-dark.value}",
"source": "$btn-dark-inverse-outline-disabled-color"
}
},
"bg": {
"outline-dark": { "value": "transparent", "source": "$btn-dark-outline-disabled-bg" },
"inverse-dark": { "value": "transparent", "source": "$btn-dark-inverse-disabled-bg" },
"inverse-outline-dark": { "value": "transparent", "source": "$btn-dark-inverse-outline-disabled-bg" }
"dark": { "value": "{color.btn.bg.dark.value}", "source": "$btn-dark-disabled-bg" },
"outline-dark": { "value": "inherit", "source": "$btn-dark-outline-disabled-bg" },
"inverse-dark": { "value": "inherit", "source": "$btn-dark-inverse-disabled-bg" },
"inverse-outline-dark": { "value": "inherit", "source": "$btn-dark-inverse-outline-disabled-bg" }
},
"border": {
"dark": { "value": "{color.btn.border.dark.value}", "source": "$btn-dark-disabled-border-color" },
"outline-dark": {
"value": "{color.btn.hover.text.outline-dark.value}",
"source": "$btn-dark-outline-disabled-border-color"
},
"inverse-dark": { "value": "transparent", "source": "$btn-dark-inverse-disabled-border-color" },
"inverse-outline-dark": {
"value": "{color.btn.focus.border.inverse-outline-dark.value}",
"source": "$btn-dark-inverse-outline-disabled-border-color"
}
}
}
}
Expand Down
Loading

0 comments on commit 202a8ca

Please sign in to comment.