[refactor] organise css variables

src/css/auto-suggest.css

@@ -5,7 +5,7 @@
 }
 
 .auto-suggest-list {
-  background-color: rgb(var(--gray-02));
+  background-color: rgb(var(--theme-gray-02));
   margin-top: 0.5em;
   padding: 1em;
   position: absolute;
@@ -19,7 +19,7 @@
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  box-shadow: var(--shadow-large);
+  box-shadow: var(--layout-shadow-large);
 }
 
 .auto-suggest-list-item {
@@ -42,33 +42,33 @@
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
-  transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
+  transition: background-color var(--layout-animation-speed-fast) ease-in-out, color var(--layout-animation-speed-fast) ease-in-out, border-color var(--layout-animation-speed-fast) ease-in-out, box-shadow var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .auto-suggest-link:link,
 .auto-suggest-link:visited {
-  color: rgb(var(--gray-16));
+  color: rgb(var(--theme-gray-16));
   text-decoration: none;
 }
 
 .auto-suggest-link:hover {
-  background-color: rgb(var(--gray-03));
+  background-color: rgb(var(--theme-gray-03));
   color: rgb(var(--form-input-text-hover));
   outline: none;
   text-decoration: none;
-  box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-06));
+  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
 }
 
 .auto-suggest-link:focus {
-  background-color: rgb(var(--gray-01));
+  background-color: rgb(var(--theme-gray-01));
   color: rgb(var(--form-input-text-focus));
   outline: none;
   text-decoration: none;
-  box-shadow: 0 0 0 var(--line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--line-width) * 2) rgba(var(--theme-accent), 0.25);
+  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
 }
 
 .auto-suggest-link:active {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
 }
 
 .auto-suggest-icon {
@@ -76,7 +76,7 @@
 }
 
 .auto-suggest-icon-text {
-  color: rgb(var(--gray-08));
+  color: rgb(var(--theme-gray-08));
   margin-top: 0.5em;
   font-size: 0.6em;
   text-align: center;

src/css/background.css

@@ -6,7 +6,7 @@
   height: 100vh;
   pointer-events: none;
   z-index: var(--z-index-background);
-  animation: appear var(--animation-speed-slow) 1;
+  animation: appear var(--layout-animation-speed-slow) 1;
   display: none;
 }
 

src/css/base.css

@@ -1,6 +1,6 @@
 ::selection {
   background-color: rgb(var(--theme-accent));
-  color: rgb(var(--white));
+  color: rgb(var(--theme-white));
 }
 
 html {
@@ -9,7 +9,7 @@ html {
 
 body {
   background-color: var(--background);
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
   font-size: 1rem;
   line-height: 1.6;
   font-family: var(--font-regular);
@@ -18,7 +18,7 @@ body {
   justify-content: center;
   align-items: center;
   min-height: 100vh;
-  transition: background-color var(--animation-speed-fast) ease-in-out;
+  transition: background-color var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .is-layout-scroll-past-end body {

src/css/button.css

@@ -3,7 +3,7 @@ button,
 input[type="button"],
 input[type="reset"],
 input[type="submit"] {
-  background-color: rgb(var(--gray-02));
+  background-color: rgb(var(--theme-gray-02));
   padding: 0.125em 1em;
   margin: 0 0 1em 0;
   color: rgb(var(--button-text));
@@ -12,8 +12,8 @@ input[type="submit"] {
   min-height: 2.5em;
   line-height: 1;
   border: 0;
-  border-top-width: var(--line-width);
+  border-top-width: var(--layout-line-width);
-  border-bottom-width: var(--line-width);
+  border-bottom-width: var(--layout-line-width);
   border-style: solid;
   border-color: transparent;
   border-radius: var(--theme-radius);
@@ -22,7 +22,7 @@ input[type="submit"] {
   white-space: nowrap;
   cursor: pointer;
   box-shadow: none;
-  transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border var(--animation-speed-fast) ease-in-out;
+  transition: background-color var(--layout-animation-speed-fast) ease-in-out, color var(--layout-animation-speed-fast) ease-in-out, border var(--layout-animation-speed-fast) ease-in-out;
   display: inline-flex;
   flex-direction: row;
   justify-content: center;
@@ -39,8 +39,8 @@ input[type="reset"]:hover,
 input[type="reset"]:focus,
 input[type="submit"]:hover,
 input[type="submit"]:focus {
-  background-color: rgb(var(--gray-03));
+  background-color: rgb(var(--theme-gray-03));
-  border-bottom-color: rgb(var(--gray-08));
+  border-bottom-color: rgb(var(--theme-gray-08));
   color: rgb(var(--button-text-hover-focus));
   outline: none;
   text-decoration: none;
@@ -51,7 +51,7 @@ button:active,
 input[type="button"]:active,
 input[type="reset"]:active,
 input[type="submit"]:active {
-  background-color: rgb(var(--gray-04));
+  background-color: rgb(var(--theme-gray-04));
   border-bottom-color: rgb(var(--theme-accent));
   color: rgb(var(--button-text-active));
   transition: none;
@@ -66,7 +66,7 @@ button[disabled]:focus,
 .button[disabled]:focus,
 button[disabled]:active,
 .button[disabled]:active {
-  background-color: rgb(var(--gray-02));
+  background-color: rgb(var(--theme-gray-02));
   border-color: transparent;
   color: rgb(var(--button-text-disabled));
   cursor: default;

src/css/clock.css

@@ -3,7 +3,7 @@
   padding: 0;
   font-size: 1em;
   font-family: var(--font-fjalla);
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
   width: 100%;
   min-height: 2.5em;
   display: flex;
@@ -64,11 +64,11 @@
 }
 
 .clock-hours {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
 }
 
 .clock-minutes,
 .clock-seconds,
 .clock-meridiem {
-  color: rgb(var(--gray-16));
+  color: rgb(var(--theme-gray-16));
 }

src/css/date.css

@@ -3,7 +3,7 @@
   padding: 0;
   font-size: 1em;
   font-family: var(--font-fjalla);
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
   width: 100%;
   min-height: 2.5em;
   display: flex;
@@ -63,11 +63,11 @@
 }
 
 .date-day {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
 }
 
 .date-date,
 .date-month,
 .date-year {
-  color: rgb(var(--gray-16));
+  color: rgb(var(--theme-gray-16));
 }

src/css/edge.css

@@ -7,8 +7,8 @@
   left: 0;
   opacity: 0;
   border-radius: var(--theme-radius);
-  box-shadow: inset 0 0 0 var(--line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--line-width) * 8) rgba(var(--theme-accent), 0.1);
+  box-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
   z-index: var(--z-index-edge);
   pointer-events: none;
-  transition: opacity var(--animation-speed-fast) ease-in-out;
+  transition: opacity var(--layout-animation-speed-fast) ease-in-out;
 }

src/css/form.css

@@ -5,7 +5,7 @@ input[type="password"],
 input[type="search"],
 input[type="tel"],
 input[type="text"] {
-  background-color: rgb(var(--gray-02));
+  background-color: rgb(var(--theme-gray-02));
   padding: 0 1em;
   margin: 0 0 1em 0;
   color: rgb(var(--form-input-text));
@@ -19,7 +19,7 @@ input[type="text"] {
   border-color: transparent;
   border-radius: var(--theme-radius);
   cursor: text;
-  transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
+  transition: background-color var(--layout-animation-speed-fast) ease-in-out, color var(--layout-animation-speed-fast) ease-in-out, border-color var(--layout-animation-speed-fast) ease-in-out, box-shadow var(--layout-animation-speed-fast) ease-in-out;
   -moz-appearance: textfield;
 }
 
@@ -39,10 +39,10 @@ input[type="password"]:hover,
 input[type="search"]:hover,
 input[type="tel"]:hover,
 input[type="text"]:hover {
-  background-color: rgb(var(--gray-03));
+  background-color: rgb(var(--theme-gray-03));
   color: rgb(var(--form-input-text-hover));
   outline: none;
-  box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-06));
+  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
 }
 
 input[type="email"]:focus,
@@ -51,11 +51,11 @@ input[type="password"]:focus,
 input[type="search"]:focus,
 input[type="tel"]:focus,
 input[type="text"]:focus {
-  background-color: rgb(var(--gray-01));
+  background-color: rgb(var(--theme-gray-01));
   color: rgb(var(--form-input-text-focus));
   outline: none;
   z-index: 2;
-  box-shadow: 0 0 0 var(--line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--line-width) * 2) rgba(var(--theme-accent), 0.25);
+  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), 0 0 0 calc(var(--layout-line-width) * 2) rgba(var(--theme-accent), 0.25);
 }
 
 input[type="email"][disabled],
@@ -93,7 +93,7 @@ input[type="search"]::placeholder,
 input[type="tel"]::placeholder,
 input[type="text"]::placeholder {
   color: rgb(var(--form-input-placeholder));
-  transition: color var(--animation-speed-fast) ease-in-out;
+  transition: color var(--layout-animation-speed-fast) ease-in-out;
 }
 
 input[type="email"]:hover::placeholder,
@@ -168,7 +168,7 @@ input[type="radio"] {
   pointer-events: none;
   box-sizing: border-box;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  /* transition: all var(--animation-speed-fast) ease-in-out; */
+  /* transition: all var(--layout-animation-speed-fast) ease-in-out; */
 }
 
 input[type="checkbox"]+label,
@@ -181,7 +181,7 @@ input[type="radio"]+label {
   flex-direction: row;
   justify-content: flex-start;
   align-items: flex-start;
-  transition: all var(--animation-speed-fast) ease-in-out;
+  transition: all var(--layout-animation-speed-fast) ease-in-out;
 }
 
 input[type="checkbox"]+label:before,
@@ -201,19 +201,19 @@ input[type="checkbox"]:focus+label,
 input[type="checkbox"]:hover+label,
 input[type="radio"]:focus+label,
 input[type="radio"]:hover+label {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
 }
 
 input[type="checkbox"]:active+label,
 input[type="radio"]:active+label {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
 }
 
 input[type="checkbox"]:focus+label:before,
 input[type="checkbox"]:hover+label:before,
 input[type="radio"]:focus+label:before,
 input[type="radio"]:hover+label:before {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
 }
 
 input[type="checkbox"]:active+label:before,
@@ -231,7 +231,7 @@ input[type="checkbox"]:not([disabled]):hover:checked+label,
 input[type="checkbox"]:not([disabled]):focus:checked+label,
 input[type="radio"]:not([disabled]):hover:checked+label,
 input[type="radio"]:not([disabled]):focus:checked+label {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
 }
 
 input[type="checkbox"]:checked+label:before,
@@ -301,17 +301,17 @@ input[type="color"] {
   border-radius: var(--theme-radius);
   overflow: hidden;
   cursor: pointer;
-  transition: border-color var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
+  transition: border-color var(--layout-animation-speed-fast) ease-in-out, box-shadow var(--layout-animation-speed-fast) ease-in-out;
 }
 
 input[type="color"]:hover {
   outline: none;
-  box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-06));
+  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-06));
 }
 
 input[type="color"]:focus {
   outline: none;
-  box-shadow: 0 0 0 var(--line-width) rgb(var(--gray-10));
+  box-shadow: 0 0 0 var(--layout-line-width) rgb(var(--theme-gray-10));
 }
 
 input[type="color"][disabled] {
@@ -348,7 +348,7 @@ input[type="range"] {
   background-color: transparent;
   padding: 0;
   margin: 0;
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
   font-size: 1em;
   font-family: var(--font-regular);
   height: 2em;
@@ -366,13 +366,13 @@ input[type="range"]:before {
   position: absolute;
   top: 50%;
   left: 0;
-  background-color: rgb(var(--gray-08));
+  background-color: rgb(var(--theme-gray-08));
-  height: var(--line-width);
+  height: var(--layout-line-width);
   width: 100%;
   border: 0;
   border-radius: var(--theme-radius);
   transform: translate(0, -50%);
-  transition: all var(--animation-speed-fast) ease-in-out;
+  transition: all var(--layout-animation-speed-fast) ease-in-out;
 }
 
 input[type="range"]:focus {
@@ -380,7 +380,7 @@ input[type="range"]:focus {
 }
 
 input[type="range"]:focus:before {
-  background-color: rgb(var(--style-neutral-text));
+  background-color: rgb(var(--theme-style-text));
 }
 
 input[type="range"][disabled] {
@@ -388,7 +388,7 @@ input[type="range"][disabled] {
 }
 
 input[type="range"][disabled]:before {
-  background-color: rgb(var(--gray-04));
+  background-color: rgb(var(--theme-gray-04));
   cursor: default;
 }
 
@@ -401,11 +401,11 @@ input[type="range"]::-webkit-slider-runnable-track {
 }
 
 input[type="range"]::-webkit-slider-thumb {
-  background-color: rgb(var(--gray-01));
+  background-color: rgb(var(--theme-gray-01));
   color: rgb(var(--form-range-thumb));
   margin: 0;
   padding: 0;
-  border-width: var(--line-width);
+  border-width: var(--layout-line-width);
   border-style: solid;
   border-color: rgb(var(--theme-accent));
   border-radius: 100%;
@@ -416,7 +416,7 @@ input[type="range"]::-webkit-slider-thumb {
   box-sizing: border-box;
   /* z-index: 2; */
   transform: scale(1);
-  transition: all var(--animation-speed-fast) ease-in-out;
+  transition: all var(--layout-animation-speed-fast) ease-in-out;
   -webkit-appearance: none;
 }
 
@@ -441,7 +441,7 @@ input[type="range"]::-webkit-slider-thumb:active {
 }
 
 input[type="range"][disabled]::-webkit-slider-thumb {
-  border-color: rgb(var(--gray-04));
+  border-color: rgb(var(--theme-gray-04));
   cursor: default;
 }
 
@@ -452,24 +452,24 @@ input[type="range"][disabled]:focus::-webkit-slider-thumb {
 }
 
 input[type="range"]::-moz-range-track {
-  background-color: rgb(var(--gray-08));
+  background-color: rgb(var(--theme-gray-08));
   margin: 0 -0.5em;
   padding: 0;
   border: 0;
-  height: var(--line-width);
+  height: var(--layout-line-width);
   width: 100%;
   border: 0;
   border-radius: var(--theme-radius);
-  transition: all var(--animation-speed-fast) ease-in-out;
+  transition: all var(--layout-animation-speed-fast) ease-in-out;
   -webkit-appearance: none;
 }
 
 input[type="range"]::-moz-range-thumb {
-  background-color: rgb(var(--gray-01));
+  background-color: rgb(var(--theme-gray-01));
   color: rgb(var(--form-range-thumb));
   margin: 0;
   padding: 0;
-  border-width: var(--line-width);
+  border-width: var(--layout-line-width);
   border-style: solid;
   border-color: rgb(var(--theme-accent));
   border-radius: 100%;
@@ -480,7 +480,7 @@ input[type="range"]::-moz-range-thumb {
   box-sizing: border-box;
   /* z-index: 2; */
   transform: scale(1);
-  transition: all var(--animation-speed-fast) ease-in-out;
+  transition: all var(--layout-animation-speed-fast) ease-in-out;
   -webkit-appearance: none;
 }
 
@@ -506,16 +506,16 @@ input[type="range"]::-moz-range-thumb:active {
 
 input[type="range"]::-moz-range-progress {
   background-color: rgb(var(--theme-accent));
-  height: calc(var(--line-width) * 1.5);
+  height: calc(var(--layout-line-width) * 1.5);
   border-radius: var(--theme-radius);
 }
 
 input[type="range"][disabled]::-moz-range-track {
-  background-color: rgb(var(--gray-04));
+  background-color: rgb(var(--theme-gray-04));
 }
 
 input[type="range"][disabled]::-moz-range-thumb {
-  border-color: rgb(var(--gray-04));
+  border-color: rgb(var(--theme-gray-04));
   cursor: default;
 }
 
@@ -526,7 +526,7 @@ input[type="range"][disabled]:focus::-moz-range-thumb {
 }
 
 input[type="range"][disabled]::-moz-range-progress {
-  background-color: rgb(var(--gray-04));
+  background-color: rgb(var(--theme-gray-04));
 }
 
 /* input helper */
@@ -567,7 +567,7 @@ input[type="range"][disabled]~.input-helper {
 .input-button input[type="radio"]+label,
 .input-button input[type="color"]+label,
 .input-button input[type="file"]+label {
-  background-color: rgb(var(--gray-02));
+  background-color: rgb(var(--theme-gray-02));
   padding: 0.125em 1em;
   margin: 0;
   color: rgb(var(--button-text));
@@ -576,8 +576,8 @@ input[type="range"][disabled]~.input-helper {
   min-height: 2.5em;
   line-height: 1;
   border: 0;
-  border-top-width: var(--line-width);
+  border-top-width: var(--layout-line-width);
-  border-bottom-width: var(--line-width);
+  border-bottom-width: var(--layout-line-width);
   border-style: solid;
   border-color: transparent;
   border-radius: var(--theme-radius);
@@ -586,7 +586,7 @@ input[type="range"][disabled]~.input-helper {
   white-space: nowrap;
   cursor: pointer;
   box-shadow: none;
-  transition: background-color var(--animation-speed-fast) ease-in-out, color var(--animation-speed-fast) ease-in-out, border var(--animation-speed-fast) ease-in-out;
+  transition: background-color var(--layout-animation-speed-fast) ease-in-out, color var(--layout-animation-speed-fast) ease-in-out, border var(--layout-animation-speed-fast) ease-in-out;
   display: inline-flex;
   flex-direction: row;
   justify-content: center;
@@ -601,8 +601,8 @@ input[type="range"][disabled]~.input-helper {
 .input-button input[type="color"]:focus+label,
 .input-button input[type="file"]:hover+label,
 .input-button input[type="file"]:focus+label {
-  background-color: rgb(var(--gray-03));
+  background-color: rgb(var(--theme-gray-03));
-  border-bottom-color: rgb(var(--gray-08));
+  border-bottom-color: rgb(var(--theme-gray-08));
   color: rgb(var(--button-text-hover-focus));
   outline: none;
 }
@@ -611,7 +611,7 @@ input[type="range"][disabled]~.input-helper {
 .input-button input[type="radio"]:active+label,
 .input-button input[type="color"]:active+label,
 .input-button input[type="file"]:active+label {
-  background-color: rgb(var(--gray-04));
+  background-color: rgb(var(--theme-gray-04));
   border-bottom-color: rgb(var(--theme-accent));
   color: rgb(var(--button-text-active));
   transition: none;
@@ -621,7 +621,7 @@ input[type="range"][disabled]~.input-helper {
 .input-button input[type="radio"]:checked+label,
 .input-button input[type="color"]:checked+label,
 .input-button input[type="file"]:checked+label {
-  background-color: rgb(var(--gray-04));
+  background-color: rgb(var(--theme-gray-04));
   border-bottom-color: rgb(var(--theme-accent));
   color: rgb(var(--button-text-active));
   transition: none;
@@ -643,7 +643,7 @@ input[type="range"][disabled]~.input-helper {
 .input-button input[type="file"][disabled]:hover+label,
 .input-button input[type="file"][disabled]:focus+label,
 .input-button input[type="file"][disabled]:active+label {
-  background-color: rgb(var(--gray-02));
+  background-color: rgb(var(--theme-gray-02));
   border-color: transparent;
   color: rgb(var(--button-text-disabled));
   cursor: default;
@@ -769,10 +769,10 @@ input[type="range"][disabled]~.input-helper {
 }
 
 .form-group-text {
-  background-color: rgb(var(--gray-02));
+  background-color: rgb(var(--theme-gray-02));
   padding: 0 1em;
   margin: 0;
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
   min-width: 4em;
   font-size: 1em;
   font-family: var(--font-regular);
@@ -780,23 +780,23 @@ input[type="range"][disabled]~.input-helper {
   align-items: center;
   justify-content: center;
   border: 0;
-  border-top-width: var(--line-width);
+  border-top-width: var(--layout-line-width);
-  border-bottom-width: var(--line-width);
+  border-bottom-width: var(--layout-line-width);
   border-style: solid;
   border-color: transparent;
   border-radius: var(--theme-radius);
-  transition: background-color var(--animation-speed-fast) ease-in-out, border-color var(--animation-speed-fast) ease-in-out;
+  transition: background-color var(--layout-animation-speed-fast) ease-in-out, border-color var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .form-group-text:hover,
 .form-group-text:focus {
-  background-color: rgb(var(--gray-03));
+  background-color: rgb(var(--theme-gray-03));
-  border-bottom-color: rgb(var(--gray-08));
+  border-bottom-color: rgb(var(--theme-gray-08));
   outline: none;
 }
 
 .form-group-text[disabled] {
-  background-color: rgb(var(--gray-02));
+  background-color: rgb(var(--theme-gray-02));
   color: rgb(var(--form-input-placeholder-disabled));
   box-shadow: none;
   cursor: default;
@@ -804,7 +804,7 @@ input[type="range"][disabled]~.input-helper {
 
 .form-group-text[disabled]:hover,
 .form-group-text[disabled]:focus {
-  background-color: rgb(var(--gray-02));
+  background-color: rgb(var(--theme-gray-02));
   border-color: transparent;
 }
 
@@ -926,8 +926,8 @@ input[type="range"][disabled]~.input-helper {
 
 .form-feedback {
   padding: 1em 1.5em;
-  background-color: rgb(var(--gray-02));
+  background-color: rgb(var(--theme-gray-02));
-  /* border-bottom: var(--line-width) solid rgb(var(--gray-04)); */
+  /* border-bottom: var(--layout-line-width) solid rgb(var(--theme-gray-04)); */
   border-radius: var(--theme-radius);
 }
 

src/css/greeting.css

@@ -3,7 +3,7 @@
   padding: 0;
   font-size: 1em;
   font-family: var(--font-fjalla);
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
   width: 100%;
   min-height: 2.5em;
   display: flex;

src/css/header.css

@@ -44,30 +44,30 @@
 }
 
 .is-header-shade-style-scroll .header-shade {
-  transition: background-color var(--animation-speed-slow) ease-in-out;
+  transition: background-color var(--layout-animation-speed-slow) ease-in-out;
   animation: none;
 }
 
 .is-header-border-top .header-shade {
-  border-top: calc(var(--line-width) * var(--header-border-top)) solid rgb(var(--theme-accent));
+  border-top: calc(var(--layout-line-width) * var(--header-border-top)) solid rgb(var(--theme-accent));
 }
 
 .is-header-border-bottom .header-shade {
-  border-bottom: calc(var(--line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent));
+  border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid rgb(var(--theme-accent));
 }
 
 .header-area {
-  padding: calc(var(--gutter) * var(--layout-padding-multiplier));
+  padding: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
   position: relative;
   width: var(--header-area-width);
 }
 
 .is-header-border-top .header-area {
-  border-top: calc(var(--line-width) * var(--header-border-top)) solid transparent;
+  border-top: calc(var(--layout-line-width) * var(--header-border-top)) solid transparent;
 }
 
 .is-header-border-bottom .header-area {
-  border-bottom: calc(var(--line-width) * var(--header-border-bottom)) solid transparent;
+  border-bottom: calc(var(--layout-line-width) * var(--header-border-bottom)) solid transparent;
 }
 
 .is-header-radius .header-shade {
@@ -97,7 +97,7 @@
 }
 
 .header-item-grid {
-  margin: calc(-1 * calc(var(--gutter) * calc(var(--layout-gutter-multiplier) / 2)));
+  margin: calc(-1 * calc(var(--layout-gutter) * calc(var(--layout-gutter-multiplier) / 2)));
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
@@ -118,7 +118,7 @@
 }
 
 .header-item {
-  margin: calc(var(--gutter) * calc(var(--layout-gutter-multiplier) / 2));
+  margin: calc(var(--layout-gutter) * calc(var(--layout-gutter-multiplier) / 2));
   display: flex;
   flex-wrap: nowrap;
   justify-content: flex-start;

src/css/link.css

@@ -22,21 +22,21 @@
 }
 
 .link-area {
-  padding-bottom: calc(var(--gutter) * var(--layout-padding-multiplier));
+  padding-bottom: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
-  padding-left: calc(var(--gutter) * var(--layout-padding-multiplier));
+  padding-left: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
-  padding-right: calc(var(--gutter) * var(--layout-padding-multiplier));
+  padding-right: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
   font-size: calc(var(--link-item-size) * 1);
   position: relative;
   width: var(--link-area-width);
   display: grid;
   grid-auto-rows: 1fr;
-  grid-gap: calc(var(--gutter) * var(--layout-gutter-multiplier));
+  grid-gap: calc(var(--layout-gutter) * var(--layout-gutter-multiplier));
   grid-template-columns: repeat(auto-fill, minmax(var(--link-item-width), 1fr));
 }
 
 .is-header-border-bottom .link-area,
 .is-header-shade-style-always .link-area {
-  padding-top: calc(var(--gutter) * var(--layout-padding-multiplier));
+  padding-top: calc(var(--layout-gutter) * var(--layout-padding-multiplier));
 }
 
 .link-item {
@@ -45,7 +45,7 @@
   height: var(--link-item-height);
   display: block;
   transform: scale(1);
-  transition: transform var(--animation-speed-fast) ease-in-out;
+  transition: transform var(--layout-animation-speed-fast) ease-in-out;
   z-index: 1;
 }
 
@@ -76,12 +76,12 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  box-shadow: inset 0 0 0 var(--line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--line-width) * 8) rgba(var(--theme-accent), 0.1);
+  box-shadow: inset 0 0 0 var(--layout-line-width) rgb(var(--theme-accent)), inset 0 0 0 calc(var(--layout-line-width) * 4) rgba(var(--theme-accent), 0.1), inset 0 0 0 calc(var(--layout-line-width) * 8) rgba(var(--theme-accent), 0.1);
   pointer-events: none;
 }
 
 .link-panel-front {
-  background-color: rgb(var(--gray-02));
+  background-color: rgb(var(--theme-gray-02));
   border-radius: var(--theme-radius);
   width: 100%;
   height: 100%;
@@ -90,16 +90,16 @@
   overflow: hidden;
   position: relative;
   user-select: none;
-  transition: background-color var(--animation-speed-fast) ease-in-out, height var(--animation-speed-fast) ease-in-out, box-shadow var(--animation-speed-fast) ease-in-out;
+  transition: background-color var(--layout-animation-speed-fast) ease-in-out, height var(--layout-animation-speed-fast) ease-in-out, box-shadow var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .is-link-item-line .link-panel-front {
-  height: calc(100% - var(--line-width));
+  height: calc(100% - var(--layout-line-width));
 }
 
 .link-panel-front:hover,
 .link-panel-front:focus {
-  background-color: rgb(var(--gray-03));
+  background-color: rgb(var(--theme-gray-03));
   outline: none;
   text-decoration: none;
 }
@@ -109,8 +109,8 @@
 .link-item:hover .link-panel-front {
   text-decoration: none;
   outline: none;
-  background-color: rgb(var(--gray-03));
+  background-color: rgb(var(--theme-gray-03));
-  box-shadow: var(--shadow-large);
+  box-shadow: var(--layout-shadow-large);
 }
 
 .is-link-style-block .link-panel-front {
@@ -180,21 +180,21 @@
 .link-panel-back {
   background-color: rgb(var(--theme-accent));
   border-radius: var(--theme-radius);
-  width: calc(100% - calc(var(--line-width) * 2));
+  width: calc(100% - calc(var(--layout-line-width) * 2));
-  height: calc(100% - calc(var(--line-width) * 2));
+  height: calc(100% - calc(var(--layout-line-width) * 2));
   position: absolute;
-  top: var(--line-width);
+  top: var(--layout-line-width);
-  left: var(--line-width);
+  left: var(--layout-line-width);
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
   align-items: stretch;
   z-index: 2;
-  transition: height var(--animation-speed-fast) ease-in-out, top var(--animation-speed-fast) ease-in-out;
+  transition: height var(--layout-animation-speed-fast) ease-in-out, top var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .is-link-item-line .link-panel-back {
-  height: calc(100% - var(--line-width));
+  height: calc(100% - var(--layout-line-width));
 }
 
 .is-link-edit .link-panel-back,
@@ -214,7 +214,7 @@
   flex-direction: row;
   align-items: stretch;
   justify-content: center;
-  transition: all var(--animation-speed-fast) ease-in-out;
+  transition: all var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .link-control-item {
@@ -223,7 +223,7 @@
   margin-bottom: 0;
   border: 0;
   padding: 0;
-  color: rgb(var(--gray-02));
+  color: rgb(var(--theme-gray-02));
   flex-grow: 1;
   flex-basis: 50%;
 }
@@ -238,12 +238,12 @@
 
 .link-control-item:focus,
 .link-control-item:hover {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
   background-color: rgba(0, 0, 0, 0.2);
 }
 
 .link-control-item:active {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
   background-color: rgba(0, 0, 0, 0.3);
   transition: none;
 }
@@ -255,7 +255,7 @@
   overflow: hidden;
   display: none;
   align-items: center;
-  transition: all var(--animation-speed-fast) ease-in-out;
+  transition: all var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .is-link-url-show .link-url {
@@ -290,11 +290,11 @@
 }
 
 .is-link-url-style-dark .link-url-text {
-  color: rgb(var(--black));
+  color: rgb(var(--theme-black));
 }
 
 .is-link-url-style-light .link-url-text {
-  color: rgb(var(--white));
+  color: rgb(var(--theme-white));
 }
 
 .link-display {
@@ -317,12 +317,12 @@
   color: rgb(var(--theme-accent));
   line-height: 1;
   white-space: nowrap;
-  transition: color var(--animation-speed-fast) ease-in-out;
+  transition: color var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .link-display-icon {
   color: rgb(var(--theme-accent));
-  transition: color var(--animation-speed-fast) ease-in-out;
+  transition: color var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .is-link-style-block .link-display-letter,
@@ -347,22 +347,22 @@
 .link-item:focus .link-display-letter,
 .link-item:hover .link-display-icon,
 .link-item:focus .link-display-icon {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
 }
 
 .link-panel-front:focus .link-display-letter,
 .link-panel-front:focus .link-display-icon {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
 }
 
 .link-name {
   margin: 0;
   font-size: var(--link-item-name-size);
   font-family: var(--font-regular);
-  color: rgb(var(--gray-12));
+  color: rgb(var(--theme-gray-12));
   display: none;
   text-align: center;
-  transition: color var(--animation-speed-fast) ease-in-out;
+  transition: color var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .is-link-display-alignment-horizontal-left .link-name {
@@ -383,11 +383,11 @@
 
 .link-item:hover .link-name,
 .link-item:focus .link-name {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
 }
 
 .link-panel-front:focus .link-name {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
 }
 
 .link-empty {
@@ -397,7 +397,7 @@
 }
 
 .link-empty-heading {
-  color: rgb(var(--gray-16));
+  color: rgb(var(--theme-gray-16));
   margin-bottom: 0.5em;
 }
 
@@ -409,7 +409,7 @@
 .is-link-edit .link-item:hover .link-panel-front,
 .is-link-edit .link-item:focus .link-panel-front {
   height: calc(100% - var(--link-item-edit-height));
-  box-shadow: var(--shadow-medium);
+  box-shadow: var(--layout-shadow-medium);
 }
 
 .is-link-edit.is-link-url-show .link-item:focus .link-panel-front,
@@ -437,7 +437,7 @@
 
 .link-form-text-icon:empty:before {
   content: "";
-  background-color: rgb(var(--gray-04));
+  background-color: rgb(var(--theme-gray-04));
   top: 50%;
   left: 50%;
   position: absolute;
@@ -450,7 +450,7 @@
 
 .link-form-text-icon .link-form-icon {
   transform: scale(1) rotate(0deg);
-  transition: transform var(--animation-speed-fast) ease-in-out;
+  transition: transform var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .link-form-text-icon:not([disabled]):hover .link-form-icon {

src/css/menu.css

@@ -6,7 +6,7 @@
   width: 100%;
   height: 80vh;
   transform: translateY(calc(-100% - 2em));
-  transition: transform var(--animation-speed-fast) ease-in-out;
+  transition: transform var(--layout-animation-speed-fast) ease-in-out;
   z-index: var(--z-index-menu);
   pointer-events: none;
 }
@@ -20,15 +20,15 @@
 }
 
 .menu-area {
-  background-color: rgba(var(--gray-01), 0.95);
+  background-color: rgba(var(--theme-gray-01), 0.95);
   border-radius: var(--theme-radius);
-  box-shadow: var(--shadow-large);
+  box-shadow: var(--layout-shadow-large);
   width: 100%;
   max-height: 100%;
   overflow-y: auto;
   pointer-events: all;
   opacity: 1;
-  transition: background-color var(--animation-speed-fast) ease-in-out, opacity var(--animation-speed-fast) ease-in-out;
+  transition: background-color var(--layout-animation-speed-fast) ease-in-out, opacity var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .is-edge .menu-area {
@@ -70,7 +70,7 @@
 }
 
 .menu-item:not(:last-child) {
-  border-bottom: 2px solid rgb(var(--gray-03));
+  border-bottom: 2px solid rgb(var(--theme-gray-03));
 }
 
 .menu-item-header {

src/css/modal.css

@@ -9,7 +9,7 @@
   transform: translate(-50%, -50%);
   opacity: 0;
   perspective: 1000px;
-  transition: opacity var(--animation-speed-fast) ease-in-out;
+  transition: opacity var(--layout-animation-speed-fast) ease-in-out;
   z-index: var(--z-index-modal);
 }
 
@@ -23,9 +23,9 @@
 }
 
 .modal-wrapper {
-  background-color: rgb(var(--gray-01));
+  background-color: rgb(var(--theme-gray-01));
   border-radius: var(--theme-radius);
-  box-shadow: var(--shadow-large);
+  box-shadow: var(--layout-shadow-large);
   position: relative;
   max-height: calc(100vh - 2em);
   overflow-y: auto;
@@ -34,7 +34,7 @@
   grid-template-rows: 1fr auto;
   justify-items: stretch;
   align-items: stretch;
-  transition: opacity var(--animation-speed-fast);
+  transition: opacity var(--layout-animation-speed-fast);
 }
 
 .modal-wrapper .container {
@@ -42,7 +42,7 @@
 }
 
 .is-transition-end .modal-wrapper {
-  transition: opacity var(--animation-speed-fast) ease-in-out;
+  transition: opacity var(--layout-animation-speed-fast) ease-in-out;
 }
 
 .modal-body {
@@ -63,7 +63,7 @@
 }
 
 .modal-controls {
-  background-color: rgb(var(--gray-01));
+  background-color: rgb(var(--theme-gray-01));
   border-radius: 0 0 var(--theme-radius) var(--theme-radius);
   position: relative;
   z-index: 2;

src/css/shade.css

@@ -5,12 +5,12 @@
   left: -1em;
   width: calc(100% + 2em);
   height: calc(100% + 2em);
-  transition: opacity var(--animation-speed-fast) ease-in-out, background-color var(--animation-speed-fast) ease-in-out;
+  transition: opacity var(--layout-animation-speed-fast) ease-in-out, background-color var(--layout-animation-speed-fast) ease-in-out;
   z-index: var(--z-index-shade);
 }
 
 .is-background-image-show .shade {
-  background-color: rgba(var(--black), 0.5);
+  background-color: rgba(var(--theme-black), 0.5);
 }
 
 .is-edge:not(.is-background-image-show) .shade {

src/css/tip.css

@@ -6,7 +6,7 @@
   top: 0;
   opacity: 1;
   z-index: var(--z-index-tip);
-  transition: opacity var(--animation-speed-fast) ease-in-out;
+  transition: opacity var(--layout-animation-speed-fast) ease-in-out;
   transform-origin: bottom center;
   pointer-events: none;
 }
@@ -36,19 +36,19 @@
 }
 
 .tip-intro {
-  animation: grow var(--animation-speed-slow) 1;
+  animation: grow var(--layout-animation-speed-slow) 1;
 }
 
 .tip-outro {
-  animation: shirnk var(--animation-speed-slow) 1;
+  animation: shirnk var(--layout-animation-speed-slow) 1;
 }
 
 .tip-message {
   padding: 0.5em 1em;
-  background-color: rgb(var(--gray-04));
+  background-color: rgb(var(--theme-gray-04));
   border: 0;
   border-radius: calc(var(--theme-radius) * 2);
-  color: rgb(var(--gray-18));
+  color: rgb(var(--theme-gray-18));
   font-size: 0.8em;
   font-family: var(--font-regular);
   text-align: center;
@@ -59,7 +59,7 @@
 
 .tip-arrow {
   border: 0.5em solid transparent;
-  border-top-color: rgb(var(--gray-04));
+  border-top-color: rgb(var(--theme-gray-04));
   position: absolute;
   width: 0;
   height: 0;

src/css/transitional.css

@@ -3,7 +3,7 @@
   padding: 0;
   font-size: 1em;
   font-family: var(--font-fjalla);
-  color: rgb(var(--gray-14));
+  color: rgb(var(--theme-gray-14));
   width: 100%;
   min-height: 2.5em;
   display: flex;

src/css/typography.css

@@ -17,35 +17,35 @@ h1 {
 h2 {
   font-size: 1.2em;
   font-family: var(--font-regular);
-  color: rgb(var(--gray-18));
+  color: rgb(var(--theme-gray-18));
 }
 
 h3 {
   font-size: 1.1em;
   font-family: var(--font-regular);
-  color: rgb(var(--gray-18));
+  color: rgb(var(--theme-gray-18));
 }
 
 h4 {
   font-size: 1em;
   font-family: var(--font-regular);
-  color: rgb(var(--gray-18));
+  color: rgb(var(--theme-gray-18));
 }
 
 h5 {
   font-size: 1em;
   font-family: var(--font-bold);
-  color: rgb(var(--gray-18));
+  color: rgb(var(--theme-gray-18));
 }
 
 h6 {
   font-size: 0.75em;
   font-family: var(--font-bold);
-  color: rgb(var(--gray-18));
+  color: rgb(var(--theme-gray-18));
 }
 
 p {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
   margin: 0;
   line-height: 1.5;
 }
@@ -56,7 +56,7 @@ p:not(:last-child) {
 
 hr {
   border: 0;
-  border-top: 1px solid rgb(var(--gray-02));
+  border-top: 1px solid rgb(var(--theme-gray-02));
   border-radius: var(--theme-radius);
   margin: 1em 0;
   clear: both;
@@ -69,13 +69,13 @@ strong {
 }
 
 a {
-  color: rgb(var(--gray-16));
+  color: rgb(var(--theme-gray-16));
   text-decoration: none;
 }
 
 a:link,
 a:visited {
-  color: rgb(var(--gray-16));
+  color: rgb(var(--theme-gray-16));
 }
 
 a:focus {
@@ -84,12 +84,12 @@ a:focus {
 }
 
 a:hover {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
   text-decoration: underline;
 }
 
 a:active {
-  color: rgb(var(--style-neutral-text));
+  color: rgb(var(--theme-style-text));
 }
 
 ol,
@@ -131,9 +131,9 @@ table {
 
 table thead tr td,
 table thead tr th {
-  background-color: rgb(var(--gray-03));
+  background-color: rgb(var(--theme-gray-03));
   border: 0;
-  border-bottom: 1px solid rgb(var(--gray-04));
+  border-bottom: 1px solid rgb(var(--theme-gray-04));
   padding: 0.5em;
   margin: 0;
   text-align: left;
@@ -142,7 +142,7 @@ table thead tr th {
 }
 
 table tr:nth-child(odd) {
-  background-color: rgb(var(--gray-02));
+  background-color: rgb(var(--theme-gray-02));
 }
 
 table tbody tr td,

src/css/utilities.css

@@ -16,7 +16,7 @@
 }
 
 .muted {
-  color: rgb(var(--gray-12));
+  color: rgb(var(--theme-gray-12));
 }
 
 .scroll-disabled {
@@ -32,9 +32,9 @@
 }
 
 .is-shake {
-  animation: shake var(--animation-speed-slow) 1;
+  animation: shake var(--layout-animation-speed-slow) 1;
 }
 
 .is-pop {
-  animation: pop var(--animation-speed-fast) 1;
+  animation: pop var(--layout-animation-speed-fast) 1;
 }

src/css/variables.css

@@ -1,59 +1,31 @@
 :root {
-  --root-font-size: 14px;
+  /* theme */
-  --black: 0, 0, 0;
+  --theme-root-font-size: 14px;
-  --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;
+  --theme-black: 0, 0, 0;
-  --background: rgb(var(--gray-01));
+  --theme-white: 255, 255, 255;
-  --gutter: 0.5rem;
+  --theme-shade-01: 38, 40, 49;
-  --font-regular: "Open Sans Regular", sans-serif;
+  --theme-shade-02: 47, 51, 62;
-  --font-bold: "Open Sans Bold", sans-serif;
+  --theme-shade-03: 57, 62, 75;
-  --font-light: "Open Sans Light", sans-serif;
+  --theme-shade-04: 67, 73, 88;
-  --font-fjalla: "Fjalla One Regular", sans-serif;
+  --theme-shade-05: 77, 84, 101;
+  --theme-shade-06: 87, 95, 114;
+  --theme-shade-07: 97, 106, 127;
+  --theme-shade-08: 107, 117, 140;
+  --theme-shade-09: 117, 128, 153;
+  --theme-shade-10: 127, 139, 166;
+  --theme-shade-11: 137, 151, 180;
+  --theme-shade-12: 149, 162, 187;
+  --theme-shade-13: 162, 173, 195;
+  --theme-shade-14: 174, 184, 203;
+  --theme-shade-15: 187, 195, 211;
+  --theme-shade-16: 199, 206, 218;
+  --theme-shade-17: 212, 217, 226;
+  --theme-shade-18: 224, 228, 234;
+  --theme-shade-19: 237, 239, 242;
+  --theme-shade-20: 250, 250, 250;
+  /* header */
   --header-area-width: 100%;
   --header-shade-color: transparent;
   --header-shade-opacity: 0.95;
@@ -66,26 +38,63 @@
   --header-button-size: 1em;
   --header-greeting-size: 1em;
   --header-transitional-size: 1em;
+  /* link */
   --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;
+  /* layout */
+  --layout-line-width: 0.2em;
+  --layout-gutter: 0.5rem;
+  --layout-width: 80%;
+  --layout-padding-multiplier: 4;
+  --layout-gutter-multiplier: 4;
+  --layout-animation-speed-fast: 0.2s;
+  --layout-animation-speed-medium: 0.4s;
+  --layout-animation-speed-slow: 0.6s;
+  --layout-shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
+  --layout-shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
+  --layout-shadow-large: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2);
+  /* background */
+  --background: rgb(var(--theme-gray-01));
   --background-image: none;
   --background-opacity: 1;
   --background-scale: 1;
   --background-accent-opacity: 0;
   --background-blur: 0;
-  --layout-width: 80%;
+  /* form */
-  --layout-padding-multiplier: 4;
+  --form-input-text: var(--theme-gray-16);
-  --layout-gutter-multiplier: 4;
+  --form-input-border: 2;
-  --animation-speed-fast: 0.2s;
+  --form-input-text-hover: var(--theme-style-text);
-  --animation-speed-medium: 0.4s;
+  --form-input-text-focus: var(--theme-style-text);
-  --animation-speed-slow: 0.6s;
+  --form-input-text-disabled: var(--theme-gray-02);
-  --shadow-small: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2);
+  --form-input-text-disabled-helper-text: var(--theme-gray-04);
-  --shadow-medium: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.2);
+  --form-input-placeholder: var(--theme-gray-06);
-  --shadow-large: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 12px rgba(0, 0, 0, 0.2);
+  --form-input-placeholder-hover-focus: var(--theme-gray-10);
+  --form-input-placeholder-disabled: var(--theme-gray-04);
+  --form-label: var(--theme-gray-12);
+  --form-label-disabled: var(--theme-gray-04);
+  --form-checkbox-radio-label: var(--theme-gray-12);
+  --form-checkbox-radio-chcked-label: var(--theme-gray-16);
+  --form-checkbox-radio-disabled-label: var(--theme-gray-04);
+  --form-range-thumb: var(--theme-gray-12);
+  /* button */
+  --button-text: var(--theme-gray-12);
+  --button-text-hover-focus: var(--theme-style-text);
+  --button-text-active: var(--theme-style-text);
+  --button-text-disabled: var(--theme-gray-04);
+  --button-link-text: var(--theme-gray-12);
+  --button-link-text-hover-focus: var(--theme-style-text);
+  --button-link-text-active: var(--theme-style-text);
+  --button-link-text-disabled: var(--theme-gray-04);
+  /* font */
+  --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;
+  /* z index */
   --z-index-background: 1000;
   --z-index-link: 2000;
   --z-index-header: 3000;
@@ -95,7 +104,7 @@
   --z-index-menu: 7000;
   --z-index-auto-suggest-list: 8000;
   --z-index-edge: 9000;
-  /* breakpoint reference */
+  /* breakpoint */
   /* can not be used in @media as of yet */
   --breakpoint-sm: 550px;
   --breakpoint-md: 700px;
@@ -105,54 +114,57 @@
 }
 
 .is-theme-style-dark {
-  --gray-01: var(--shade-01);
+  /* theme */
-  --gray-02: var(--shade-02);
+  --theme-gray-01: var(--theme-shade-01);
-  --gray-03: var(--shade-03);
+  --theme-gray-02: var(--theme-shade-02);
-  --gray-04: var(--shade-04);
+  --theme-gray-03: var(--theme-shade-03);
-  --gray-05: var(--shade-05);
+  --theme-gray-04: var(--theme-shade-04);
-  --gray-06: var(--shade-06);
+  --theme-gray-05: var(--theme-shade-05);
-  --gray-07: var(--shade-07);
+  --theme-gray-06: var(--theme-shade-06);
-  --gray-08: var(--shade-08);
+  --theme-gray-07: var(--theme-shade-07);
-  --gray-09: var(--shade-09);
+  --theme-gray-08: var(--theme-shade-08);
-  --gray-10: var(--shade-10);
+  --theme-gray-09: var(--theme-shade-09);
-  --gray-11: var(--shade-11);
+  --theme-gray-10: var(--theme-shade-10);
-  --gray-12: var(--shade-12);
+  --theme-gray-11: var(--theme-shade-11);
-  --gray-13: var(--shade-13);
+  --theme-gray-12: var(--theme-shade-12);
-  --gray-14: var(--shade-14);
+  --theme-gray-13: var(--theme-shade-13);
-  --gray-15: var(--shade-15);
+  --theme-gray-14: var(--theme-shade-14);
-  --gray-16: var(--shade-16);
+  --theme-gray-15: var(--theme-shade-15);
-  --gray-17: var(--shade-17);
+  --theme-gray-16: var(--theme-shade-16);
-  --gray-18: var(--shade-18);
+  --theme-gray-17: var(--theme-shade-17);
-  --gray-19: var(--shade-19);
+  --theme-gray-18: var(--theme-shade-18);
-  --gray-20: var(--shade-20);
+  --theme-gray-19: var(--theme-shade-19);
-  --style-neutral-text: var(--white);
+  --theme-gray-20: var(--theme-shade-20);
+  --theme-style-text: var(--theme-white);
 }
 
 .is-theme-style-light {
-  --gray-01: var(--shade-20);
+  /* theme */
-  --gray-02: var(--shade-19);
+  --theme-gray-01: var(--theme-shade-20);
-  --gray-03: var(--shade-18);
+  --theme-gray-02: var(--theme-shade-19);
-  --gray-04: var(--shade-17);
+  --theme-gray-03: var(--theme-shade-18);
-  --gray-05: var(--shade-16);
+  --theme-gray-04: var(--theme-shade-17);
-  --gray-06: var(--shade-15);
+  --theme-gray-05: var(--theme-shade-16);
-  --gray-07: var(--shade-14);
+  --theme-gray-06: var(--theme-shade-15);
-  --gray-08: var(--shade-13);
+  --theme-gray-07: var(--theme-shade-14);
-  --gray-09: var(--shade-12);
+  --theme-gray-08: var(--theme-shade-13);
-  --gray-10: var(--shade-11);
+  --theme-gray-09: var(--theme-shade-12);
-  --gray-11: var(--shade-10);
+  --theme-gray-10: var(--theme-shade-11);
-  --gray-12: var(--shade-09);
+  --theme-gray-11: var(--theme-shade-10);
-  --gray-13: var(--shade-08);
+  --theme-gray-12: var(--theme-shade-09);
-  --gray-14: var(--shade-07);
+  --theme-gray-13: var(--theme-shade-08);
-  --gray-15: var(--shade-06);
+  --theme-gray-14: var(--theme-shade-07);
-  --gray-16: var(--shade-05);
+  --theme-gray-15: var(--theme-shade-06);
-  --gray-17: var(--shade-04);
+  --theme-gray-16: var(--theme-shade-05);
-  --gray-18: var(--shade-03);
+  --theme-gray-17: var(--theme-shade-04);
-  --gray-19: var(--shade-02);
+  --theme-gray-18: var(--theme-shade-03);
-  --gray-20: var(--shade-01);
+  --theme-gray-19: var(--theme-shade-02);
-  --style-neutral-text: var(--black);
+  --theme-gray-20: var(--theme-shade-01);
+  --theme-style-text: var(--theme-black);
 }
 
 .is-link-style-block {
+  /* link */
   --link-item-width: 11em;
   --link-item-height: 10em;
   --link-item-url-height: 20%;
@@ -160,6 +172,7 @@
 }
 
 .is-link-style-list {
+  /* link */
   --link-item-width: 20em;
   --link-item-height: 4em;
   --link-item-url-height: 30%;
@@ -168,6 +181,7 @@
 
 @media (min-width: 700px) {
   :root {
-    --root-font-size: 16px;
+    /* theme */
+    --theme-root-font-size: 16px;
   }
 }

src/js/header.js

@@ -81,10 +81,10 @@ var header = (function() {
     var scrollPosition = document.documentElement.scrollTop;
     if (state.get().header.shade.show) {
       if (state.get().header.shade.style == "always") {
-        html.style.setProperty("--header-shade-color", "var(--gray-01)");
+        html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
       } else if (state.get().header.shade.style == "scroll") {
         if (scrollPosition > (fontSize * 2)) {
-          html.style.setProperty("--header-shade-color", "var(--gray-01)");
+          html.style.setProperty("--header-shade-color", "var(--theme-gray-01)");
         } else {
           html.style.setProperty("--header-shade-color", "transparent");
         };