fjordllc · komagata · Apr 22, 2022 · Apr 2, 2022 · Apr 3, 2022 · Apr 4, 2022
diff --git a/app/assets/stylesheets/_common-imports.sass b/app/assets/stylesheets/_common-imports.sass
@@ -20,6 +20,7 @@
 @import "variables/welcome-colors"
 @import "variables/layout"
 @import "variables/fonts"
+@import "variables/choices"
 
 ////////////
 // mixins

diff --git a/app/assets/stylesheets/atoms/_a-badge.sass b/app/assets/stylesheets/atoms/_a-badge.sass
@@ -23,6 +23,11 @@
     color: $muted-text
     font-weight: 400
     background-color: $background
+  &.is-dark-muted
+    border: none
+    color: $semi-muted-text
+    font-weight: 400
+    background-color: $background-shade
 
   //size
   &.is-xs

diff --git a/app/assets/stylesheets/atoms/_a-card.sass b/app/assets/stylesheets/atoms/_a-card.sass
@@ -1,7 +1,7 @@
 .a-card
   background-color: $base
   border-radius: .25rem
-  border: solid 1px $border-more-shade
+  border: solid 1px $border-shade
   +margin(horizontal, auto)
   +media-breakpoint-down(lg)
     &:not(:last-child)
@@ -21,6 +21,20 @@
     max-width: 100%
     +media-breakpoint-down(sm)
       +margin(horizontal, 1rem)
+  &.is-toggle
+    label
+        cursor: pointer
+    > input:not(:checked) + * + *
+      display: none
+    > input:not(:checked) + *
+      border-bottom: none
+    > input:checked + * + *
+      display: block
+    > input:not(:checked) + * .is-hidden-then-unchecked
+      display: none
+    > input:checked + * .is-hidden-then-checked
+      display: none
+
 
 .a-card-notice
   p

diff --git a/app/assets/stylesheets/atoms/_a-file-input.sass b/app/assets/stylesheets/atoms/_a-file-input.sass
@@ -25,7 +25,7 @@
     max-height: 100%
     max-width: 100%
     object-fit: contain
-    border: solid 1px $background
+    border: solid 1px $border-tint
   input
     overflow: hidden
     +size(0)

diff --git a/app/assets/stylesheets/atoms/_a-short-text.sass b/app/assets/stylesheets/atoms/_a-short-text.sass
@@ -9,3 +9,5 @@
     border: none
     border-top: dashed 1px $border
     +margin(vertical, 1.25em)
+  &.is-ta-center
+    text-align: center
diff --git a/app/assets/stylesheets/atoms/_a-text-input.sass b/app/assets/stylesheets/atoms/_a-text-input.sass
@@ -1,6 +1,6 @@
 .a-text-input
   +text-block(1em 1.45, block)
-  background-color: #fafafa
+  background-color: $input-background
   width: 100%
   padding: .5rem
   border: solid 1px $input-border

diff --git a/app/assets/stylesheets/atoms/_a-title-label.sass b/app/assets/stylesheets/atoms/_a-title-label.sass
@@ -0,0 +1,21 @@
+.a-title-label
+  +text-block(.5em 1, flex nowrap 0)
+  background-color: #e9ebef
+  +padding(horizontal, 1em)
+  border-radius: .75rem
+  align-items: center
+  +position(relative, top .75em)
+  margin-right: .5em
+  +media-breakpoint-up(md)
+    height: 1.5em
+    +position(top .75em)
+  +media-breakpoint-down(sm)
+    font-size: .625rem
+    height: 1.75em
+    +position(top .375em)
+  &.is-solved
+    color: $reversal-text
+    &.is-success
+      background-color: $success
+    &.is-danger
+      background-color: $danger
diff --git a/app/assets/stylesheets/atoms/_a-user-name.sass b/app/assets/stylesheets/atoms/_a-user-name.sass
@@ -3,6 +3,7 @@
   font-size: .8125rem
   line-height: 1.4
   white-space: nowrap
+  font-weight: 400
   .thread-list-item-name &
     font-size: .75rem
 

diff --git a/app/assets/stylesheets/blocks/auth-form/_auth-form.sass b/app/assets/stylesheets/blocks/auth-form/_auth-form.sass
@@ -21,14 +21,14 @@
     margin-top: 2rem
 
 .auth-form__header
-  border-bottom: solid 1px $background
+  border-bottom: solid 1px $border-tint
   padding: 1rem 1.25rem
 
 .auth-form__body
   padding: 1.5rem 1.25rem
 
 .auth-form__footer
-  border-top: solid 1px $background
+  border-top: solid 1px $border-tint
   padding: 1rem 1.25rem
 
 .auth-form__title

diff --git a/app/assets/stylesheets/blocks/card/_card-body.sass b/app/assets/stylesheets/blocks/card/_card-body.sass
@@ -4,6 +4,6 @@
   +media-breakpoint-down(sm)
     padding: .75rem
   &:not(:last-child)
-      border-bottom: solid 1px $background
+      border-bottom: solid 1px $border-tint
   p
     +text-block(1em 1.6)
diff --git a/app/assets/stylesheets/blocks/card/_card-books.sass b/app/assets/stylesheets/blocks/card/_card-books.sass
@@ -57,7 +57,7 @@
   max-width: 100%
   object-fit: contain
   object-position: 50% 0
-  border: solid 1px $background
+  border: solid 1px $border-tint
   border-radius: 2px
 
 .card-books-item__description

diff --git a/app/assets/stylesheets/blocks/card/_card-footer.sass b/app/assets/stylesheets/blocks/card/_card-footer.sass
@@ -1,5 +1,5 @@
 .card-footer
-  border-top: $background solid 1px
+  border-top: solid 1px $border-tint
   +media-breakpoint-up(md)
     padding: .75rem 1.25rem
   +media-breakpoint-down(sm)

diff --git a/app/assets/stylesheets/blocks/card/_card-header.sass b/app/assets/stylesheets/blocks/card/_card-header.sass
@@ -1,5 +1,5 @@
 .card-header
-  border-bottom: solid 1px $background
+  border-bottom: solid 1px $border-tint
   padding: .75rem 1.25rem
   display: flex
   align-items: center
@@ -16,7 +16,11 @@
     margin-top: -1px
 
 .card-header__title
-  +text-block(1rem 1.4, 600)
+  +text-block(1em 1.4, 600)
+  +media-breakpoint-up(md)
+    font-size: 1rem
+  +media-breakpoint-down(sm)
+    font-size: .875rem
   .card-header.is-sm &
     font-size: .875rem
 

diff --git a/app/assets/stylesheets/blocks/card/_card-list.sass b/app/assets/stylesheets/blocks/card/_card-list.sass
@@ -24,10 +24,10 @@
 
 .card-list__items
   .card-list__deacription + &
-    border-top: dotted .0625rem $background
+    border-top: dotted .0625rem $border-tint
 
 .card-list__item:not(:last-child)
-  border-bottom: dotted .0625rem $background
+  border-bottom: dotted .0625rem $border-tint
 
 .card-list__item-link
   +text-block(.8125rem 1.6, block $main)

diff --git a/app/assets/stylesheets/blocks/card/_congrats-card-body.sass b/app/assets/stylesheets/blocks/card/_congrats-card-body.sass
@@ -15,7 +15,7 @@
 
 .congrats-card-body__image
   border-radius: .75rem
-  border: solid .5rem $background
+  border: solid .5rem $border-tint
 
 .congrats-card-body
   .card-main-actions

diff --git a/app/assets/stylesheets/blocks/entry/_entry-header.sass b/app/assets/stylesheets/blocks/entry/_entry-header.sass
@@ -2,7 +2,7 @@
   margin-bottom: 1.5rem
   +padding(horizontal, 1.25rem)
   +padding(vertical, 1rem)
-  border-bottom: solid 1px $background
+  border-bottom: solid 1px $border-tint
   +media-breakpoint-down(sm)
     +padding(horizontal, 1rem)
     margin-bottom: 1rem

diff --git a/app/assets/stylesheets/blocks/header/_header-dropdown.sass b/app/assets/stylesheets/blocks/header/_header-dropdown.sass
@@ -61,7 +61,7 @@
   +media-breakpoint-up(md)
     color: $default-text
     .header-dropdown__item:not(:last-child) &
-      border-bottom: solid 1px $background
+      border-bottom: solid 1px $border-tint
     &:hover
       background-color: $background-tint
   +media-breakpoint-down(sm)
@@ -74,7 +74,7 @@
   +border-radius(bottom, .25rem)
   overflow: hidden
   +media-breakpoint-up(md)
-    border-top: solid 1px $background
+    border-top: solid 1px $border-tint
   +media-breakpoint-down(sm)
     border-top: solid 1px $side-border
 
@@ -97,7 +97,7 @@
       background-color: $side-shade
   +media-breakpoint-up(md)
     &:not(:last-child)
-      border-bottom: solid 1px $background
+      border-bottom: solid 1px $border-tint
   +media-breakpoint-down(sm)
     border-bottom: solid 1px $side-border
 

diff --git a/app/assets/stylesheets/blocks/header/_header-links.sass b/app/assets/stylesheets/blocks/header/_header-links.sass
@@ -10,7 +10,7 @@
 .header-links__item
   display: flex
   height: 100%
-  border-left: solid $background .0625rem
+  border-left: solid $border-tint .0625rem
   +position(relative)
   transition: color .2s ease-in, background-color .2s ease-in
 

diff --git a/app/assets/stylesheets/blocks/header/_header.sass b/app/assets/stylesheets/blocks/header/_header.sass
@@ -1,7 +1,7 @@
 .header
   background-color: $base
   z-index: 3
-  border-bottom: solid 1px $background
+  border-bottom: solid 1px $border-tint
   +media-breakpoint-up(md)
     +position(sticky, top 0)
   +media-breakpoint-down(sm)

diff --git a/app/assets/stylesheets/blocks/page/_page-header-actions.sass b/app/assets/stylesheets/blocks/page/_page-header-actions.sass
@@ -4,7 +4,7 @@
     padding-top: .5rem
     +margin(horizontal, -1rem)
     +padding(horizontal, 1rem)
-    border-top: solid 1px $background
+    border-top: solid 1px $border-tint
 
 .page-header-actions__items
   display: flex

diff --git a/app/assets/stylesheets/blocks/page/_page-tabs.sass b/app/assets/stylesheets/blocks/page/_page-tabs.sass
@@ -2,7 +2,7 @@
   background-color: $background-shade
   padding-top: .5rem
   border-top: solid 1px $border-shade
-  border-bottom: solid 1px $border-more-more-shade
+  border-bottom: solid 1px $border-more-shade
   .sort-nav + &
     border-top: solid 1px $border-more-more-shade
   .page-header + &
@@ -28,10 +28,10 @@
   align-items: center
   justify-content: center
   height: 2.75rem
-  background-color: #dedede
+  background-color: #dfdfe5
   +padding(horizontal, 1em)
   +border-radius(top, .25rem)
-  border: solid 1px $border-more-more-shade
+  border: solid 1px $border-more-shade
   +position(relative)
   transition: all .2s ease-out
   +media-breakpoint-down(sm)

diff --git a/app/assets/stylesheets/blocks/practice/_categories.sass b/app/assets/stylesheets/blocks/practice/_categories.sass
@@ -22,12 +22,8 @@
     +media-breakpoint-down(sm)
       margin-bottom: 2rem
 
-.categories-item__anchor
-  +media-breakpoint-up(md)
-    +position(relative, top -3.5rem)
-
 .categories-item__title
-  +text-block(1.5rem 1.5, $main-text 600)
+  +text-block(1.5rem 1.5, $main-text 700)
   position: relative
   +media-breakpoint-down(sm)
     font-size: 1.25rem

diff --git a/app/assets/stylesheets/blocks/practice/_category-practices-item.sass b/app/assets/stylesheets/blocks/practice/_category-practices-item.sass
@@ -1,11 +1,11 @@
 .category-practices-item
   padding: .75rem 1rem
-  border-bottom: solid 1px $background
+  border-bottom: solid 1px $border
   +position(relative)
   &:last-child
     border-bottom: none
-  &:nth-child(odd)
-    background-color: #fafafa
+  &:nth-child(even)
+    background-color: $background-more-tint
   +media-breakpoint-down(sm)
     flex-wrap: wrap
     padding: .5rem .75rem .75rem

diff --git a/app/assets/stylesheets/blocks/practice/_practice-contents.sass b/app/assets/stylesheets/blocks/practice/_practice-contents.sass
@@ -16,7 +16,7 @@
   padding-bottom: .25rem
 
 .practice-contents__title
-  +text-block(1.5rem 1.4, 600 $side)
+  +text-block(1.5rem 1.4, 700 $side)
   +media-breakpoint-down(sm)
     font-size: 1.25rem
     word-break: break-all

diff --git a/app/assets/stylesheets/blocks/product/_product-header.sass b/app/assets/stylesheets/blocks/product/_product-header.sass
@@ -0,0 +1,59 @@
+.product-header
+  +media-breakpoint-up(md)
+    display: flex
+    margin-bottom: 2rem
+  .a-user-name
+    +media-breakpoint-down(sm)
+      display: block
+      text-align: center
+      margin-bottom: .5rem
+
+.product-header__start
+  +media-breakpoint-up(md)
+    flex: 0 0 5rem
+
+.product-header__end
+  +media-breakpoint-up(md)
+    flex: 1
+  +media-breakpoint-down(sm)
+    margin-top: .5rem
+
+.product-header__user
+  +media-breakpoint-down(sm)
+    display: flex
+    justify-content: center
+
+.product-header__user-link
+  +block-link
+
+.product-header__user-icon
+  +size(3.5rem)
+
+.product-header__title
+  font-feature-settings: "palt"
+  letter-spacing: .02em
+  +text-block(1em 1.45, 700 $main)
+  padding-bottom: .25rem
+  border-bottom: solid 1px $border-shade
+  +media-breakpoint-up(md)
+    font-size: 1.5rem
+    margin-top: .125rem
+  +media-breakpoint-down(sm)
+    font-size: 1.125rem
+    margin-top: .125rem
+    word-break: break-all
+  &.is-wip
+    color: $muted-text
+  .a-title-label
+    display: inline-flex
+    vertical-align: top
+    +media-breakpoint-up(md)
+      +position(relative, top .75em)
+    +media-breakpoint-down(sm)
+      +position(relative, top .5em)
+
+.product-header__title-link
+  +hover-link
+  color: $main
+  .product-header__title.is-wip &
+    color: $muted-text
diff --git a/app/assets/stylesheets/blocks/product/_product.sass b/app/assets/stylesheets/blocks/product/_product.sass
@@ -0,0 +1,13 @@
+.product
+  +position(relative)
+  +margin(horizontal, auto)
+  +media-breakpoint-up(md)
+    width: $thread-max-width
+    max-width: 100%
+  .a-watch-button.is-inactive,
+  .a-bookmark-button.is-inactive
+    color: $semi-muted-text
+    background-color: $background-shade
+  .a-title-label
+    color: $semi-muted-text
+    background-color: $background-shade