databook-theme 0.1.1

data/_sass/theme/_scheme.scss

@@ -0,0 +1,112 @@
+@mixin scheme-light {
+  --db-accent-color-h: 223;
+  --db-accent-color-s: 5%;
+  --db-accent-color-l: 50%;
+  --db-accent-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), var(--db-accent-color-l));
+
+  --db-overlay-color-rgb: 0, 0, 0;
+  --db-hover-color-rgb: 255, 255, 255;
+
+
+  --db-background-color: hsl(0, 0%, 100%);
+  --db-background-hover-color: var(--db-surface-color);
+
+  --db-border-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 80%);
+  --db-border-color-inactive: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 90%);
+
+  --db-surface-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 95%);
+  --db-surface-overlay: radial-gradient(#FFFFFF22, #FFFFFF00);
+  --db-surface-shadow-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 33%);
+  --db-surface-hover-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, .2);
+
+  --db-control-color: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * 1.5), 33%);
+  --db-control-border-color: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * 1.5), 22%);
+  --db-control-text-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 95%);
+  --db-control-shadow-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 33%);
+  
+  --db-text-color-active: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 5%);
+  --db-text-color-important: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 15%);
+  --db-text-color-inactive: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * .66), 40%);
+  --db-text-color-disabled: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * .33), 60%);
+
+  --db-highlight-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 15%);
+  --db-highlight-color-hover: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 20%);
+}
+
+@mixin scheme-dark {
+  --db-accent-color-h: 223;
+  --db-accent-color-s: 5%;
+  --db-accent-color-l: 50%;
+  --db-accent-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), var(--db-accent-color-l));
+  
+  --db-overlay-color-rgb: 255, 255, 255;
+  --db-hover-color-rgb: 0, 0, 0;
+
+  --db-background-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 8%);
+  --db-background-hover-color: var(--db-surface-color);
+  
+  --db-border-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 30%);
+  --db-border-color-inactive: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 20%);
+
+  --db-surface-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 15%);
+  --db-surface-overlay: radial-gradient(#FFFFFF11, #FFFFFF11);
+  --db-surface-hover-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 80%);
+  --db-surface-shadow-color: transparent;
+
+  --db-control-color: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * .3), 70%);
+  --db-control-border-color: hsl(var(--db-accent-color-h), calc(var(--db-accent-color-s) * .3), 80%);
+  --db-control-text-color: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 15%);
+  --db-control-shadow-color: transparent;
+
+  --db-text-color-active: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 95%);
+  --db-text-color-important: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 85%);
+  --db-text-color-inactive: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 60%);
+  --db-text-color-disabled: hsl(var(--db-accent-color-h), var(--db-accent-color-s), 40%);
+  
+  --db-highlight-color: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 85%);
+  --db-highlight-color-hover: hsla(var(--db-accent-color-h), var(--db-accent-color-s), 50%, 80%);
+  
+  img {
+    filter: brightness(.8) contrast(1.2);
+  }
+}
+
+:root {
+  color-scheme: normal;
+
+  &[data-color-scheme="light"] {
+    color-scheme: light;
+  }
+
+  @include scheme-light;
+
+  @media (prefers-color-scheme: dark) {
+    @include scheme-dark;
+  }
+
+  &[data-color-scheme="dark"] {
+    color-scheme: dark;
+    @include scheme-dark;
+  }
+
+  &[data-accent-color="red"] {
+    --db-accent-color-h: 2;
+  }
+  &[data-accent-color="yellow"] {
+    --db-accent-color-h: 37;
+  }
+  &[data-accent-color="green"] {
+    --db-accent-color-h: 137;
+  }
+  &[data-accent-color="blue"] {
+    --db-accent-color-h: 223;
+  }
+  &[data-accent-color="purple"] {
+    --db-accent-color-h: 293;
+  }
+  &[data-accent-color] {
+    --db-accent-color-s: 66%;
+    accent-color: var(--db-accent-color);
+  }
+  
+}

data/_sass/typography/_article.scss

@@ -0,0 +1,49 @@
+.l-typography--article {
+  h1 {
+    --db-h-font-size: 3rem;
+    --db-h-padding: 1rem;
+    --db-h-margin: 1rem;
+    --db-h-border: 1px solid var(--db-border-color);
+  }
+  h2 {
+    --db-h-font-size: 1.75rem;
+    --db-h-padding: .75rem;
+    --db-h-margin: .75rem;
+    --db-h-border: 1px solid var(--db-border-color);
+  }
+  h3 {
+    --db-h-font-size: 1.5rem;
+    --db-h-padding: .75rem;
+    --db-h-margin: .75rem;
+    --db-h-border: 1px dashed var(--db-border-color);
+  }
+  h4 {
+    --db-h-font-size: 1.4rem;
+    --db-h-padding: .25rem;
+    --db-h-margin: .25rem;
+  }
+  h5 {
+    --db-h-font-size: 1.3rem;
+    --db-h-padding: .25rem;
+    --db-h-margin: .25rem;
+  }
+  h6 {
+    --db-h-font-size: 1.2rem;
+    --db-h-padding: .25rem;
+    --db-h-margin: .25rem;
+  }
+
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: bold;
+    font-size: var(--db-h-font-size);
+    padding: var(--db-h-padding) 0;
+    border-bottom: var(--db-h-border, none);
+
+    margin-bottom: var(--db-h-margin);
+
+    &:not(:first-child) {
+      margin-top: calc(var(--db-h-margin) * 1.5);
+    }
+  }
+}

data/_sass/typography/_doc.scss

@@ -0,0 +1,104 @@
+$background-color: var(--db-surface-color);
+$border-color: var(--db-accent-color);
+
+.l-typography--doc {
+  h1 {
+    --db-h-font-size: 2rem;
+    --db-h-padding: 1rem;
+    --db-h-margin: 2rem;
+    --db-h-border-width: 1.5rem;
+    --db-h-background-color: #{$border-color};
+    --db-h-color: var(--db-control-text-color);
+    --db-h-border-left: #{$border-color};
+    --db-h-border-radius: #{$border-radius-object} 0 0 #{$border-radius-object};
+  }
+  h2 {
+    --db-h-font-size: 1.75rem;
+    --db-h-padding: .5rem 1rem;
+    --db-h-margin: 1.5rem;
+    --db-h-border-width: .8rem;
+    --db-h-background-color: #{$background-color};
+    --db-h-border-left: #{$border-color};
+    --db-h-border-bottom: #{$border-color};
+    --db-h-border-radius: #{$border-radius-object} 0 0 #{$border-radius-object};
+  }
+  h3 {
+    --db-h-font-size: 1.5rem;
+    --db-h-padding: .5rem .5rem;
+    --db-h-margin: 1.75rem;
+    --db-h-border-width: .6rem;
+    --db-h-border-left: #{$border-color};
+    --db-h-border-bottom: #{$border-color};
+    --db-h-border-radius: #{$border-radius-object} #{$border-radius-object} 0 #{$border-radius-object};
+  }
+  h4 {
+    --db-h-font-size: 1.4rem;
+    --db-h-padding: .25rem .5rem;
+    --db-h-border-width: .5rem;
+    --db-h-margin: 1.5rem;
+    --db-h-border-left: #{$border-color};
+    --db-h-border-radius: #{$border-radius-object};
+  }
+  h5 {
+    --db-h-font-size: 1.3rem;
+    --db-h-padding: 0 .5rem;
+    --db-h-border-width: .4rem;
+    --db-h-margin: 1rem;
+    --db-h-border-left: #{$border-color};
+    --db-h-border-radius: #{$border-radius-object};
+  }
+  h6 {
+    --db-h-font-size: 1.2rem;
+    --db-h-padding: 0 .5rem;
+    --db-h-border-width: .3rem;
+    --db-h-margin: 1rem;
+    --db-h-border-left: #{$border-color};
+    --db-h-border-radius: #{$border-radius-object};
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    position: relative;
+    background-color: var(--db-h-background-color);
+    font-weight: bold;
+    color: var(--db-h-color, var(--db-text-color-important));
+    font-size: var(--db-h-font-size);
+    padding: var(--db-h-padding);
+    margin-bottom: var(--db-h-margin);
+
+    &:not(:first-child) {
+      margin-top: var(--db-h-margin);
+    }
+
+    &::before {
+      background-color: var(--db-h-border-left, unset);
+      content: "";
+      width: var(--db-h-border-width);
+      left: calc(0px - var(--db-h-border-width));
+      height: 100%;
+      position: absolute;
+      top: 0;
+      border-radius: var(--db-h-border-radius, unset);
+    }
+
+    &::after {
+      background-color: var(--db-h-border-bottom, unset);
+      content: "";
+      width: 100%;
+      left: 0;
+      bottom: 0;
+      height: 1px;
+      position: absolute;
+    }
+    
+  }
+
+  h1 {
+    border-radius: 0 #{$border-radius-object} #{$border-radius-object} 0;
+  }
+
+  blockquote {
+    h1, h2, h3, h4, h5, h6 {
+      margin-left: 1rem;
+    }
+  }
+}

data/_sass/typography/_highlight.scss

@@ -0,0 +1,208 @@
+// https://github.com/pages-themes/minimal/blob/master/_sass/rouge-github.scss
+
+.highlight {
+  .cm {
+    color: #999988;
+    font-style: italic;
+  }
+  .cp {
+    color: #999999;
+    font-weight: bold;
+  }
+  .c1 {
+    color: #999988;
+    font-style: italic;
+  }
+  .cs {
+    color: #999999;
+    font-weight: bold;
+    font-style: italic;
+  }
+  .c, .cd {
+    color: #999988;
+    font-style: italic;
+  }
+  .err {
+    color: #a61717;
+    background-color: #e3d2d2;
+  }
+  .gd {
+    color: #000000;
+    background-color: #ffdddd;
+  }
+  .ge {
+    color: #000000;
+    font-style: italic;
+  }
+  .gr {
+    color: #aa0000;
+  }
+  .gh {
+    color: #999999;
+  }
+  .gi {
+    color: #000000;
+    background-color: #ddffdd;
+  }
+  .go {
+    color: #888888;
+  }
+  .gp {
+    color: #555555;
+  }
+  .gs {
+    font-weight: bold;
+  }
+  .gu {
+    color: #aaaaaa;
+  }
+  .gt {
+    color: #aa0000;
+  }
+  .kc {
+    color: #000000;
+    font-weight: bold;
+  }
+  .kd {
+    color: #000000;
+    font-weight: bold;
+  }
+  .kn {
+    color: #000000;
+    font-weight: bold;
+  }
+  .kp {
+    color: #000000;
+    font-weight: bold;
+  }
+  .kr {
+    color: #000000;
+    font-weight: bold;
+  }
+  .kt {
+    color: #445588;
+    font-weight: bold;
+  }
+  .k, .kv {
+    color: #000000;
+    font-weight: bold;
+  }
+  .mf {
+    color: #009999;
+  }
+  .mh {
+    color: #009999;
+  }
+  .il {
+    color: #009999;
+  }
+  .mi {
+    color: #009999;
+  }
+  .mo {
+    color: #009999;
+  }
+  .m, .mb, .mx {
+    color: #009999;
+  }
+  .sb {
+    color: #d14;
+  }
+  .sc {
+    color: #d14;
+  }
+  .sd {
+    color: #d14;
+  }
+  .s2 {
+    color: #d14;
+  }
+  .se {
+    color: #d14;
+  }
+  .sh {
+    color: #d14;
+  }
+  .si {
+    color: #d14;
+  }
+  .sx {
+    color: #d14;
+  }
+  .sr {
+    color: #009926;
+  }
+  .s1 {
+    color: #d14;
+  }
+  .ss {
+    color: #990073;
+  }
+  .s {
+    color: #d14;
+  }
+  .na {
+    color: #008080;
+  }
+  .bp {
+    color: #999999;
+  }
+  .nb {
+    color: #0086B3;
+  }
+  .nc {
+    color: #445588;
+    font-weight: bold;
+  }
+  .no {
+    color: #008080;
+  }
+  .nd {
+    color: #3c5d5d;
+    font-weight: bold;
+  }
+  .ni {
+    color: #800080;
+  }
+  .ne {
+    color: #990000;
+    font-weight: bold;
+  }
+  .nf {
+    color: #990000;
+    font-weight: bold;
+  }
+  .nl {
+    color: #990000;
+    font-weight: bold;
+  }
+  .nn {
+    color: #555555;
+  }
+  .nt {
+    color: #000080;
+  }
+  .vc {
+    color: #008080;
+  }
+  .vg {
+    color: #008080;
+  }
+  .vi {
+    color: #008080;
+  }
+  .nv {
+    color: #008080;
+  }
+  .ow {
+    color: #000000;
+    font-weight: bold;
+  }
+  .o {
+    color: #000000;
+    font-weight: bold;
+  }
+  .w {
+    color: #bbbbbb;
+  }
+}

data/_sass/typography/_markdown.scss

@@ -0,0 +1,18 @@
+.footnote {
+  color: #666;
+  &::before {
+    content: "[";
+  }
+  &::after {
+    content: "]";
+  }
+}
+
+.footnotes {
+  border-top: 1px dashed #ccc;
+  margin-top: 2rem;
+  padding-top: 1rem;
+  font-size: small;
+  margin-bottom: $spacing-unit / 2;
+  color: #666;
+}

data/_sass/typography/_table.scss

@@ -0,0 +1,119 @@
+.l-typography {
+  --db-cell-padding: .6rem .8rem;
+  --db-cell-bold-border: 2px;
+  --db-cell-border-row: var(--db-border-color);
+  --db-cell-border-column: var(--db-border-color);
+
+  table:not(.rouge-table) {
+    border: 1px solid var(--db-border-color);
+    border-collapse: separate;
+    border-radius: $border-radius-object;
+    border-spacing: 0;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    overflow: hidden;
+    width: 100%;
+  
+    th, td {
+      padding: var(--db-cell-padding);
+      border-bottom: 1px solid var(--db-cell-border-row);
+      border-right: 1px solid var(--db-cell-border-column);
+    }
+  
+    > *:last-child > tr:last-child > * {
+      border-bottom: none;
+    }
+  
+    > * > tr > *:last-child {
+      border-right: none;
+    }
+
+    > *:not(:last-child) > tr:last-child {
+      position : relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 0;
+        width: 100%;
+        border-bottom: var(--db-cell-bold-border) solid var(--db-border-color);
+      }
+    }
+    
+    + .h-table--combined {
+      margin-top: calc(-1rem - 1px) !important;
+      border-top: none !important;
+      border-top-left-radius: 0 !important;
+      border-top-right-radius: 0 !important;
+    }
+  }
+
+}
+
+.h-table--small {
+  --db-cell-padding: .2rem .4rem;
+  font-size: 90%;
+}
+
+.h-table--row {
+  --db-cell-border-column: transparent;
+}
+
+.h-table--column {
+  --db-cell-border-row: transparent;
+  --db-cell-bold-border: 1px;
+}
+
+.h-table--grid {
+  --db-cell-border-row: var(--db-border-color);
+  --db-cell-border-column: var(--db-border-color);
+}
+
+.h-table--striped {
+  > tbody:first-child > tr:nth-child(even),
+  > tbody:not(:first-child) > tr:nth-child(odd) {
+  background-color: var(--db-highlight-color-hover);
+  }
+}
+
+.h-table--hover:not(.h-table--striped) {
+  > tbody > tr:hover {
+    background-color: var(--db-highlight-color-hover);
+  }
+}
+
+.h-table--hover.h-table--column {
+  // todo
+  td:hover {
+  }
+}
+
+.h-table--left {
+  text-align: left;
+}
+
+.h-table--center {
+  text-align: center;
+}
+
+.h-table--right {
+  text-align: right;
+}
+
+.h-table--justify {
+  text-align: justify;
+}
+
+.h-table--top td {
+  vertical-align: top;
+}
+
+.h-table--middle td {
+  vertical-align: middle;
+}
+
+.h-table--bottom td {
+  vertical-align: bottom;
+}

data/_sass/typography/_typography.scss

@@ -0,0 +1,108 @@
+.l-typography {
+  p {
+    margin: .5rem 0;
+    line-height: 1.5em;
+  }
+
+  ol, ul {
+    margin-left: 2em;
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+
+    ol, ul {
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+  li {
+    line-height: 1.5em;
+    margin: .25rem 0;
+    &::marker {
+      color: var(--db-text-color-important);
+    }
+
+    > p {
+      margin: .25rem 0;
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  dl {
+    line-height: 1.5em;
+  }
+  dt {
+    font-weight: bold;
+    margin: .25rem 0;
+  }
+  dd {
+    margin: .25rem 0 .25rem 2rem;
+  }
+
+  a {
+    color: revert;
+
+    &:hover {
+      color: revert;
+      text-decoration: revert;
+    }
+  }
+
+  .highlight code {
+    background-color: var(--db-surface-color);
+    border: 1px solid var(--db-border-color);
+    max-width: 100%;
+    overflow-x: auto;
+    border-radius: $border-radius-object;
+    margin: 1rem 0;
+    
+    line-height: 1.5em;
+    padding: .5em 1rem;
+
+    display: block;
+
+    &::before {
+      content: ' ';
+      color: white;
+    }
+  }
+  
+  code.language-plaintext {
+    padding: .2rem .4em;
+    margin: 0 .2rem;
+    font-size: .9em;
+    background-color: var(--db-surface-color);
+    border-radius: $border-radius-object;
+    white-space: nowrap;
+  }
+
+  hr {
+    border-top: 1px solid var(--db-border-color);
+    border-width: 1px 0 0 0;
+    margin: 1em 2em;
+  }
+  
+  blockquote {
+    margin: .5rem 2rem;
+    color: var(--db-text-color-inactive);
+    border-left: 0.25em solid var(--db-border-color);
+    padding: .25rem 0 .25rem .5rem;
+    > * {
+      &:first-child {
+        margin-top: 0;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  p:lang(zh) {
+    text-indent: 2em;
+  }
+
+}