Skip to content

Commit 6951ec5

Browse files
ylebreylebre
committed
prefix simplycode vars
1 parent 6d59a4e commit 6951ec5

File tree

5 files changed

+110
-110
lines changed

5 files changed

+110
-110
lines changed

‎www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,5 @@
2121
--ds-support-contrast: #FFF;
2222
--ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) );
2323

24-
--ds-heading-font: var(--font-family);
24+
--ds-heading-font: var(--simplycode-font-family);
2525
}

‎www/api/data/components/1-styling/componentCss/style.css

Lines changed: 52 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
11
:root {
2-
--highlight-dark: #f16623;
3-
--highlight-light: #ff8003;
4-
--highlight-color: #fff;
5-
--highlight-background: linear-gradient( to left, var(--highlight-light), var(--highlight-dark) );
2+
--simplycode-highlight-dark: #f16623;
3+
--simplycode-highlight-light: #ff8003;
4+
--simplycode-highlight-color: #fff;
5+
--simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) );
66

7-
--support-dark: #444;
8-
--support-light: #484848;
9-
--support-color: #eee;
10-
--support-background: linear-gradient( to left, var(--support-light), var(--support-dark) );
7+
--simplycode-support-dark: #444;
8+
--simplycode-support-light: #484848;
9+
--simplycode-support-color: #eee;
10+
--simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) );
1111

12-
--grey-dark: #38393c;
13-
--grey-medium: #7f8185;
14-
--grey-light: #e9ebec;
15-
--grey-dark: #38393c;
16-
--black: #000;
17-
--white: #fff;
18-
--grey-background: var(--grey-dark);
12+
--simplycode-grey-dark: #38393c;
13+
--simplycode-grey-medium: #7f8185;
14+
--simplycode-grey-light: #e9ebec;
15+
--simplycode-grey-dark: #38393c;
16+
--simplycode-black: #000;
17+
--simplycode-white: #fff;
18+
--simplycode-grey-background: var(--simplycode-grey-dark);
1919

20-
--font-family: 'Alegreya Sans', sans-serif;
21-
--font-size: 14px;
22-
--line-height: 1.5em;
23-
--color: #7f8185;
24-
--background: #333;
20+
--simplycode-font-family: 'Alegreya Sans', sans-serif;
21+
--simplycode-font-size: 14px;
22+
--simplycode-line-height: 1.5em;
23+
--simplycode-color: #7f8185;
24+
--simplycode-background: #333;
2525
}
2626

2727
/* general styling on default elements */
2828

2929
html, body {
3030
margin: 0;
3131
padding: 0;
32-
font-family: var(--font-family);
33-
font-size: var(--font-size);
34-
line-height: var(--line-height);
35-
color: var(--color);
36-
background-color: var(--background);
32+
font-family: var(--simplycode-font-family);
33+
font-size: var(--simplycode-font-size);
34+
line-height: var(--simplycode-line-height);
35+
color: var(--simplycode-color);
36+
background-color: var(--simplycode-background);
3737
}
3838
body {
3939
overflow-y: scroll;
@@ -67,18 +67,18 @@ img {
6767
}
6868

6969
a {
70-
color: var(--highlight-dark);
70+
color: var(--simplycode-highlight-dark);
7171
}
7272
a:visited {
73-
color: var(--highlight-dark);
73+
color: var(--simplycode-highlight-dark);
7474
}
7575

7676
/* custom styling for custom elements */
7777

7878
.simplycode-button,
7979
a.simplycode-button {
80-
background: var(--support-background);
81-
color: var(--support-color);
80+
background: var(--simplycode-support-background);
81+
color: var(--simplycode-support-color);
8282
padding: 0.3em 0.5em;
8383
margin: 0 0.3em;
8484
border: 1px solid #ccc;
@@ -92,8 +92,8 @@ a.simplycode-button {
9292
margin-right: 0;
9393
}
9494
.simplycode-button.highlight {
95-
background: var(--highlight-background);
96-
color: var(--highlight-color);
95+
background: var(--simplycode-highlight-background);
96+
color: var(--simplycode-highlight-color);
9797
}
9898

9999
.text-content {
@@ -169,7 +169,7 @@ nav > ul > li[data-simply-command=expandMenu]::before {
169169
}
170170
.simplycode-part .simplycode-tab input[type=radio]:checked ~ span {
171171
font-weight: bold;
172-
border-bottom: 2px solid var(--support-background);
172+
border-bottom: 2px solid var(--simplycode-support-background);
173173
}
174174
.simplycode-part .simplycode-editor-code {
175175
display: grid;
@@ -262,20 +262,20 @@ ul.simplycode-components-list li {
262262
--simply-toast-show-duration: 0.3s;
263263
--simply-toast-hide-duration: 0.5s;
264264
--simply-toast-margin: 20px;
265-
--simply-error-color: rgb(253, 143, 143);
266-
--simply-warning-color: #FFFFCC;
267-
--simply-info-color: rgb(140, 180, 250);
268-
--simply-white: #FFF;
269-
--simply-grey-50: #a8b4c0;
270-
--simply-grey-80: #4d565c;
271-
--simply-font-size: calc(1.1 * 1rem);
272-
--simply-font-weight: 300;
273-
--simply-line-height: calc(1.5 * var(--simply-font-size));
274-
--simply-color: var(--grey-medium);
275-
--simply-contrast: var(--grey-medium);
276-
--simply-background:var(--white);
277-
--simply-heading-weight: 900;
278-
--simply-heading-multiplier: 1.1;
265+
--simply-toast-error-color: rgb(253, 143, 143);
266+
--simply-toats-warning-color: #FFFFCC;
267+
--simply-toast-info-color: rgb(140, 180, 250);
268+
--simply-toast-white: #FFF;
269+
--simply-toast-grey-50: #a8b4c0;
270+
--simply-toast-grey-80: #4d565c;
271+
--simply-toast-font-size: calc(1.1 * 1rem);
272+
--simply-toast-font-weight: 300;
273+
--simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size));
274+
--simply-toast-color: var(--simplycode-grey-medium);
275+
--simply-toast-contrast: var(--simplycode-grey-medium);
276+
--simply-toast-background:var(--simplycode-white);
277+
--simply-toast-heading-weight: 900;
278+
--simply-toast-heading-multiplier: 1.1;
279279
}
280280

281281
ul.simply-toasts,
@@ -299,24 +299,24 @@ li.simply-toast {
299299
clear: both;
300300
margin-right: 0;
301301
margin-top: 60px;
302-
background-color: var(--simply-grey-80);
303-
color: var(--simply-white);
302+
background-color: var(--simply-toast-grey-80);
303+
color: var(--simply-toast-white);
304304
display: block;
305-
border-left: 10px solid var(--simply-grey-50);
305+
border-left: 10px solid var(--simply-toast-grey-50);
306306
padding: 20px;
307307
border-radius: 2px;
308308
}
309309
.simply-toast-error,
310310
li.simply-toast-error {
311-
border-color: var(--simply-error-color);
311+
border-color: var(--simply-toast-error-color);
312312
}
313313
.simply-toast-info,
314314
li.simply-toast-info {
315-
border-color: var(--simply-info-color);
315+
border-color: var(--simply-toast-info-color);
316316
}
317317
.simply-toast-warning,
318318
li.simply-toast-warning {
319-
border-color: var(--simply-warning-color);
319+
border-color: var(--simply-toast-warning-color);
320320
}
321321

322322
@keyframes simply-toast-show {

‎www/api/data/components/simply-logo/componentCss/simply-logo.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
:root {
2-
--simply-logo-color-primary: var(--highlight-dark);
2+
--simply-logo-color-primary: var(--simplycode-highlight-dark);
33
--simply-logo-color-secondary: white;
44
}

‎www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
:root {
22
--simply-toobar-height: 60px;
3-
--simply-toolbar-primary: var(--highlight-dark);
3+
--simply-toolbar-primary: var(--simplycode-highlight-dark);
44
--simply-toolbar-button-font: arial, helvetica, sans-serif;
55
--simply-toolbar-button-font-size: 11px;
66
--simply-toolbar-button-width: 60px;

‎www/api/data/generated.html

Lines changed: 55 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -539,46 +539,46 @@
539539
--ds-support-contrast: #FFF;
540540
--ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) );
541541

542-
--ds-heading-font: var(--font-family);
542+
--ds-heading-font: var(--simplycode-font-family);
543543
}
544544

545545
/* style */
546546
:root {
547-
--highlight-dark: #f16623;
548-
--highlight-light: #ff8003;
549-
--highlight-color: #fff;
550-
--highlight-background: linear-gradient( to left, var(--highlight-light), var(--highlight-dark) );
547+
--simplycode-highlight-dark: #f16623;
548+
--simplycode-highlight-light: #ff8003;
549+
--simplycode-highlight-color: #fff;
550+
--simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) );
551551

552-
--support-dark: #444;
553-
--support-light: #484848;
554-
--support-color: #eee;
555-
--support-background: linear-gradient( to left, var(--support-light), var(--support-dark) );
552+
--simplycode-support-dark: #444;
553+
--simplycode-support-light: #484848;
554+
--simplycode-support-color: #eee;
555+
--simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) );
556556

557-
--grey-dark: #38393c;
558-
--grey-medium: #7f8185;
559-
--grey-light: #e9ebec;
560-
--grey-dark: #38393c;
561-
--black: #000;
562-
--white: #fff;
563-
--grey-background: var(--grey-dark);
557+
--simplycode-grey-dark: #38393c;
558+
--simplycode-grey-medium: #7f8185;
559+
--simplycode-grey-light: #e9ebec;
560+
--simplycode-grey-dark: #38393c;
561+
--simplycode-black: #000;
562+
--simplycode-white: #fff;
563+
--simplycode-grey-background: var(--simplycode-grey-dark);
564564

565-
--font-family: 'Alegreya Sans', sans-serif;
566-
--font-size: 14px;
567-
--line-height: 1.5em;
568-
--color: #7f8185;
569-
--background: #333;
565+
--simplycode-font-family: 'Alegreya Sans', sans-serif;
566+
--simplycode-font-size: 14px;
567+
--simplycode-line-height: 1.5em;
568+
--simplycode-color: #7f8185;
569+
--simplycode-background: #333;
570570
}
571571

572572
/* general styling on default elements */
573573

574574
html, body {
575575
margin: 0;
576576
padding: 0;
577-
font-family: var(--font-family);
578-
font-size: var(--font-size);
579-
line-height: var(--line-height);
580-
color: var(--color);
581-
background-color: var(--background);
577+
font-family: var(--simplycode-font-family);
578+
font-size: var(--simplycode-font-size);
579+
line-height: var(--simplycode-line-height);
580+
color: var(--simplycode-color);
581+
background-color: var(--simplycode-background);
582582
}
583583
body {
584584
overflow-y: scroll;
@@ -612,18 +612,18 @@
612612
}
613613

614614
a {
615-
color: var(--highlight-dark);
615+
color: var(--simplycode-highlight-dark);
616616
}
617617
a:visited {
618-
color: var(--highlight-dark);
618+
color: var(--simplycode-highlight-dark);
619619
}
620620

621621
/* custom styling for custom elements */
622622

623623
.simplycode-button,
624624
a.simplycode-button {
625-
background: var(--support-background);
626-
color: var(--support-color);
625+
background: var(--simplycode-support-background);
626+
color: var(--simplycode-support-color);
627627
padding: 0.3em 0.5em;
628628
margin: 0 0.3em;
629629
border: 1px solid #ccc;
@@ -637,8 +637,8 @@
637637
margin-right: 0;
638638
}
639639
.simplycode-button.highlight {
640-
background: var(--highlight-background);
641-
color: var(--highlight-color);
640+
background: var(--simplycode-highlight-background);
641+
color: var(--simplycode-highlight-color);
642642
}
643643

644644
.text-content {
@@ -714,7 +714,7 @@
714714
}
715715
.simplycode-part .simplycode-tab input[type=radio]:checked ~ span {
716716
font-weight: bold;
717-
border-bottom: 2px solid var(--support-background);
717+
border-bottom: 2px solid var(--simplycode-support-background);
718718
}
719719
.simplycode-part .simplycode-editor-code {
720720
display: grid;
@@ -807,20 +807,20 @@
807807
--simply-toast-show-duration: 0.3s;
808808
--simply-toast-hide-duration: 0.5s;
809809
--simply-toast-margin: 20px;
810-
--simply-error-color: rgb(253, 143, 143);
811-
--simply-warning-color: #FFFFCC;
812-
--simply-info-color: rgb(140, 180, 250);
813-
--simply-white: #FFF;
814-
--simply-grey-50: #a8b4c0;
815-
--simply-grey-80: #4d565c;
816-
--simply-font-size: calc(1.1 * 1rem);
817-
--simply-font-weight: 300;
818-
--simply-line-height: calc(1.5 * var(--simply-font-size));
819-
--simply-color: var(--grey-medium);
820-
--simply-contrast: var(--grey-medium);
821-
--simply-background:var(--white);
822-
--simply-heading-weight: 900;
823-
--simply-heading-multiplier: 1.1;
810+
--simply-toast-error-color: rgb(253, 143, 143);
811+
--simply-toats-warning-color: #FFFFCC;
812+
--simply-toast-info-color: rgb(140, 180, 250);
813+
--simply-toast-white: #FFF;
814+
--simply-toast-grey-50: #a8b4c0;
815+
--simply-toast-grey-80: #4d565c;
816+
--simply-toast-font-size: calc(1.1 * 1rem);
817+
--simply-toast-font-weight: 300;
818+
--simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size));
819+
--simply-toast-color: var(--simplycode-grey-medium);
820+
--simply-toast-contrast: var(--simplycode-grey-medium);
821+
--simply-toast-background:var(--simplycode-white);
822+
--simply-toast-heading-weight: 900;
823+
--simply-toast-heading-multiplier: 1.1;
824824
}
825825

826826
ul.simply-toasts,
@@ -844,24 +844,24 @@
844844
clear: both;
845845
margin-right: 0;
846846
margin-top: 60px;
847-
background-color: var(--simply-grey-80);
848-
color: var(--simply-white);
847+
background-color: var(--simply-toast-grey-80);
848+
color: var(--simply-toast-white);
849849
display: block;
850-
border-left: 10px solid var(--simply-grey-50);
850+
border-left: 10px solid var(--simply-toast-grey-50);
851851
padding: 20px;
852852
border-radius: 2px;
853853
}
854854
.simply-toast-error,
855855
li.simply-toast-error {
856-
border-color: var(--simply-error-color);
856+
border-color: var(--simply-toast-error-color);
857857
}
858858
.simply-toast-info,
859859
li.simply-toast-info {
860-
border-color: var(--simply-info-color);
860+
border-color: var(--simply-toast-info-color);
861861
}
862862
.simply-toast-warning,
863863
li.simply-toast-warning {
864-
border-color: var(--simply-warning-color);
864+
border-color: var(--simply-toast-warning-color);
865865
}
866866

867867
@keyframes simply-toast-show {
@@ -1034,7 +1034,7 @@
10341034
}
10351035
/* simply-logo */
10361036
:root {
1037-
--simply-logo-color-primary: var(--highlight-dark);
1037+
--simply-logo-color-primary: var(--simplycode-highlight-dark);
10381038
--simply-logo-color-secondary: white;
10391039
}
10401040
/* simply-toobar-button */
@@ -1101,7 +1101,7 @@
11011101
/* simply-toolbar */
11021102
:root {
11031103
--simply-toobar-height: 60px;
1104-
--simply-toolbar-primary: var(--highlight-dark);
1104+
--simply-toolbar-primary: var(--simplycode-highlight-dark);
11051105
--simply-toolbar-button-font: arial, helvetica, sans-serif;
11061106
--simply-toolbar-button-font-size: 11px;
11071107
--simply-toolbar-button-width: 60px;

0 commit comments

Comments
 (0)