@pushui/styles 0.0.3

package/styles/mixins/typo.scss

@@ -0,0 +1,168 @@
+$tx-color-base-link: var(--color-black);
+$tx-color-base-link-active: var(--color-primary-2);
+$tx-color-code: var(--color-white);
+$bg-color-code: var(--color-black);
+$bg-color-note: var(--color-primary-3);
+$bd-color-note: var(--color-primary-1);
+$tx-color-note: var(--color-primary-1);
+$bd-color-table-row: var(--color-grey-5);
+$bg-color-table-row-th: var(--color-grey-6);
+$bg-color-table-row-even: var(--color-grey-7);
+$bd-color-hr: var(--color-grey-5);
+$bg-mark: var(--color-warning-3);
+$heading-sizes: (
+  h1: 8,
+  h2: 7,
+  h3: 6,
+  h4: 5,
+  h5: 4,
+  h6: 3,
+);
+
+@mixin base-heading {
+  font-weight: var(--font-weight-heading);
+  line-height: var(--line-height-heading);
+}
+
+@mixin base-link {
+  background: none;
+  color: $tx-color-base-link;
+  font-size: var(--font-size-4);
+  outline: none;
+  text-decoration: underline;
+
+  &:hover,
+  &:focus-visible {
+    color: $tx-color-base-link-active;
+    text-decoration: none;
+  }
+}
+
+@mixin base-paragraph {
+  line-height: var(--line-height-default);
+}
+
+@mixin base-code-block {
+  background-color: $bg-color-code;
+  color: $tx-color-code;
+  overflow-x: auto;
+  padding: 2rem;
+
+  code {
+    background: none;
+    border-radius: 0;
+    padding: 0;
+  }
+}
+
+@mixin base-code-inline {
+  background-color: $bg-color-code;
+  border-radius: var(--radius-2);
+  color: $tx-color-code;
+  padding: 0.5rem;
+}
+
+@mixin base-keyboard {
+  background-color: $bg-color-code;
+  border-radius: var(--radius-2);
+  color: $tx-color-code;
+  padding: 0.5rem;
+}
+
+@mixin base-note {
+  background-color: $bg-color-note;
+  border-color: $bd-color-note;
+  border-left: 0.3rem solid;
+  color: $tx-color-note;
+  padding: 1rem;
+}
+
+@mixin base-blockquote {
+  @include base-note;
+}
+
+@mixin base-caption {
+  font-size: var(--font-size-2);
+  opacity: .5;
+}
+
+@mixin base-table {
+  border-collapse: collapse;
+  width: 100%;
+
+  th {
+    background-color: $bg-color-table-row-th;
+    font-weight: var(--font-weight-strong);
+  }
+
+  th,
+  td {
+    border: 0.1rem solid $bd-color-table-row;
+    padding: 1rem;
+    text-align: left;
+  }
+
+  tbody tr:nth-child(even) {
+    background-color: $bg-color-table-row-even;
+  }
+}
+
+@mixin base-hr {
+  border: none;
+  border-top: 0.1rem solid $bd-color-hr;
+}
+
+@mixin base-mark {
+  background-color: $bg-mark;
+  padding: 0.2rem 0.5rem;
+}
+
+@mixin base-list {
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul ul {
+    list-style-type: circle;
+  }
+
+  ol ol {
+    list-style-type: lower-alpha;
+  }
+
+  ul ul ul {
+    list-style-type: square;
+  }
+
+  ol ol ol {
+    list-style-type: lower-roman;
+  }
+
+  ul,
+  ol {
+    margin: 0 0 2rem;
+    padding-left: 2rem;
+
+    li {
+      margin-bottom: 0.5rem;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    ul,
+    ol {
+      margin: 0.5rem 0 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+

package/styles/root.scss

@@ -0,0 +1,96 @@
+:root {
+  --color-black: #000;
+  --color-black-50: rgb(0 0 0 / 50%);
+  --color-black-40: rgb(0 0 0 / 40%);
+  --color-black-30: rgb(0 0 0 / 30%);
+  --color-black-20: rgb(0 0 0 / 20%);
+  --color-black-10: rgb(0 0 0 / 10%);
+  --color-black-05: rgb(0 0 0 / 5%);
+  --color-white: #fff;
+  --color-white-50: rgb(255 255 255 / 50%);
+  --color-white-40: rgb(255 255 255 / 40%);
+  --color-white-30: rgb(255 255 255 / 30%);
+  --color-white-20: rgb(255 255 255 / 20%);
+  --color-white-10: rgb(255 255 255 / 10%);
+  --color-white-05: rgb(255 255 255 / 5%);
+  --color-grey-1: #333;
+  --color-grey-2: #666;
+  --color-grey-3: #737373;
+  --color-grey-4: #949494;
+  --color-grey-5: #DDD;
+  --color-grey-6: #EEE;
+  --color-grey-7: #F5F5F5;
+  --color-default-1: #000;
+  --color-default-2: #333;
+  --color-default-3: #eee;
+  --color-default-contrast: #fff;
+  --color-primary-1: #002f5f;
+  --color-primary-2: #06c;
+  --color-primary-3: #cce0ff;
+  --color-primary-contrast: #60a5fa;
+  --color-secondary-1: #3d1480;
+  --color-secondary-2: #7c3aed;
+  --color-secondary-3: #ede9fe;
+  --color-secondary-contrast: #a78bfa;
+  --color-success-1: #115129;
+  --color-success-2: #15803d;
+  --color-success-3: #dcfce7;
+  --color-success-contrast: #4ade80;
+  --color-danger-1: #5c1010;
+  --color-danger-2: #dc2626;
+  --color-danger-3: #fee2e2;
+  --color-danger-contrast: #f87171;
+  --color-warning-1: #71320b;
+  --color-warning-2: #b45309;
+  --color-warning-3: #fef3c7;
+  --color-warning-contrast: #fbbf24;
+  --color-info-1: #104b5d;
+  --color-info-2: #0e7490;
+  --color-info-3: #cffafe;
+  --color-info-contrast: #22d3ee;
+  --font-size-1: 1rem;
+  --font-size-2: 1.2rem;
+  --font-size-3: 1.4rem;
+  --font-size-4: 1.6rem;
+  --font-size-5: 1.8rem;
+  --font-size-6: 2rem;
+  --font-size-7: 3rem;
+  --font-size-8: 4rem;
+  --font-size-9: 6rem;
+  --line-height-heading: 1.2;
+  --line-height-default: 1.4;
+  --font-weight-body: 400;
+  --font-weight-button: 600;
+  --font-weight-strong: 600;
+  --font-weight-heading: 800;
+  --z-index-1: 100;
+  --z-index-2: 200;
+  --z-index-3: 300;
+  --z-index-4: 400;
+  --z-index-5: 500;
+  --z-index-6: 600;
+  --screen-max-width: 168rem;
+  --container-max-width: 120rem;
+  --site-font: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', arial,
+    sans-serif;
+  --spacing-1: 0.5rem;
+  --spacing-2: 1rem;
+  --spacing-3: 2rem;
+  --spacing-4: 3rem;
+  --spacing-5: 4rem;
+  --spacing-6: 5rem;
+  --spacing-7: 6rem;
+  --spacing-8: 8rem;
+  --spacing-9: 10rem;
+  --radius-1: 0.2rem;
+  --radius-2: 0.4rem;
+  --radius-3: 0.6rem;
+  --radius-4: 0.8rem;
+  --radius-5: 1rem;
+  --radius-6: 1.5rem;
+  --radius-7: 2rem;
+  --height-mobile-menu: 6rem;
+  --height-main-menu: 6rem;
+  --height-top-menu: 3rem;
+  --transition-default: 0.2s ease;
+}