move all base styles out of component

src/component/base/index.js

@@ -1,11 +1,15 @@
-import './base/index.css';
-import './font/index.css';
-import './animation/index.css';
-import './spacing/index.css';
-import './state/index.css';
-import './typography/index.css';
-import './version/index.css';
-import './zindex/index.css';
-import './utility/index.css';
+// must be loaded first
+import '../../style/reset/index.css';
+
+// base styles for all components
+import '../../style/animation/index.css';
+import '../../style/font/index.css';
+import '../../style/spacing/index.css';
+import '../../style/state/index.css';
+import '../../style/typography/index.css';
+//FIXME version to move made into its own component
+import '../../style/version/index.css';
+import '../../style/zindex/index.css';
+import '../../style/utility/index.css';
 
 export const base = {};

src/component/body/index.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+export const body = {};

src/component/control/sliderSlim/index.js

@@ -1,4 +1,3 @@
-
 import * as form from '../../form';
 
 import { Button } from '../../button';
@@ -32,7 +31,7 @@ export const Control_sliderSlim = function ({
     forInput: id,
     text: labelText,
     noPadding: true,
-    classList: ['form-group-text', 'form-group-text-left', 'form-group-text-transparent', 'form-group-text-borderless', 'form-group-item-medium',]
+    classList: ['form-group-text', 'form-group-text-left', 'form-group-text-transparent', 'form-group-text-borderless', 'form-group-item-medium']
   });
 
   const classList = ['form-group-item-grow'];

src/component/index.js

@@ -1,6 +1,5 @@
-import '../style/reset.css';
-
 import { base } from './base';
+import { body } from './body';
 import { state } from './state';
 import { data } from './data';
 import { version } from './version';
@@ -23,6 +22,7 @@ import * as form from './form';
 
 export const component = {
   base,
+  body,
   state,
   data,
   version,

src/component/menuNav/index.js

@@ -1,4 +1,3 @@
-
 import { Button } from '../button';
 
 import { node } from '../../utility/node';

src/component/tab/index.js

@@ -1,4 +1,3 @@
-
 import { Button } from '../button';
 
 import { node } from '../../utility/node';
@@ -89,8 +88,6 @@ export const Tab = function ({
         this.element.tab.classList.add('tab-nav-indicator-active');
       });
 
-      this.element.indicator.addEventListener('transitionend', () => { });
-
     }
   };
 

src/style/animation/index.css

@@ -0,0 +1,127 @@
+@keyframes appear {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes shake {
+  0% {
+    transform: translate3d(0, 0, 0);
+  }
+
+  10% {
+    transform: translate3d(-1.2em, 0, 0);
+  }
+
+  20% {
+    transform: translate3d(1.2em, 0, 0);
+  }
+
+  30% {
+    transform: translate3d(-1em, 0, 0);
+  }
+
+  40% {
+    transform: translate3d(1em, 0, 0);
+  }
+
+  50% {
+    transform: translate3d(-0.8em, 0, 0);
+  }
+
+  60% {
+    transform: translate3d(0.8em, 0, 0);
+  }
+
+  70% {
+    transform: translate3d(-0.3em, 0, 0);
+  }
+
+  80% {
+    transform: translate3d(0.3em, 0, 0);
+  }
+
+  90% {
+    transform: translate3d(-0.1em, 0, 0);
+  }
+
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes pop {
+  0% {
+    transform: scale(1);
+  }
+
+  25% {
+    transform: scale(1.1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  75% {
+    transform: scale(1.1);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes jello {
+  0% {
+    transform: scale3d(1, 1, 1);
+  }
+
+  30% {
+    transform: scale3d(1.25, 0.75, 1);
+  }
+
+  40% {
+    transform: scale3d(0.75, 1.25, 1);
+  }
+
+  50% {
+    transform: scale3d(1.15, 0.85, 1);
+  }
+
+  65% {
+    transform: scale3d(0.95, 1.05, 1);
+  }
+
+  75% {
+    transform: scale3d(1.05, 0.95, 1);
+  }
+
+  100% {
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes circle-in {
+  0% {
+    clip-path: circle(100% at 50% 50%);
+  }
+
+  100% {
+    clip-path: circle(0% at 50% 50%);
+  }
+}
+
+@keyframes circle-out {
+  0% {
+    clip-path: circle(0% at 50% 50%);
+  }
+
+  100% {
+    clip-path: circle(100% at 50% 50%);
+  }
+}

src/style/font/index.css

@@ -0,0 +1,26 @@
+/* open sans */
+@font-face {
+  font-family: "Open Sans";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("Open Sans Regular"),
+    local("OpenSans-Regular"),
+    url("../../font/open-sans/open-sans-400.woff") format("woff"),
+    url("../../font/open-sans/open-sans-400.woff2") format("woff2"),
+    url("../../font/open-sans/open-sans-400.ttf") format("truetype");
+}
+
+/* fjalla one */
+@font-face {
+  font-family: "Fjalla One";
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+  src:
+    local("Fjalla One"),
+    url("../../font/fjalla-one/fjalla-one-400.woff") format("woff"),
+    url("../../font/fjalla-one/fjalla-one-400.woff2") format("woff2"),
+    url("../../font/fjalla-one/fjalla-one-400.ttf") format("truetype");
+}

src/style/state/index.css

@@ -0,0 +1,63 @@
+.is-hidden {
+  display: none !important;
+}
+
+.is-inline-block {
+  display: inline-block !important;
+}
+
+.is-block {
+  display: block !important;
+}
+
+.is-transparent {
+  opacity: 0 !important;
+}
+
+.is-opaque {
+  opacity: 1 !important;
+}
+
+.is-invisible {
+  visibility: hidden !important;
+}
+
+.is-visible {
+  visibility: visible !important;
+}
+
+.is-small {
+  transform: scale(0.5) !important;
+}
+
+.is-large {
+  transform: scale(1.5) !important;
+}
+
+.is-scroll-disabled {
+  overflow: hidden !important;
+}
+
+.is-scroll-x-disabled {
+  overflow-x: hidden !important;
+}
+
+.is-scroll-y-disabled {
+  overflow-y: hidden !important;
+}
+
+.is-appear {
+  animation: appear var(--layout-transition-medium) 1;
+}
+
+.is-shake {
+  animation: shake var(--layout-transition-slow) 1;
+}
+
+.is-pop {
+  animation: pop var(--layout-transition-medium) 1;
+}
+
+.is-jello {
+  animation: jello var(--layout-transition-slow) 1;
+}

src/style/typography/index.css

@@ -0,0 +1,183 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0 0 1em 0;
+  font-weight: normal;
+  line-height: 1.6;
+  color: hsl(var(--theme-primary-text-010));
+}
+
+h1 {
+  font-size: 1.5em;
+  font-family: var(--theme-font-display-name);
+  font-weight: var(--theme-font-display-weight);
+  font-style: var(--theme-font-display-style);
+}
+
+h2 {
+  font-size: 1.3em;
+  font-family: var(--theme-font-display-name);
+  font-weight: var(--theme-font-display-weight);
+  font-style: var(--theme-font-display-style);
+}
+
+h3 {
+  font-size: 1.1em;
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
+}
+
+h4 {
+  font-size: 1em;
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
+}
+
+h5 {
+  font-size: 1em;
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
+  font-weight: bold;
+}
+
+h6 {
+  font-size: 0.75em;
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
+  font-weight: bold;
+}
+
+p {
+  color: hsl(var(--theme-primary-text-010));
+  margin: 0;
+  line-height: 1.6;
+}
+
+p:not(:last-child) {
+  margin-bottom: 0.5em;
+}
+
+hr {
+  border: 0;
+  border-top: var(--layout-horizontal-rule-small);
+  border-radius: calc(var(--theme-radius) * 0.01em);
+  margin: calc(var(--wrap-space) * 2) 0;
+  clear: both;
+  transition: border-color var(--layout-transition-extra-fast);
+}
+
+b,
+caption,
+strong {
+  color: hsl(var(--theme-primary-text-010));
+  font-family: var(--theme-font-ui-name);
+  font-weight: 600;
+}
+
+i {
+  font-style: italic;
+}
+
+a {
+  color: hsl(var(--theme-primary-text-010));
+  text-decoration: underline;
+  transition: text-decoration var(--layout-transition-extra-fast);
+}
+
+a:link,
+a:visited {
+  color: hsl(var(--theme-primary-text-010));
+}
+
+a:focus {
+  text-decoration-color: hsl(var(--theme-primary-text-010));
+  outline: none;
+}
+
+a:hover {
+  color: hsl(var(--theme-primary-text-010));
+  text-decoration-color: rgb(var(--theme-accent));
+}
+
+a:active {
+  color: hsl(var(--theme-primary-text-010));
+  text-decoration-color: hsl(var(--theme-primary-text-010));
+}
+
+ol,
+ul {
+  margin: 0;
+  padding: 0 0 0 1.5em;
+}
+
+ol:not(:last-child),
+ul:not(:last-child) {
+  margin-bottom: 1em;
+}
+
+li {
+  margin: 0;
+}
+
+li>ul,
+li>ol {
+  margin: 0;
+}
+
+li:not(:last-child) {
+  margin-bottom: 0.5em;
+}
+
+li>ul:not(:last-child),
+li>ol:not(:last-child) {
+  margin-bottom: 0.5em;
+}
+
+table {
+  border: 0;
+  margin: 0 0 1em;
+  padding: 0;
+  width: 100%;
+  border-spacing: 0;
+}
+
+table thead tr td,
+table thead tr th {
+  background-color: hsl(var(--theme-primary-030));
+  border: 0;
+  border-bottom: 1px solid hsl(var(--theme-primary-040));
+  padding: 0.5em;
+  margin: 0;
+  text-align: left;
+  font-family: var(--theme-font-ui-name);
+  font-weight: var(--theme-font-ui-weight);
+  font-style: var(--theme-font-ui-style);
+  font-weight: bold;
+  box-sizing: border-box;
+}
+
+table tr:nth-child(odd) {
+  background-color: hsl(var(--theme-primary-020));
+}
+
+table tbody tr td,
+table tbody tr th {
+  padding: 0.25em 0.5em;
+  margin: 0;
+  border: 0;
+  text-align: left;
+  box-sizing: border-box;
+}
+
+code {
+  background-color: hsl(var(--theme-primary-040));
+  padding: 0.2em 0.5em;
+  border-radius: calc(var(--theme-radius) * 0.01em);
+}

src/style/utility/index.css

@@ -0,0 +1,85 @@
+:root {
+  --utility-muted: var(--theme-primary-110);
+  --utility-muted-hover: var(--theme-primary-110);
+  --utility-muted-focus-active: var(--theme-primary-110);
+  --utility-muted-checked: var(--theme-primary-110);
+  --utility-muted-disabled: var(--theme-primary-030);
+}
+
+.list-unstyled {
+  padding-left: 0;
+  margin-bottom: 0;
+}
+
+.list-unstyled li {
+  list-style-type: none;
+}
+
+.list-unstyled li:not(:last-child) {
+  margin-bottom: 0;
+}
+
+.list-feature {
+  padding-left: 0;
+  margin-bottom: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5em;
+}
+
+.list-feature li {
+  padding: 0.25em 0.5em;
+  list-style-type: none;
+}
+
+.list-feature li:not(:last-child) {
+  margin-bottom: 0;
+}
+
+.list-inline li {
+  display: inline-block;
+}
+
+.small {
+  font-size: 0.8em;
+}
+
+.large {
+  font-size: 1.2em;
+}
+
+.muted {
+  color: hsl(var(--utility-muted));
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.d-flex {
+  display: flex;
+}
+
+.d-horizontal {
+  flex-direction: row;
+}
+
+.d-vertical {
+  flex-direction: column;
+}
+
+.d-center {
+  align-items: center;
+  justify-content: center;
+}
+
+.d-gap {
+  gap: 1em;
+}

src/style/version/index.css

@@ -0,0 +1,40 @@
+:root {
+  --version-icon-size: 22;
+  --version-icon: calc((var(--version-icon-size) / 4) * 1em);
+}
+
+.version {
+  font-size: 1rem;
+  display: inline-grid;
+  grid-template-columns: auto auto;
+  grid-gap: var(--wrap-space);
+  align-items: center;
+  justify-items: start;
+}
+
+.version-app-name {
+  margin-bottom: 0;
+}
+
+.version-number:not(:last-child),
+.version-name:not(:last-child) {
+  margin-bottom: 0;
+}
+
+.version-number {
+  background-color: rgb(var(--theme-accent));
+  color: hsl(var(--theme-accent-text));
+  border-radius: calc(var(--theme-radius) * 0.01em);
+  padding: 0 0.5em;
+}
+
+.version-icon {
+  width: var(--version-icon);
+}
+
+.version-details {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.25em;
+}

src/style/zindex/index.css

@@ -0,0 +1,11 @@
+:root {
+  --z-index-background: 1000;
+  --z-index-layout: 2000;
+  --z-index-toolbar: 3000;
+  --z-index-edge: 4000;
+  --z-index-dropdown: 5000;
+  --z-index-shade: 6000;
+  --z-index-menu: 7000;
+  --z-index-modal: 8000;
+  --z-index-suggest: 9000;
+}