[refactor] move css variables to stand alone file

Author: zombieFox

src/css/base.css

@@ -1,129 +1,3 @@
-:root{
---root-font-size:14px;
---black:0,0,0;
---white:255,255,255;
---shade-01:38,40,49;
---shade-02:47,51,62;
---shade-03:57,62,75;
---shade-04:67,73,88;
---shade-05:77,84,101;
---shade-06:87,95,114;
---shade-07:97,106,127;
---shade-08:107,117,140;
---shade-09:117,128,153;
---shade-10:127,139,166;
---shade-11:137,151,180;
---shade-12:149,162,187;
---shade-13:162,173,195;
---shade-14:174,184,203;
---shade-15:187,195,211;
---shade-16:199,206,218;
---shade-17:212,217,226;
---shade-18:224,228,234;
---shade-19:237,239,242;
---shade-20:250,250,250;
---button-text:var(--gray-12);
---button-text-hover-focus:var(--style-neutral-text);
---button-text-active:var(--style-neutral-text);
---button-text-disabled:var(--gray-04);
---button-link-text:var(--gray-12);
---button-link-text-hover-focus:var(--style-neutral-text);
---button-link-text-active:var(--style-neutral-text);
---button-link-text-disabled:var(--gray-04);
---form-input-text:var(--gray-16);
---form-input-border:2;
---form-input-text-hover:var(--style-neutral-text);
---form-input-text-focus:var(--style-neutral-text);
---form-input-text-disabled:var(--gray-02);
---form-input-text-disabled-helper-text:var(--gray-04);
---form-input-placeholder:var(--gray-06);
---form-input-placeholder-hover-focus:var(--gray-10);
---form-input-placeholder-disabled:var(--gray-04);
---form-label:var(--gray-12);
---form-label-disabled:var(--gray-04);
---form-checkbox-radio-label:var(--gray-12);
---form-checkbox-radio-chcked-label:var(--gray-16);
---form-checkbox-radio-disabled-label:var(--gray-04);
---form-range-thumb:var(--gray-12);
---theme-accent:250,130,0;
---theme-radius:0.2rem;
---line-width:0.2em;
---background:rgb(var(--gray-01));
---gutter:0.5rem;
---font-regular:"Open Sans Regular", sans-serif;
---font-bold:"Open Sans Bold", sans-serif;
---font-light:"Open Sans Light", sans-serif;
---font-fjalla:"Fjalla One Regular", sans-serif;
---header-area-width:100%;
---header-shade-color: transparent;
---header-shade-opacity:0.95;
---header-search-width:0%;
---header-border-top:0;
---header-border-bottom:0;
---header-date-size:1em;
---header-clock-size:1em;
---header-search-size:1em;
---header-button-size:1em;
---header-greeting-size:1em;
---header-transitional-size:1em;
---link-area-width:100%;
---link-area-gutter-multiplier:2;
---link-item-size:1em;
---link-item-display-letter-size:2em;
---link-item-display-icon-size:2.5em;
---link-item-name-size:0.9em;
---background-image: none;
---background-opacity:1;
---background-scale:1;
---background-accent-opacity:0;
---background-blur:0;
---layout-width:80%;
---layout-padding-multiplier:4;
---layout-gutter-multiplier:4;
---animation-speed-fast:0.2s;
---animation-speed-medium:0.4s;
---animation-speed-slow:0.6s;
---shadow-small:01px2pxrgba(0,0,0,0.1),02px4pxrgba(0,0,0,0.2);
---shadow-medium:02px4pxrgba(0,0,0,0.1),04px8pxrgba(0,0,0,0.2);
---shadow-large:03px6pxrgba(0,0,0,0.1),06px12pxrgba(0,0,0,0.2);
---z-index-background:1000;
---z-index-link:2000;
---z-index-header:3000;
---z-index-tip:4000;
---z-index-shade:5000;
---z-index-modal:6000;
---z-index-menu:7000;
---z-index-auto-suggest-list:8000;
---z-index-edge:9000;
-/* breakpoint reference */
-/* can not be used in @media as of yet */
---breakpoint-sm:550px;
---breakpoint-md:700px;
---breakpoint-lg:900px;
---breakpoint-xl:1100px;
---breakpoint-xxl:1600px;
-}
-
-:root.is-link-style-block{
---link-item-width:11em;
---link-item-height:10em;
---link-item-url-height:20%;
---link-item-edit-height:30%;
-}
-
-:root.is-link-style-list{
---link-item-width:20em;
---link-item-height:4em;
---link-item-url-height:30%;
---link-item-edit-height:50%;
-}
-
-@media (min-width:700px){
-:root{
---root-font-size:16px;
- }
-}
-
 ::selection{
 background-color:rgb(var(--theme-accent));
 color:rgb(var(--white));
@@ -174,51 +48,3 @@ body{
 .is-layout-alignment-vertical-bottombody{
 justify-content: flex-end;
 }
-
-.is-theme-style-dark{
---gray-01:var(--shade-01);
---gray-02:var(--shade-02);
---gray-03:var(--shade-03);
---gray-04:var(--shade-04);
---gray-05:var(--shade-05);
---gray-06:var(--shade-06);
---gray-07:var(--shade-07);
---gray-08:var(--shade-08);
---gray-09:var(--shade-09);
---gray-10:var(--shade-10);
---gray-11:var(--shade-11);
---gray-12:var(--shade-12);
---gray-13:var(--shade-13);
---gray-14:var(--shade-14);
---gray-15:var(--shade-15);
---gray-16:var(--shade-16);
---gray-17:var(--shade-17);
---gray-18:var(--shade-18);
---gray-19:var(--shade-19);
---gray-20:var(--shade-20);
---style-neutral-text:var(--white);
-}
-
-.is-theme-style-light{
---gray-01:var(--shade-20);
---gray-02:var(--shade-19);
---gray-03:var(--shade-18);
---gray-04:var(--shade-17);
---gray-05:var(--shade-16);
---gray-06:var(--shade-15);
---gray-07:var(--shade-14);
---gray-08:var(--shade-13);
---gray-09:var(--shade-12);
---gray-10:var(--shade-11);
---gray-11:var(--shade-10);
---gray-12:var(--shade-09);
---gray-13:var(--shade-08);
---gray-14:var(--shade-07);
---gray-15:var(--shade-06);
---gray-16:var(--shade-05);
---gray-17:var(--shade-04);
---gray-18:var(--shade-03);
---gray-19:var(--shade-02);
---gray-20:var(--shade-01);
---style-neutral-text:var(--black);
-}

src/css/variables.css

@@ -0,0 +1,173 @@
+:root{
+--root-font-size:14px;
+--black:0,0,0;
+--white:255,255,255;
+--shade-01:38,40,49;
+--shade-02:47,51,62;
+--shade-03:57,62,75;
+--shade-04:67,73,88;
+--shade-05:77,84,101;
+--shade-06:87,95,114;
+--shade-07:97,106,127;
+--shade-08:107,117,140;
+--shade-09:117,128,153;
+--shade-10:127,139,166;
+--shade-11:137,151,180;
+--shade-12:149,162,187;
+--shade-13:162,173,195;
+--shade-14:174,184,203;
+--shade-15:187,195,211;
+--shade-16:199,206,218;
+--shade-17:212,217,226;
+--shade-18:224,228,234;
+--shade-19:237,239,242;
+--shade-20:250,250,250;
+--button-text:var(--gray-12);
+--button-text-hover-focus:var(--style-neutral-text);
+--button-text-active:var(--style-neutral-text);
+--button-text-disabled:var(--gray-04);
+--button-link-text:var(--gray-12);
+--button-link-text-hover-focus:var(--style-neutral-text);
+--button-link-text-active:var(--style-neutral-text);
+--button-link-text-disabled:var(--gray-04);
+--form-input-text:var(--gray-16);
+--form-input-border:2;
+--form-input-text-hover:var(--style-neutral-text);
+--form-input-text-focus:var(--style-neutral-text);
+--form-input-text-disabled:var(--gray-02);
+--form-input-text-disabled-helper-text:var(--gray-04);
+--form-input-placeholder:var(--gray-06);
+--form-input-placeholder-hover-focus:var(--gray-10);
+--form-input-placeholder-disabled:var(--gray-04);
+--form-label:var(--gray-12);
+--form-label-disabled:var(--gray-04);
+--form-checkbox-radio-label:var(--gray-12);
+--form-checkbox-radio-chcked-label:var(--gray-16);
+--form-checkbox-radio-disabled-label:var(--gray-04);
+--form-range-thumb:var(--gray-12);
+--theme-accent:250,130,0;
+--theme-radius:0.2rem;
+--line-width:0.2em;
+--background:rgb(var(--gray-01));
+--gutter:0.5rem;
+--font-regular:"Open Sans Regular", sans-serif;
+--font-bold:"Open Sans Bold", sans-serif;
+--font-light:"Open Sans Light", sans-serif;
+--font-fjalla:"Fjalla One Regular", sans-serif;
+--header-area-width:100%;
+--header-shade-color: transparent;
+--header-shade-opacity:0.95;
+--header-search-width:0%;
+--header-border-top:0;
+--header-border-bottom:0;
+--header-date-size:1em;
+--header-clock-size:1em;
+--header-search-size:1em;
+--header-button-size:1em;
+--header-greeting-size:1em;
+--header-transitional-size:1em;
+--link-area-width:100%;
+--link-area-gutter-multiplier:2;
+--link-item-size:1em;
+--link-item-display-letter-size:2em;
+--link-item-display-icon-size:2.5em;
+--link-item-name-size:0.9em;
+--background-image: none;
+--background-opacity:1;
+--background-scale:1;
+--background-accent-opacity:0;
+--background-blur:0;
+--layout-width:80%;
+--layout-padding-multiplier:4;
+--layout-gutter-multiplier:4;
+--animation-speed-fast:0.2s;
+--animation-speed-medium:0.4s;
+--animation-speed-slow:0.6s;
+--shadow-small:01px2pxrgba(0,0,0,0.1),02px4pxrgba(0,0,0,0.2);
+--shadow-medium:02px4pxrgba(0,0,0,0.1),04px8pxrgba(0,0,0,0.2);
+--shadow-large:03px6pxrgba(0,0,0,0.1),06px12pxrgba(0,0,0,0.2);
+--z-index-background:1000;
+--z-index-link:2000;
+--z-index-header:3000;
+--z-index-tip:4000;
+--z-index-shade:5000;
+--z-index-modal:6000;
+--z-index-menu:7000;
+--z-index-auto-suggest-list:8000;
+--z-index-edge:9000;
+/* breakpoint reference */
+/* can not be used in @media as of yet */
+--breakpoint-sm:550px;
+--breakpoint-md:700px;
+--breakpoint-lg:900px;
+--breakpoint-xl:1100px;
+--breakpoint-xxl:1600px;
+}
+
+.is-theme-style-dark{
+--gray-01:var(--shade-01);
+--gray-02:var(--shade-02);
+--gray-03:var(--shade-03);
+--gray-04:var(--shade-04);
+--gray-05:var(--shade-05);
+--gray-06:var(--shade-06);
+--gray-07:var(--shade-07);
+--gray-08:var(--shade-08);
+--gray-09:var(--shade-09);
+--gray-10:var(--shade-10);
+--gray-11:var(--shade-11);
+--gray-12:var(--shade-12);
+--gray-13:var(--shade-13);
+--gray-14:var(--shade-14);
+--gray-15:var(--shade-15);
+--gray-16:var(--shade-16);
+--gray-17:var(--shade-17);
+--gray-18:var(--shade-18);
+--gray-19:var(--shade-19);
+--gray-20:var(--shade-20);
+--style-neutral-text:var(--white);
+}
+
+.is-theme-style-light{
+--gray-01:var(--shade-20);
+--gray-02:var(--shade-19);
+--gray-03:var(--shade-18);
+--gray-04:var(--shade-17);
+--gray-05:var(--shade-16);
+--gray-06:var(--shade-15);
+--gray-07:var(--shade-14);
+--gray-08:var(--shade-13);
+--gray-09:var(--shade-12);
+--gray-10:var(--shade-11);
+--gray-11:var(--shade-10);
+--gray-12:var(--shade-09);
+--gray-13:var(--shade-08);
+--gray-14:var(--shade-07);
+--gray-15:var(--shade-06);
+--gray-16:var(--shade-05);
+--gray-17:var(--shade-04);
+--gray-18:var(--shade-03);
+--gray-19:var(--shade-02);
+--gray-20:var(--shade-01);
+--style-neutral-text:var(--black);
+}
+
+.is-link-style-block{
+--link-item-width:11em;
+--link-item-height:10em;
+--link-item-url-height:20%;
+--link-item-edit-height:30%;
+}
+
+.is-link-style-list{
+--link-item-width:20em;
+--link-item-height:4em;
+--link-item-url-height:30%;
+--link-item-edit-height:50%;
+}
+
+@media (min-width:700px){
+:root{
+--root-font-size:16px;
+ }
+}

src/index.html

@@ -7,6 +7,7 @@
 <metaname="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
 <title>New Tab</title>
 <linkrel="stylesheet" href="css/reset.css">
+<linkrel="stylesheet" href="css/variables.css">
 <linkrel="stylesheet" href="css/base.css">
 <linkrel="stylesheet" href="css/main.css">
 <linkrel="stylesheet" href="css/edge.css">