jvetrau-ds 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -198,75 +198,6 @@
   text-transform: uppercase;
 }
 
-/* src/components/button-icon/button-icon.css */
-.button-icon {
-  /* color */
-  --button-icon-bg: transparent;
-  --button-icon-color: var(--color-text);
-  --button-icon-bg-disabled: transparent;
-  --button-icon-color-disabled: var(--color-text-disabled);
-
-  background: var(--button-icon-bg);
-  color: var(--button-icon-color);
-
-  /* typography */
-
-  /* size */
-  --button-icon-size: 32px;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--button-icon-size);
-  height: var(--button-icon-size);
-  padding: 0;
-
-  /* border */
-  --button-icon-radius: var(--radius-control);
-  --button-icon-focus-width: var(--size-border-width-min);
-  --button-icon-focus-offset: 2px;
-
-  border: 0;
-  border-radius: var(--button-icon-radius);
-
-  /* depth */
-
-  /* motion */
-  --button-icon-transition-duration: var(--motion-duration1);
-  --button-icon-opacity-hover: 0.8;
-  --button-icon-opacity-active: 0.7;
-
-  cursor: pointer;
-  user-select: none;
-  transition: opacity var(--button-icon-transition-duration);
-}
-
-.button-icon__icon {
-  /* size */
-  flex-shrink: 0;
-}
-
-.button-icon:hover {
-  opacity: var(--button-icon-opacity-hover);
-}
-
-.button-icon:focus-visible {
-  outline: var(--button-icon-focus-width) solid currentColor;
-  outline-offset: var(--button-icon-focus-offset);
-}
-
-.button-icon:active {
-  opacity: var(--button-icon-opacity-active);
-}
-
-.button-icon:disabled,
-.button-icon--disabled {
-  background: var(--button-icon-bg-disabled);
-  color: var(--button-icon-color-disabled);
-  cursor: not-allowed;
-  opacity: 1;
-}
-
 /* src/components/button/button.css */
 .button {
   /* color */
@@ -373,6 +304,75 @@
   padding-inline: var(--button-padding-icon-only);
 }
 
+/* src/components/button-icon/button-icon.css */
+.button-icon {
+  /* color */
+  --button-icon-bg: transparent;
+  --button-icon-color: var(--color-text);
+  --button-icon-bg-disabled: transparent;
+  --button-icon-color-disabled: var(--color-text-disabled);
+
+  background: var(--button-icon-bg);
+  color: var(--button-icon-color);
+
+  /* typography */
+
+  /* size */
+  --button-icon-size: 32px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--button-icon-size);
+  height: var(--button-icon-size);
+  padding: 0;
+
+  /* border */
+  --button-icon-radius: var(--radius-control);
+  --button-icon-focus-width: var(--size-border-width-min);
+  --button-icon-focus-offset: 2px;
+
+  border: 0;
+  border-radius: var(--button-icon-radius);
+
+  /* depth */
+
+  /* motion */
+  --button-icon-transition-duration: var(--motion-duration1);
+  --button-icon-opacity-hover: 0.8;
+  --button-icon-opacity-active: 0.7;
+
+  cursor: pointer;
+  user-select: none;
+  transition: opacity var(--button-icon-transition-duration);
+}
+
+.button-icon__icon {
+  /* size */
+  flex-shrink: 0;
+}
+
+.button-icon:hover {
+  opacity: var(--button-icon-opacity-hover);
+}
+
+.button-icon:focus-visible {
+  outline: var(--button-icon-focus-width) solid currentColor;
+  outline-offset: var(--button-icon-focus-offset);
+}
+
+.button-icon:active {
+  opacity: var(--button-icon-opacity-active);
+}
+
+.button-icon:disabled,
+.button-icon--disabled {
+  background: var(--button-icon-bg-disabled);
+  color: var(--button-icon-color-disabled);
+  cursor: not-allowed;
+  opacity: 1;
+}
+
 /* src/components/card/card.css */
 .card {
   /* color */
@@ -2265,3 +2265,543 @@
   vertical-align: middle;
 }
 
+/* src/patterns/footer/footer.css */
+.footer {
+  /* color */
+  color: var(--color-text);
+  background: var(--color-bg);
+  border-top:
+    var(--border-size-width-min)
+    solid
+    var(--color-line);
+
+  /* typography */
+  font-family: var(--font-note-family);
+  font-size: var(--font-note);
+  font-weight: var(--font-note-weight);
+  line-height: var(--font-note-line);
+  letter-spacing: var(--font-note-letter-spacing);
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--margin-menu);
+
+  width: 100%;
+  min-height: 100px;
+  padding: var(--size-padding-container);
+
+  overflow: hidden;
+  box-sizing: border-box;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.footer__copyright {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  white-space: nowrap;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.footer__links {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  gap: var(--margin-menu);
+
+  flex-shrink: 0;
+
+  white-space: nowrap;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.footer__links > * {
+  display: flex;
+  align-items: center;
+}
+
+.footer a {
+  /* color */
+  color: inherit;
+
+  /* typography */
+  text-decoration: underline;
+  text-underline-position: from-font;
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+@media (max-width: 1024px) {
+  .footer {
+    align-items: flex-start;
+    flex-direction: column;
+    justify-content: flex-start;
+  }
+
+  .footer__copyright,
+  .footer__links {
+    white-space: normal;
+  }
+
+  .footer__links {
+    flex-wrap: wrap;
+  }
+}
+
+/* src/patterns/header/header.css */
+.header {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  gap: var(--margin-menu);
+
+  width: 100%;
+  min-height: 80px;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.header__logo {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+
+  flex-shrink: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.header__menu {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  min-width: 0;
+
+  flex: 1;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.header__avatar {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  flex-shrink: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+/* src/patterns/screen-header/screen-header.css */
+.screen-header {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+
+  /* gap: var(--padding-container); */
+
+  width: 100%;
+
+  padding-bottom:
+    var(--padding-container);
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__heading {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+
+/*  gap: var(--padding-tag);*/
+
+  margin-bottom: var(--font-h1-margin);
+
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__section {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-body-family);
+  font-size: var(--font-body);
+  font-weight: var(--font-body-weight);
+  line-height: var(--font-body-line);
+  letter-spacing: var(--font-body-letter-spacing);
+
+  /* size */
+  width: 100%;
+  margin: 0 0 var(--margin-descriptor) 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__title {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-h1-family);
+  font-size: var(--font-h1);
+  font-weight: var(--font-h1-weight);
+  line-height: var(--font-h1-line);
+  letter-spacing: var(--font-h1-letter-spacing);
+
+  /* size */
+  width: 100%;
+  margin: 0 0 var(--font-h1-margin) 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__description {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-lead-family);
+  font-size: var(--font-lead);
+  font-weight: var(--font-lead-weight);
+  line-height: var(--font-lead-line);
+  letter-spacing: var(--font-lead-letter-spacing);
+
+  /* size */
+  width: 100%;
+  margin: 0;
+/*  max-width: 960px; */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.screen-header__tabs {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  align-items: center;
+
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+/* src/layouts/base/base.css */
+.layout-base__header {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-base__main {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-base__footer {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+/* src/layouts/foundation/foundation.css */
+.layout-foundation {
+  /* color */
+  color: var(--color-text);
+
+  /* typography */
+
+  /* size */
+  --layout-foundation-width: 960px;
+  --layout-foundation-padding-horz: var(--size-grid-padding-horz);
+  --layout-foundation-padding-vert: var(--size-grid-padding-vert);
+  --layout-foundation-columns: 12;
+  --layout-foundation-gap: var(--size-grid-margin);
+
+  width: 100%;
+  min-height: 100dvh;
+  max-width: var(--layout-foundation-width);
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-foundation--narrow {
+  --layout-foundation-width: 720px;
+}
+
+.layout-foundation--wide {
+  --layout-foundation-width: 1200px;
+}
+
+.layout-foundation--full {
+  max-width: none;
+}
+
+.layout-foundation__grid {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: grid;
+  grid-template-columns: repeat(var(--layout-foundation-columns), minmax(0, 1fr));
+  gap: var(--layout-foundation-gap);
+  width: 100%;
+  min-height: 100dvh;
+  padding:
+    var(--layout-foundation-padding-vert)
+    var(--layout-foundation-padding-horz);
+  box-sizing: border-box;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-foundation__grid > * {
+  grid-column: 1 / -1;
+}
+
+@media (max-width: 1024px) {
+  .layout-foundation {
+    --layout-foundation-columns: 8;
+  }
+}
+
+@media (max-width: 640px) {
+  .layout-foundation {
+    --layout-foundation-columns: 4;
+  }
+}
+
+/* src/layouts/sidebar/sidebar.css */
+.layout-sidebar__header {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__body {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: grid;
+  grid-template-columns: repeat(var(--layout-foundation-columns), minmax(0, 1fr));
+  gap: var(--layout-foundation-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__main {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  grid-column: span 8;
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__side {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  grid-column: span 4;
+  min-width: 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.layout-sidebar__footer {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+@media (max-width: 1024px) {
+  .layout-sidebar__main,
+  .layout-sidebar__side {
+    grid-column: 1 / -1;
+  }
+}
+