@phun-ky/speccer 3.5.2 → 4.2.1

package/src/styles/anatomy.styl

@@ -0,0 +1,274 @@
+.ph.speccer.dissection
+  font-family sans-serif
+  height var(--ph-speccer-pin-size)
+  width var(--ph-speccer-pin-size)
+  display flex
+  position absolute
+  border-radius 100%
+  background-color var(--ph-speccer-pin-color)
+  color var(--ph-speccer-color-text-light)
+  font-weight 400
+  align-items center
+  justify-content center
+  line-height 150%
+  font-size 16px
+  z-index 100000
+  box-sizing content-box
+
+.ph.speccer.dissection:after
+  content ""
+  position absolute
+  height var(--ph-speccer-pin-space)
+  top 100%
+  width var(--ph-speccer-line-width)
+  background-color var(--ph-speccer-pin-color)
+  z-index 99999
+
+
+.ph.speccer.dissection.outline:after,
+.ph.speccer.dissection.outline.top:after
+  height var(--ph-speccer-pin-space)
+  width var(--ph-speccer-line-width)
+  top 100%
+  right 50%
+
+.ph.speccer.dissection.outline.left:after
+  height var(--ph-speccer-line-width)
+  width var(--ph-speccer-pin-space)
+  top 50%
+  left 100%
+
+.ph.speccer.dissection.outline.right:after
+  height var(--ph-speccer-line-width)
+  width var(--ph-speccer-pin-space)
+  top 50%
+  right 100%
+
+.ph.speccer.dissection.outline.bottom:after
+  height var(--ph-speccer-pin-space)
+  width var(--ph-speccer-line-width)
+  top calc(-100% - (var(--ph-speccer-pin-space) / 2))
+  right 50%
+
+
+.ph.speccer.dissection
+  &:after
+    content ""
+    position absolute
+    height var(--ph-speccer-pin-space)
+    top 100%
+    width var(--ph-speccer-line-width)
+    background-color var(--ph-speccer-pin-color)
+    z-index 99999
+  &.outline
+    &.left
+      &:after
+        height var(--ph-speccer-line-width)
+        width var(--ph-speccer-pin-space)
+        top 50%
+        left 100%
+    &.right
+      &:after
+        height var(--ph-speccer-line-width)
+        width var(--ph-speccer-pin-space)
+        top 50%
+        right 100%
+    &.enclose
+      border-radius 0
+      background-color transparent
+      color var(--ph-speccer-measure-color)
+      border var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)
+      &.right
+        &:after
+          left calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)))
+          right auto
+        &:before
+          left 100%
+          right auto
+      &.left
+        &:after
+          left calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))
+          right auto
+        &:before
+          right 100%
+          left auto
+      &.top
+        &:after
+          top calc(var(--ph-speccer-line-width-negative) - var(--ph-speccer-pin-size) - var(--ph-speccer-pin-space))
+          bottom auto
+        &:before
+          bottom 100%
+          top auto
+      &.bottom
+        &:after
+          top calc(100% + calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width)))
+          bottom auto
+        &:before
+          top 100%
+          bottom auto
+    &.full
+      border-radius 0
+      background-color transparent
+      color var(--ph-speccer-measure-color)
+      border var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)
+      &.right
+        border-left none
+        &:after
+          left calc(8px + var(--ph-speccer-pin-space))
+        &:before
+          left 100%
+      &.left
+        border-right none
+        &:after
+          left calc(-8px - var(--ph-speccer-pin-space))
+        &:before
+          right 100%
+      &.top
+        border-bottom none
+        &:after
+          top calc(-8px - var(--ph-speccer-pin-space))
+        &:before
+          bottom 100%
+      &.bottom
+        border-top none
+        &:after
+          top calc(8px + var(--ph-speccer-pin-space))
+        &:before
+          top 100%
+    &.bottom
+      &:after
+        height var(--ph-speccer-pin-space)
+        width var(--ph-speccer-line-width)
+        top calc(-100% - (var(--ph-speccer-pin-space) / 2))
+        right 50%
+
+
+.ph.speccer.dissection.outline.top:after,
+.ph.speccer.dissection.outline:after
+  height var(--ph-speccer-pin-space)
+  width var(--ph-speccer-line-width)
+  top 100%
+  right 50%
+
+[data-anatomy-section]
+  counter-reset type
+
+.ph.speccer.dissection.outline.full.right,
+.ph.speccer.dissection.outline.full.left
+  width 8px
+
+.ph.speccer.dissection.outline.full.top,
+.ph.speccer.dissection.outline.full.bottom
+  height 8px
+
+.ph.speccer.dissection.outline.full.right:after,
+.ph.speccer.dissection.outline.full.left:after,
+.ph.speccer.dissection.outline.full.top:after,
+.ph.speccer.dissection.outline.full.bottom:after
+  content attr(data-dissection-counter)
+  height var(--ph-speccer-pin-size)
+  width var(--ph-speccer-pin-size)
+  display flex
+  position absolute
+  border-radius 100%
+  background-color var(--ph-speccer-pin-color)
+  color var(--ph-speccer-color-text-light)
+  align-items center
+  justify-content center
+  line-height 150%
+  font-size 16px
+  z-index 100000
+
+.ph.speccer.dissection.outline.full.right:after,
+.ph.speccer.dissection.outline.full.left:after
+  top 50%
+  transform translateY(-50%)
+
+.ph.speccer.dissection.outline.full.top:after,
+.ph.speccer.dissection.outline.full.bottom:after
+  left 50%
+  transform translateX(-50%)
+
+.ph.speccer.dissection.outline.full.right:before,
+.ph.speccer.dissection.outline.full.left:before,
+.ph.speccer.dissection.outline.full.top:before,
+.ph.speccer.dissection.outline.full.bottom:before
+  content ""
+  position absolute
+  background-color var(--ph-speccer-pin-color)
+  z-index 100000
+  display block
+
+.ph.speccer.dissection.outline.full.right:before,
+.ph.speccer.dissection.outline.full.left:before
+  top 50%
+  transform translateY(-50%)
+  height var(--ph-speccer-line-width)
+  width calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))
+
+.ph.speccer.dissection.outline.full.top:before,
+.ph.speccer.dissection.outline.full.bottom:before
+  left 50%
+  transform translateX(-50%)
+  width var(--ph-speccer-line-width)
+  height calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))
+
+.ph.speccer.dissection.outline.enclose.right,
+.ph.speccer.dissection.outline.enclose.left
+  width 8px
+
+.ph.speccer.dissection.outline.enclose.top,
+.ph.speccer.dissection.outline.enclose.bottom
+  height 8px
+
+.ph.speccer.dissection.outline.enclose.right:after,
+.ph.speccer.dissection.outline.enclose.left:after,
+.ph.speccer.dissection.outline.enclose.top:after,
+.ph.speccer.dissection.outline.enclose.bottom:after
+  content attr(data-dissection-counter)
+  height var(--ph-speccer-pin-size)
+  width var(--ph-speccer-pin-size)
+  display flex
+  position absolute
+  border-radius 100%
+  background-color var(--ph-speccer-pin-color)
+  color var(--ph-speccer-color-text-light)
+  align-items center
+  justify-content center
+  line-height 150%
+  font-size 16px
+  z-index 100000
+
+.ph.speccer.dissection.outline.enclose.right:after,
+.ph.speccer.dissection.outline.enclose.left:after
+  top 50%
+  transform translateY(-50%)
+
+.ph.speccer.dissection.outline.enclose.top:after,
+.ph.speccer.dissection.outline.enclose.bottom:after
+  left 50%
+  transform translateX(-50%)
+
+.ph.speccer.dissection.outline.enclose.right:before,
+.ph.speccer.dissection.outline.enclose.left:before,
+.ph.speccer.dissection.outline.enclose.top:before,
+.ph.speccer.dissection.outline.enclose.bottom:before
+  content ""
+  position absolute
+  background-color var(--ph-speccer-pin-color)
+  z-index 100000
+  display block
+
+.ph.speccer.dissection.outline.enclose.right:before,
+.ph.speccer.dissection.outline.enclose.left:before
+  top 50%
+  transform translateY(-50%)
+  height var(--ph-speccer-line-width)
+  width calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))
+
+.ph.speccer.dissection.outline.enclose.top:before,
+.ph.speccer.dissection.outline.enclose.bottom:before
+  left 50%
+  transform translateX(-50%)
+  width var(--ph-speccer-line-width)
+  height calc(var(--ph-speccer-pin-space) + var(--ph-speccer-line-width))

package/src/styles/index.styl

@@ -0,0 +1,68 @@
+$ph-speccer-color-padding = rgba(219, 111, 255, 0.4);
+$ph-speccer-color-padding-hover = rgb(219, 111, 255);
+$ph-speccer-color-margin = rgba(255, 247, 111, 0.4);
+$ph-speccer-color-margin-hover = rgb(255, 247, 111);
+$ph-speccer-color-text-light = rgb(255, 255, 255);
+$ph-speccer-color-text-dark = rgb(51,51,51);
+$ph-speccer-color-contrast = rgb(255, 58, 168);
+$ph-speccer-spacing-color = $ph-speccer-color-contrast;
+$ph-speccer-measure-color = rgb(255,0,0);
+$ph-speccer-pin-color = $ph-speccer-color-contrast;
+$ph-speccer-typography-background-color = rgb(255, 255,255);
+$ph-speccer-typography-color-property = rgb(63, 133, 242);
+$ph-speccer-typography-color-text = rgb(87, 87, 91);
+$ph-speccer-typography-color-value = $ph-speccer-color-contrast;
+$ph-speccer-depth-opacity-400 = 0.4;
+$ph-speccer-font-family = "Menlo for Powerline", "Menlo Regular for Powerline", "DejaVu Sans Mono", Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+$ph-speccer-font-size = 12px;
+$ph-speccer-line-height = 12px;
+$ph-speccer-pin-size = 24px
+$ph-speccer-pin-space = 48px
+$ph-speccer-line-width = 1px
+$ph-speccer-line-width-negative = -1px
+$ph-speccer-measure-size = 8px
+
+
+.ph.speccer
+  --ph-speccer-color-padding: $ph-speccer-color-padding;
+  --ph-speccer-color-padding-hover: $ph-speccer-color-padding-hover;
+  --ph-speccer-color-margin: $ph-speccer-color-margin;
+  --ph-speccer-color-margin-hover: $ph-speccer-color-margin-hover;
+  --ph-speccer-color-text-light: $ph-speccer-color-text-light;
+  --ph-speccer-color-text-dark: $ph-speccer-color-text-dark;
+  --ph-speccer-color-contrast: $ph-speccer-color-contrast;
+  --ph-speccer-spacing-color: var(--ph-speccer-color-contrast);
+  --ph-speccer-measure-color: $ph-speccer-measure-color;
+  --ph-speccer-pin-color: var(--ph-speccer-color-contrast);
+  --ph-speccer-typography-background-color: $ph-speccer-typography-background-color;
+  --ph-speccer-typography-color-property: $ph-speccer-typography-color-property;
+  --ph-speccer-typography-color-text: $ph-speccer-typography-color-text;
+  --ph-speccer-typography-color-value: var(--ph-speccer-color-contrast);
+  --ph-speccer-depth-opacity-400: $ph-speccer-depth-opacity-400;
+  --ph-speccer-font-family: $ph-speccer-font-family;
+  --ph-speccer-font-size: $ph-speccer-font-size;
+  --ph-speccer-line-height: $ph-speccer-line-height;
+  --ph-speccer-pin-size: $ph-speccer-pin-size;
+  --ph-speccer-pin-space: $ph-speccer-pin-space;
+  --ph-speccer-line-width: $ph-speccer-line-width;
+  --ph-speccer-line-width-negative: $ph-speccer-line-width-negative;
+  --ph-speccer-measure-size: $ph-speccer-measure-size;
+
+
+.ph.speccer,
+.ph.speccer::after,
+.ph.speccer::before
+  font-family var(--ph-speccer-font-family) !important
+  justify-content center
+  align-items center
+  z-index 99999
+  position absolute
+  pointer-events none
+  user-select none
+  display flex
+  font-size 12px
+  box-sizing border-box
+  line-height 12px
+
+@require './anatomy.styl'
+@require './spacing.styl'

package/src/styles/measure.styl

@@ -0,0 +1,88 @@
+.ph.speccer.measure
+  &.width
+    color var(--ph-speccer-measure-color)
+    border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
+    border-bottom none
+    height var(--ph-speccer-measure-size)
+
+
+.ph.speccer.measure
+  &.width
+    &::after
+      content attr(data-measure)
+      position absolute
+      top calc(-100% - 10px)
+
+
+.ph.speccer.measure
+  &.width
+    &.bottom
+      color var(--ph-speccer-measure-color)
+      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
+      border-top none
+
+
+.ph.speccer.measure
+  &.width
+    &.bottom
+      &::after
+        content attr(data-measure)
+        position absolute
+        top calc(100% + 5px)
+
+
+.ph.speccer.measure
+  &.width
+    &.top
+      color var(--ph-speccer-measure-color)
+      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
+      border-bottom none
+
+
+.ph.speccer.measure
+  &.width
+    &.top
+      &::after
+        content attr(data-measure)
+        position absolute
+        bottom calc(100% + 5px)
+
+
+.ph.speccer.measure
+  &.height
+    &.left
+      color var(--ph-speccer-measure-color)
+      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
+      border-right none
+      width var(--ph-speccer-measure-size)
+
+
+.ph.speccer.measure
+  &.height
+    &.left
+      &::after
+        content attr(data-measure)
+        position absolute
+        top 50%
+        left calc(-100% - 20px - var(--ph-speccer-line-width))
+        transform translateY(-50%) rotate(-90deg)
+
+
+.ph.speccer.measure
+  &.height
+    &.right
+      color var(--ph-speccer-measure-color)
+      border var(--ph-speccer-line-width) solid var(--ph-speccer-measure-color)
+      border-left none
+      width var(--ph-speccer-measure-size)
+
+
+.ph.speccer.measure
+  &.height
+    &.right
+      &::after
+        content attr(data-measure)
+        position absolute
+        top 50%
+        left calc(100% - var(--ph-speccer-measure-size))
+        transform translateY(-50%) rotate(90deg)

package/src/styles/spacing.styl

@@ -0,0 +1,152 @@
+.ph.speccer.spacing
+  pointer-events auto
+  transition none
+  border var(--ph-speccer-line-width) solid transparent
+  &:hover
+    border var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
+
+
+.is-specced
+  &:hover
+    & ~ .ph.speccer.spacing
+      &.margin
+        background-color var(--ph-speccer-color-margin-hover)
+      &.padding
+        background-color var(--ph-speccer-color-padding-hover)
+        color var(--ph-speccer-color-text-light)
+
+
+.ph.speccer.spacing
+  &.margin
+    background-color var(--ph-speccer-color-margin)
+    color var(--ph-speccer-color-text-dark)
+
+
+.ph.speccer.spacing
+  &.padding
+    background-color var(--ph-speccer-color-padding)
+    color var(--ph-speccer-spacing-color)
+
+
+.ph.speccer.spacing
+  &.margin
+    &.bottom,
+    &.top
+      &::after
+        transition none
+        content ""
+        position absolute
+        height 100%
+        border-top var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
+        border-bottom var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
+        width 9px
+        left 40%
+
+
+.ph.speccer.spacing
+  &.margin
+    &.bottom,
+    &.top
+      &::before
+        transition none
+        content ""
+        position absolute
+        height 100%
+        border-left var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
+        margin-left 4px
+        width 0
+        left 40%
+
+
+.ph.speccer.spacing
+  &.margin
+    &.left,
+    &.right
+      &::after
+        transition none
+        content ""
+        position absolute
+        height 9px
+        border-right var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
+        border-left var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
+        width 100%
+        top 10%
+
+
+.ph.speccer.spacing
+  &.margin
+    &.left,
+    &.right
+      &::before
+        transition none
+        content ""
+        position absolute
+        height 0
+        border-top var(--ph-speccer-line-width) solid var(--ph-speccer-color-text-dark)
+        margin-top 4px
+        width 100%
+        top 10%
+
+
+.ph.speccer.spacing
+  &.padding
+    &.bottom,
+    &.top
+      &::after
+        transition none
+        content ""
+        position absolute
+        height 100%
+        border-top var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
+        border-bottom var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
+        width 9px
+        left 40%
+
+
+.ph.speccer.spacing
+  &.padding
+    &.bottom,
+    &.top
+      &::before
+        transition none
+        content ""
+        position absolute
+        height 100%
+        border-left var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
+        margin-left 4px
+        width 0
+        left 40%
+
+
+.ph.speccer.spacing
+  &.padding
+    &.left,
+    &.right
+      &::after
+        transition none
+        content ""
+        position absolute
+        height 9px
+        border-right var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
+        border-left var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
+        width 100%
+        top 10%
+
+
+.ph.speccer.spacing
+  &.padding
+    &.left,
+    &.right
+      &::before
+        transition none
+        content ""
+        position absolute
+        height 0
+        border-top var(--ph-speccer-line-width) solid var(--ph-speccer-spacing-color)
+        margin-top 4px
+        width 100%
+        top 10%
+
+
+@require './typography.styl'
+@require './measure.styl'

package/src/{typography.styl → styles/typography.styl}

@@ -1,6 +1,6 @@
-.speccer.typography
-  background-color #ffffff
-  color #57575b
+.ph.speccer.typography
+  background-color var(--ph-speccer-typography-background-color)
+  color var(--ph-speccer-typography-color-text)
   font-size 12px
   padding 8px 24px
   max-width none
@@ -8,21 +8,21 @@
   display block
   text-align left
   line-height 140%
-  border 1px solid #e227b3
+  border var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)
   min-width 320px
 
   &:hover
-    border 1px solid #e227b3
+    border var(--ph-speccer-line-width) solid var(--ph-speccer-pin-color)
 
   &:after
     content ""
     position absolute
     display block
-    background-color #e227b3
+    background-color var(--ph-speccer-pin-color)
     left 100%
     top 50%
     transform translateY(-50%)
-    height 1px
+    height var(--ph-speccer-line-width)
     width 48px
 
   &.left
@@ -30,7 +30,7 @@
       left 100%
       top 50%
       transform translateY(-50%)
-      height 1px
+      height var(--ph-speccer-line-width)
       width 48px
   &.right
     &:after
@@ -38,7 +38,7 @@
       right 100%
       top 50%
       transform translateY(-50%)
-      height 1px
+      height var(--ph-speccer-line-width)
       width 48px
   &.top
     &:after
@@ -47,7 +47,7 @@
       top 100%
       transform translateX(-50%)
       height 48px
-      width 1px
+      width var(--ph-speccer-line-width)
   &.bottom
     &:after
       left 50%
@@ -56,7 +56,7 @@
       bottom 100%
       transform translateX(-50%)
       height 48px
-      width 1px
+      width var(--ph-speccer-line-width)
 
   & .speccer-styles
     list-style none
@@ -69,7 +69,7 @@
 
     & .property
       font-weight normal
-      color #3f85f2
+      color var(--ph-speccer-typography-color-property)
       text-align left
       padding 0
       font-size 12px
@@ -77,7 +77,7 @@
 
     & > li
       font-weight normal
-      color #e227b3
+      color var(--ph-speccer-typography-color-value)
       text-align left
       padding 0
       font-size 12px