Merge branch 'feature/simply-toolbar' into feature/component-boxes

SimplyEdit · Dec 4, 2024 · e17e620 · e17e620
2 parents 81edd0f + 6951ec5
commit e17e620
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 110 deletions.
diff --git a/www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css b/www/api/data/components/1-styling/componentCss/simplycode-ds-mapping.css
@@ -21,5 +21,5 @@
   --ds-support-contrast: #FFF;
   --ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) );
 
-  --ds-heading-font: var(--font-family);
+  --ds-heading-font: var(--simplycode-font-family);
 }
diff --git a/www/api/data/components/1-styling/componentCss/style.css b/www/api/data/components/1-styling/componentCss/style.css
@@ -1,39 +1,39 @@
 :root {
-    --highlight-dark: #f16623;
-    --highlight-light: #ff8003;
-    --highlight-color: #fff;
-    --highlight-background: linear-gradient( to left, var(--highlight-light), var(--highlight-dark) );
+    --simplycode-highlight-dark: #f16623;
+    --simplycode-highlight-light: #ff8003;
+    --simplycode-highlight-color: #fff;
+    --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) );
 
-    --support-dark: #444;
-    --support-light: #484848;
-    --support-color: #eee;
-    --support-background: linear-gradient( to left, var(--support-light), var(--support-dark) );
+    --simplycode-support-dark: #444;
+    --simplycode-support-light: #484848;
+    --simplycode-support-color: #eee;
+    --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) );
 
-    --grey-dark: #38393c;
-    --grey-medium: #7f8185;
-    --grey-light: #e9ebec;
-    --grey-dark: #38393c;
-    --black: #000;
-    --white: #fff;
-    --grey-background: var(--grey-dark);
+    --simplycode-grey-dark: #38393c;
+    --simplycode-grey-medium: #7f8185;
+    --simplycode-grey-light: #e9ebec;
+    --simplycode-grey-dark: #38393c;
+    --simplycode-black: #000;
+    --simplycode-white: #fff;
+    --simplycode-grey-background: var(--simplycode-grey-dark);
 
-    --font-family: 'Alegreya Sans', sans-serif;
-    --font-size: 14px;
-    --line-height: 1.5em;
-    --color: #7f8185;
-    --background: #333;
+    --simplycode-font-family: 'Alegreya Sans', sans-serif;
+    --simplycode-font-size: 14px;
+    --simplycode-line-height: 1.5em;
+    --simplycode-color: #7f8185;
+    --simplycode-background: #333;
 }
 
 /* general styling on default elements */
 
 html, body {
     margin: 0;
     padding: 0;
-    font-family: var(--font-family);
-    font-size: var(--font-size);
-    line-height: var(--line-height);
-    color: var(--color); 
-    background-color: var(--background);
+    font-family: var(--simplycode-font-family);
+    font-size: var(--simplycode-font-size);
+    line-height: var(--simplycode-line-height);
+    color: var(--simplycode-color); 
+    background-color: var(--simplycode-background);
 }
 body {
     overflow-y: scroll;
@@ -67,18 +67,18 @@ img {
 }
 
 a {
-    color: var(--highlight-dark);
+    color: var(--simplycode-highlight-dark);
 }
 a:visited {
-    color: var(--highlight-dark);
+    color: var(--simplycode-highlight-dark);
 }
 
 /* custom styling for custom elements */
 
 .simplycode-button,
 a.simplycode-button {
-    background: var(--support-background);
-    color: var(--support-color);
+    background: var(--simplycode-support-background);
+    color: var(--simplycode-support-color);
     padding: 0.3em 0.5em;
     margin: 0 0.3em;
     border: 1px solid #ccc;
@@ -92,8 +92,8 @@ a.simplycode-button {
     margin-right: 0;
 }
 .simplycode-button.highlight {
-    background: var(--highlight-background);
-    color: var(--highlight-color);
+    background: var(--simplycode-highlight-background);
+    color: var(--simplycode-highlight-color);
 }
 
 .text-content {
@@ -169,7 +169,7 @@ nav > ul > li[data-simply-command=expandMenu]::before {
 }
 .simplycode-part .simplycode-tab input[type=radio]:checked ~ span {
     font-weight: bold;
-    border-bottom: 2px solid var(--support-background);
+    border-bottom: 2px solid var(--simplycode-support-background);
 }
 .simplycode-part .simplycode-editor-code {
     display: grid;
@@ -246,20 +246,20 @@ header .simplycode-controls {
     --simply-toast-show-duration: 0.3s;
     --simply-toast-hide-duration: 0.5s;
     --simply-toast-margin: 20px;
-    --simply-error-color: rgb(253, 143, 143);
-    --simply-warning-color: #FFFFCC;
-    --simply-info-color: rgb(140, 180, 250);
-    --simply-white: #FFF;
-    --simply-grey-50: #a8b4c0;
-    --simply-grey-80: #4d565c;
-    --simply-font-size: calc(1.1 * 1rem);
-    --simply-font-weight: 300;
-    --simply-line-height: calc(1.5 * var(--simply-font-size));
-    --simply-color: var(--grey-medium);
-    --simply-contrast: var(--grey-medium);
-    --simply-background:var(--white);
-    --simply-heading-weight: 900;
-    --simply-heading-multiplier: 1.1;
+    --simply-toast-error-color: rgb(253, 143, 143);
+    --simply-toats-warning-color: #FFFFCC;
+    --simply-toast-info-color: rgb(140, 180, 250);
+    --simply-toast-white: #FFF;
+    --simply-toast-grey-50: #a8b4c0;
+    --simply-toast-grey-80: #4d565c;
+    --simply-toast-font-size: calc(1.1 * 1rem);
+    --simply-toast-font-weight: 300;
+    --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size));
+    --simply-toast-color: var(--simplycode-grey-medium);
+    --simply-toast-contrast: var(--simplycode-grey-medium);
+    --simply-toast-background:var(--simplycode-white);
+    --simply-toast-heading-weight: 900;
+    --simply-toast-heading-multiplier: 1.1;
 }
 
 ul.simply-toasts,
@@ -283,24 +283,24 @@ li.simply-toast {
     clear: both;
     margin-right: 0;
     margin-top: 60px;
-    background-color: var(--simply-grey-80);
-    color: var(--simply-white);
+    background-color: var(--simply-toast-grey-80);
+    color: var(--simply-toast-white);
     display: block;
-    border-left: 10px solid var(--simply-grey-50);
+    border-left: 10px solid var(--simply-toast-grey-50);
     padding: 20px;
     border-radius: 2px;
 }
 .simply-toast-error,
 li.simply-toast-error {
-    border-color: var(--simply-error-color);
+    border-color: var(--simply-toast-error-color);
 }
 .simply-toast-info,
 li.simply-toast-info {
-    border-color: var(--simply-info-color);
+    border-color: var(--simply-toast-info-color);
 }
 .simply-toast-warning,
 li.simply-toast-warning {
-    border-color: var(--simply-warning-color);
+    border-color: var(--simply-toast-warning-color);
 }
 
 @keyframes simply-toast-show {

diff --git a/www/api/data/components/simply-logo/componentCss/simply-logo.css b/www/api/data/components/simply-logo/componentCss/simply-logo.css
@@ -1,4 +1,4 @@
 :root {
-  --simply-logo-color-primary: var(--highlight-dark);
+  --simply-logo-color-primary: var(--simplycode-highlight-dark);
   --simply-logo-color-secondary: white;
 }
diff --git a/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css b/www/api/data/components/simply-toolbar/componentCss/simply-toolbar.css
@@ -1,6 +1,6 @@
 :root {
   --simply-toobar-height: 60px;
-  --simply-toolbar-primary: var(--highlight-dark);
+  --simply-toolbar-primary: var(--simplycode-highlight-dark);
   --simply-toolbar-button-font: arial, helvetica, sans-serif;
   --simply-toolbar-button-font-size: 11px;
   --simply-toolbar-button-width: 60px;

diff --git a/www/api/data/generated.html b/www/api/data/generated.html
@@ -592,46 +592,46 @@
         --ds-support-contrast: #FFF;
         --ds-support-gradient: linear-gradient( to left, var(--ds-support-light), var(--ds-support-dark) );
 
-        --ds-heading-font: var(--font-family);
+        --ds-heading-font: var(--simplycode-font-family);
       }
 
       /* style */
       :root {
-          --highlight-dark: #f16623;
-          --highlight-light: #ff8003;
-          --highlight-color: #fff;
-          --highlight-background: linear-gradient( to left, var(--highlight-light), var(--highlight-dark) );
+          --simplycode-highlight-dark: #f16623;
+          --simplycode-highlight-light: #ff8003;
+          --simplycode-highlight-color: #fff;
+          --simplycode-highlight-background: linear-gradient( to left, var(--simplycode-highlight-light), var(--simplycode-highlight-dark) );
 
-          --support-dark: #444;
-          --support-light: #484848;
-          --support-color: #eee;
-          --support-background: linear-gradient( to left, var(--support-light), var(--support-dark) );
+          --simplycode-support-dark: #444;
+          --simplycode-support-light: #484848;
+          --simplycode-support-color: #eee;
+          --simplycode-support-background: linear-gradient( to left, var(--simplycode-support-light), var(--simplycode-support-dark) );
 
-          --grey-dark: #38393c;
-          --grey-medium: #7f8185;
-          --grey-light: #e9ebec;
-          --grey-dark: #38393c;
-          --black: #000;
-          --white: #fff;
-          --grey-background: var(--grey-dark);
+          --simplycode-grey-dark: #38393c;
+          --simplycode-grey-medium: #7f8185;
+          --simplycode-grey-light: #e9ebec;
+          --simplycode-grey-dark: #38393c;
+          --simplycode-black: #000;
+          --simplycode-white: #fff;
+          --simplycode-grey-background: var(--simplycode-grey-dark);
 
-          --font-family: 'Alegreya Sans', sans-serif;
-          --font-size: 14px;
-          --line-height: 1.5em;
-          --color: #7f8185;
-          --background: #333;
+          --simplycode-font-family: 'Alegreya Sans', sans-serif;
+          --simplycode-font-size: 14px;
+          --simplycode-line-height: 1.5em;
+          --simplycode-color: #7f8185;
+          --simplycode-background: #333;
       }
 
       /* general styling on default elements */
 
       html, body {
           margin: 0;
           padding: 0;
-          font-family: var(--font-family);
-          font-size: var(--font-size);
-          line-height: var(--line-height);
-          color: var(--color); 
-          background-color: var(--background);
+          font-family: var(--simplycode-font-family);
+          font-size: var(--simplycode-font-size);
+          line-height: var(--simplycode-line-height);
+          color: var(--simplycode-color); 
+          background-color: var(--simplycode-background);
       }
       body {
           overflow-y: scroll;
@@ -665,18 +665,18 @@
       }
 
       a {
-          color: var(--highlight-dark);
+          color: var(--simplycode-highlight-dark);
       }
       a:visited {
-          color: var(--highlight-dark);
+          color: var(--simplycode-highlight-dark);
       }
 
       /* custom styling for custom elements */
 
       .simplycode-button,
       a.simplycode-button {
-          background: var(--support-background);
-          color: var(--support-color);
+          background: var(--simplycode-support-background);
+          color: var(--simplycode-support-color);
           padding: 0.3em 0.5em;
           margin: 0 0.3em;
           border: 1px solid #ccc;
@@ -690,8 +690,8 @@
           margin-right: 0;
       }
       .simplycode-button.highlight {
-          background: var(--highlight-background);
-          color: var(--highlight-color);
+          background: var(--simplycode-highlight-background);
+          color: var(--simplycode-highlight-color);
       }
 
       .text-content {
@@ -767,7 +767,7 @@
       }
       .simplycode-part .simplycode-tab input[type=radio]:checked ~ span {
           font-weight: bold;
-          border-bottom: 2px solid var(--support-background);
+          border-bottom: 2px solid var(--simplycode-support-background);
       }
       .simplycode-part .simplycode-editor-code {
           display: grid;
@@ -844,20 +844,20 @@
           --simply-toast-show-duration: 0.3s;
           --simply-toast-hide-duration: 0.5s;
           --simply-toast-margin: 20px;
-          --simply-error-color: rgb(253, 143, 143);
-          --simply-warning-color: #FFFFCC;
-          --simply-info-color: rgb(140, 180, 250);
-          --simply-white: #FFF;
-          --simply-grey-50: #a8b4c0;
-          --simply-grey-80: #4d565c;
-          --simply-font-size: calc(1.1 * 1rem);
-          --simply-font-weight: 300;
-          --simply-line-height: calc(1.5 * var(--simply-font-size));
-          --simply-color: var(--grey-medium);
-          --simply-contrast: var(--grey-medium);
-          --simply-background:var(--white);
-          --simply-heading-weight: 900;
-          --simply-heading-multiplier: 1.1;
+          --simply-toast-error-color: rgb(253, 143, 143);
+          --simply-toats-warning-color: #FFFFCC;
+          --simply-toast-info-color: rgb(140, 180, 250);
+          --simply-toast-white: #FFF;
+          --simply-toast-grey-50: #a8b4c0;
+          --simply-toast-grey-80: #4d565c;
+          --simply-toast-font-size: calc(1.1 * 1rem);
+          --simply-toast-font-weight: 300;
+          --simply-toast-line-height: calc(1.5 * var(--simply-toast-font-size));
+          --simply-toast-color: var(--simplycode-grey-medium);
+          --simply-toast-contrast: var(--simplycode-grey-medium);
+          --simply-toast-background:var(--simplycode-white);
+          --simply-toast-heading-weight: 900;
+          --simply-toast-heading-multiplier: 1.1;
       }
 
       ul.simply-toasts,
@@ -881,24 +881,24 @@
           clear: both;
           margin-right: 0;
           margin-top: 60px;
-          background-color: var(--simply-grey-80);
-          color: var(--simply-white);
+          background-color: var(--simply-toast-grey-80);
+          color: var(--simply-toast-white);
           display: block;
-          border-left: 10px solid var(--simply-grey-50);
+          border-left: 10px solid var(--simply-toast-grey-50);
           padding: 20px;
           border-radius: 2px;
       }
       .simply-toast-error,
       li.simply-toast-error {
-          border-color: var(--simply-error-color);
+          border-color: var(--simply-toast-error-color);
       }
       .simply-toast-info,
       li.simply-toast-info {
-          border-color: var(--simply-info-color);
+          border-color: var(--simply-toast-info-color);
       }
       .simply-toast-warning,
       li.simply-toast-warning {
-          border-color: var(--simply-warning-color);
+          border-color: var(--simply-toast-warning-color);
       }
 
       @keyframes simply-toast-show {
@@ -1071,7 +1071,7 @@
       }
       /* simply-logo */
       :root {
-        --simply-logo-color-primary: var(--highlight-dark);
+        --simply-logo-color-primary: var(--simplycode-highlight-dark);
         --simply-logo-color-secondary: white;
       }
       /* simply-toobar-button */
@@ -1138,7 +1138,7 @@
       /* simply-toolbar */
       :root {
         --simply-toobar-height: 60px;
-        --simply-toolbar-primary: var(--highlight-dark);
+        --simply-toolbar-primary: var(--simplycode-highlight-dark);
         --simply-toolbar-button-font: arial, helvetica, sans-serif;
         --simply-toolbar-button-font-size: 11px;
         --simply-toolbar-button-width: 60px;