Skip to content

Commit ea0b041

Browse files
cabutler10cabutler10
authored
Merge pull request #62 from zepdev/ZDS-387/theme-sass-functions-error
Zds 387/theme sass functions error
2 parents 07fe231 + 97e1e0f commit ea0b041

File tree

9 files changed

+96
-117
lines changed

9 files changed

+96
-117
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "zeppelin-element-library",
3-
"version": "0.6.0",
3+
"version": "0.6.3",
44
"description": "Zeppelin Elements Library is an element library for digital Zeppelin products.",
55
"main": "bundle/zeppelin-element-library.cjs.js",
66
"module": "bundle/zeppelin-element-library.esm.js",

‎src/base_bundle_entry.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ $include-typography: true !default;
99
@import './style-basics/variables';
1010
@import './style-basics/utils';
1111
@import './style-basics/breakpoints';
12-
//@import './guidelines/colors';
12+
@import './guidelines/colors';
1313
@import './themes/themes';
1414
@import './assets/fontsets';
1515
@import './guidelines/typography';

‎src/elements/button/_button.scss‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -31,23 +31,23 @@
3131
}
3232
&:disabled,
3333
&.#{$prefix}button-primary--disabled {
34-
color: get('colors.gray.disabled.hex');
35-
background-color: get('colors.gray.grayLighter.hex');
34+
color: map-get($colormap-base, disabled);
35+
background-color: map-get($colormap-base, gray-lighter);
3636
cursor: not-allowed;
3737

3838
&:hover,
3939
&:focus,
4040
&.#{$prefix}button-primary--hover {
41-
color: get('colors.gray.disabled.hex');
42-
background-color: get('colors.gray.grayLighter.hex');
41+
color: map-get($colormap-base, disabled);
42+
background-color: map-get($colormap-base, gray-lighter);
4343
}
4444
}
4545
}
4646

4747
.#{$prefix}button-secondary {
4848
$id: 'button-secondary';
49-
color: get('colors.gray.black.hex');
50-
background-color: get('colors.gray.white.hex');
49+
color: map-get($colormap-base, black);
50+
background-color: map-get($colormap-base, white);
5151
border: 2px solid;
5252

5353
@include themify($themes) {
@@ -64,23 +64,23 @@
6464

6565
&:disabled,
6666
&.#{$prefix}button-secondary--disabled {
67-
color: get('colors.gray.grayLighter.hex');
68-
background-color: get('colors.gray.white.hex');
69-
border-color: get('colors.gray.grayLighter.hex');
67+
color: map-get($colormap-base, gray-lighter);
68+
background-color: map-get($colormap-base, white);
69+
border-color: map-get($colormap-base, gray-lighter);
7070
cursor: not-allowed;
7171

7272
&:hover,
7373
&:focus,
7474
&.#{$prefix}button-secondary--hover {
75-
color: get('colors.gray.grayLighter.hex');
76-
background-color: get('colors.gray.white.hex');
77-
border-color: get('colors.gray.grayLighter.hex');
75+
color: map-get($colormap-base, gray-lighter);
76+
background-color: map-get($colormap-base, white);
77+
border-color: map-get($colormap-base, gray-lighter);
7878
}
7979
}
8080
}
8181

8282
.#{$prefix}button--number-input {
83-
background-color: get('colors.gray.grayLighter.hex');
83+
background-color: map-get($colormap-base, gray-lighter);
8484
padding: 0;
8585
width: 3rem;
8686
height: 3rem;

‎src/elements/checkbox/_checkbox.scss‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
.#{$prefix}checkbox {
1212
.#{$prefix}checkbox__label {
1313
cursor: pointer;
14-
color: get('colors.gray.grayDark.hex');
14+
color: map-get($colormap-base, gray-dark);
1515
line-height: $base;
1616
position: relative;
1717
display: inline-block;
@@ -37,7 +37,7 @@
3737
width: ($boxSize) + $borderWidth * 2;
3838
height: ($boxSize) + $borderWidth * 2;
3939
margin: -$borderWidth;
40-
border: 2px solid get('colors.gray.grayDark.hex');
40+
border: 2px solid map-get($colormap-base, gray-dark);
4141
border-radius: 0;
4242
}
4343
}
@@ -47,33 +47,35 @@
4747
opacity: 0;
4848
&:disabled + .#{$prefix}checkbox__label {
4949
cursor: not-allowed;
50-
color: get('colors.gray.textGray.hex');
50+
color: map-get($colormap-base, text-gray);
5151
}
52+
5253
&:disabled + .#{$prefix}checkbox__label:before {
53-
border: 2px solid get('colors.gray.grayLight.hex');
54+
border: 2px solid map-get($colormap-base, gray-light);
5455
}
5556

5657
@include themify($themes) {
5758
&:checked + .#{$prefix}checkbox__label:before {
5859
font-family: zepicons;
5960
content: '\f112';
6061
display: inline-block;
61-
background: get('colors.gray.white.hex');
62+
background: map-get($colormap-base, white);
6263
line-height: $boxSize + $borderWidth;
6364
font-size: 1.125rem;
6465
text-align: center;
6566
transform: scale(1);
67+
6668
color: themed('primary');
6769
}
6870
&:checked:focus + .#{$prefix}checkbox__label:before {
6971
box-shadow: 0 0 5px 1px themed('primary');
70-
background: get('colors.gray.white.hex');
72+
background: map-get($colormap-base, white);
7173
}
7274
&:active + .#{$prefix}checkbox__label:before {
7375
background: themed('hover');
7476
}
7577
&:disabled:active + .#{$prefix}checkbox__label:before {
76-
background: get('colors.gray.white.hex');
78+
background: map-get($colormap-base, white);
7779
}
7880
}
7981
}

‎src/elements/input/_input.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,13 @@
33
@mixin input {
44
.#{$prefix}input {
55
@extend %typo-normal-3;
6-
border: solid 2px get('colors.gray.grayLighter.hex');
7-
background-color: get('colors.gray.white.hex');
6+
border: solid 2px map-get($colormap-base, gray-lighter);
7+
background-color: map-get($colormap-base, white);
88
padding-left: 1.25rem;
99
padding-top: 0.25rem;
1010

1111
&:focus {
12-
outline: 2px solid get('colors.primary.catYellow.hex');
12+
outline: 2px solid map-get($colormap-base, cat-yellow);
1313
}
1414
}
1515

‎src/elements/tag/_tag.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,21 +4,21 @@
44
.#{$prefix}tag {
55
box-sizing: border-box;
66
display: inline-block;
7-
border: 2px solid get('colors.primary.catYellow.hex');
7+
border: 2px solid map-get($colormap-base, cat-yellow);
88
padding: 0.625rem;
9-
background-color: get('colors.gray.white.hex');
10-
color: get('colors.gray.black.hex');
9+
background-color: map-get($colormap-base, white);
10+
color: map-get($colormap-base, black);
1111
&:hover,
1212
&:focus,
1313
&.#{$prefix}tag--hover {
14-
background-color: get('colors.secondary.catYellowLightest.hex');
14+
background-color: map-get($colormap-base, cat-yellow-lightest);
1515
}
1616
img,
1717
i,
1818
svg {
1919
width: 12px;
2020
height: 12px;
21-
color: get('colors.primary.catYellow.hex');
21+
color: map-get($colormap-base, cat-yellow);
2222
margin-left: 0.625rem;
2323
float: right;
2424
cursor: pointer;

‎src/guidelines/_colors.scss‎

Lines changed: 34 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,42 @@
11
// COLORS
22

33
$colormap-base: (
4-
//primary
5-
indigo-blue: #27166f,
6-
cat-yellow: #f0b823,
7-
rental-red: #af0e0e,
8-
zlab-blue: #00aeef,
9-
//
10-
//gray
11-
black: #000000,
12-
gray-dark: #101111,
13-
gray-mid-dark: #373d3f,
14-
gray: #464a4c,
15-
text-gray: #555f61,
16-
gray-light: #6f7c80,
17-
disabled: #c1c7c9,
18-
gray-lighter: #eceeef,
19-
gray-mid: #f2f3f4,
20-
gray-lightest: #f7f7f9,
21-
white: #ffffff,
22-
//
23-
//support
24-
success: #5cb85c,
25-
warning: #f0ad4e,
26-
alert: #ff6562,
27-
info: #5bc0de,
28-
//
29-
//social media
30-
xing: #026466,
31-
facebook: #4267b2,
32-
twitter: #1da1f2,
33-
linkedin: #0077b5,
34-
kununu: #99c613,
35-
youtube: #ff0000,
36-
googleplus: #dd4b39,
37-
//
38-
//secondary
39-
cat-yellow-lighter: #fae6b2,
40-
cat-yellow-darker: #f0b823,
41-
indigo-blue-lighter: #361e9a
4+
indigo-blue: get('colors.primary.indigoBlue.hex'),
5+
cat-yellow: get('colors.primary.catYellow.hex'),
6+
rental-red: get('colors.primary.rentalRed.hex'),
7+
zlab-blue: get('colors.primary.zlabBlue.hex'),
8+
cat-yellow-lightest: get('colors.secondary.catYellowLightest.hex'),
9+
cat-yellow-lighter: get('colors.secondary.catYellowLighter.hex'),
10+
cat-yellow-darker: get('colors.secondary.catYellowDarker.hex'),
11+
indigo-blue-lighter: get('colors.secondary.indigoBlueLighter.hex'),
12+
black: get('colors.gray.black.hex'),
13+
gray-dark: get('colors.gray.grayDark.hex'),
14+
gray-mid-dark: get('colors.gray.grayMidDark.hex'),
15+
gray: get('colors.gray.gray.hex'),
16+
text-gray: get('colors.gray.textGray.hex'),
17+
gray-light: get('colors.gray.grayLight.hex'),
18+
disabled: get('colors.gray.disabled.hex'),
19+
gray-lighter: get('colors.gray.grayLighter.hex'),
20+
gray-mid: get('colors.gray.grayMid.hex'),
21+
gray-lightest: get('colors.gray.grayLightest.hex'),
22+
white: get('colors.gray.white.hex'),
23+
success: get('colors.support.success.hex'),
24+
success-lighter: get('colors.support.successLighter.hex'),
25+
warning: get('colors.support.warning.hex'),
26+
warning-lighter: get('colors.support.warningLighter.hex'),
27+
alert: get('colors.support.alert.hex'),
28+
alert-lighter: get('colors.support.alertLighter.hex'),
29+
info: get('colors.support.info.hex'),
30+
info-lighter: get('colors.support.infoLighter.hex'),
31+
xing: get('colors.socialMedia.xing.hex'),
32+
facebook: get('colors.socialMedia.facebook.hex'),
33+
twitter: get('colors.socialMedia.twitter.hex'),
34+
linkedin: get('colors.socialMedia.linkedin.hex'),
35+
kununu: get('colors.socialMedia.kununu.hex'),
36+
youtube: get('colors.socialMedia.youtube.hex'),
37+
googleplus: get('colors.socialMedia.googleplus.hex')
4238
);
4339

44-
$theme-color-map: (
45-
button-primary: map-get($colormap-base, white),
46-
button-primary--disabled: map-get($colormap-base, disabled),
47-
button-secondary: map-get($colormap-base, grey-dark),
48-
button-secondary--hover: map-get($colormap-base, white),
49-
button-secondary--disabled: map-get($colormap-base, disabled)
50-
);
51-
52-
$theme-background-color-map: (
53-
button-primary: map-get($colormap-base, indigo-blue),
54-
button-primary--disabled: map-get($colormap-base, gray-lighter),
55-
button-primary--hover: lighten(map-get($colormap-base, indigo-blue), 10%),
56-
button-secondary: map-get($colormap-base, white),
57-
button-secondary--hover: map-get($colormap-base, indigo-blue),
58-
button-secondary--disabled: map-get($colormap-base, white)
59-
);
60-
61-
$theme-border-color-map: (
62-
button-secondary: map-get($colormap-base, indigo-blue),
63-
button-secondary--disabled: map-get($colormap-base, gray-lighter)
64-
);
65-
66-
//use lighten 10% on hover colors
67-
$hover-example: lighten(map-get($colormap-base, indigo-blue), 10%);
68-
6940
// create dummy color classes
7041
@each $name, $value in $colormap-base {
7142
.#{$prefix}color--#{$name} {

‎src/themes/_themes.scss‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
$themes: (
22
zeppelin: (
3-
primary: get('colors.primary.indigoBlue.hex'),
4-
hover: get('colors.secondary.indigoBlueLighter.hex'),
5-
secondary: get('colors.primary.indigoBlue.hex'),
6-
buttonText: get('colors.gray.white.hex'),
7-
buttonTextSecondaryHover: get('colors.gray.white.hex'),
8-
buttonBorderSecondaryHover: get('colors.primary.indigoBlue.hex')
3+
primary: map-get($colormap-base, indigo-blue),
4+
hover: map-get($colormap-base, indigo-blue-lighter),
5+
secondary: map-get($colormap-base, indigo-blue),
6+
buttonText: map-get($colormap-base, white),
7+
buttonTextSecondaryHover: map-get($colormap-base, white),
8+
buttonBorderSecondaryHover: map-get($colormap-base, indigo-blue),
99
),
1010
cat: (
11-
primary: get('colors.primary.catYellow.hex'),
12-
hover: get('colors.secondary.catYellowLighter.hex'),
13-
secondary: get('colors.secondary.catYellowLightest.hex'),
14-
buttonText: get('colors.gray.black.hex'),
15-
buttonTextSecondaryHover: get('colors.gray.black.hex'),
16-
buttonBorderSecondaryHover: get('colors.primary.catYellow.hex')
11+
primary: map-get($colormap-base, cat-yellow),
12+
hover: map-get($colormap-base, cat-yellow-lighter),
13+
secondary: map-get($colormap-base, cat-yellow-lightest),
14+
buttonText: map-get($colormap-base, black),
15+
buttonTextSecondaryHover: map-get($colormap-base, black),
16+
buttonBorderSecondaryHover: map-get($colormap-base, cat-yellow),
1717
),
1818
rental: (
19-
primary: get('colors.primary.rentalRed.hex'),
20-
hover: get('colors.primary.catYellow.hex'),
21-
secondary: get('colors.secondary.catYellowLightest.hex'),
22-
buttonText: get('colors.gray.white.hex'),
23-
buttonTextSecondaryHover: get('colors.gray.black.hex'),
24-
buttonBorderSecondaryHover: get('colors.primary.catYellow.hex'),
19+
primary: map-get($colormap-base, rental-red),
20+
hover: map-get($colormap-base, cat-yellow),
21+
secondary: map-get($colormap-base, cat-yellow-lightest),
22+
buttonText: map-get($colormap-base, white),
23+
buttonTextSecondaryHover: map-get($colormap-base, black),
24+
buttonBorderSecondaryHover: map-get($colormap-base, cat-yellow)
2525
),
2626
// zlab: (
27-
// primary: get('colors.primary.zlabBlue.hex'),
28-
// hover: get('colors.secondary.zlabBlue.hex'),
29-
// secondary: get('colors.secondary.zlabBlue.hex'),
30-
// buttonText: get('colors.gray.black.hex')
27+
// primary: map-get($colormap-base, zlab-blue),
28+
// hover: map-get($colormap-base, zlab-blue),
29+
// secondary: map-get($colormap-base, zlab-blue),
30+
// buttonText: map-get($colormap-base, black)
3131
// )
3232
);
3333

‎src/themes/theme.json‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,12 @@
260260
"rgb": null,
261261
"hsb": null
262262
},
263+
"catYellowDarker": {
264+
"name": "cat-yellow-lighter",
265+
"hex": "#f0b823",
266+
"rgb": null,
267+
"hsb": null
268+
},
263269
"indigoBlueLighter": {
264270
"name": "indigo-blue-lighter",
265271
"hex": "#361e9a",
@@ -379,8 +385,8 @@
379385
"hsb": null
380386
},
381387
"infoLighter": {
382-
"name": "info",
383-
"hex": "##d9edf7",
388+
"name": "info-lighter",
389+
"hex": "#d9edf7",
384390
"rgb": null,
385391
"hsb": null
386392
}

0 commit comments

Comments
 (0)