Skip to content

Commit

Permalink
feat(foundations/colours): zodio - set tokens for component Button
Browse files Browse the repository at this point in the history
  • Loading branch information
@tiloyi
tiloyi committed Mar 26, 2023
1 parent 502e417 commit 91d1efd
Show file tree
Hide file tree
Showing 19 changed files with 2,964 additions and 163 deletions.
8 changes: 5 additions & 3 deletions packages/styles/components/_c.button.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* mqp:start */
.mc-button {
@include unstyle-button();
@include set-button-theme(get-token(color, button, "solid"), true);
@include set-button-theme(get-token(color, button, "primary"), true);
@include set-font-weight("semi-bold");
@include set-button-size($button-medium);
@include set-button-layout();
Expand All @@ -11,7 +11,9 @@
fill: currentcolor;

&:focus {
@include set-shadow-focus();
@include set-shadow-focus(
$color-focus-border: $color-button-primary-focus-border
);
}

// all sizes
Expand Down Expand Up @@ -78,7 +80,7 @@
}

@each $name, $props in $buttons {
@if $name != "solid" {
@if $name != "primary" {
&--#{$name} {
@include set-button-theme($props);
}
Expand Down
41 changes: 25 additions & 16 deletions packages/styles/settings-tools/_s.buttons.scss
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,53 @@
@use "sass:math";

// Preset
$preset-zodio: false;
@if $preset == "zodio" {
$preset-zodio: true;
}

// Variables
$buttons: get-token(color, button);
$button-sizes: (
"s": (
"font-size": "04",
"line-height": "m",
"padding-v": magic-unit-rem(0.3125, "true"),
"padding-h": $mu100,
"font-size": if($preset-zodio, "02", "04"),
"line-height": if($preset-zodio, "l", "m"),
"padding-v": if($preset-zodio, px-to-rem(3), magic-unit-rem(0.3125, "true")),
"padding-h": if($preset-zodio, px-to-rem(15), $mu100),
"min-height": $mu200,
"icon-size": $mu150,
"icon-margin-top": -1 * math.div($mu075, 4),
"icon-margin-bottom": -1 * math.div($mu075, 4),
"only-icon-size": $mu150,
),
"m": (
"font-size": "05",
"line-height": "m",
"padding-v": magic-unit-rem(0.6875, "true"),
"padding-h": $mu150,
"min-height": $mu300,
"font-size": if($preset-zodio, "02", "05"),
"line-height": if($preset-zodio, "l", "m"),
"padding-v": if($preset-zodio, px-to-rem(9), magic-unit-rem(0.6875, "true")),
"padding-h": if($preset-zodio, px-to-rem(15), $mu150),
"min-height": if($preset-zodio, px-to-rem(44), $mu300),
"icon-size": $mu150,
"icon-margin-top": -1 * math.div($mu025, $mu025) * 1px,
"icon-margin-bottom": -1 * math.div($mu025, $mu025) * 1px,
"only-icon-size": $mu200,
),
"l": (
"font-size": "06",
"line-height": "m",
"padding-v": magic-unit-rem(0.875, "true"),
"padding-h": $mu150,
"min-height": $mu350,
"font-size": if($preset-zodio, "02", "06"),
"line-height": if($preset-zodio, "l", "m"),
"padding-v": if($preset-zodio, px-to-rem(19), magic-unit-rem(0.875, "true")),
"padding-h": if($preset-zodio, px-to-rem(15), $mu150),
"min-height": if($preset-zodio, $mu400, $mu350),
"icon-size": $mu200,
"icon-margin-top": -1 * $mu025,
"icon-margin-bottom": -1 * $mu025,
"only-icon-size": $mu200,
),
);
$button-medium: map-get($button-sizes, "m");
$button-radius: get-border-radius("m");
$button-border: get-border("m");
$button-border: if($preset-zodio, get-border("s"), get-border("m"));
$button-color-default: map-get(get-token(color, button, "solid"), "font");
// Zodio properties
$button-radius: if($preset-zodio, null, get-border-radius("m"));

@mixin set-button-size($sizeProps) {
@include set-font-scale(
Expand Down Expand Up @@ -144,6 +152,7 @@ $button-color-default: map-get(get-token(color, button, "solid"), "font");
cursor: pointer;
border-radius: $button-radius;
text-align: center;
text-transform: if($preset-zodio, uppercase, null);
border: $button-border solid transparent;
transition: all ease 200ms;
display: inline-flex;
Expand Down
82 changes: 80 additions & 2 deletions packages/tokens/build/zodio/css/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,8 +134,8 @@ $color-success-800: var(--color-success-800, #035010);
$color-success-900: var(--color-success-900, #023618);
$color-breadcrumb-arrow: var(--color-breadcrumb-arrow, #333333);
$color-breadcrumb-arrow-invert: var(--color-breadcrumb-arrow-invert, #ffffff);
$color-button-solid-background: var(--color-button-solid-background, #f8f3ec);
$color-button-solid-font: var(--color-button-solid-font, #000000);
$color-button-solid-background: var(--color-button-solid-background, #695535);
$color-button-solid-font: var(--color-button-solid-font, #ffffff);
$color-button-solid-focus-border: var(--color-button-solid-focus-border, #4c3f29);
$color-button-solid-disabled-background: var(--color-button-solid-disabled-background, #cccccc);
$color-button-solid-disabled-font: var(--color-button-solid-disabled-font, #666666);
Expand Down Expand Up @@ -202,6 +202,84 @@ $color-button-bordered-danger-active-background: var(--color-button-bordered-dan
$color-button-bordered-danger-active-font: var(--color-button-bordered-danger-active-font, #530000);
$color-button-bordered-danger-hover-background: var(--color-button-bordered-danger-hover-background, #fdeaea);
$color-button-bordered-danger-hover-font: var(--color-button-bordered-danger-hover-font, #8c0003);
$color-button-primary-background: var(--color-button-primary-background, #000000);
$color-button-primary-border: var(--color-button-primary-border, #000000);
$color-button-primary-font: var(--color-button-primary-font, #ffffff);
$color-button-primary-hover-background: var(--color-button-primary-hover-background, #333333);
$color-button-primary-hover-border: var(--color-button-primary-hover-border, #333333);
$color-button-primary-hover-font: var(--color-button-primary-hover-font, #ffffff);
$color-button-primary-active-background: var(--color-button-primary-active-background, #4d4d4d);
$color-button-primary-active-border: var(--color-button-primary-active-border, #4d4d4d);
$color-button-primary-active-font: var(--color-button-primary-active-font, #ffffff);
$color-button-primary-focus-border: var(--color-button-primary-focus-border, #000000);
$color-button-primary-disabled-background: var(--color-button-primary-disabled-background, #cccccc);
$color-button-primary-disabled-border: var(--color-button-primary-disabled-border, #cccccc);
$color-button-primary-disabled-font: var(--color-button-primary-disabled-font, #666666);
$color-button-invert-background: var(--color-button-invert-background, #ffffff);
$color-button-invert-border: var(--color-button-invert-border, #ffffff);
$color-button-invert-font: var(--color-button-invert-font, #000000);
$color-button-invert-hover-background: var(--color-button-invert-hover-background, #e6e6e6);
$color-button-invert-hover-border: var(--color-button-invert-hover-border, #e6e6e6);
$color-button-invert-hover-font: var(--color-button-invert-hover-font, #000000);
$color-button-invert-active-background: var(--color-button-invert-active-background, #cccccc);
$color-button-invert-active-border: var(--color-button-invert-active-border, #cccccc);
$color-button-invert-active-font: var(--color-button-invert-active-font, #000000);
$color-button-invert-focus-border: var(--color-button-invert-focus-border, #000000);
$color-button-invert-disabled-background: var(--color-button-invert-disabled-background, #cccccc);
$color-button-invert-disabled-border: var(--color-button-invert-disabled-border, #cccccc);
$color-button-invert-disabled-font: var(--color-button-invert-disabled-font, #666666);
$color-button-secondary-background: var(--color-button-secondary-background, #ffffff);
$color-button-secondary-border: var(--color-button-secondary-border, #000000);
$color-button-secondary-font: var(--color-button-secondary-font, #000000);
$color-button-secondary-hover-background: var(--color-button-secondary-hover-background, #e6e6e6);
$color-button-secondary-hover-border: var(--color-button-secondary-hover-border, #000000);
$color-button-secondary-hover-font: var(--color-button-secondary-hover-font, #000000);
$color-button-secondary-active-background: var(--color-button-secondary-active-background, #cccccc);
$color-button-secondary-active-border: var(--color-button-secondary-active-border, #000000);
$color-button-secondary-active-font: var(--color-button-secondary-active-font, #000000);
$color-button-secondary-focus-border: var(--color-button-secondary-focus-border, #000000);
$color-button-secondary-disabled-background: var(--color-button-secondary-disabled-background, #cccccc);
$color-button-secondary-disabled-border: var(--color-button-secondary-disabled-border, #cccccc);
$color-button-secondary-disabled-font: var(--color-button-secondary-disabled-font, #666666);
$color-button-accent-background: var(--color-button-accent-background, #f8f3ec);
$color-button-accent-border: var(--color-button-accent-border, #f8f3ec);
$color-button-accent-font: var(--color-button-accent-font, #000000);
$color-button-accent-hover-background: var(--color-button-accent-hover-background, #b39465);
$color-button-accent-hover-border: var(--color-button-accent-hover-border, #b39465);
$color-button-accent-hover-font: var(--color-button-accent-hover-font, #000000);
$color-button-accent-active-background: var(--color-button-accent-active-background, #927549);
$color-button-accent-active-border: var(--color-button-accent-active-border, #927549);
$color-button-accent-active-font: var(--color-button-accent-active-font, #000000);
$color-button-accent-focus-border: var(--color-button-accent-focus-border, #000000);
$color-button-accent-disabled-background: var(--color-button-accent-disabled-background, #cccccc);
$color-button-accent-disabled-border: var(--color-button-accent-disabled-border, #cccccc);
$color-button-accent-disabled-font: var(--color-button-accent-disabled-font, #666666);
$color-button-danger-background: var(--color-button-danger-background, #c61112);
$color-button-danger-border: var(--color-button-danger-border, #c61112);
$color-button-danger-font: var(--color-button-danger-font, #ffffff);
$color-button-danger-hover-background: var(--color-button-danger-hover-background, #530000);
$color-button-danger-hover-border: var(--color-button-danger-hover-border, #530000);
$color-button-danger-hover-font: var(--color-button-danger-hover-font, #ffffff);
$color-button-danger-active-background: var(--color-button-danger-active-background, #2d0000);
$color-button-danger-active-border: var(--color-button-danger-active-border, #2d0000);
$color-button-danger-active-font: var(--color-button-danger-active-font, #ffffff);
$color-button-danger-focus-border: var(--color-button-danger-focus-border, #000000);
$color-button-danger-disabled-background: var(--color-button-danger-disabled-background, #cccccc);
$color-button-danger-disabled-border: var(--color-button-danger-disabled-border, #cccccc);
$color-button-danger-disabled-font: var(--color-button-danger-disabled-font, #666666);
$color-button-secondary-danger-background: var(--color-button-secondary-danger-background, #ffffff);
$color-button-secondary-danger-border: var(--color-button-secondary-danger-border, #c61112);
$color-button-secondary-danger-font: var(--color-button-secondary-danger-font, #c61112);
$color-button-secondary-danger-hover-background: var(--color-button-secondary-danger-hover-background, #e6e6e6);
$color-button-secondary-danger-hover-border: var(--color-button-secondary-danger-hover-border, #c61112);
$color-button-secondary-danger-hover-font: var(--color-button-secondary-danger-hover-font, #c61112);
$color-button-secondary-danger-active-background: var(--color-button-secondary-danger-active-background, #cccccc);
$color-button-secondary-danger-active-border: var(--color-button-secondary-danger-active-border, #c61112);
$color-button-secondary-danger-active-font: var(--color-button-secondary-danger-active-font, #c61112);
$color-button-secondary-danger-focus-border: var(--color-button-secondary-danger-focus-border, #000000);
$color-button-secondary-danger-disabled-background: var(--color-button-secondary-danger-disabled-background, #cccccc);
$color-button-secondary-danger-disabled-border: var(--color-button-secondary-danger-disabled-border, #cccccc);
$color-button-secondary-danger-disabled-font: var(--color-button-secondary-danger-disabled-font, #666666);
$color-card-bordered-background: var(--color-card-bordered-background, #ffffff);
$color-card-bordered-border: var(--color-card-bordered-border, #808080);
$color-datatable-filters-border: var(--color-datatable-filters-border, #b3b3b3);
Expand Down
84 changes: 81 additions & 3 deletions packages/tokens/build/zodio/css/root.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -363,6 +363,84 @@
--color-datatable-filters-border: var(--color-grey-300);
--color-card-bordered-border: var(--color-grey-500);
--color-card-bordered-background: var(--color-grey-000);
--color-button-secondary-danger-disabled-font: var(--color-grey-600);
--color-button-secondary-danger-disabled-border: var(--color-grey-200);
--color-button-secondary-danger-disabled-background: var(--color-grey-200);
--color-button-secondary-danger-focus-border: var(--color-grey-999);
--color-button-secondary-danger-active-font: var(--color-danger-600);
--color-button-secondary-danger-active-border: var(--color-danger-600);
--color-button-secondary-danger-active-background: var(--color-grey-200);
--color-button-secondary-danger-hover-font: var(--color-danger-600);
--color-button-secondary-danger-hover-border: var(--color-danger-600);
--color-button-secondary-danger-hover-background: var(--color-grey-100);
--color-button-secondary-danger-font: var(--color-danger-600);
--color-button-secondary-danger-border: var(--color-danger-600);
--color-button-secondary-danger-background: var(--color-grey-000);
--color-button-danger-disabled-font: var(--color-grey-600);
--color-button-danger-disabled-border: var(--color-grey-200);
--color-button-danger-disabled-background: var(--color-grey-200);
--color-button-danger-focus-border: var(--color-grey-999);
--color-button-danger-active-font: var(--color-grey-000);
--color-button-danger-active-border: var(--color-danger-900);
--color-button-danger-active-background: var(--color-danger-900);
--color-button-danger-hover-font: var(--color-grey-000);
--color-button-danger-hover-border: var(--color-danger-800);
--color-button-danger-hover-background: var(--color-danger-800);
--color-button-danger-font: var(--color-grey-000);
--color-button-danger-border: var(--color-danger-600);
--color-button-danger-background: var(--color-danger-600);
--color-button-accent-disabled-font: var(--color-grey-600);
--color-button-accent-disabled-border: var(--color-grey-200);
--color-button-accent-disabled-background: var(--color-grey-200);
--color-button-accent-focus-border: var(--color-grey-999);
--color-button-accent-active-font: var(--color-grey-999);
--color-button-accent-active-border: var(--color-primary-01-500);
--color-button-accent-active-background: var(--color-primary-01-500);
--color-button-accent-hover-font: var(--color-grey-999);
--color-button-accent-hover-border: var(--color-primary-01-400);
--color-button-accent-hover-background: var(--color-primary-01-400);
--color-button-accent-font: var(--color-grey-999);
--color-button-accent-border: var(--color-primary-01-100);
--color-button-accent-background: var(--color-primary-01-100);
--color-button-secondary-disabled-font: var(--color-grey-600);
--color-button-secondary-disabled-border: var(--color-grey-200);
--color-button-secondary-disabled-background: var(--color-grey-200);
--color-button-secondary-focus-border: var(--color-grey-999);
--color-button-secondary-active-font: var(--color-grey-999);
--color-button-secondary-active-border: var(--color-grey-999);
--color-button-secondary-active-background: var(--color-grey-200);
--color-button-secondary-hover-font: var(--color-grey-999);
--color-button-secondary-hover-border: var(--color-grey-999);
--color-button-secondary-hover-background: var(--color-grey-100);
--color-button-secondary-font: var(--color-grey-999);
--color-button-secondary-border: var(--color-grey-999);
--color-button-secondary-background: var(--color-grey-000);
--color-button-invert-disabled-font: var(--color-grey-600);
--color-button-invert-disabled-border: var(--color-grey-200);
--color-button-invert-disabled-background: var(--color-grey-200);
--color-button-invert-focus-border: var(--color-grey-999);
--color-button-invert-active-font: var(--color-grey-999);
--color-button-invert-active-border: var(--color-grey-200);
--color-button-invert-active-background: var(--color-grey-200);
--color-button-invert-hover-font: var(--color-grey-999);
--color-button-invert-hover-border: var(--color-grey-100);
--color-button-invert-hover-background: var(--color-grey-100);
--color-button-invert-font: var(--color-grey-999);
--color-button-invert-border: var(--color-grey-000);
--color-button-invert-background: var(--color-grey-000);
--color-button-primary-disabled-font: var(--color-grey-600);
--color-button-primary-disabled-border: var(--color-grey-200);
--color-button-primary-disabled-background: var(--color-grey-200);
--color-button-primary-focus-border: var(--color-grey-999);
--color-button-primary-active-font: var(--color-grey-000);
--color-button-primary-active-border: var(--color-grey-700);
--color-button-primary-active-background: var(--color-grey-700);
--color-button-primary-hover-font: var(--color-grey-000);
--color-button-primary-hover-border: var(--color-grey-800);
--color-button-primary-hover-background: var(--color-grey-800);
--color-button-primary-font: var(--color-grey-000);
--color-button-primary-border: var(--color-grey-999);
--color-button-primary-background: var(--color-grey-999);
--color-button-bordered-danger-hover-font: var(--color-danger-700);
--color-button-bordered-danger-hover-background: var(--color-secondary-red-100);
--color-button-bordered-danger-active-font: var(--color-danger-800);
Expand Down Expand Up @@ -406,7 +484,7 @@
--color-button-solid-danger-disabled-background: var(--color-grey-200);
--color-button-solid-danger-focus-border: var(--color-danger-700);
--color-button-solid-danger-font: var(--color-grey-000);
--color-button-solid-danger-background: var(--color-secondary-red-600);
--color-button-solid-danger-background: var(--color-danger-600);
--color-button-solid-neutral-hover-font: var(--color-grey-000);
--color-button-solid-neutral-hover-background: var(--color-grey-900);
--color-button-solid-neutral-active-background: var(--color-grey-800);
Expand All @@ -429,8 +507,8 @@
--color-button-solid-disabled-font: var(--color-grey-600);
--color-button-solid-disabled-background: var(--color-grey-200);
--color-button-solid-focus-border: var(--color-primary-01-700);
--color-button-solid-font: var(--color-grey-999);
--color-button-solid-background: var(--color-primary-01-100);
--color-button-solid-font: var(--color-grey-000);
--color-button-solid-background: var(--color-primary-01-600);
--color-breadcrumb-arrow-invert: var(--color-grey-000);
--color-breadcrumb-arrow: var(--color-grey-800);
--color-secondary-green-900: var(--color-primary-01-900);
Expand Down
Loading

0 comments on commit 91d1efd

Please sign in to comment.