Skip to content

Commit

Permalink
variables variables variables
Browse files Browse the repository at this point in the history
  • Loading branch information
Gregory Pratt committed Aug 14, 2022
1 parent 0d2ba95 commit 2f4dc5e
Show file tree
Hide file tree
Showing 19 changed files with 456 additions and 108 deletions.
46 changes: 32 additions & 14 deletions src/scss/_components.alerts.scss
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
.c-alerts[role='presentation'] {
--alerts-background-color: var(--color-transparent);

z-index: var(--z-over-page);
display: block;
max-height: 100%;
margin: 0;
padding: 0;
overflow-y: auto;
list-style: none;
background-color: var(--alerts-background-color);
-webkit-overflow-scrolling: touch;
}

Expand Down Expand Up @@ -41,38 +38,59 @@
}

.c-alert[role='alert'] {
--alert-color: white;
--alert-background-color: var(--color-default);

position: relative;
margin: var(--spacing-medium);
padding: var(--spacing-medium) var(--spacing-super) var(--spacing-medium) var(--spacing-medium);
color: var(--alert-color);
background-color: var(--alert-background-color);
background: var(--alert-background);
border-radius: var(--border-radius);

.c-link {
color: var(--alert-color) !important;
color: var(--alert-link-color);
}

&.c-alert--brand {
--alert-background-color: var(--color-brand);
color: var(--alert-color--brand);
background: var(--alert-background--brand);

.c-link {
color: var(--alert-link-color--brand);
}
}

&.c-alert--info {
--alert-background-color: var(--color-info);
color: var(--alert-color--info);
background: var(--alert-background--info);

.c-link {
color: var(--alert-link-color--info);
}
}

&.c-alert--warning {
--alert-color: black;
--alert-background-color: var(--color-warning);
color: var(--alert-color--warning);
background: var(--alert-background--warning);

.c-link {
color: var(--alert-link-color--warning);
}
}

&.c-alert--success {
--alert-background-color: var(--color-success);
color: var(--alert-color--success);
background: var(--alert-background--success);

.c-link {
color: var(--alert-link-color--success);
}
}

&.c-alert--error {
--alert-background-color: var(--color-error);
color: var(--alert-color--error);
background: var(--alert-background--error);

.c-link {
color: var(--alert-link-color--error);
}
}
}
8 changes: 2 additions & 6 deletions src/scss/_components.avatars.scss
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
.c-avatar {
--avatar-color: white;
--avatar-background-color: var(--color-brand);
--avatar-border-radius: var(--border-radius-rounded);

position: relative;
display: inline-block;
width: 3em;
height: 3em;
margin: 0;
color: var(--avatar-color);
background-color: var(--avatar-background-color);
color: var(--avatar-color, white);
background: var(--avatar-background);
border-radius: var(--avatar-border-radius);
}

Expand Down
54 changes: 30 additions & 24 deletions src/scss/_components.badges.scss
Original file line number Diff line number Diff line change
@@ -1,22 +1,19 @@
.c-badge {
--badge-color: white;
--badge-background-color: var(--color-default);

display: inline-block;
margin: 0;
padding: var(--spacing-xsmall) var(--spacing-small);
color: var(--badge-color);
font-weight: var(--text-font-weight-heavy);
font-size: 0.8em;
line-height: 1.2;
background-color: var(--badge-background-color);
border: var(--border-width) var(--border-style) transparent;
background: var(--badge-background);
border: var(--border-width) var(--border-style) var(--badge-border-color);
border-radius: var(--border-radius);

&.c-badge--ghost {
--badge-background-color: var(--color-transparent);
--badge-color: var(--color-default);
border-color: var(--badge-color);
color: var(--badge-color--ghost);
background: transparent;
border-color: var(--badge-border-color--ghost);
}
}

Expand All @@ -25,47 +22,56 @@
}

.c-badge--brand {
--badge-background-color: var(--color-brand);
color: var(--badge-color--brand);
background: var(--badge-background--brand);
border-color: var(--badge-border-color--brand);

&.c-badge--ghost {
--badge-background-color: var(--color-transparent);
--badge-color: var(--color-brand);
color: var(--badge-color--brand-ghost);
border-color: var(--badge-border-color--brand-ghost);
}
}

.c-badge--info {
--badge-background-color: var(--color-info);
color: var(--badge-color--info);
background: var(--badge-background--info);
border-color: var(--badge-border-color--info);

&.c-badge--ghost {
--badge-background-color: var(--color-transparent);
--badge-color: var(--color-info);
color: var(--badge-color--info-ghost);
border-color: var(--badge-border-color--info-ghost);
}
}

.c-badge--warning {
--badge-background-color: var(--color-warning);
--badge-color: black;
color: var(--badge-color--warning);
background: var(--badge-background--warning);
border-color: var(--badge-border-color--warning);

&.c-badge--ghost {
--badge-background-color: var(--color-transparent);
--badge-color: var(--color-warning);
color: var(--badge-color--warning-ghost);
border-color: var(--badge-border-color--warning-ghost);
}
}

.c-badge--success {
--badge-background-color: var(--color-success);
color: var(--badge-color--success);
background: var(--badge-background--success);
border-color: var(--badge-border-color--success);

&.c-badge--ghost {
--badge-background-color: var(--color-transparent);
--badge-color: var(--color-success);
color: var(--badge-color--success-ghost);
border-color: var(--badge-border-color--success-ghost);
}
}

.c-badge--error {
--badge-background-color: var(--color-error);
color: var(--badge-color--error);
background: var(--badge-background--error);
border-color: var(--badge-border-color--error);

&.c-badge--ghost {
--badge-background-color: var(--color-transparent);
--badge-color: var(--color-error);
color: var(--badge-color--error-ghost);
border-color: var(--badge-border-color--error-ghost);
}
}
4 changes: 2 additions & 2 deletions src/scss/_components.breadcrumbs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
&:not([aria-current]) {
::after {
padding: 0 var(--spacing-small);
color: var(--color-default);
content: '/';
color: var(--breadcrumbs-divider-color);
content: var(--breadcrumbs-divider-character);
}
}

Expand Down
39 changes: 23 additions & 16 deletions src/scss/_components.buttons.scss
Original file line number Diff line number Diff line change
@@ -1,14 +1,11 @@
@import 'mixins/components.buttons';

.c-button {
--button-color: #fff;
--button-background-color: var(--color-default);

@include button;

&.c-button--close {
--button-color: inherit;
--button-background-color: transparent;
--button-background: transparent;

@include button-color;

Expand All @@ -31,49 +28,59 @@
}

&.c-button--brand {
--button-background-color: var(--color-brand);
--button-color: var(--button-color--brand);
--button-background: var(--button-background--brand);
}

&.c-button--info {
--button-background-color: var(--color-info);
--button-color: var(--button-color--info);
--button-background: var(--button-background--info);
}

&.c-button--warning {
--button-color: #000;
--button-background-color: var(--color-warning);
--button-color: var(--button-color--warning);
--button-background: var(--button-background--warning);
}

&.c-button--success {
--button-background-color: var(--color-success);
--button-color: var(--button-color--success);
--button-background: var(--button-background--success);
}

&.c-button--error {
--button-background-color: var(--color-error);
--button-color: var(--button-color--error);
--button-background: var(--button-background--error);
}

&.c-button--ghost {
--button-color: var(--color-default);
--button-color: var(--button-color--ghost);
--button-background: var(--button-background--ghost);

@include button-ghost;

&.c-button--brand {
--button-color: var(--color-brand);
--button-color: var(--button-color--brand-ghost);
--button-background: var(--button-background--brand-ghost);
}

&.c-button--info {
--button-color: var(--color-info);
--button-color: var(--button-color--info-ghost);
--button-background: var(--button-background--info-ghost);
}

&.c-button--warning {
--button-color: var(--color-warning);
--button-color: var(--button-color--warning-ghost);
--button-background: var(--button-background--warning-ghost);
}

&.c-button--success {
--button-color: var(--color-success);
--button-color: var(--button-color--success-ghost);
--button-background: var(--button-background--success-ghost);
}

&.c-button--error {
--button-color: var(--color-error);
--button-color: var(--button-color--error-ghost);
--button-background: var(--button-background--error-ghost);
}
}

Expand Down
18 changes: 11 additions & 7 deletions src/scss/_components.calendars.scss
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@
max-width: 400px;
padding: var(--spacing-medium);
text-align: center;
background-color: var(--color-background);
background-color: var(--calendar-background);
border: 1px solid transparent;
border-radius: var(--border-radius);
}

.c-calendar__control,
.c-calendar__date {
--button-color: var(--color-quiet);
--button-background-color: transparent;
--button-color: var(--calendar-control-color--date);
--button-background: var(--calendar-control-background--date);

@include button-color;
display: inline;
Expand All @@ -32,12 +32,14 @@
user-select: none;

&:hover {
border-color: var(--border-color);
--button-color: var(--calendar-control-color--hover);
--button-background: var(--calendar-control-background--hover);
}
}

.c-calendar__control {
--button-color: var(--color-default);
--button-color: var(--calendar-control-color);
--button-background: var(--calendar-control-background);
}

.c-calendar__header {
Expand All @@ -58,7 +60,8 @@
}

.c-calendar__date--in-month {
--button-color: #000;
--button-color: var(--calendar-control-color--in-month);
--button-background: var(--calendar-control-background--in-month);
}

.c-calendar__date[aria-current='date'] {
Expand All @@ -67,7 +70,8 @@

.c-calendar__date--selected[aria-selected='true'],
.c-calendar__date--selected[aria-selected='true']:hover {
--button-color: #fff;
--button-color: var(--calendar-control-color--selected);
--button-background: var(--calendar-control-background--selected);

@include button-color;

Expand Down
4 changes: 2 additions & 2 deletions src/scss/_components.cards.scss
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@

.c-card__control {
--button-color: var(--color-text);
--button-background-color: var(--color-dark);
--button-background: var(--color-dark);
@include card-control;
}

Expand All @@ -161,7 +161,7 @@
border-radius: 0 0 var(--border-radius) var(--border-radius);

.c-card__control[role='menuitem'] {
--button-background-color: var(--color-light);
--button-background: var(--color-light);
}
}

Expand Down
2 changes: 1 addition & 1 deletion src/scss/_components.divider.scss
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
&::after {
@include grid__cell;
@include grid__cell--auto;
border-top: 1px solid var(--color-default);
border-top: 1px solid var(--divider-color);
content: '';
}

Expand Down
4 changes: 2 additions & 2 deletions src/scss/_components.file-upload.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@
padding: var(--spacing-medium);
line-height: 10;
text-align: center;
background-color: var(--color-background);
border: 3px dashed var(--color-dark);
background: var(--file-upload-background);
border: var(--file-upload-border);
border-radius: var(--border-radius);
}

Expand Down
Loading

0 comments on commit 2f4dc5e

Please sign in to comment.