Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Variables utilities updates #154

Merged
merged 3 commits into from
Sep 9, 2019
Merged

Variables utilities updates #154

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e53d15d
variable refactor to abstract settings from compiled file
Sep 4, 2019
85c405c
utility updates
Sep 5, 2019
ee65934
name correction
Sep 5, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
7 changes: 4 additions & 3 deletions src/css/config/config.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,9 @@ $cu-foreground: $ts-white !default;
$cu-foreground--light: $ts-white !default;
$cu-foreground--dark: $ts-white !default;

$cu-middleground: scaleColor($ts-grey, 10) !default;
$cu-middleground--light: scaleColor($ts-grey, 10) !default;
$cu-middleground--dark: scaleColor($ts-grey, 10) !default;
$cu-middleground: scaleColor($ts-grey, 9) !default;
$cu-middleground--light: scaleColor($ts-grey, 9) !default;
$cu-middleground--dark: scaleColor($ts-grey, 9) !default;

$cu-background: scaleColor($ts-grey, 8) !default;
$cu-background--light: scaleColor($ts-grey, 8) !default;
Expand Down Expand Up @@ -183,6 +183,7 @@ $max-breakpoints: (
'mdMax': $breakpoint-md-max
);

$site-container: 1300px;

// * 5. Borders

Expand Down
78 changes: 78 additions & 0 deletions src/css/config/themes/blue-steel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
//--------------------------------------------------------------//

// * Blue Steel Theme

// * 1. Load functions, mixins, & default variables
// * 2. Redefine Color, Element, & Font Variables for Theme

// Notes:
// * Based on the same split comlimentary color scheme as default

//--------------------------------------------------------------//

// * 1. Load functions, mixins, & default variables

@import "../config/index";

// * 2. Redefine Color, Element, & Font Variables for Theme

$ts-white: #fafafa;
$ts-grey: #aaaaaa;
$ts-black: #222222;

$cu-foreground: #456480;
$cu-foreground--light: scaleColor($cu-foreground, 0);
$cu-foreground--dark: scaleColor($cu-foreground, 0);

$cu-middleground: #385875;
$cu-middleground--light: scaleColor($cu-middleground, 0);
$cu-middleground--dark: scaleColor($cu-middleground, 0);

$cu-background: #273b4e;
$cu-background--light: scaleColor($cu-background, 0);
$cu-background--dark: scaleColor($cu-background, 0);

$cu-divider: #374e63;
$cu-divider--light: scaleColor($cu-divider, 1);
$cu-divider--dark: scaleColor($cu-divider, -4);

$cu-info: #d6d6d6;
$cu-info--light: scaleColor($cu-info, -1);
$cu-info--dark: scaleColor($cu-info, 0);

$cu-positive: #7fc243;
$cu-positive--light: scaleColor($cu-positive, 1);
$cu-positive--dark: scaleColor($cu-positive, -1);
$cu-positive--bg: scaleColor($cu-positive, 3);

$cu-negative: #e26362;
$cu-negative--light: scaleColor($cu-negative, 1);
$cu-negative--dark: scaleColor($cu-negative, -1);
$cu-negative--bg: scaleColor($cu-negative, 8);

$cu-primary: #e0ab1d;
$cu-primary--light: scaleColor($cu-primary, 2);
$cu-primary--dark: scaleColor($cu-primary, -1);
$cu-primary--bg: scaleColor($cu-primary, 10);

$cu-secondary: #7fc243;
$cu-secondary--light: scaleColor($cu-secondary, 1);
$cu-secondary--dark: scaleColor($cu-secondary, -2);
$cu-secondary--bg: scaleColor($cu-secondary, 10);

$cu-highlight: #e0ab1d;
$cu-highlight--light: scaleColor($cu-highlight, 1);
$cu-highlight--dark: scaleColor($cu-highlight, 0);
$cu-highlight--bg: scaleColor($cu-highlight, 10);

$color-links: $cu-primary--light;
$color-links--hover: scaleColor($color-links, -2);

// * 2. Redefine Element Variables for Theme

$button-color: $cu-foreground--light;

$feedback-bg-color: transparent;

$form-select-bg-color: $cu-foreground--light;
$form-input-bg-color: $cu-foreground--light;
69 changes: 69 additions & 0 deletions src/css/config/themes/care-bear.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
//--------------------------------------------------------------//

// * Care Bear Theme

// * 1. Load functions, mixins, & default variables
// * 2. Redefine Color, Element, & Font Variables for Theme

// Notes:
// * Based on the same split comlimentary color scheme as default

//--------------------------------------------------------------//

// * 1. Load functions, mixins, & default variables

@import "../config/index";

// * 2. Redefine Color, Element, & Font Variables for Theme

$ts-white: #fafafa;
$ts-grey: #999;
$ts-black: #333;

$cu-foreground: #ffffff;
$cu-foreground--light: scaleColor($cu-foreground, 0);
$cu-foreground--dark: scaleColor($cu-foreground, 0);

$cu-middleground: #fcfcfc;
$cu-middleground--light: scaleColor($cu-middleground, 0);
$cu-middleground--dark: scaleColor($cu-middleground, 0);

$cu-background: #f8f7f4;
$cu-background--light: scaleColor($cu-background, 0);
$cu-background--dark: scaleColor($cu-background, 0);

$cu-divider: #d0e3ed;
$cu-divider--light: scaleColor($cu-divider, 1);
$cu-divider--dark: scaleColor($cu-divider, -1);

$cu-info: #4f616b;
$cu-info--light: scaleColor($cu-info, -1);
$cu-info--dark: scaleColor($cu-info, 0);

$cu-positive: #7fc243;
$cu-positive--light: scaleColor($cu-positive, 1);
$cu-positive--dark: scaleColor($cu-positive, -1);
$cu-positive--bg: scaleColor($cu-positive, 4);

$cu-negative: #e26362;
$cu-negative--light: scaleColor($cu-negative, 1);
$cu-negative--dark: scaleColor($cu-negative, -1);
$cu-negative--bg: scaleColor($cu-negative, 8);

$cu-primary: #ff8f00;
$cu-primary--light: scaleColor($cu-primary, 2);
$cu-primary--dark: scaleColor($cu-primary, -1);
$cu-primary--bg: scaleColor($cu-primary, 10);

$cu-secondary: #f06d82;
$cu-secondary--light: scaleColor($cu-secondary, 1);
$cu-secondary--dark: scaleColor($cu-secondary, -1);
$cu-secondary--bg: scaleColor($cu-secondary, 10);

$cu-highlight: #7cb8e8;
$cu-highlight--light: scaleColor($cu-highlight, 1);
$cu-highlight--dark: scaleColor($cu-highlight, -1);
$cu-highlight--bg: scaleColor($cu-highlight, 10);

$color-links: #469ee4;
$color-links--hover: scaleColor($color-links, -2);
218 changes: 218 additions & 0 deletions src/css/config/themes/christmas-sweater.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,218 @@
//--------------------------------------------------------------//

// * Christmas Sweater Theme

// * 1. Redefine Color Variables for Theme
// * 2. Redefine Color Variables for Theme
// * 3. Load app-theme with redefined variables
// * 4. Further Theme Cleanup

// Notes:
// * Based on the same split comlimentary color scheme as default
// * App-theme is a copy of app-team without tools loaded so
// they aren't double loaded
// * Since Christmas sweater breaks all the normal patterns,
// it needs a few individual overrides that don't fit into
// the normal component settings

// TODO : after updating element variables, cleanup Theme
// TODO : given the further cleanup, make theme seasonal

//--------------------------------------------------------------//

@import "../config/index";

// * 1. Redefine Color Variables for Theme

$ts-white: #fafafa;
$ts-grey: #c6c6c6;
$ts-black: #333;

$cu-primary: #b50a2a;
$cu-primary--light: scaleColor($cu-primary, 2);
$cu-primary--dark: scaleColor($cu-primary, -1);
$cu-primary--bg: scaleColor($cu-primary, 10);

$cu-secondary: #59b55e;
$cu-secondary--light: scaleColor($cu-secondary, 1);
$cu-secondary--dark: scaleColor($cu-secondary, -1);
$cu-secondary--bg: scaleColor($cu-secondary, 10);

$cu-highlight: #fafafa;
$cu-highlight--light: scaleColor($cu-highlight, 1);
$cu-highlight--dark: scaleColor($cu-highlight, -1);
$cu-highlight--bg: scaleColor($cu-highlight, 10);

$cu-foreground: #fafafa;
$cu-foreground--light: scaleColor($cu-foreground, 0);
$cu-foreground--dark: scaleColor($cu-foreground, 0);

$cu-middleground: #f6f6f6;
$cu-middleground--light: scaleColor($cu-middleground, 0);
$cu-middleground--dark: scaleColor($cu-middleground, 0);

$cu-background: #03784b;
$cu-background--light: scaleColor($cu-background, 0);
$cu-background--dark: scaleColor($cu-background, 0);

$cu-divider: #dddddd;
$cu-divider--light: scaleColor($cu-divider, 1);
$cu-divider--dark: scaleColor($cu-divider, -1);

$cu-info: #274e29;
$cu-info--light: scaleColor($cu-info, -1);
$cu-info--dark: scaleColor($cu-info, 0);

$cu-positive: #7fc243;
$cu-positive--light: scaleColor($cu-positive, 1);
$cu-positive--dark: scaleColor($cu-positive, -1);
$cu-positive--bg: scaleColor($cu-positive, 4);

$cu-negative: #e26362;
$cu-negative--light: scaleColor($cu-negative, 1);
$cu-negative--dark: scaleColor($cu-negative, -1);
$cu-negative--bg: scaleColor($cu-negative, 8);

$color-links: $cu-primary;
$color-links--hover: scaleColor($color-links, -2);

// * 2. Redefine Element Variable Settings

$button-style: flat;

$button-color: $cu-primary;
$button-border-color: $ts-white;
$button-text-color: $ts-white;

$form-input-bg-color: $cu-middleground--light;
$form-select-bg-color: $cu-middleground--light;

$panel-header-bg-color: $cu-primary;
$panel-header-text-color: $ts-white;

$panel-body-bg-color: $cu-foreground;
$panel-body-text-color: $cu-info;

$table-header-bg-color: $cu-primary;
$table-header-text-color: $ts-white;

$table-sub-header-text-color: $cu-primary;

$table-body-bg-color: $cu-foreground;
$table-body-text-color: $cu-info;

$feedback-text-color: $ts-white;
$feedback-bg-color: transparent;
$feedback-border-color: $ts-white;

$placeholder-figure-color: $ts-white;

// * 3. Load app-theme with redefined variables

@import "../fonts/index";
@import "../base/index";
@import "../components/index";
@import "../utils/index";

// * 4. Further Theme Cleanup

.App-Footer--container--align-right {
color: $ts-white;
[href="https://www.facebook.com/home.php?src=fftb#/pages/TeamSnap/78822513967?ref=ts"],
[href="https://www.twitter.com/teamsnap"],
[href="http://blog.teamsnap.com"],
[href="https://www.teamsnap.com/privacy-policy"],
[href="https://www.teamsnap.com/terms"],
.old-style--swap,
.new-style--swap {
color: $ts-grey;
}
}

.Roster__key,
.Payments__key,
.loading-text,
.startup-message,
[class*="__tab-title"],
.Roster__small-panel.hrs--bg-highlight,
.Roster__tab-title--pull-left,
#subnav .title, #subnav .title_div,
.Team-Home__flexbox-item {
color: $ts-white;
}

#manager_subnav,
.hrs__manager-subnav,
.hrs--bg-highlight {
background: $cu-primary;
}

#manager_subnav,
.hrs__manager-subnav {
& > span,
[class*="inline-title"] {
color: $ts-white;
}
}

.key,
.hrs__manager-subnav {
color: $ts-white;
}

.Main-Tabs--container {
li {
border-color: $ts-white;
border-left: 0;
border-right: 1px solid $ts-white;
border-bottom: 1px solid $ts-white;
&:first-child {
border-left: 1px solid $ts-white;
}
&:last-child {
border-right: 1px solid $ts-white;
}
}
}

.loader, .loading-indicator {
border-top: solid 2px $ts-grey;
box-shadow: 0 0 0 1px $ts-grey;
}

[data-ui="Tip Message"],
.Roster__key,
.Roster__row__feed-back--warning--sm-4\/5--centered,
.Team-Home__feed-back--warning,
.hrs__manager-tip {
a {
color: $ts-grey;
}
}

.hrs__tip-icon--ss-info,
[class*="__tab-title"] i {
color: $ts-grey;
}

[class*="button"][class*="success"],
[class*="button"][class*="ss-plus"],
[class*="button"][class*="ss-check"],
[class*="button"][class*="ss-addcalendar"],
[class*="button"][class*="ss-uploadcloud"] {
border-color: $ts-white;
}

[class*="button"][class*="danger"],
[class*="button"][class*="ss-delete"] {
color: $ts-white;
}

.standard_table .help_message {
color: $cu-info;
border-color: $cu-info;
}

.standard_table.cocoa tr[show="true"]:nth-child(2n + 2) td {
background: $cu-foreground;
}